feat: Add onTimeUpdate prop to MediaPlayer and utilize it in VideoMarkerBlock to synchronize current time.

web/studio/src/components/MediaPlayer.tsx

@@ -14,9 +14,10 @@ interface MediaPlayerProps {
     onEnded?: () => void;
     isGraded?: boolean;
     showInteractive?: boolean;
+    onTimeUpdate?: (time: number) => void;
 }
 
-export default function MediaPlayer({ src, type, transcription, locked, onEnded, isGraded, showInteractive = true }: MediaPlayerProps) {
+export default function MediaPlayer({ src, type, transcription, locked, onEnded, isGraded, showInteractive = true, onTimeUpdate }: MediaPlayerProps) {
     const videoRef = useRef<HTMLVideoElement>(null);
     const audioRef = useRef<HTMLAudioElement>(null);
     const [currentTime, setCurrentTime] = useState(0);
@@ -33,6 +34,7 @@ export default function MediaPlayer({ src, type, transcription, locked, onEnded,
         const handleTimeUpdate = () => {
             const time = media.currentTime;
             setCurrentTime(time);
+            if (onTimeUpdate) onTimeUpdate(time);
 
             if (transcription?.cues) {
                 const activeCue = transcription.cues.find(cue =>

web/studio/src/components/blocks/VideoMarkerBlock.tsx

@@ -133,6 +133,7 @@ export default function VideoMarkerBlock({
                         type="video"
                         isGraded={isGraded}
                         showInteractive={false} // Interactive markers are separate here
+                        onTimeUpdate={setCurrentTime}
                     />
                 </div>