Share playback state across views

frontend/src/hooks/useClipPlayback.ts

@@ -7,17 +7,25 @@ type PlayClipArgs = {
   url?: string | null;
   startMs: number;
   endMs: number;
+  title?: string;
+  subtitle?: string;
+};
+
+export type ClipPlaybackDetails = {
+  key: string;
+  title?: string;
+  subtitle?: string;
 };
 
 export function useClipPlayback() {
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
-  const mediaSourceRef = useRef<MediaElementAudioSourceNode | null>(null);
   const gainNodeRef = useRef<GainNode | null>(null);
   const playbackRangeRef = useRef<{ endSeconds: number } | null>(null);
   const fadeOutTimerRef = useRef<number | null>(null);
   const activeKeyRef = useRef<string | null>(null);
   const [activeKey, setActiveKey] = useState<string | null>(null);
+  const [activeDetails, setActiveDetails] = useState<ClipPlaybackDetails | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTimeMs, setCurrentTimeMs] = useState<number | null>(null);
 
@@ -56,7 +64,6 @@ export function useClipPlayback() {
         source.connect(gain);
         gain.connect(context.destination);
         audioContextRef.current = context;
-        mediaSourceRef.current = source;
         gainNodeRef.current = gain;
       }
     }
@@ -100,6 +107,7 @@ export function useClipPlayback() {
     activeKeyRef.current = null;
     playbackRangeRef.current = null;
     setActiveKey(null);
+    setActiveDetails(null);
     setIsPlaying(false);
     setCurrentTimeMs(null);
   }
@@ -131,7 +139,7 @@ export function useClipPlayback() {
     }, safeDuration);
   }
 
-  async function playClip({ key, url, startMs, endMs }: PlayClipArgs) {
+  async function playClip({ key, url, startMs, endMs, title, subtitle }: PlayClipArgs) {
     if (!url) {
       return;
     }
@@ -146,6 +154,11 @@ export function useClipPlayback() {
     const nextAudio = ensureAudio();
     activeKeyRef.current = key;
     setActiveKey(key);
+    setActiveDetails({
+      key,
+      title,
+      subtitle,
+    });
     setIsPlaying(false);
     nextAudio.pause();
     setPlaybackGain(1);
@@ -183,6 +196,7 @@ export function useClipPlayback() {
 
   return {
     activeKey,
+    activeDetails,
     currentTimeMs,
     fadeOutClip,
     isPlaying,