From 78303c2b0bd5d69cfab6041d5189e94a3a22dadc Mon Sep 17 00:00:00 2001
From: Philipp Mandler <info@philipp-mandler.com>
Date: Wed, 6 Dec 2023 12:46:59 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20basic=20video=20preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/editor/player.tsx  |  1 +
 frontend/src/utils/use_audio.ts | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/editor/player.tsx b/frontend/src/editor/player.tsx
index 88a46ca2..4052fe96 100644
--- 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
index 6e934b29..7fe1ca9c 100644
--- 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));