🧹 Enable video preview based on media tags

bugbakery · Dec 8, 2023 · a4f9011 · a4f9011
1 parent 06ba47a
commit a4f9011
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/frontend/src/editor/player.tsx b/frontend/src/editor/player.tsx
@@ -34,7 +34,7 @@ export function PlayerBar({ documentId, editor }: { documentId: string; editor:
 
   const [playbackRate, setPlaybackRate] = useLocalStorage('playbackRate', 1);
 
-  const sources = useMemo(() => {
+  const { sources, hasVideo } = useMemo(() => {
     // do not play the original file, it may be large
     const relevantMediaFiles =
       data?.media_files.filter((media) => !media.tags.includes('original')) || [];
@@ -49,13 +49,16 @@ export function PlayerBar({ documentId, editor }: { documentId: string; editor:
       };
     });
 
-    return sortMediaFiles(mappedFiles);
+    return {
+      sources: sortMediaFiles(mappedFiles),
+      hasVideo: videoFiles.length > 0,
+    };
   }, [data?.media_files]);
 
   const audio = useAudio({
     playbackRate,
     sources,
-    videoPreview: true,
+    videoPreview: hasVideo,
   });
 
   // calculate the start of the current element to color it

diff --git a/frontend/src/utils/use_audio.ts b/frontend/src/utils/use_audio.ts
@@ -18,21 +18,24 @@ export function useAudio({ sources, playbackRate, videoPreview }: UseAudioOption
 
   useEffect(() => {
     const myAudioElement = videoPreview ? video([]) : audio([]);
-
     setAudioElement(myAudioElement);
 
+    if (videoPreview) {
+      myAudioElement.style = `
+        position: fixed;
+        bottom: 90px;
+        right: 20px;
+        height: 170px;
+        width: 300px;
+      `;
+    } else {
+      myAudioElement.style = `
+        display: none;
+      `;
+    }
+
     const e = events(myAudioElement);
     e.onDurationChange(() => {
-      if (videoPreview && myAudioElement.videoHeight > 0) {
-        myAudioElement.style = `
-          position: fixed;
-          bottom: 90px;
-          right: 20px;
-          height: 170px;
-          width: 300px;
-        `;
-      }
-
       setDuration(props(myAudioElement).duration);
     });
     e.onPlay(() => setPlayingState(true));
@@ -52,7 +55,7 @@ export function useAudio({ sources, playbackRate, videoPreview }: UseAudioOption
       myAudioElement.innerHTML = '';
       myAudioElement.remove();
     };
-  }, []);
+  }, [videoPreview]);
 
   useEffect(() => {
     if (!audioElement) return;