diff --git a/web/frontend/src/components/transcript/TranscriptView.tsx b/web/frontend/src/components/transcript/TranscriptView.tsx index 0821e378..70ad0946 100644 --- a/web/frontend/src/components/transcript/TranscriptView.tsx +++ b/web/frontend/src/components/transcript/TranscriptView.tsx @@ -70,6 +70,11 @@ export const TranscriptView = forwardRef(({ return speakerMappings[originalSpeaker] || originalSpeaker; }; + // Click-to-seek handler for timestamp/speaker area in expanded view + const handleSegmentSeek = useCallback((segmentStart: number) => { + onSeek(segmentStart); + }, [onSeek]); + const containerRef = useRef(null); const [isModifierPressed, setIsModifierPressed] = useState(false); const isDesktop = useIsDesktop(); @@ -299,15 +304,26 @@ export const TranscriptView = forwardRef(({ : "hover:bg-carbon-50 dark:hover:bg-carbon-800/50 border-transparent hover:border-carbon-100 dark:hover:border-carbon-800" )} > - {/* Timestamp & Speaker */} -
+ {/* Timestamp & Speaker - Clickable to seek */} +
handleSegmentSeek(segment.start)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSegmentSeek(segment.start); + } + }} + title="Click to jump to this point" + > {new Date(segment.start * 1000).toISOString().substr(11, 8)} {segment.speaker && ( {getDisplaySpeakerName(segment.speaker)}