From e52abca74b06d06b523f04401332d3755aaab7e6 Mon Sep 17 00:00:00 2001 From: Vadym Samoilenko Date: Fri, 1 May 2026 18:31:58 +0100 Subject: [PATCH] fix(qc): move accessibleCaptionCues memos after state declarations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Resolves TS2448/TS2454 — useMemo blocks referenced captionsVtt and retimedCaptionsVtt before their useState declarations. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/routes/admin/QCDetail.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/routes/admin/QCDetail.tsx b/frontend/src/routes/admin/QCDetail.tsx index fd3fea7..f09edff 100644 --- a/frontend/src/routes/admin/QCDetail.tsx +++ b/frontend/src/routes/admin/QCDetail.tsx @@ -66,18 +66,6 @@ export function QCDetail() { const [currentVideoTimeMs, setCurrentVideoTimeMs] = useState(0); const videoRef = useRef(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([]); 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);