Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-01-29 14:56:43 -03:00
parent dc519c8551
commit 5a6017609e
2 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/MediaPlayer.tsx
+3 -1
View File
@@ -14,9 +14,10 @@ interface MediaPlayerProps {
onEnded?: () => void; onEnded?: () => void;
isGraded?: boolean; isGraded?: boolean;
showInteractive?: 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 videoRef = useRef<HTMLVideoElement>(null);
const audioRef = useRef<HTMLAudioElement>(null); const audioRef = useRef<HTMLAudioElement>(null);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
@@ -33,6 +34,7 @@ export default function MediaPlayer({ src, type, transcription, locked, onEnded,
const handleTimeUpdate = () => { const handleTimeUpdate = () => {
const time = media.currentTime; const time = media.currentTime;
setCurrentTime(time); setCurrentTime(time);
if (onTimeUpdate) onTimeUpdate(time);
if (transcription?.cues) { if (transcription?.cues) {
const activeCue = transcription.cues.find(cue => const activeCue = transcription.cues.find(cue =>
web/studio/src/components/blocks/VideoMarkerBlock.tsx
+1
View File
@@ -133,6 +133,7 @@ export default function VideoMarkerBlock({
type="video" type="video"
isGraded={isGraded} isGraded={isGraded}
showInteractive={false} // Interactive markers are separate here showInteractive={false} // Interactive markers are separate here
onTimeUpdate={setCurrentTime}
/> />
</div> </div>