✨ Add basic video preview

bugbakery · Dec 6, 2023 · 78303c2 · 78303c2
1 parent 5e56465
commit 78303c2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/frontend/src/editor/player.tsx b/frontend/src/editor/player.tsx
@@ -49,6 +49,7 @@ export function PlayerBar({ documentId, editor }: { documentId: string; editor:
   const audio = useAudio({
     playbackRate,
     sources,
+    videoPreview: true,
   });
 
   // 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
@@ -1,12 +1,13 @@
-import { actions, audio, events, props } from '@podlove/html5-audio-driver';
+import { actions, video, events, props, audio } from '@podlove/html5-audio-driver';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 type UseAudioOptions = {
   playbackRate?: number;
   sources: Array<{ src: string; type: string }>;
+  videoPreview?: boolean;
 };
 
-export function useAudio({ sources, playbackRate }: UseAudioOptions) {
+export function useAudio({ sources, playbackRate, videoPreview }: UseAudioOptions) {
   const [playing, setPlayingState] = useState(false);
   const [duration, setDuration] = useState<number | undefined>();
   const [buffering, setBuffering] = useState(false);
@@ -16,11 +17,22 @@ export function useAudio({ sources, playbackRate }: UseAudioOptions) {
   const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
 
   useEffect(() => {
-    const myAudioElement = audio([]);
+    const myAudioElement = videoPreview ? video([]) : audio([]);
+
     setAudioElement(myAudioElement);
 
     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));