Oliver/video-accessibility
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

debug: add console logging for caption display troubleshooting

Browse source 
Logs VTT content fetching, parsing, and current caption state
to help diagnose subtitle overlay issues in final review mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
michael 2025-12-28 22:29:56 -06:00
parent 01c96da95c
commit 70a07f3732
1 changed files with 52 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/components/VideoReview/VideoReviewPlayer.tsx
View file

@ -74,28 +74,72 @@ export function VideoReviewPlayer({ job, downloads }: VideoReviewPlayerProps) {
// Parse captions
const captions = useMemo<VTTCue[]>(() => {
if (!vttContent) return [];
// Debug logging for caption issues
console.log('[VideoReviewPlayer] Caption Debug:', {
hasVttContent: !!vttContent,
vttContentKeys: vttContent ? Object.keys(vttContent) : [],
hasCaptionsVtt: !!vttContent?.captions_vtt,
hasRetimedCaptionsVtt: !!vttContent?.retimed_captions_vtt,
captionsVttLength: vttContent?.captions_vtt?.length,
retimedCaptionsVttLength: vttContent?.retimed_captions_vtt?.length,
activeTabKey: activeTab?.key,
activeTabLanguage: activeTab?.language,
isAccessible: activeTab?.isAccessible,
});
if (!vttContent) {
console.log('[VideoReviewPlayer] No vttContent - returning empty captions');
return [];
}
// For accessible videos, use retimed captions if available, fall back to regular captions
const vttSource = activeTab?.isAccessible
? (vttContent.retimed_captions_vtt || vttContent.captions_vtt)
: vttContent.captions_vtt;
if (!vttSource) return [];
console.log('[VideoReviewPlayer] VTT source selection:', {
isAccessible: activeTab?.isAccessible,
usingRetimedCaptions: activeTab?.isAccessible && !!vttContent.retimed_captions_vtt,
vttSourceLength: vttSource?.length,
vttSourcePreview: vttSource?.substring(0, 200),
});
if (!vttSource) {
console.log('[VideoReviewPlayer] No vttSource - returning empty captions');
return [];
}
try {
return VTTParser.parse(vttSource);
const parsed = VTTParser.parse(vttSource);
console.log('[VideoReviewPlayer] Parsed captions:', {
count: parsed.length,
firstCue: parsed[0],
lastCue: parsed[parsed.length - 1],
});
return parsed;
} catch (error) {
console.error('Failed to parse captions VTT:', error);
console.error('[VideoReviewPlayer] Failed to parse captions VTT:', error);
return [];
}
}, [vttContent, activeTab]);
// Find current caption
const currentCaption = useMemo(
() => captions.find((cue) => currentTime >= cue.startTime && currentTime <= cue.endTime),
[captions, currentTime]
);
const currentCaption = useMemo(() => {
const found = captions.find((cue) => currentTime >= cue.startTime && currentTime <= cue.endTime);
// Only log when caption changes to reduce noise
return found;
}, [captions, currentTime]);
// Debug: Log when currentCaption changes
useEffect(() => {
console.log('[VideoReviewPlayer] Current caption update:', {
currentTime: currentTime.toFixed(2),
hasCurrentCaption: !!currentCaption,
currentCaptionText: currentCaption?.text?.substring(0, 50),
showCaptions,
totalCaptions: captions.length,
});
}, [currentCaption, currentTime, showCaptions, captions.length]);
// Note highlighting state
const [highlightedNoteIds, setHighlightedNoteIds] = useState<Set<string>>(new Set());