chore(frontend/MkMediaVideo): loop and autoplay silent videos (misske…

…y-dev#12392)
kaseiski · Jan 2, 2024 · 85861bd · 85861bd
1 parent c5667bd
commit 85861bd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
@@ -37,6 +37,7 @@ import * as Misskey from 'misskey-js';
 import bytes from '@/filters/bytes.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import hasAudio from '@/scripts/media-has-audio.js';
 
 const props = defineProps<{
 	video: Misskey.entities.DriveFile;
@@ -49,6 +50,12 @@ const videoEl = shallowRef<HTMLVideoElement>();
 watch(videoEl, () => {
 	if (videoEl.value) {
 		videoEl.value.volume = 0.3;
+		hasAudio(videoEl.value).then(had => {
+			if (!had) {
+				videoEl.value.loop = videoEl.value.muted = true;
+				videoEl.value.play();
+			}
+		});
 	}
 });
 </script>

diff --git a/packages/frontend/src/scripts/media-has-audio.ts b/packages/frontend/src/scripts/media-has-audio.ts
@@ -0,0 +1,9 @@
+export default async function hasAudio(media: HTMLMediaElement) {
+	const cloned = media.cloneNode() as HTMLMediaElement;
+	cloned.muted = (cloned as typeof cloned & Partial<HTMLVideoElement>).playsInline = true;
+	cloned.play();
+	await new Promise((resolve) => cloned.addEventListener('playing', resolve));
+	const result = !!(cloned as any).audioTracks?.length || (cloned as any).mozHasAudio || !!(cloned as any).webkitAudioDecodedByteCount;
+	cloned.remove();
+	return result;
+}