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

fix(qc): move accessibleCaptionCues memos after state declarations

Browse source 
Resolves TS2448/TS2454 — useMemo blocks referenced captionsVtt and
retimedCaptionsVtt before their useState declarations.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-01 18:31:58 +01:00
parent 90867e9824
commit e52abca74b
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/routes/admin/QCDetail.tsx
View file

@ -66,18 +66,6 @@ export function QCDetail() {
const [currentVideoTimeMs, setCurrentVideoTimeMs] = useState(0);
const videoRef = useRef<HTMLVideoElement | null>(null);
// Accessible video captions: parse retimed (or fallback to original) cues
const accessibleCaptionCues = useMemo(() => {
const src = retimedCaptionsVtt || captionsVtt;
if (!src) return [];
try { return VTTParser.parse(src); } catch { return []; }
}, [retimedCaptionsVtt, captionsVtt]);
const currentAccessibleCaption = useMemo(() => {
const timeSec = currentVideoTimeMs / 1000;
return accessibleCaptionCues.find(c => timeSec >= c.startTime && timeSec <= c.endTime) || null;
}, [accessibleCaptionCues, currentVideoTimeMs]);
// Local state for pending regenerations (cleared on successful re-render)
const [pendingRegenerations, setPendingRegenerations] = useState<number[]>([]);
const [pausePointsModified, setPausePointsModified] = useState(false);
@ -313,6 +301,18 @@ export function QCDetail() {
const [captionsVtt, setCaptionsVtt] = useState('');
const [retimedCaptionsVtt, setRetimedCaptionsVtt] = useState('');
const [adVtt, setAdVtt] = useState('');
// Accessible video captions: parse retimed (or fallback to original) cues
const accessibleCaptionCues = useMemo(() => {
const src = retimedCaptionsVtt || captionsVtt;
if (!src) return [];
try { return VTTParser.parse(src); } catch { return []; }
}, [retimedCaptionsVtt, captionsVtt]);
const currentAccessibleCaption = useMemo(() => {
const timeSec = currentVideoTimeMs / 1000;
return accessibleCaptionCues.find(c => timeSec >= c.startTime && timeSec <= c.endTime) || null;
}, [accessibleCaptionCues, currentVideoTimeMs]);
const [viewMode, setViewMode] = useState<'side-by-side' | 'video-only' | 'editor-only'>('side-by-side');
const [showTimingAdjustment, setShowTimingAdjustment] = useState(false);
const [timingOffset, setTimingOffset] = useState(0);