import { useState, useEffect, useRef, useImperativeHandle, forwardRef, useMemo } from 'react'; import { parseWebVTT } from './SubtitleEngine.jsx'; import { useAudioController } from '../v2/hooks/useAudioController.js'; import { getCachedSubtitle, setCachedSubtitle } from '../services/SubtitleCache.js'; import { SubtitleEditorModal } from './SubtitleEditorModal.jsx'; import { resolveManifestSubtitle } from '../services/manifestStore.js'; import { resolveSubtitleAvailability } from '../subtitles/resolver/subtitleResolver.js'; import { resolveQualityAvailability } from '../subtitles/resolver/qualityResolver.js'; import { resolveAudioAvailability, resolveActiveAudioTrack } from '../subtitles/resolver/audioResolver.js'; import { getLanguageByCode } from '../subtitles/languages/registry.js'; import { matchesLanguageQuery } from '../subtitles/languages/languageMatcher.js'; export { matchesLanguageQuery }; const LANGUAGE_NAMES = { en: "English", hi: "Hindi", es: "Spanish", fr: "French", de: "German", zh: "Chinese", ja: "Japanese", ru: "Russian", pt: "Portuguese", it: "Italian", ar: "Arabic", bn: "Bengali", pa: "Punjabi", te: "Telugu", mr: "Marathi", ta: "Tamil", ur: "Urdu", tr: "Turkish", vi: "Vietnamese", ko: "Korean", pl: "Polish", uk: "Ukrainian", ro: "Romanian", nl: "Dutch", el: "Greek", hu: "Hungarian", sv: "Swedish", cs: "Czech", ca: "Catalan", he: "Hebrew", id: "Indonesian", ms: "Malay", th: "Thai", sk: "Slovak", da: "Danish", fi: "Finnish", no: "Norwegian", hr: "Croatian", sr: "Serbian", lt: "Lithuanian", lv: "Latvian", et: "Estonian", sl: "Slovenian", bg: "Bulgarian", mk: "Macedonian", sq: "Albanian", ka: "Georgian", hy: "Armenian", az: "Azerbaijani", fa: "Persian", am: "Amharic", so: "Somali", sw: "Swahili", zu: "Zulu", xh: "Xhosa", ig: "Igbo", om: "Oromo", tl: "Tagalog", my: "Burmese", km: "Khmer", lo: "Lao", si: "Sinhala", ne: "Nepali", mn: "Mongolian", kk: "Kazakh", ky: "Kyrgyz", tg: "Tajik", tk: "Turkmen", uz: "Uzbek", eu: "Basque", gl: "Galician", ga: "Irish", cy: "Welsh", is: "Icelandic", kl: "Greenlandic", mi: "Maori", haw: "Hawaiian", sm: "Samoan", to: "Tongan", fj: "Fijian", ch: "Chamorro", af: "Afrikaans", as: "Assamese", be: "Belarusian", bho: "Bhojpuri", bi: "Bislama", yue: "Cantonese", ceb: "Cebuano", doi: "Dogri", rw: "Kinyarwanda", kok: "Konkani", ku: "Kurdish", lb: "Luxembourgish", mai: "Maithili", mg: "Malagasy", ml: "Malayalam", mt: "Maltese", mni: "Manipuri", or: "Odia", ps: "Pashto", sa: "Sanskrit", sat: "Santali", sd: "Sindhi", su: "Sundanese", gu: "Gujarati", ha: "Hausa", jv: "Javanese", kn: "Kannada", ks: "Kashmiri", }; const isRTL = (lang) => ['ar', 'he', 'fa', 'ur', 'ps', 'sd', 'ks'].includes(lang); const findActiveCue = (cues, time) => { if (!cues || cues.length === 0) return null; let low = 0; let high = cues.length - 1; while (low <= high) { const mid = Math.floor((low + high) / 2); const cue = cues[mid]; if (time >= cue.start && time <= cue.end) { return cue; } else if (time < cue.start) { high = mid - 1; } else { low = mid + 1; } } return null; }; const wrapText = (ctx, text, maxWidth) => { if (!text) return []; const isCJK = (char) => /[\u3040-\u309F\u30A0-\u30FF\uAC00-\uD7AF\u4E00-\u9FFF\u3400-\u4DBF]/.test(char); const tokens = []; let i = 0; while (i < text.length) { const char = text[i]; if (isCJK(char)) { tokens.push(char); i++; } else if (char === ' ') { tokens.push(' '); i++; } else { let word = ''; while (i < text.length && !isCJK(text[i]) && text[i] !== ' ') { word += text[i]; i++; } tokens.push(word); } } const lines = []; let currentLine = ''; for (let j = 0; j < tokens.length; j++) { const token = tokens[j]; if (token === ' ') { continue; } let testLine = currentLine; if (currentLine) { const lastChar = currentLine[currentLine.length - 1]; const firstChar = token[0]; if (isCJK(lastChar) || isCJK(firstChar)) { testLine += token; } else { testLine += ' ' + token; } } else { testLine = token; } const metrics = ctx.measureText(testLine); if (metrics.width > maxWidth && currentLine) { lines.push(currentLine); currentLine = token; } else { currentLine = testLine; } } if (currentLine) lines.push(currentLine); // YouTube captions max 2 lines per cue block to prevent obscuring the video screen if (lines.length > 2) { return lines.slice(0, 2); } return lines; }; const DEFAULT_FONT_STACK = 'system-ui, -apple-system, BlinkMacSystemFont, "Nirmala UI", "Segoe UI", Roboto, "Noto Sans Telugu", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Arabic", "Noto Sans CJK SC", "Noto Sans JP", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif'; const drawSubtitleLine = (ctx, text, x, y, fontSize, styleOpts = {}) => { const { textColor = '#ffffff', backgroundColor = 'rgba(12, 12, 14, 0.88)', borderRadius, paddingX, paddingY, shadowBlur, shadowColor = 'rgba(0, 0, 0, 0.75)' } = styleOpts; const hPadding = paddingX !== undefined ? paddingX : fontSize * 0.45; const vPadding = paddingY !== undefined ? paddingY : fontSize * 0.28; const metrics = ctx.measureText(text); const boxWidth = metrics.width + (hPadding * 2); const boxHeight = fontSize * 1.25 + (vPadding * 2); const boxX = x - (metrics.width / 2) - hPadding; const boxY = y - (fontSize * 1.25 / 2) - vPadding; const radius = borderRadius !== undefined ? borderRadius : Math.max(4, fontSize * 0.16); ctx.save(); // 1. High-contrast solid dark pill background ctx.fillStyle = backgroundColor; if (typeof ctx.roundRect === 'function') { ctx.beginPath(); ctx.roundRect(boxX, boxY, boxWidth, boxHeight, radius); ctx.fill(); } else { ctx.fillRect(boxX, boxY, boxWidth, boxHeight); } // 2. Smooth drop-shadow for separation over bright video ctx.shadowColor = shadowColor; ctx.shadowBlur = shadowBlur !== undefined ? shadowBlur : Math.max(2, fontSize * 0.12); ctx.shadowOffsetX = 0; ctx.shadowOffsetY = Math.max(1, fontSize * 0.04); // Micro-stroke outline for sharp contrast over bright backgrounds (without heavy doubled edges) ctx.strokeStyle = 'rgba(0, 0, 0, 0.85)'; ctx.lineWidth = Math.max(0.5, fontSize * 0.035); ctx.strokeText(text, x, y); // 3. Crisp white/yellow main text fill ctx.fillStyle = textColor; ctx.fillText(text, x, y); ctx.restore(); }; const drawCanvasSubtitles = ( ctx, canvasWidth, canvasHeight, activePrimaryText, activeSecondaryText, primaryLang, secondaryLang, areControlsVisible, subtitleStyle = {} ) => { if (!activePrimaryText && !activeSecondaryText) return; const canvas = ctx.canvas; const displayHeight = (canvas && canvas.clientHeight) ? canvas.clientHeight : (canvasHeight / 2); const scale = (canvas && canvas.clientHeight && canvas.height) ? (canvas.height / canvas.clientHeight) : 1; // Viewport-proportional font sizing (~3.4% of display height), bounded between 12px and 64px const userFontSize = subtitleStyle?.fontSize; const cssFontSize = userFontSize ? userFontSize : Math.max(12, Math.min(64, Math.round(displayHeight * 0.034))); const baseFontSize = cssFontSize * scale; const maxWidth = canvasWidth * 0.76; const visibleControlsHeight = areControlsVisible ? (46 * scale) : (8 * scale); const defaultBottomMargin = Math.max(canvasHeight * 0.05, visibleControlsHeight + (10 * scale)); const bottomMargin = subtitleStyle?.bottomOffset !== undefined ? Math.max(8 * scale, subtitleStyle.bottomOffset * scale) : defaultBottomMargin; const gap = baseFontSize * 0.38; const fontFamily = subtitleStyle?.fontFamily || DEFAULT_FONT_STACK; const fontWeight = subtitleStyle?.fontWeight !== undefined ? subtitleStyle.fontWeight : 600; const fontSpec = `${fontWeight} ${baseFontSize}px ${fontFamily}`; const lineHeightMultiplier = subtitleStyle?.lineHeight || 1.45; ctx.save(); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Extract color & opacity overrides const primaryTextColor = subtitleStyle?.color || '#ffffff'; let primaryBgColor = subtitleStyle?.backgroundColor; if (!primaryBgColor && subtitleStyle?.backgroundOpacity !== undefined) { primaryBgColor = `rgba(12, 12, 14, ${subtitleStyle.backgroundOpacity})`; } const primaryStyleOpts = { textColor: primaryTextColor, backgroundColor: primaryBgColor || 'rgba(12, 12, 14, 0.88)', borderRadius: subtitleStyle?.borderRadius !== undefined ? subtitleStyle.borderRadius * scale : undefined, paddingX: subtitleStyle?.paddingX !== undefined ? subtitleStyle.paddingX * scale : undefined, paddingY: subtitleStyle?.paddingY !== undefined ? subtitleStyle.paddingY * scale : undefined, shadowBlur: subtitleStyle?.shadowBlur !== undefined ? subtitleStyle.shadowBlur * scale : undefined, shadowColor: subtitleStyle?.shadowColor }; // 1. Process and wrap primary text let primaryLines = []; let primaryLineHeight = baseFontSize * lineHeightMultiplier; if (activePrimaryText) { ctx.font = fontSpec; ctx.direction = isRTL(primaryLang) ? 'rtl' : 'ltr'; primaryLines = wrapText(ctx, activePrimaryText, maxWidth); } const primaryTotalHeight = primaryLines.length * primaryLineHeight; // 2. Process and wrap secondary text let secondaryLines = []; const secondaryFontSize = Math.round(baseFontSize * 0.88); let secondaryLineHeight = secondaryFontSize * lineHeightMultiplier; const secondaryStyleOpts = { ...primaryStyleOpts, textColor: '#ffd600' }; if (activeSecondaryText) { ctx.font = `${fontWeight} ${secondaryFontSize}px ${fontFamily}`; ctx.direction = isRTL(secondaryLang) ? 'rtl' : 'ltr'; secondaryLines = wrapText(ctx, activeSecondaryText, maxWidth); } const secondaryTotalHeight = secondaryLines.length * secondaryLineHeight; // 3. Draw Primary lines (Bottom) if (primaryLines.length > 0) { ctx.font = fontSpec; ctx.direction = isRTL(primaryLang) ? 'rtl' : 'ltr'; const primaryStartY = canvasHeight - bottomMargin - primaryTotalHeight + (primaryLineHeight / 2); primaryLines.forEach((line, index) => { const lineY = primaryStartY + (index * primaryLineHeight); drawSubtitleLine(ctx, line, canvasWidth / 2, lineY, baseFontSize, primaryStyleOpts); }); } // 4. Draw Secondary lines (Stacked above Primary) if (secondaryLines.length > 0) { ctx.font = `${fontWeight} ${secondaryFontSize}px ${fontFamily}`; ctx.direction = isRTL(secondaryLang) ? 'rtl' : 'ltr'; const secondaryBottomBoundary = activePrimaryText ? (canvasHeight - bottomMargin - primaryTotalHeight - gap) : (canvasHeight - bottomMargin); const secondaryStartY = secondaryBottomBoundary - secondaryTotalHeight + (secondaryLineHeight / 2); secondaryLines.forEach((line, index) => { const lineY = secondaryStartY + (index * secondaryLineHeight); drawSubtitleLine(ctx, line, canvasWidth / 2, lineY, secondaryFontSize, secondaryStyleOpts); }); } ctx.restore(); }; // Canvas transcription overlay utility const drawTranscriptionOverlay = (ctx, canvasWidth, canvasHeight, statusText, progressPercent) => { ctx.save(); const pillWidth = 240; const pillHeight = 36; const padding = 12; const x = canvasWidth - pillWidth - padding; const y = padding; // Draw glassmorphic pill background (Slate-900 with high opacity) ctx.fillStyle = 'rgba(15, 23, 42, 0.85)'; ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'; ctx.lineWidth = 1; ctx.beginPath(); if (typeof ctx.roundRect === 'function') { ctx.roundRect(x, y, pillWidth, pillHeight, 6); } else { // Fallback for older browsers ctx.rect(x, y, pillWidth, pillHeight); } ctx.fill(); ctx.stroke(); // Draw a pulse/loading indicator dot on the left of the pill const dotX = x + 16; const dotY = y + pillHeight / 2; ctx.beginPath(); ctx.arc(dotX, dotY, 4, 0, 2 * Math.PI); ctx.fillStyle = '#818cf8'; // Indigo-400 ctx.fill(); // Draw the status text ctx.font = '500 11px sans-serif'; ctx.fillStyle = '#f1f5f9'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; let displayTxt = statusText; if (displayTxt.length > 28) { displayTxt = displayTxt.substring(0, 25) + '...'; } ctx.fillText(displayTxt, x + 28, y + pillHeight / 2); // Draw progress line at the bottom edge of the pill const loaderY = y + pillHeight - 2; ctx.beginPath(); ctx.moveTo(x + 6, loaderY); ctx.lineTo(x + pillWidth - 6, loaderY); ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)'; ctx.lineWidth = 2; ctx.stroke(); if (progressPercent > 0) { ctx.beginPath(); ctx.moveTo(x + 6, loaderY); ctx.lineTo(x + 6 + (pillWidth - 12) * (Math.min(100, progressPercent) / 100), loaderY); ctx.strokeStyle = '#818cf8'; ctx.lineWidth = 2; ctx.stroke(); } ctx.restore(); }; // Inline SVGs for zero dependencies const PlayIcon = () => ( ); const PauseIcon = () => ( ); const VolumeHighIcon = () => ( ); const VolumeMuteIcon = () => ( ); const GearIcon = () => ( ); const CheckIcon = () => ( ); const CCIcon = () => ( ); const FullscreenEnterIcon = () => ( ); const FullscreenExitIcon = () => ( ); const AutoplayIcon = ({ active }) => ( ); const PlayIconLarge = () => ( ); const PauseIconLarge = () => ( ); // Module-level cache and in-flight request deduplication for React StrictMode & cross-instance resilience const GLOBAL_SUBTITLE_CACHE = new Map(); const GLOBAL_IN_FLIGHT_SUBTITLES = new Map(); export const TaviVideoPlayer = forwardRef(({ src, id, subtitles = {}, audioLanguages, manifestSubtitles: manifestSubtitlesProp, manifestQualities: manifestQualitiesProp = [], manifestAudioLanguages: manifestAudioLanguagesProp = {}, manifestSourceLanguage: manifestSourceLanguageProp, sourceLanguage: sourceLanguageProp, demoSubtitles: demoSubtitlesProp, resolvedSubtitles: _resolvedSubtitlesProp, resolvedAudioTracks = {}, subtitleAvailability: subtitleAvailabilityProp, audioAvailability, qualityAvailability: qualityAvailabilityProp, tracks, config, audioDubs = {}, qualities, onPlay, onPause, onEnded, onProgress, subLanguage, defaultSubLanguage = 'en', playbackRates = [0.5, 1, 1.25, 1.5, 2], subtitleStyle, autoTranscribe = false, onSubLanguageChange, onAudioLanguageChange, onQualityChange, onSubtitleGenerated, onUpdateSubtitles, onTracksChange }, ref) => { const wrapperRef = useRef(null); const canvasRef = useRef(null); const progressBarRef = useRef(null); const offscreenVideoRef = useRef(null); const subtitleStyleRef = useRef(subtitleStyle); subtitleStyleRef.current = subtitleStyle; const pendingSeekTimeRef = useRef(null); const pendingPlayStateRef = useRef(null); const pendingVolumeRef = useRef(null); const pendingMutedRef = useRef(null); const pendingPlaybackRateRef = useRef(null); const isDraggingRef = useRef(false); const _clickTimeoutRef = useRef(null); // Helper functions for LocalStorage Student Preference Persistence const loadSavedPref = (key, fallback) => { try { if (typeof window !== 'undefined' && window.localStorage) { const raw = localStorage.getItem('aitutor_user_preferences'); if (raw) { const parsed = JSON.parse(raw); if (parsed && parsed[key] !== undefined) return parsed[key]; } } } catch (_) {} return fallback; }; const savePref = (key, value) => { try { if (typeof window !== 'undefined' && window.localStorage) { const raw = localStorage.getItem('aitutor_user_preferences'); const current = raw ? JSON.parse(raw) : {}; current[key] = value; localStorage.setItem('aitutor_user_preferences', JSON.stringify(current)); } } catch (_) {} }; const effectiveSourceLang = sourceLanguageProp || manifestSourceLanguageProp || audioAvailability?.sourceLanguage || 'en'; // Playback Control States (Restored from LocalStorage when available) const [activeSrc, setActiveSrc] = useState(src); const [isPlaying, setIsPlaying] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [volume, setVolume] = useState(() => loadSavedPref('volume', 1)); const [isMuted, setIsMuted] = useState(() => loadSavedPref('isMuted', false)); const [playbackRate, setPlaybackRate] = useState(() => loadSavedPref('playbackRate', 1)); const [hoverTooltip, setHoverTooltip] = useState(null); const [isVideoBuffering, setIsVideoBuffering] = useState(false); const isBuffering = isVideoBuffering; const setIsBuffering = setIsVideoBuffering; const [audioErrorMessage, setAudioErrorMessage] = useState(''); const [mediaError, setMediaError] = useState(''); const [isDragging, setIsDragging] = useState(false); const [areControlsVisible, setAreControlsVisible] = useState(true); const areControlsVisibleRef = useRef(areControlsVisible); useEffect(() => { areControlsVisibleRef.current = areControlsVisible; }, [areControlsVisible]); const [isMouseOverPlayer, setIsMouseOverPlayer] = useState(false); // Settings states const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [activeMenu, setActiveMenu] = useState('main'); const [selectedSubLanguage, setSelectedSubLanguage] = useState(defaultSubLanguage); const [selectedAudioLanguage, setSelectedAudioLanguage] = useState(() => { const saved = loadSavedPref('selectedAudioLanguage', null); if (saved) return saved; return 'original'; }); const [isDualSubtitles, setIsDualSubtitles] = useState(false); const [embeddedTracks, setEmbeddedTracks] = useState([]); const originalTrackRef = useRef(null); const [isTranscribingAI, setIsTranscribingAI] = useState(false); const [aiTranscriptionProgress, setAiTranscriptionProgress] = useState(0); const [aiTranscriptionStatusText, setAiTranscriptionStatusText] = useState(''); const [subtitlesSearchQuery, setSubtitlesSearchQuery] = useState(''); const [audioSearchQuery, setAudioSearchQuery] = useState(''); const audioSearchInputRef = useRef(null); const selectedAudioItemRef = useRef(null); const [isEditorOpen, setIsEditorOpen] = useState(false); const lastActiveSubLangRef = useRef(defaultSubLanguage && defaultSubLanguage !== 'none' ? defaultSubLanguage : 'en'); useEffect(() => { if (selectedSubLanguage && selectedSubLanguage !== 'none') { lastActiveSubLangRef.current = selectedSubLanguage; } }, [selectedSubLanguage]); // Local state for user-uploaded subtitle files const [localSubtitles, setLocalSubtitles] = useState({}); const [internalManifestSubtitles, setInternalManifestSubtitles] = useState({}); const [internalManifestQualities, setInternalManifestQualities] = useState([]); const fileInputRef = useRef(null); // Manifest subtitles auto-loaded from build-time aitutor pipeline const playerManifestSeqRef = useRef(0); const lastLoadedSrcRef = useRef(null); useEffect(() => { if (lastLoadedSrcRef.current !== src) { lastLoadedSrcRef.current = src; setActiveSrc(src); setPrimaryCues(prev => (prev.length === 0 ? prev : [])); setSecondaryCues(prev => (prev.length === 0 ? prev : [])); originalTrackRef.current = null; } if (!src) return; // If manifestSubtitlesProp was passed by parent component (), skip duplicate fetching if (manifestSubtitlesProp !== undefined) return; const currentSeq = ++playerManifestSeqRef.current; setInternalManifestSubtitles(prev => (Object.keys(prev).length === 0 ? prev : {})); setInternalManifestQualities(prev => (prev.length === 0 ? prev : [])); let isMounted = true; const loadManifest = async () => { try { const matched = await resolveManifestSubtitle(src, id); if (!isMounted || playerManifestSeqRef.current !== currentSeq) return; if (matched) { if (Array.isArray(matched.qualities) && matched.qualities.length > 0) { setInternalManifestQualities(prev => { if (prev.length === matched.qualities.length && prev.every((q, i) => q === matched.qualities[i])) return prev; return matched.qualities; }); } if (matched.subtitles && Object.keys(matched.subtitles).length > 0) { const map = {}; Object.entries(matched.subtitles).forEach(([lang, info]) => { const subSrc = typeof info === 'string' ? info : (info && info.src); if (subSrc) { map[lang] = subSrc; } }); if (isMounted && playerManifestSeqRef.current === currentSeq && Object.keys(map).length > 0) { setInternalManifestSubtitles(prev => { const pKeys = Object.keys(prev); const mKeys = Object.keys(map); if (pKeys.length === mKeys.length && pKeys.every(k => prev[k] === map[k])) return prev; return map; }); } } else if (matched.subtitle) { if (isMounted && playerManifestSeqRef.current === currentSeq) { const singleSub = { [matched.language || 'en']: matched.subtitle }; setInternalManifestSubtitles(prev => { const pKeys = Object.keys(prev); const mKeys = Object.keys(singleSub); if (pKeys.length === mKeys.length && pKeys.every(k => prev[k] === singleSub[k])) return prev; return singleSub; }); } } } } catch (_) {} }; loadManifest(); return () => { isMounted = false; }; }, [src, id, manifestSubtitlesProp]); const effectiveManifestSubtitles = useMemo(() => { if (manifestSubtitlesProp !== undefined && manifestSubtitlesProp !== null) { return manifestSubtitlesProp; } return internalManifestSubtitles || {}; }, [internalManifestSubtitles, manifestSubtitlesProp]); const effectiveManifestQualities = useMemo(() => { if (manifestQualitiesProp && manifestQualitiesProp.length > 0) { return manifestQualitiesProp; } return internalManifestQualities || []; }, [internalManifestQualities, manifestQualitiesProp]); // SINGLE SOURCE OF TRUTH: Subtitle Availability & Visibility const subtitleAvailability = useMemo(() => { if (subtitleAvailabilityProp) return subtitleAvailabilityProp; return resolveSubtitleAvailability({ subtitlesConfig: subtitles, demoSubtitles: demoSubtitlesProp, generatedSubtitles: effectiveManifestSubtitles, uploadedSubtitles: localSubtitles, embeddedTracks, videoKey: id || src || 'default' }); }, [subtitleAvailabilityProp, subtitles, demoSubtitlesProp, effectiveManifestSubtitles, localSubtitles, embeddedTracks, id, src]); const hasAvailableSubtitles = subtitleAvailability.hasAvailableSubtitles; const isSubtitleEnabled = subtitleAvailability.enabled; const combinedSubtitles = subtitleAvailability.resolvedTracks; const _subtitlesSourceMetadata = subtitleAvailability.sourceByLanguage; const _visibleSubLanguages = subtitleAvailability.visibleLanguages; const availableSubLangs = subtitleAvailability.availableLanguages; // Process tracks prop or config.file.tracks if supplied by developer const _effectiveTracks = useMemo(() => { if (Array.isArray(tracks) && tracks.length > 0) return tracks; if (config?.file?.tracks && Array.isArray(config.file.tracks)) return config.file.tracks; return null; }, [tracks, config]); // Automatically build standard config.file.tracks objects for all 100+ languages const [generatedTracks, setGeneratedTracks] = useState([]); const activeBlobUrlsRef = useRef([]); useEffect(() => { // Revoke previous URLs activeBlobUrlsRef.current.forEach(url => { try { URL.revokeObjectURL(url); } catch (_) {} }); activeBlobUrlsRef.current = []; const newBlobUrls = []; const list = []; Object.entries(combinedSubtitles).forEach(([langCode, vttContent], idx) => { if (!vttContent) return; // deleted or null let srcUrl = vttContent; if (typeof vttContent === 'string' && vttContent.startsWith('WEBVTT')) { try { const blob = new Blob([vttContent], { type: 'text/vtt' }); srcUrl = URL.createObjectURL(blob); newBlobUrls.push(srcUrl); } catch (_) {} } list.push({ kind: 'subtitles', src: srcUrl, srcLang: langCode, label: LANGUAGE_NAMES[langCode] || langCode.toUpperCase(), default: langCode === defaultSubLanguage || (idx === 0 && defaultSubLanguage === 'en') }); }); activeBlobUrlsRef.current = newBlobUrls; setGeneratedTracks(list); return () => { newBlobUrls.forEach(url => { try { URL.revokeObjectURL(url); } catch (_) {} }); }; }, [combinedSubtitles, defaultSubLanguage]); // Trigger onTracksChange whenever tracks array updates const lastTracksSignatureRef = useRef(''); useEffect(() => { if (generatedTracks.length > 0) { const signature = generatedTracks.map(t => `${t.srcLang}:${t.src}`).join('|'); if (signature !== lastTracksSignatureRef.current) { lastTracksSignatureRef.current = signature; onTracksChange?.(generatedTracks); } } }, [generatedTracks, onTracksChange]); const allAvailableSubtitleLangs = useMemo(() => { if (!hasAvailableSubtitles || !isSubtitleEnabled) return []; let codesToExpose = []; if (subtitles === undefined || subtitles === 'all' || (typeof subtitles === 'object' && subtitles !== null && !Array.isArray(subtitles))) { codesToExpose = Object.keys(combinedSubtitles).filter(lang => Boolean(combinedSubtitles[lang])); } else if (Array.isArray(subtitles)) { const allowedSet = new Set(subtitles); codesToExpose = Object.keys(combinedSubtitles).filter(lang => Boolean(combinedSubtitles[lang]) && allowedSet.has(lang)); } else { codesToExpose = Object.keys(combinedSubtitles).filter(lang => Boolean(combinedSubtitles[lang])); } const allCodes = new Set([ ...codesToExpose, ...Object.keys(localSubtitles).filter(lang => Boolean(localSubtitles[lang])) ]); const langObjects = Array.from(allCodes).map(code => { if (code === 'none') return { code, name: 'Off' }; if (localSubtitles[code]) return { code, name: `📄 ${code}`, isLocal: true }; const reg = getLanguageByCode(code); let displayName = LANGUAGE_NAMES[code] || code.toUpperCase(); if (reg) { if (reg.nativeName && reg.nativeName !== reg.name) { displayName = `${reg.nativeName} / ${reg.name}`; } else { displayName = reg.name; } } return { code, name: displayName, englishName: reg?.name || LANGUAGE_NAMES[code] || code, nativeName: reg?.nativeName || '', iso639_2: reg?.iso639_2 || '' }; }); const allLangs = langObjects.filter(lang => lang.code !== 'none' && !localSubtitles[lang.code]); allLangs.sort((a, b) => a.name.localeCompare(b.name)); return allLangs; }, [combinedSubtitles, hasAvailableSubtitles, isSubtitleEnabled, subtitles, localSubtitles]); const sortedAndFilteredLangs = useMemo(() => { if (!subtitlesSearchQuery.trim()) return allAvailableSubtitleLangs; return allAvailableSubtitleLangs.filter(lang => matchesLanguageQuery(subtitlesSearchQuery, { code: lang.code, name: lang.englishName, nativeName: lang.nativeName, iso639_2: lang.iso639_2, label: lang.name }) ); }, [allAvailableSubtitleLangs, subtitlesSearchQuery]); // Sync controlled subtitle language prop (subLanguage) when explicitly provided by developer useEffect(() => { if (subLanguage !== undefined && subLanguage !== null) { setSelectedSubLanguage(prev => prev === subLanguage ? prev : subLanguage); } }, [subLanguage]); const [selectedQuality, setSelectedQuality] = useState(() => loadSavedPref('selectedQuality', 'Auto')); const [isFullscreen, setIsFullscreen] = useState(false); const [isAutoplay, setIsAutoplay] = useState(false); const hlsRef = useRef(null); const [hlsQualities, setHlsQualities] = useState([]); // Animation frame ref const _animationFrameRef = useRef(null); // YouTube Style Gestures State const [leftSkipActive, setLeftSkipActive] = useState(false); const [rightSkipActive, setRightSkipActive] = useState(false); const [leftSkipText, setLeftSkipText] = useState('10s'); const [rightSkipText, setRightSkipText] = useState('10s'); const [centerFlash, setCenterFlash] = useState(null); // Gesture timeout refs const leftSkipTimeoutRef = useRef(null); const rightSkipTimeoutRef = useRef(null); const centerFlashTimeoutRef = useRef(null); const triggerLeftSkipAnimation = (text) => { setLeftSkipText(text); setLeftSkipActive(false); if (leftSkipTimeoutRef.current) clearTimeout(leftSkipTimeoutRef.current); setTimeout(() => { setLeftSkipActive(true); leftSkipTimeoutRef.current = setTimeout(() => { setLeftSkipActive(false); }, 800); }, 10); }; const triggerRightSkipAnimation = (text) => { setRightSkipText(text); setRightSkipActive(false); if (rightSkipTimeoutRef.current) clearTimeout(rightSkipTimeoutRef.current); setTimeout(() => { setRightSkipActive(true); rightSkipTimeoutRef.current = setTimeout(() => { setRightSkipActive(false); }, 800); }, 10); }; const triggerCenterFlash = (type) => { if (centerFlashTimeoutRef.current) clearTimeout(centerFlashTimeoutRef.current); setCenterFlash({ type, key: Date.now() }); centerFlashTimeoutRef.current = setTimeout(() => { setCenterFlash(null); }, 500); }; // Controls bar auto-hide logic const controlsTimeoutRef = useRef(null); const triggerControlsVisibility = () => { setIsMouseOverPlayer(true); setAreControlsVisible(true); if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current); if (!isDragging && !isSettingsOpen) { controlsTimeoutRef.current = setTimeout(() => { setAreControlsVisible(false); }, 1000); } }; const handleMouseLeavePlayer = () => { setIsMouseOverPlayer(false); if (!isDragging && !isSettingsOpen) { if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current); controlsTimeoutRef.current = setTimeout(() => { setAreControlsVisible(false); }, 200); } }; const isHlsUrl = (url) => { return url && (url.includes('.m3u8') || url.includes('/hls/')); }; const loadHlsScript = () => { return new Promise((resolve, reject) => { if (window.Hls) { resolve(window.Hls); return; } const existingScript = document.querySelector('script[src*="hls.js"]'); if (existingScript) { existingScript.addEventListener('load', () => { if (window.Hls) resolve(window.Hls); else reject(new Error('Hls not found')); }); existingScript.addEventListener('error', () => { reject(new Error('Hls load failed')); }); return; } const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.15/dist/hls.min.js'; script.onload = () => { if (window.Hls) resolve(window.Hls); else reject(new Error('Hls not loaded successfully')); }; script.onerror = () => reject(new Error('Hls script error')); document.head.appendChild(script); }); }; const effectiveQualityAvailability = useMemo(() => { if (qualityAvailabilityProp) return qualityAvailabilityProp; return resolveQualityAvailability({ qualitiesConfig: qualities, hlsQualities, config, manifestQualities: effectiveManifestQualities, videoKey: id || src || 'default' }); }, [qualityAvailabilityProp, qualities, hlsQualities, config, effectiveManifestQualities, id, src]); const displayQualities = effectiveQualityAvailability.resolvedQualities || effectiveQualityAvailability.qualities || []; const isQualityEnabled = effectiveQualityAvailability.enabled && displayQualities.length > 0; // Synchronize selected quality when displayQualities becomes available useEffect(() => { if (displayQualities.length > 0) { if (selectedQuality === 'Auto' && !hlsRef.current) { const saved = loadSavedPref('selectedQuality', null); if (saved && displayQualities.some(q => q.label === saved)) { const matched = displayQualities.find(q => q.label === saved); setSelectedQuality(saved); if (matched && matched.src && matched.src !== activeSrc) { setActiveSrc(matched.src); } } else { const defaultQ = displayQualities.find(q => q.source) || displayQualities[0]; if (defaultQ) { setSelectedQuality(defaultQ.label); } } } } }, [displayQualities]); // Cues state loaded dynamically (supporting raw strings and URLs) const [primaryCues, setPrimaryCues] = useState([]); const [secondaryCues, setSecondaryCues] = useState([]); const subtitleCacheRef = useRef({}); const inFlightSubtitlesRef = useRef({}); const _isTranscribingRef = useRef(false); // Asynchronous subtitle loader (handles both URL fetching and raw content with in-flight deduplication) const loadSubtitles = async (contentOrUrl) => { if (!contentOrUrl) return []; const isUrl = typeof contentOrUrl === 'string' && ( contentOrUrl.startsWith('http://') || contentOrUrl.startsWith('https://') || contentOrUrl.startsWith('/') || contentOrUrl.endsWith('.vtt') || contentOrUrl.endsWith('.srt') ); if (isUrl) { if (GLOBAL_SUBTITLE_CACHE.has(contentOrUrl)) { const cached = GLOBAL_SUBTITLE_CACHE.get(contentOrUrl); subtitleCacheRef.current[contentOrUrl] = cached; return cached; } if (subtitleCacheRef.current[contentOrUrl]) { return subtitleCacheRef.current[contentOrUrl]; } // Deduplicate in-flight requests (across mounts and under React StrictMode) if (GLOBAL_IN_FLIGHT_SUBTITLES.has(contentOrUrl)) { return await GLOBAL_IN_FLIGHT_SUBTITLES.get(contentOrUrl); } if (inFlightSubtitlesRef.current[contentOrUrl]) { return await inFlightSubtitlesRef.current[contentOrUrl]; } const fetchPromise = (async () => { try { const response = await fetch(contentOrUrl); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const text = await response.text(); const parsed = parseWebVTT(text); subtitleCacheRef.current[contentOrUrl] = parsed; GLOBAL_SUBTITLE_CACHE.set(contentOrUrl, parsed); return parsed; } catch (err) { console.error('Failed to load subtitle file:', contentOrUrl, err); return []; } finally { delete inFlightSubtitlesRef.current[contentOrUrl]; GLOBAL_IN_FLIGHT_SUBTITLES.delete(contentOrUrl); } })(); inFlightSubtitlesRef.current[contentOrUrl] = fetchPromise; GLOBAL_IN_FLIGHT_SUBTITLES.set(contentOrUrl, fetchPromise); return await fetchPromise; } return parseWebVTT(contentOrUrl); }; // Translate cues on the fly (Only used when no build-time VTT track exists) const translateCues = async (cues, targetLang) => { if (!cues || cues.length === 0) return []; const batchSize = 35; const translatedCues = []; for (let i = 0; i < cues.length; i += batchSize) { const batch = cues.slice(i, i + batchSize); const combinedText = batch.map(c => c.text).join('\n'); try { const response = await fetch(`/api/translate?to=${targetLang}&text=${encodeURIComponent(combinedText)}`); if (!response.ok) throw new Error('Translation failed'); const data = await response.json(); if (!data || typeof data.translation !== 'string' || !data.translation.trim()) { throw new Error('Translation response is empty or malformed'); } // Split by newline and handle potential length mismatches const translatedLines = data.translation.split('\n'); if (translatedLines.length !== batch.length || translatedLines.some(line => !line.trim())) { throw new Error('Translation response does not preserve cue boundaries'); } batch.forEach((cue, index) => { translatedCues.push({ ...cue, text: translatedLines[index].trim() }); }); } catch (err) { console.error('Batch translation error:', err); throw err; } } return translatedCues; }; const [isTranslating, setIsTranslating] = useState(false); const [_isLoadingSubtitles, setIsLoadingSubtitles] = useState(false); const [_subtitleStatusText, setSubtitleStatusText] = useState('Loading subtitles...'); const fetchPrimarySeqRef = useRef(0); const loadedPrimaryLangRef = useRef(null); const loadedPrimarySrcRef = useRef(null); useEffect(() => { let active = true; const currentSeq = ++fetchPrimarySeqRef.current; const fetchPrimary = async () => { if (!selectedSubLanguage || selectedSubLanguage === 'none' || subtitles === false || !isSubtitleEnabled || !hasAvailableSubtitles) { if (active && currentSeq === fetchPrimarySeqRef.current) { loadedPrimaryLangRef.current = 'none'; loadedPrimarySrcRef.current = null; setPrimaryCues(prev => (prev.length === 0 ? prev : [])); setIsLoadingSubtitles(false); } return; } if (selectedSubLanguage.startsWith && selectedSubLanguage.startsWith('embedded-')) { return; } const rawContent = combinedSubtitles[selectedSubLanguage]; // If already loaded for this exact language and content, do not wipe or reload if ( loadedPrimaryLangRef.current === selectedSubLanguage && loadedPrimarySrcRef.current === rawContent && primaryCuesRef.current.length > 0 ) { return; } if (rawContent) { // Direct static VTT load from manifest or pre-generated subtitles - NO translation if (selectedSubLanguage === 'en' || selectedSubLanguage.includes('.')) { originalTrackRef.current = { name: selectedSubLanguage, vtt: rawContent }; } // Check cache first for immediate zero-flash cue population if (subtitleCacheRef.current[rawContent]) { const cachedCues = subtitleCacheRef.current[rawContent]; if (active && currentSeq === fetchPrimarySeqRef.current) { loadedPrimaryLangRef.current = selectedSubLanguage; loadedPrimarySrcRef.current = rawContent; setPrimaryCues(cachedCues); requestAnimationFrame(() => paintSingleFrame()); } return; } if (active && currentSeq === fetchPrimarySeqRef.current) { setIsLoadingSubtitles(true); setSubtitleStatusText('Loading subtitles...'); } try { const cues = await loadSubtitles(rawContent); if (active && currentSeq === fetchPrimarySeqRef.current) { loadedPrimaryLangRef.current = selectedSubLanguage; loadedPrimarySrcRef.current = rawContent; setPrimaryCues(cues); requestAnimationFrame(() => paintSingleFrame()); } } catch (err) { console.error('Failed to load subtitles:', err); if (active && currentSeq === fetchPrimarySeqRef.current) { setPrimaryCues(prev => (prev.length === 0 ? prev : [])); } } finally { if (active && currentSeq === fetchPrimarySeqRef.current) setIsLoadingSubtitles(false); } } else if (originalTrackRef.current && originalTrackRef.current.vtt) { // Fallback translation only when no VTT file exists on disk if (active && currentSeq === fetchPrimarySeqRef.current) { setIsTranslating(true); setSubtitleStatusText('Loading subtitles...'); } try { const baseCues = await loadSubtitles(originalTrackRef.current.vtt); const translated = await translateCues(baseCues, selectedSubLanguage); if (active && currentSeq === fetchPrimarySeqRef.current) { loadedPrimaryLangRef.current = selectedSubLanguage; loadedPrimarySrcRef.current = selectedSubLanguage; setPrimaryCues(translated); requestAnimationFrame(() => paintSingleFrame()); } } catch (err) { console.error('Translation failed:', err); if (active && currentSeq === fetchPrimarySeqRef.current) setPrimaryCues(prev => (prev.length === 0 ? prev : [])); } finally { if (active && currentSeq === fetchPrimarySeqRef.current) setIsTranslating(false); } } else { if (active && currentSeq === fetchPrimarySeqRef.current) { loadedPrimaryLangRef.current = null; loadedPrimarySrcRef.current = null; setPrimaryCues(prev => (prev.length === 0 ? prev : [])); setIsLoadingSubtitles(false); } return; } }; fetchPrimary(); return () => { active = false; }; }, [combinedSubtitles[selectedSubLanguage], selectedSubLanguage, subtitles, isSubtitleEnabled, hasAvailableSubtitles]); const secondarySubLanguage = useMemo(() => { if (!isDualSubtitles) return null; return availableSubLangs.find((lang) => lang !== selectedSubLanguage) ?? null; }, [availableSubLangs, selectedSubLanguage, isDualSubtitles]); const loadedSecondaryLangRef = useRef(null); const loadedSecondarySrcRef = useRef(null); useEffect(() => { let active = true; const fetchSecondary = async () => { if (!secondarySubLanguage || secondarySubLanguage === 'none') { if (active) { loadedSecondaryLangRef.current = 'none'; loadedSecondarySrcRef.current = null; setSecondaryCues(prev => (prev.length === 0 ? prev : [])); } return; } if (secondarySubLanguage.startsWith('embedded-')) { if (active) { loadedSecondaryLangRef.current = secondarySubLanguage; setSecondaryCues(prev => (prev.length === 0 ? prev : [])); } return; } const rawContent = combinedSubtitles[secondarySubLanguage]; if ( loadedSecondaryLangRef.current === secondarySubLanguage && loadedSecondarySrcRef.current === rawContent && secondaryCuesRef.current.length > 0 ) { return; } let cues = []; if (rawContent) { if (subtitleCacheRef.current[rawContent]) { const cachedCues = subtitleCacheRef.current[rawContent]; if (active) { loadedSecondaryLangRef.current = secondarySubLanguage; loadedSecondarySrcRef.current = rawContent; setSecondaryCues(cachedCues); } return; } cues = await loadSubtitles(rawContent); if (active) { loadedSecondaryLangRef.current = secondarySubLanguage; loadedSecondarySrcRef.current = rawContent; setSecondaryCues(cues); } } else if (originalTrackRef.current && originalTrackRef.current.vtt) { try { const baseCues = await loadSubtitles(originalTrackRef.current.vtt); const translated = await translateCues(baseCues, secondarySubLanguage); if (active) { loadedSecondaryLangRef.current = secondarySubLanguage; loadedSecondarySrcRef.current = secondarySubLanguage; setSecondaryCues(translated); } } catch (err) { console.error('Secondary translation failed:', err); if (active) setSecondaryCues(prev => (prev.length === 0 ? prev : [])); } } else { if (active) { loadedSecondaryLangRef.current = null; loadedSecondarySrcRef.current = null; setSecondaryCues(prev => (prev.length === 0 ? prev : [])); } } }; fetchSecondary(); return () => { active = false; }; }, [combinedSubtitles[secondarySubLanguage], secondarySubLanguage]); // Upload file handler const handleLocalSubtitleUpload = (e) => { const file = e.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => { const text = event.target?.result; if (typeof text === 'string') { const lowerName = file.name.toLowerCase(); let targetLangKey = file.name; // Extract language code if present (e.g., uploaded-en.vtt -> en, manual-te.vtt -> te) const match = lowerName.match(/(?:^|[-_])([a-z]{2,3})(?:\.vtt|\.srt|[-_.]|$)/); if (match && LANGUAGE_NAMES[match[1]]) { targetLangKey = match[1]; } else if (selectedSubLanguage && selectedSubLanguage !== 'none' && LANGUAGE_NAMES[selectedSubLanguage]) { targetLangKey = selectedSubLanguage; } setLocalSubtitles(prev => ({ ...prev, [targetLangKey]: text })); setSelectedSubLanguage(targetLangKey); setIsDualSubtitles(false); setActiveMenu('main'); onSubLanguageChange?.(targetLangKey); } }; reader.readAsText(file); e.target.value = ''; }; const hasAvailableSubtitlesRef = useRef(hasAvailableSubtitles); hasAvailableSubtitlesRef.current = hasAvailableSubtitles; // Refs for zero-latency 60fps canvas draw loop const selectedSubLanguageRef = useRef(selectedSubLanguage); const isDualSubtitlesRef = useRef(isDualSubtitles); const primaryCuesRef = useRef(primaryCues); const secondaryCuesRef = useRef(secondaryCues); const secondarySubLanguageRef = useRef(secondarySubLanguage); const isTranslatingRef = useRef(isTranslating); const isTranscribingAIRef = useRef(isTranscribingAI); const aiTranscriptionProgressRef = useRef(aiTranscriptionProgress); const aiTranscriptionStatusTextRef = useRef(aiTranscriptionStatusText); // Sync ref values synchronously to avoid event loop / paint race conditions selectedSubLanguageRef.current = selectedSubLanguage; isDualSubtitlesRef.current = isDualSubtitles; primaryCuesRef.current = primaryCues; secondaryCuesRef.current = secondaryCues; secondarySubLanguageRef.current = secondarySubLanguage; isTranslatingRef.current = isTranslating; isTranscribingAIRef.current = isTranscribingAI; aiTranscriptionProgressRef.current = aiTranscriptionProgress; aiTranscriptionStatusTextRef.current = aiTranscriptionStatusText; const speedPresets = useMemo(() => { const rates = [...new Set(playbackRates)].sort((a, b) => a - b); return rates.length > 0 ? rates : [0.5, 1, 1.25, 1.5, 2]; }, [playbackRates]); const _speedMin = useMemo(() => Math.min(0.25, ...speedPresets), [speedPresets]); const _speedMax = useMemo(() => Math.max(3, ...speedPresets), [speedPresets]); // Audio Dubbing Track resolution & sync const effectiveAudioAvailability = useMemo(() => { if (audioAvailability) return audioAvailability; return resolveAudioAvailability({ audioLanguagesConfig: audioLanguages, manifestAudio: manifestAudioLanguagesProp, developerAudio: audioDubs, sourceLanguage: effectiveSourceLang, videoKey: id || src || 'default' }); }, [audioAvailability, audioLanguages, manifestAudioLanguagesProp, audioDubs, effectiveSourceLang, id, src]); const isAudioEnabled = audioLanguages !== false && effectiveAudioAvailability.enabled === true && effectiveAudioAvailability.hasAvailableAudio === true && Array.isArray(effectiveAudioAvailability.visibleLanguages) && effectiveAudioAvailability.visibleLanguages.length > 0; const activeAudioTrackMap = useMemo(() => { if (effectiveAudioAvailability && effectiveAudioAvailability.resolvedTracks && Object.keys(effectiveAudioAvailability.resolvedTracks).length > 0) { return effectiveAudioAvailability.resolvedTracks; } return Object.keys(resolvedAudioTracks).length > 0 ? resolvedAudioTracks : audioDubs; }, [effectiveAudioAvailability, resolvedAudioTracks, audioDubs]); const authoritativeResolvedTrack = useMemo(() => { if (!isAudioEnabled) { return { mode: 'original', language: effectiveSourceLang, url: null, normalizedUrl: null, source: 'original', trackId: `original:${effectiveSourceLang}`, playable: true, label: 'Original' }; } return resolveActiveAudioTrack({ availability: effectiveAudioAvailability, selectedLanguage: selectedAudioLanguage, sourceLanguage: effectiveSourceLang, developerAudio: audioDubs, manifestAudio: manifestAudioLanguagesProp, videoKey: id || src || 'default' }); }, [isAudioEnabled, effectiveAudioAvailability, selectedAudioLanguage, effectiveSourceLang, audioDubs, manifestAudioLanguagesProp, id, src]); const { controller: audioController, controllerState: audioControllerState } = useAudioController({ videoRef: offscreenVideoRef, resolvedTrack: authoritativeResolvedTrack, volume, isMuted, playbackRate, sourceLanguage: effectiveSourceLang, onStateChange: (state) => { if (state.status === 'error' && state.audioError) { const failedLang = state.audioError.language; const langMeta = getLanguageByCode(failedLang); const langName = langMeta?.name || LANGUAGE_NAMES[failedLang] || (failedLang ? failedLang.toUpperCase() : 'Audio'); setAudioErrorMessage(`Could not load ${langName} audio.`); // Per Socratic Gate answer A1: Reset selection to 'original' in the menu, but display explicit alert banner setSelectedAudioLanguage('original'); savePref('selectedAudioLanguage', 'original'); } } }); const isAudioBuffering = Boolean( audioControllerState?.audioStatus === 'loading' || audioControllerState?.status === 'loading' ); const audioLoadingLabel = useMemo(() => { if (!isAudioBuffering) return ''; const lang = audioControllerState?.language || selectedAudioLanguage; const langMeta = getLanguageByCode(lang); const langName = langMeta?.name || LANGUAGE_NAMES[lang] || (lang ? lang.toUpperCase() : 'audio'); return `Loading ${langName} audio...`; }, [isAudioBuffering, audioControllerState?.language, selectedAudioLanguage]); const activeAudioUrl = authoritativeResolvedTrack.mode === 'dub' ? authoritativeResolvedTrack.url : null; const getAudioLanguageLabel = (lang) => { if (lang === 'original') { const langMeta = getLanguageByCode(effectiveSourceLang); const langName = langMeta ? (langMeta.nativeName && langMeta.nativeName !== langMeta.name ? `${langMeta.nativeName} / ${langMeta.name}` : langMeta.name) : (LANGUAGE_NAMES[effectiveSourceLang] || (effectiveSourceLang || '').toUpperCase()); return `${langName} (Original)`; } const track = activeAudioTrackMap[lang]; if (track && typeof track === 'object' && track.label) { if (track.source || lang === effectiveSourceLang) { return track.label.includes('(Original)') ? track.label : `${track.label} (Original)`; } return track.label; } const langMeta = getLanguageByCode(lang); const defaultName = langMeta ? (langMeta.nativeName && langMeta.nativeName !== langMeta.name ? `${langMeta.nativeName} / ${langMeta.name}` : langMeta.name) : (LANGUAGE_NAMES[lang] || (lang || '').toUpperCase()); return (track?.source || lang === effectiveSourceLang) ? `${defaultName} (Original)` : defaultName; }; // Available audio languages derived dynamically from activeAudioTrackMap & source language const availableAudioOptions = useMemo(() => { const options = []; // 1. Source / Original language option const origLangMeta = getLanguageByCode(effectiveSourceLang); const origDefaultName = origLangMeta ? (origLangMeta.nativeName && origLangMeta.nativeName !== origLangMeta.name ? `${origLangMeta.nativeName} / ${origLangMeta.name}` : origLangMeta.name) : (LANGUAGE_NAMES[effectiveSourceLang] || (effectiveSourceLang || '').toUpperCase()); const origLabel = `${origDefaultName} (Original)`; options.push({ code: 'original', langCode: effectiveSourceLang, name: origLangMeta?.name || LANGUAGE_NAMES[effectiveSourceLang] || effectiveSourceLang, nativeName: origLangMeta?.nativeName || '', iso639_2: origLangMeta?.iso639_2 || '', label: origLabel, isOriginal: true }); // 2. Additional configured / resolved audio tracks const otherLangs = Object.keys(activeAudioTrackMap).filter( lang => lang !== effectiveSourceLang && !activeAudioTrackMap[lang]?.source ); for (const lang of otherLangs) { const meta = getLanguageByCode(lang); const track = activeAudioTrackMap[lang]; const displayLabel = getAudioLanguageLabel(lang); options.push({ code: lang, langCode: lang, name: meta?.name || (typeof track === 'object' && track?.label) || LANGUAGE_NAMES[lang] || lang, nativeName: meta?.nativeName || '', iso639_2: meta?.iso639_2 || '', label: displayLabel, isOriginal: false }); } return options; }, [activeAudioTrackMap, effectiveSourceLang]); const filteredAudioOptions = useMemo(() => { if (!audioSearchQuery.trim()) { return availableAudioOptions; } return availableAudioOptions.filter(opt => matchesLanguageQuery(audioSearchQuery, { code: opt.langCode, name: opt.name, nativeName: opt.nativeName, iso639_2: opt.iso639_2, label: opt.label }) ); }, [availableAudioOptions, audioSearchQuery]); // Autofocus audio search when appropriate (activeMenu === 'audio' and options > 5) useEffect(() => { if (activeMenu === 'audio' && availableAudioOptions.length > 5) { const timer = setTimeout(() => { audioSearchInputRef.current?.focus(); }, 50); return () => clearTimeout(timer); } }, [activeMenu, availableAudioOptions.length]); // Keep selected audio language in view when dropdown opens useEffect(() => { if (activeMenu === 'audio') { const timer = setTimeout(() => { selectedAudioItemRef.current?.scrollIntoView({ block: 'nearest', behavior: 'auto' }); }, 50); return () => clearTimeout(timer); } }, [activeMenu]); const handleAudioLanguageChange = (lang) => { const prev = selectedAudioLanguage; setAudioErrorMessage(''); setSelectedAudioLanguage(lang); savePref('selectedAudioLanguage', lang); setAudioSearchQuery(''); setActiveMenu('main'); if (onAudioLanguageChange) { const isOrig = (lang === 'original' || lang === effectiveSourceLang || activeAudioTrackMap[lang]?.source); onAudioLanguageChange({ language: lang, previousLanguage: prev, source: isOrig ? 'original' : (activeAudioTrackMap[lang] ? (effectiveAudioAvailability.sourceByLanguage?.[lang] || 'generated') : 'original') }); } }; // Helper to extract active subtitle text (canvas VTT or native TextTrack) const getActiveSubtitleText = (video, langRef, cuesRef) => { if (!langRef || langRef === 'none') return ''; if (langRef.startsWith('embedded-')) { if (!video) return ''; const idx = parseInt(langRef.split('-')[1], 10); const track = video.textTracks?.[idx]; if (track) { if (track.mode !== 'hidden') track.mode = 'hidden'; const activeCue = track.activeCues?.[0]; return activeCue ? activeCue.text : ''; } return ''; } const timeToUse = video ? video.currentTime : currentTime; const activeCue = findActiveCue(cuesRef, timeToUse); return activeCue ? activeCue.text : ''; }; // Canvas paint utility for single frames with High-DPI Retina auto-scaling const paintSingleFrame = () => { const video = offscreenVideoRef.current; const canvas = canvasRef.current; if (canvas) { const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1; const rect = canvas.getBoundingClientRect(); const cssWidth = rect.width || 1280; const cssHeight = rect.height || 720; const targetWidth = Math.round(cssWidth * dpr); const targetHeight = Math.round(cssHeight * dpr); if (canvas.width !== targetWidth || canvas.height !== targetHeight) { canvas.width = targetWidth; canvas.height = targetHeight; } const ctx = canvas.getContext('2d'); // Keep the canvas transparent: the native