"use client"; // --- Constants --- const MS_TRANSLATOR_API_KEY = process.env.NEXT_PUBLIC_SECRETS?.MS_TRANSLATOR_API_KEY; const MS_TRANSLATOR_REGION = process.env.NEXT_PUBLIC_SECRETS?.MS_TRANSLATOR_REGION || "australiaeast"; const MS_TRANSLATOR_ENDPOINT = "https://api.cognitive.microsofttranslator.com"; const IS_MS_KEY_CONFIGURED = !!MS_TRANSLATOR_API_KEY; const IS_MS_REGION_CONFIGURED = !!MS_TRANSLATOR_REGION; const YOUTUBE_API_KEY_CONFIGURED = true; const SESSION_STORAGE_KEY = "youtubeAppPendingAction"; // Key for session storage // --- Logo URLs --- const logoUrls = [ "https://ucarecdn.com/7af2e0f7-2544-47f0-ae65-8380210477c7/-/format/auto/", "https://ucarecdn.com/840cbefd-6457-4029-8b8d-46108151116e/-/format/auto/", "https://ucarecdn.com/ed1972fa-0964-4fa5-88aa-aa17ded660ce/-/format/auto/", "https://ucarecdn.com/c8fc025a-8cfa-4153-9266-5e82f421ebea/-/format/auto/", "https://ucarecdn.com/f846926a-1c0e-45d0-ac5a-628f2899f3ff/-/format/auto/", "https://ucarecdn.com/6d09a7a5-a377-4595-9ec4-bc0f7d3d7b2a/-/format/auto/", "https://ucarecdn.com/6584560c-f411-4696-a4f1-3ff3a34f9344/-/format/auto/", "https://ucarecdn.com/f5712c78-a32b-4288-a6f8-2e409e133862/-/format/auto/", "https://ucarecdn.com/05dab985-02d3-4d21-a8d8-e624eeb10b47/-/format/auto/", "https://ucarecdn.com/e721eb80-7936-4388-850e-96be0e05566c/-/format/auto/", "https://ucarecdn.com/e34de08b-c022-42cf-a268-2d28b5913aaa/-/format/auto/" ]; // --- Backend API Calls --- async function fetchSavedTranslation(videoId) { try { const r = await fetch("/api/get-translation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ videoId }) }); if (!r.ok) { if (r.status === 404) return null; let e = `HTTP ${r.status}`; try { const d = await r.json(); e = d?.error || d?.message || e; } catch (t) {} throw new Error(e); } const a = await r.json(); return !a || 0 === Object.keys(a).length ? null : a.error ? (console.error("BE get err:", a.error), null) : { videoId: a.video_id, videoTitle: a.video_title, sourceLyrics: a.original_lyrics, translatedLyrics: a.translated_lyrics, detectedLanguage: a.source_language, savedAt: a.created_at, musixmatch_url: a.musixmatch_url }; } catch (e) { console.error("fetchSavedTranslation err:", e); return null; } } async function saveTranslation(videoId, translationData) { try { const r = await fetch("/api/save-translation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ videoId: videoId, videoTitle: translationData.videoTitle, originalLyrics: translationData.sourceLyrics, translatedLyrics: translationData.translatedLyrics, sourceLanguage: translationData.detectedLanguage, targetLanguage: "en", musixmatchUrl: translationData.musixmatchUrl }) }); if (!r.ok) { let e = `HTTP ${r.status}`; try { const t = await r.json(); e = t?.error || t?.message || e; } catch (a) {} throw new Error(e); } const a = await r.json(); if (a?.error) throw new Error(a.error); return a?.success === !0 || r.ok; } catch (e) { console.error("saveTranslation err:", e); throw e; } } async function fetchAllSavedTranslations() { try { const r = await fetch("/api/list-translations", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!r.ok) { let e = `HTTP ${r.status}`; try { const t = await r.json(); e = t?.error || t?.message || e; } catch (a) {} throw new Error(e); } const a = await r.json(); if (a?.error) throw new Error(a.error); if (!Array.isArray(a?.translations)) return console.warn("List non-array:", a), []; return a.translations.map((e)=>({ videoId: e.video_id || null, videoTitle: e.video_title || `Video ID: ${e.video_id}`, sourceLanguage: e.source_language || "", savedAt: e.created_at || null, musixmatch_url: e.musixmatch_url || "" })); } catch (e) { console.error("fetchAllSaved err:", e); throw e; } } async function fetchYouTubeSearchResults(query) { try { const r = await fetch("/api/youtube-search", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: query }) }); const a = await r.json(); if (!r.ok) { const e = a?.error || a?.details || r.statusText || `YT Search Err ${r.status}`; console.error("YT Search BE err:", a); throw new Error(e); } if (a.error) { console.error("YT Search BE prop err:", a.error); throw new Error(a.error); } return a.results || []; } catch (e) { console.error("fetchYouTubeSearchResults err:", e); throw new Error(e.message || "Failed YT fetch."); } } // --- YouTube API Loader --- const loadYouTubeAPI = ()=>{ return new Promise((resolve, reject)=>{ if (typeof window === "undefined") { resolve(); return; } if (window.YT && window.YT.Player) { resolve(); return; } const timeoutDuration = 5000; let timeoutId = null; window.onYouTubeIframeAPIReady = ()=>{ console.log("YT API Ready callback."); clearTimeout(timeoutId); resolve(); }; if (document.getElementById("youtube-iframe-api")) { timeoutId = setTimeout(()=>{ console.error("YT API timeout (existing script)."); reject(new Error("YT API load timed out.")); }, timeoutDuration); if (typeof window.YT === "object" && typeof window.YT.Player === "function") { console.log("YT API object already exists."); clearTimeout(timeoutId); window.onYouTubeIframeAPIReady = null; resolve(); } return; } console.log("Creating YT API script tag."); const tag = document.createElement("script"); tag.id = "youtube-iframe-api"; tag.src = "https://www.youtube.com/iframe_api"; tag.onerror = (error)=>{ console.error("YT API script load error:", error); clearTimeout(timeoutId); reject(new Error("Failed to load YT API script.")); }; document.body.appendChild(tag); timeoutId = setTimeout(()=>{ console.error("YT API timeout (new script)."); reject(new Error("YT API load timed out.")); }, timeoutDuration); }); }; function MainComponent() { // --- State --- const [url, setUrl] = useState(""); const [videoId, setVideoId] = useState(""); const [videoTitle, setVideoTitle] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [isFullscreen, setIsFullscreen] = useState(false); const [activeTab, setActiveTab] = useState("musixmatch"); const [copySuccess, setCopySuccess] = useState(false); const [showLyricsControls, setShowLyricsControls] = useState(true); const [showMusixmatchSearchFields, setShowMusixmatchSearchFields] = useState(true); // NEW const [searchQuery, setSearchQuery] = useState(""); const [iframeUrl, setIframeUrl] = useState(""); const [artist, setArtist] = useState(""); const [songName, setSongName] = useState(""); const [isMusixmatchLoading, setIsMusixmatchLoading] = useState(false); const [googleSearchIframeUrl, setGoogleSearchIframeUrl] = useState(""); const [currentGoogleSearchTerm, setCurrentGoogleSearchTerm] = useState(""); const [sourceLyrics, setSourceLyrics] = useState(""); const [translatedLyrics, setTranslatedLyrics] = useState(""); const [interleavedLyrics, setInterleavedLyrics] = useState([]); const [detectedLanguage, setDetectedLanguage] = useState(""); const [detectedLangConfidence, setDetectedLangConfidence] = useState(null); const [isTranslating, setIsTranslating] = useState(false); const [manualLyrics, setManualLyrics] = useState(""); const [isCheckingCache, setIsCheckingCache] = useState(false); const [cacheCheckMessage, setCacheCheckMessage] = useState(""); const [showSavedLyricsModal, setShowSavedLyricsModal] = useState(false); const [allSavedTranslations, setAllSavedTranslations] = useState([]); const [isLoadingAllSaved, setIsLoadingAllSaved] = useState(false); const [savedLyricsError, setSavedLyricsError] = useState(""); const [modalSearchQuery, setModalSearchQuery] = useState(""); const [isSaving, setIsSaving] = useState(false); const [saveStatus, setSaveStatus] = useState(""); const [isApiLoading, setIsApiLoading] = useState(false); const [currentLogoUrl, setCurrentLogoUrl] = useState(logoUrls[0]); const [isYouTubeSearching, setIsYouTubeSearching] = useState(false); const [searchResults, setSearchResults] = useState([]); const [displayMode, setDisplayMode] = useState("placeholder"); const [isAutoScrolling, setIsAutoScrolling] = useState(false); const [scrollSpeedSetting, setScrollSpeedSetting] = useState("medium"); const [scrollSliderValue, setScrollSliderValue] = useState(50); // NEW slider value state const [musixmatchIframeExpanded, setMusixmatchIframeExpanded] = useState(false); // NEW const [googleIframeExpanded, setGoogleIframeExpanded] = useState(false); // NEW // --- Refs --- const fullscreenContainerRef = useRef(null); const playerRef = useRef(null); const iframeRef = useRef(null); // Can be reused for both iframes if needed const loadUrlButtonRef = useRef(null); const lyricsScrollRef = useRef(null); // --- Effects --- // Set initial logo useEffect(()=>{ if (typeof window !== "undefined") { const randomIndex = Math.floor(Math.random() * logoUrls.length); setCurrentLogoUrl(logoUrls[randomIndex]); } }, []); // YouTube Player Lifecycle Management useEffect(()=>{ let initializingPlayer = false; let isMounted = true; if (!videoId || displayMode !== "player" || playerRef.current || initializingPlayer || typeof window === "undefined" || typeof document === "undefined") { return; } initializingPlayer = true; setIsApiLoading(true); console.log("Player Effect: Init Start -", videoId); const onPlayerReady = (event)=>{ if (!isMounted) return; console.log("Player Ready:", event.target?.getVideoData()?.video_id); try { const d = event.target.getVideoData(); const t = d?.title; if (t) { setVideoTitle((p)=>p || t); setSearchQuery((p)=>p || t); setCurrentGoogleSearchTerm((p)=>p || t); } } catch (e) { console.error("Player Effect: onReady error:", e); } }; const onPlayerError = (event)=>{ if (!isMounted) return; console.error("Player Error:", event.data); let m = `Player Error ${event.data}`; switch(event.data){ case 2: m = "Invalid Param"; break; case 5: m = "HTML5 Error"; break; case 100: m = "Not Found"; break; case 101: case 150: m = "Embedding Disabled"; break; } setError(m); setDisplayMode("placeholder"); setVideoId(""); playerRef.current = null; if (isMounted) setIsApiLoading(false); initializingPlayer = false; }; const createPlayerInstance = (vid)=>{ if (!isMounted) { setIsApiLoading(false); initializingPlayer = false; return; } const c = document.getElementById("youtube-player-container"); if (!c || !document.body.contains(c)) { if (isMounted) { setError("Player container issue."); setDisplayMode("placeholder"); setIsApiLoading(false); } initializingPlayer = false; return; } if (!window.YT?.Player) { if (isMounted) { setError("YT API init failed."); setDisplayMode("placeholder"); setIsApiLoading(false); } initializingPlayer = false; return; } console.log(`Player Effect: Creating YT.Player [${vid}]`); try { const p = new window.YT.Player(c, { height: "100%", width: "100%", videoId: vid, playerVars: { autoplay: 0, controls: 1, modestbranding: 1, rel: 0 }, events: { onReady: onPlayerReady, onError: onPlayerError } }); if (isMounted) playerRef.current = p; else try { p?.destroy?.(); } catch (e) {} } catch (err) { if (isMounted) { setError(`Player init failed: ${err.message}`); setDisplayMode("placeholder"); } } finally{ if (isMounted) setIsApiLoading(false); initializingPlayer = false; } }; loadYouTubeAPI().then(()=>{ if (isMounted && videoId && displayMode === "player" && !playerRef.current) createPlayerInstance(videoId); else if (isMounted) { setIsApiLoading(false); initializingPlayer = false; } }).catch((err)=>{ if (isMounted) { setError("Failed load YT API."); setDisplayMode("placeholder"); setIsApiLoading(false); } initializingPlayer = false; }); return ()=>{ console.log(`Player Cleanup: ID='${videoId}'`); isMounted = false; const p = playerRef.current; if (p) { const id = p.getVideoData?.()?.video_id || "?"; if (typeof p.destroy === "function") { try { const i = p.getIframe?.(); const c = document.getElementById("youtube-player-container"); if (i && c && c.contains(i)) p.destroy(); else console.warn("Cleanup skip destroy"); } catch (e) { console.error("Cleanup destroy err:", e); } } else console.warn("No destroy"); playerRef.current = null; } setIsApiLoading(false); initializingPlayer = false; }; }, [ videoId, displayMode ]); // Fullscreen Listener useEffect(()=>{ const handler = ()=>setIsFullscreen(!!document.fullscreenElement); document.addEventListener("fullscreenchange", handler); document.addEventListener("webkitfullscreenchange", handler); document.addEventListener("mozfullscreenchange", handler); document.addEventListener("MSFullscreenChange", handler); return ()=>{ document.removeEventListener("fullscreenchange", handler); document.removeEventListener("webkitfullscreenchange", handler); document.removeEventListener("mozfullscreenchange", handler); document.removeEventListener("MSFullscreenChange", handler); }; }, []); // Auto-Scroll Effect useEffect(()=>{ let intervalId = null; if (isAutoScrolling && lyricsScrollRef.current) { const scrollContainer = lyricsScrollRef.current; const minInterval = 15; const maxInterval = 150; const intervalTime = Math.round(maxInterval - (scrollSliderValue - 1) / 99 * (maxInterval - minInterval)); const scrollAmount = 1; console.log(`Starting autoscroll: Slider=${scrollSliderValue}, Interval=${intervalTime}ms`); intervalId = setInterval(()=>{ if (scrollContainer.scrollTop < scrollContainer.scrollHeight - scrollContainer.clientHeight) { scrollContainer.scrollTop += scrollAmount; } }, intervalTime); } return ()=>{ if (intervalId) { clearInterval(intervalId); } }; }, [ isAutoScrolling, scrollSliderValue ]); // Effect to check session storage on mount for pending action after reload useEffect(()=>{ const pendingActionJSON = sessionStorage.getItem(SESSION_STORAGE_KEY); if (pendingActionJSON) { console.log("Found pending action:", pendingActionJSON); sessionStorage.removeItem(SESSION_STORAGE_KEY); // Clear after reading try { const pendingAction = JSON.parse(pendingActionJSON); if (pendingAction?.action && typeof pendingAction.parameter !== "undefined") { // Check parameter exists console.log(`Executing pending action: ${pendingAction.action}`); if (pendingAction.action === "loadUrl") { setUrl(pendingAction.parameter); // Use timeout to ensure state is set before handleSubmit runs setTimeout(()=>handleSubmit(), 0); } else if (pendingAction.action === "loadSaved") { // Pass a minimal item structure, fetch happens inside handleSavedLyricClick({ videoId: pendingAction.parameter }); } else if (pendingAction.action === "ytSearch") { setUrl(pendingAction.parameter); setTimeout(()=>handleYouTubeSearch(), 0); } } else { console.warn("Invalid pending action format:", pendingAction); } } catch (error) { console.error("Error processing pending action:", error); } } }, []); // Runs only once on mount // --- Event Handlers & Helpers --- const handleGeneralSearch = (site)=>{ if (!searchQuery.trim()) return; if (site === "musixmatch") { const u = `https://www.musixmatch.com/search/${encodeURIComponent(searchQuery.trim())}`; setIframeUrl(u); setIsMusixmatchLoading(true); } }; const handleArtistSongSearch = ()=>{ const a = artist.trim().replace(/\s+/g, "-"); const s = songName.trim().replace(/\s+/g, "-"); if (a && s) { const u = `https://www.musixmatch.com/lyrics/${a}/${s}/translation/english`; setIframeUrl(u); setIsMusixmatchLoading(true); } }; const handleIframeLoad = ()=>setIsMusixmatchLoading(false); const clearMusixmatch = ()=>{ setIframeUrl(""); setIsMusixmatchLoading(false); }; const handleGoogleLyricsSearch = ()=>{ if (!currentGoogleSearchTerm.trim()) return; const q = `${currentGoogleSearchTerm.trim()} lyrics`; const u = `https://www.google.com/search?igu=1&q=${encodeURIComponent(q)}`; setGoogleSearchIframeUrl(u); }; const clearGoogleSearch = ()=>setGoogleSearchIframeUrl(""); const extractVideoId = (url)=>{ let id = ""; try { const u = new URL(url); if (u.hostname.includes("youtube.com")) { id = u.searchParams.get("v"); } else if (u.hostname.includes("youtu.be")) { id = u.pathname.substring(1); } else if (u.hostname.includes("youtube.com") && u.pathname.startsWith("/embed/")) { id = u.pathname.split("/")[2]; } else if (u.hostname.includes("googleusercontent.com") && /^\/youtube\.com\/\d+\//.test(u.pathname)) { const p = u.pathname.split("/"); if (p.length >= 4 && /^\d+$/.test(p[2])) id = p[3]; } } catch (e) {} if (!id) { const m1 = url.match(/[?&]v=([^&]+)/); const m2 = url.match(/youtu\.be\/([^?&]+)/); const m3 = url.match(/\/embed\/([^?&]+)/); const m4 = url.match(/googleusercontent\.com\/youtube\.com\/\d+\/([^?&#]+)/); if (m1) id = m1[1]; else if (m2) id = m2[1]; else if (m3) id = m3[1]; else if (m4) id = m4[1]; } return id && /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : (console.warn("Invalid ID"), null); }; // Store intended action before reload const storeAndReload = (action, parameter)=>{ console.log(`Storing action: ${action}, param: ${parameter} and reloading.`); try { sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify({ action, parameter })); } catch (e) { console.error("Session storage failed:", e); } window.location.reload(); }; // Check if reload needed and trigger it const checkAndTriggerReload = (actionType, param)=>{ if (videoId) { storeAndReload(actionType, param); return true; } return false; }; // Load video from URL input const handleSubmit = async (e)=>{ if (e?.preventDefault) e.preventDefault(); const targetUrl = url.trim(); if (checkAndTriggerReload("loadUrl", targetUrl)) return; // Reload Check if (!targetUrl) { setError("Please enter YouTube URL."); return; } setError(""); setLoading(true); setCacheCheckMessage(""); setSaveStatus(""); setVideoId(""); setVideoTitle(""); setSourceLyrics(""); setTranslatedLyrics(""); setInterleavedLyrics([]); setDetectedLanguage(""); setDetectedLangConfidence(null); setManualLyrics(""); setGoogleSearchIframeUrl(""); setCopySuccess(false); setSearchResults([]); setDisplayMode("placeholder"); try { const id = extractVideoId(targetUrl); if (!id) { setError("Invalid URL."); setLoading(false); return; } setIsCheckingCache(true); setCacheCheckMessage("Checking cache..."); const savedData = await fetchSavedTranslation(id); setIsCheckingCache(false); if (savedData) { setCacheCheckMessage("Loaded saved!"); setVideoTitle(savedData.videoTitle || ""); setSourceLyrics(savedData.sourceLyrics || ""); setTranslatedLyrics(savedData.translatedLyrics || ""); setDetectedLanguage(savedData.detectedLanguage || ""); const o = (savedData.sourceLyrics || "").split("\n"), t = (savedData.translatedLyrics || "").split("\n"), m = Math.max(o.length, t.length), iL = []; for(let i = 0; i < m; i++)iL.push({ id: i, original: o[i] || "", translated: t[i] || "" }); setInterleavedLyrics(iL); setSearchQuery(savedData.videoTitle || ""); setCurrentGoogleSearchTerm(savedData.videoTitle || ""); if (savedData.musixmatch_url) { setIframeUrl(savedData.musixmatch_url); setActiveTab("musixmatch"); } else { setActiveTab("translate"); } } else { setCacheCheckMessage("No saved found."); setSourceLyrics(""); setTranslatedLyrics(""); setInterleavedLyrics([]); setDetectedLanguage(""); setDetectedLangConfidence(null); setSearchQuery(""); setCurrentGoogleSearchTerm(""); setActiveTab("musixmatch"); } setTimeout(()=>setCacheCheckMessage(""), 3000); setVideoId(id); setDisplayMode("player"); setLoading(false); } catch (err) { console.error("handleSubmit error:", err); setError(err.message); setVideoId(""); setDisplayMode("placeholder"); setLoading(false); setIsCheckingCache(false); setCacheCheckMessage(""); } }; // Translate lyrics const handleTranslate = async ()=>{ if (!sourceLyrics.trim()) { setError("Need lyrics."); return; } if (!IS_MS_KEY_CONFIGURED) { setError("Translator key missing."); return; } setIsTranslating(true); setError(""); setTranslatedLyrics(""); setInterleavedLyrics([]); setDetectedLanguage(""); setDetectedLangConfidence(null); setCopySuccess(false); setSaveStatus(""); try { const r = await fetch("/api/translate-api", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: sourceLyrics }) }); if (!r.ok) { let m = `API Err ${r.status}`; try { const d = await r.json(); m = d?.error || m; } catch (e) {} throw new Error(m); } const d = await r.json(); if (d.error) throw new Error(d.error); if (typeof d.translatedText !== "string") throw new Error("Bad format."); const t = d.translatedText; setTranslatedLyrics(t); setDetectedLanguage(d.detectedLanguage || ""); setDetectedLangConfidence(d.confidence || null); const o = sourceLyrics.split("\n"), tx = t.split("\n"), m = Math.max(o.length, tx.length), iL = []; for(let i = 0; i < m; i++)iL.push({ id: i, original: o[i] || "", translated: tx[i] || "" }); setInterleavedLyrics(iL); } catch (err) { console.error("handleTranslate err:", err); setError(err.message || "Translate fail."); setTranslatedLyrics(""); setInterleavedLyrics([]); setDetectedLanguage(""); setDetectedLangConfidence(null); } finally{ setIsTranslating(false); } }; // Save lyrics/translation/musixmatch URL const handleSaveTranslation = async (lyricsToSave, translatedText = "", sourceLang = "", musixmatchUrl = "")=>{ let currentTitle = videoTitle; if (!currentTitle && playerRef.current?.getVideoData) { try { currentTitle = playerRef.current.getVideoData().title; if (currentTitle) setVideoTitle(currentTitle); } catch (e) {} } if (!videoId || !currentTitle) { setSaveStatus("Err: Missing video info."); setTimeout(()=>setSaveStatus(""), 3000); return; } if (!lyricsToSave?.trim() && !translatedText?.trim() && !musixmatchUrl?.trim()) { setSaveStatus("Err: Nothing to save."); setTimeout(()=>setSaveStatus(""), 3000); return; } setIsSaving(true); setSaveStatus("Saving..."); try { const success = await saveTranslation(videoId, { videoTitle: currentTitle, sourceLyrics: lyricsToSave || "", translatedLyrics: translatedText || "", detectedLanguage: sourceLang || "", musixmatchUrl: musixmatchUrl || "" }); setSaveStatus(success ? "Saved!" : "Save fail."); } catch (err) { console.error("handleSave err:", err); setSaveStatus(`Save error: ${err.message}`); } finally{ setIsSaving(false); setTimeout(()=>setSaveStatus(""), 4000); } }; const clearTranslation = ()=>{ setSourceLyrics(""); setTranslatedLyrics(""); setInterleavedLyrics([]); setDetectedLanguage(""); setDetectedLangConfidence(null); setError(""); setCopySuccess(false); setSaveStatus(""); }; const copyInterleavedLyrics = ()=>{ if (interleavedLyrics.length === 0) return; const t = interleavedLyrics.map((p)=>`${p.original}\n${p.translated}`).join("\n\n"); navigator.clipboard.writeText(t).then(()=>{ setCopySuccess(true); setTimeout(()=>setCopySuccess(false), 2000); }).catch((e)=>{ setError("Copy failed."); }); }; const handleViewSavedLyrics = async ()=>{ setShowSavedLyricsModal(true); setIsLoadingAllSaved(true); setSavedLyricsError(""); setAllSavedTranslations([]); try { const d = await fetchAllSavedTranslations(); d.sort((a, b)=>new Date(b.savedAt) - new Date(a.savedAt)); setAllSavedTranslations(d); } catch (e) { setSavedLyricsError(`Load failed: ${e.message}`); } finally{ setIsLoadingAllSaved(false); } }; const closeSavedLyricsModal = ()=>{ setShowSavedLyricsModal(false); setModalSearchQuery(""); }; // Load video/lyrics from saved item click const handleSavedLyricClick = async (item)=>{ if (!item?.videoId) { setError("Invalid saved item."); return; } if (checkAndTriggerReload("loadSaved", item.videoId)) return; // Reload Check console.log("Loading saved:", item.videoId, item.videoTitle); setLoading(true); setError(""); setCacheCheckMessage(`Loading: ${item.videoTitle || item.videoId}...`); closeSavedLyricsModal(); let savedData = null; try { savedData = await fetchSavedTranslation(item.videoId); setVideoId(""); setVideoTitle(""); setSourceLyrics(""); setTranslatedLyrics(""); setInterleavedLyrics([]); setDetectedLanguage(""); setDetectedLangConfidence(null); setManualLyrics(""); setGoogleSearchIframeUrl(""); setCopySuccess(false); setSaveStatus(""); setSearchResults([]); setUrl(`https://www.youtube.com/watch?v=${item.videoId}`); // Use ${item.videoId} if (savedData) { console.log("Applying saved data"); setVideoTitle(savedData.videoTitle || ""); setSourceLyrics(savedData.sourceLyrics || ""); setTranslatedLyrics(savedData.translatedLyrics || ""); setDetectedLanguage(savedData.detectedLanguage || ""); const o = (savedData.sourceLyrics || "").split("\n"), t = (savedData.translatedLyrics || "").split("\n"), m = Math.max(o.length, t.length), iL = []; for(let i = 0; i < m; i++)iL.push({ id: i, original: o[i] || "", translated: t[i] || "" }); setInterleavedLyrics(iL); setSearchQuery(savedData.videoTitle || ""); setCurrentGoogleSearchTerm(savedData.videoTitle || ""); setCacheCheckMessage("Loaded saved!"); if (savedData.musixmatch_url) { setIframeUrl(savedData.musixmatch_url); setActiveTab("musixmatch"); } else if (savedData.sourceLyrics || savedData.translatedLyrics) { setActiveTab("translate"); } else { setActiveTab("musixmatch"); } } else { setVideoTitle(item.videoTitle || `Video ID: ${item.videoId}`); setError(`Could not load details for ${item.videoTitle || item.videoId}.`); setSearchQuery(item.videoTitle || ""); setCurrentGoogleSearchTerm(item.videoTitle || ""); setActiveTab("musixmatch"); setCacheCheckMessage("Details not found."); } setDisplayMode("player"); setVideoId(item.videoId); setLoading(false); setTimeout(()=>setCacheCheckMessage(""), 3000); } catch (err) { console.error("handleSavedClick err:", err); setError(`Load failed: ${err.message}`); setVideoId(""); setDisplayMode("placeholder"); setLoading(false); setCacheCheckMessage(""); setVideoTitle(""); } }; const toggleFullscreen = ()=>{ if (!document.fullscreenElement) { fullscreenContainerRef.current?.requestFullscreen().then(()=>setIsFullscreen(true)).catch((e)=>console.error("FS enter err:", e)); } else { document.exitFullscreen().then(()=>setIsFullscreen(false)).catch((e)=>console.error("FS exit err:", e)); } }; // Search YouTube via backend const handleYouTubeSearch = async ()=>{ const term = url.trim(); if (checkAndTriggerReload("ytSearch", term)) return; // Reload Check if (!term) { setError("Enter search term."); return; } setError(""); setIsYouTubeSearching(true); setSearchResults([]); setVideoId(""); setVideoTitle(""); setLoading(false); setIsCheckingCache(false); setCacheCheckMessage(""); setDisplayMode("placeholder"); try { console.log("Searching YT:", term); const r = await fetchYouTubeSearchResults(term); setSearchResults(r); setDisplayMode("search_results"); } catch (err) { console.error("handleYouTubeSearch err:", err); setError(`YT Search Failed: ${err.message}`); setDisplayMode("placeholder"); } finally{ setIsYouTubeSearching(false); } }; // Handle click on a search result item const handleSearchResultClick = (clickedVideoId)=>{ if (!clickedVideoId) { return; } const newUrl = `https://www.youtube.com/watch?v=${clickedVideoId}`; // Use ${clickedVideoId} // Store intended action *before* triggering reload check if (checkAndTriggerReload("loadUrl", newUrl)) return; // Reload Check console.log("Search click:", clickedVideoId); setUrl(newUrl); // Set URL state setSearchResults([]); setDisplayMode("placeholder"); // If no reload, proceed to click the Load button setTimeout(()=>{ if (loadUrlButtonRef.current) { console.log("Clicking Load URL button ref..."); loadUrlButtonRef.current.click(); } else { setError("Failed auto-load."); setDisplayMode("placeholder"); } }, 50); }; // Toggle lyrics auto-scroll const toggleAutoScroll = ()=>{ setIsAutoScrolling((prev)=>!prev); }; // Set scroll speed (from presets or slider) const setScrollSpeed = (value, isPreset = false)=>{ let newSliderValue; if (isPreset) { switch(value){ case "slow": newSliderValue = 25; break; case "fast": newSliderValue = 75; break; default: newSliderValue = 50; break; } setScrollSpeedSetting(value); setScrollSliderValue(newSliderValue); } else { newSliderValue = parseInt(value, 10); setScrollSliderValue(newSliderValue); if (newSliderValue < 34) setScrollSpeedSetting("slow"); else if (newSliderValue > 66) setScrollSpeedSetting("fast"); else setScrollSpeedSetting("medium"); } if (isAutoScrolling) { setIsAutoScrolling(true); } // Keep scrolling if speed changes }; // --- Derived State --- const filteredTranslations = allSavedTranslations.filter((item)=>item.videoTitle?.toLowerCase().includes(modalSearchQuery.toLowerCase().trim())); // --- Render --- return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 text-gray-100 font-sans", __source: { fileName: "", lineNumber: 1019, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isFullscreen ? "fixed inset-0 z-50 bg-black/95 p-4" : "p-4 md:p-8"}`, ref: fullscreenContainerRef, __source: { fileName: "", lineNumber: 1020, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `mx-auto ${isFullscreen ? "h-full flex flex-col md:flex-row gap-4" : "max-w-7xl"}`, __source: { fileName: "", lineNumber: 1026, columnNumber: 9 }, __self: this }, !isFullscreen && /*#__PURE__*/ React.createElement("div", { className: "mb-6 bg-gray-800/50 backdrop-blur-sm rounded-lg p-4 border border-gray-700/50 flex flex-col md:flex-row items-center gap-4 md:gap-6", __source: { fileName: "", lineNumber: 1034, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 1035, columnNumber: 15 }, __self: this }, " ", /*#__PURE__*/ React.createElement("img", { src: currentLogoUrl, alt: "App Logo", className: "h-48 md:h-56 w-auto object-contain", __source: { fileName: "", lineNumber: 1037, columnNumber: 17 }, __self: this }), " "), /*#__PURE__*/ React.createElement("div", { className: "flex-1 w-full", __source: { fileName: "", lineNumber: 1043, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 mb-3 hidden md:block", __source: { fileName: "", lineNumber: 1044, columnNumber: 17 }, __self: this }, " ", "Load YouTube Video or Search", " "), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 1048, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "youtube-url-input", "aria-label": "YouTube URL or Search Term", type: "text", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "Paste YouTube URL or enter search term...", className: "flex-1 px-4 py-2 bg-gray-900/50 backdrop-blur-sm rounded-lg text-gray-100 placeholder-gray-500 border border-gray-700/50 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/20 min-w-0", onKeyDown: (e)=>{ if (e.key === "Enter" && (url.includes("youtu") || url.includes("googleusercontent.com/youtube.com"))) { handleSubmit(e); } else if (e.key === "Enter") { handleYouTubeSearch(); } }, __source: { fileName: "", lineNumber: 1049, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { ref: loadUrlButtonRef, type: "button", onClick: handleSubmit, disabled: loading || isCheckingCache || isYouTubeSearching || isApiLoading, title: "Load the entered YouTube URL", className: "px-6 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-all flex items-center justify-center gap-2 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 1069, columnNumber: 19 }, __self: this }, " ", (loading || isCheckingCache || isApiLoading) && !isYouTubeSearching ? /*#__PURE__*/ React.createElement(React.Fragment, null, " ", /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 border-2 border-t-transparent border-white rounded-full animate-spin", __source: { fileName: "", lineNumber: 1087, columnNumber: 25 }, __self: this }), " ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1088, columnNumber: 25 }, __self: this }, "Loading..."), " ") : "Load URL", " "), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleYouTubeSearch, disabled: loading || isCheckingCache || isYouTubeSearching || isApiLoading || !YOUTUBE_API_KEY_CONFIGURED, title: !YOUTUBE_API_KEY_CONFIGURED ? "YouTube API Key not configured" : "Search YouTube for the entered term", className: "px-6 py-2 bg-purple-600 hover:bg-purple-500 rounded-lg transition-all flex items-center justify-center gap-2 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 1094, columnNumber: 19 }, __self: this }, " ", isYouTubeSearching ? /*#__PURE__*/ React.createElement(React.Fragment, null, " ", /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 border-2 border-t-transparent border-white rounded-full animate-spin", __source: { fileName: "", lineNumber: 1115, columnNumber: 25 }, __self: this }), " ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1116, columnNumber: 25 }, __self: this }, "Searching..."), " ") : "Search YT", " ")), /*#__PURE__*/ React.createElement("div", { className: "mt-2 space-y-1 text-xs min-h-[40px]", __source: { fileName: "", lineNumber: 1123, columnNumber: 17 }, __self: this }, " ", cacheCheckMessage && /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 1126, columnNumber: 21 }, __self: this }, cacheCheckMessage), " ", error && /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-red-500/10 border border-red-500/30 rounded-lg text-red-200", role: "alert", __source: { fileName: "", lineNumber: 1129, columnNumber: 21 }, __self: this }, error), " "), /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-center sm:text-right", __source: { fileName: "", lineNumber: 1137, columnNumber: 17 }, __self: this }, " ", /*#__PURE__*/ React.createElement("button", { onClick: handleViewSavedLyrics, className: "text-sm text-blue-400 hover:text-blue-300 underline transition-colors", __source: { fileName: "", lineNumber: 1139, columnNumber: 19 }, __self: this }, " ", "View Saved Translations", " "), " "))), /*#__PURE__*/ React.createElement("div", { className: `flex-1 grid ${isFullscreen ? "grid-cols-1 md:grid-cols-2 gap-4" : "grid-cols-1 lg:grid-cols-2 gap-4"} min-h-0`, __source: { fileName: "", lineNumber: 1151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isFullscreen ? "flex flex-col h-full" : "bg-gray-800/50 backdrop-blur-sm rounded-lg p-4 border border-gray-700/50 flex flex-col"} min-h-0`, __source: { fileName: "", lineNumber: 1159, columnNumber: 13 }, __self: this }, displayMode === "player" && videoId && videoTitle && /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-gray-100 mb-3 flex-shrink-0 truncate", title: videoTitle, __source: { fileName: "", lineNumber: 1167, columnNumber: 17 }, __self: this }, " ", videoTitle, " "), displayMode === "player" && videoId && !videoTitle && (loading || isApiLoading) && /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-gray-400 mb-3 flex-shrink-0 italic", __source: { fileName: "", lineNumber: 1179, columnNumber: 19 }, __self: this }, " ", "Loading title...", " "), /*#__PURE__*/ React.createElement("div", { className: `relative w-full ${isFullscreen ? "flex-1" : "aspect-video"} rounded-lg overflow-hidden bg-black flex flex-col justify-center items-center min-h-[300px]`, __source: { fileName: "", lineNumber: 1184, columnNumber: 15 }, __self: this }, (loading || isApiLoading || isYouTubeSearching || isCheckingCache) && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 bg-black/70 text-sm z-20", __source: { fileName: "", lineNumber: 1193, columnNumber: 19 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-t-transparent border-white rounded-full animate-spin mr-2", __source: { fileName: "", lineNumber: 1195, columnNumber: 21 }, __self: this }), " ", isCheckingCache ? "Checking Cache..." : isYouTubeSearching ? "Searching..." : isApiLoading ? "Loading Player..." : "Loading...", " "), displayMode === "player" && videoId && /*#__PURE__*/ React.createElement("div", { id: "youtube-player-container", key: videoId, className: "absolute inset-0 w-full h-full z-10", __source: { fileName: "", lineNumber: 1206, columnNumber: 19 }, __self: this }), displayMode === "search_results" && !isYouTubeSearching && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 w-full h-full overflow-y-auto p-2 space-y-2 bg-gray-800/80 z-10", __source: { fileName: "", lineNumber: 1213, columnNumber: 19 }, __self: this }, " ", /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-semibold text-gray-300 px-1 sticky top-0 bg-gray-800/90 backdrop-blur-sm pb-1 z-10", __source: { fileName: "", lineNumber: 1215, columnNumber: 21 }, __self: this }, "Search Results"), " ", searchResults.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-400 pt-10", __source: { fileName: "", lineNumber: 1219, columnNumber: 23 }, __self: this }, "No results found.") : searchResults.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.videoId, onClick: ()=>handleSearchResultClick(result.videoId), className: "flex items-center gap-2 p-2 rounded-md bg-gray-700/50 hover:bg-gray-600/70 cursor-pointer transition-colors", __source: { fileName: "", lineNumber: 1224, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.thumbnailUrl, alt: result.title, className: "w-20 h-11 object-cover rounded flex-shrink-0", loading: "lazy", __source: { fileName: "", lineNumber: 1231, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden", __source: { fileName: "", lineNumber: 1237, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-100 truncate", title: result.title, __source: { fileName: "", lineNumber: 1238, columnNumber: 29 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 truncate", title: result.channelTitle, __source: { fileName: "", lineNumber: 1244, columnNumber: 29 }, __self: this }, result.channelTitle)))), " "), displayMode === "placeholder" && !loading && !isApiLoading && !isYouTubeSearching && !videoId && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center text-gray-500 z-0 p-4 text-center h-full", __source: { fileName: "", lineNumber: 1261, columnNumber: 21 }, __self: this }, " ", /*#__PURE__*/ React.createElement("svg", { className: "w-16 h-16 mx-auto mb-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1263, columnNumber: 23 }, __self: this }, " ", /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z", __source: { fileName: "", lineNumber: 1270, columnNumber: 25 }, __self: this }), " "), " ", !isFullscreen && /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 1278, columnNumber: 25 }, __self: this }, "Load a YouTube URL or Search Above"), " ")), videoId && displayMode === "player" && !isFullscreen && /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex-shrink-0", __source: { fileName: "", lineNumber: 1286, columnNumber: 17 }, __self: this }, " ", /*#__PURE__*/ React.createElement("button", { onClick: toggleFullscreen, className: "px-4 py-2 bg-gray-900/50 hover:bg-gray-700/50 rounded-lg flex items-center gap-2 transition-all transform hover:scale-105 backdrop-blur-sm border border-gray-700/50 text-sm", __source: { fileName: "", lineNumber: 1288, columnNumber: 19 }, __self: this }, " ", /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1293, columnNumber: 21 }, __self: this }, " ", /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1h4m0 0v4m0-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v4m0 0h-4", __source: { fileName: "", lineNumber: 1300, columnNumber: 23 }, __self: this }), " "), " ", "Enter Fullscreen", " "), " ")), /*#__PURE__*/ React.createElement("div", { className: `${isFullscreen ? "flex flex-col h-full bg-black/80 p-4" : "bg-gray-800/50 backdrop-blur-sm rounded-lg p-4 border border-gray-700/50 flex flex-col min-h-[80vh]"} min-h-0`, __source: { fileName: "", lineNumber: 1313, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4 flex-shrink-0", __source: { fileName: "", lineNumber: 1321, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1322, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400", __source: { fileName: "", lineNumber: 1323, columnNumber: 19 }, __self: this }, "Lyrics"), activeTab === "musixmatch" && !isFullscreen && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLyricsControls(!showLyricsControls), className: "p-1 hover:bg-gray-700/50 rounded-lg transition-all", title: showLyricsControls ? "Hide Musixmatch Controls" : "Show Musixmatch Controls", __source: { fileName: "", lineNumber: 1327, columnNumber: 21 }, __self: this }, showLyricsControls ? /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1337, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7", __source: { fileName: "", lineNumber: 1343, columnNumber: 27 }, __self: this })) : /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1351, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7", __source: { fileName: "", lineNumber: 1357, columnNumber: 27 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex border-b border-gray-700 mb-4 flex-shrink-0 overflow-x-auto", __source: { fileName: "", lineNumber: 1370, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("musixmatch"), className: `px-4 py-2 transition-colors whitespace-nowrap ${activeTab === "musixmatch" ? "border-b-2 border-blue-400 text-blue-400" : "text-gray-400 hover:text-gray-100"}`, __source: { fileName: "", lineNumber: 1371, columnNumber: 17 }, __self: this }, "Musixmatch"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("search"), className: `px-4 py-2 transition-colors whitespace-nowrap ${activeTab === "search" ? "border-b-2 border-purple-400 text-purple-400" : "text-gray-400 hover:text-gray-100"}`, __source: { fileName: "", lineNumber: 1381, columnNumber: 17 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("translate"), className: `px-4 py-2 transition-colors whitespace-nowrap ${activeTab === "translate" ? "border-b-2 border-teal-400 text-teal-400" : "text-gray-400 hover:text-gray-100"}`, __source: { fileName: "", lineNumber: 1391, columnNumber: 17 }, __self: this }, "Translate"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("manual"), className: `px-4 py-2 transition-colors whitespace-nowrap ${activeTab === "manual" ? "border-b-2 border-orange-400 text-orange-400" : "text-gray-400 hover:text-gray-100"}`, __source: { fileName: "", lineNumber: 1401, columnNumber: 17 }, __self: this }, "Manual")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col overflow-hidden min-h-0", __source: { fileName: "", lineNumber: 1413, columnNumber: 15 }, __self: this }, activeTab === "musixmatch" && /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col min-h-0", __source: { fileName: "", lineNumber: 1416, columnNumber: 19 }, __self: this }, showLyricsControls && /*#__PURE__*/ React.createElement("div", { className: "space-y-3 mb-4 flex-shrink-0", __source: { fileName: "", lineNumber: 1419, columnNumber: 23 }, __self: this }, " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMusixmatchSearchFields(!showMusixmatchSearchFields), className: "px-3 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded-md", __source: { fileName: "", lineNumber: 1423, columnNumber: 25 }, __self: this }, showMusixmatchSearchFields ? "Hide Search Fields" : "Show Search Fields"), showMusixmatchSearchFields && /*#__PURE__*/ React.createElement("div", { className: "space-y-2 pt-2", __source: { fileName: "", lineNumber: 1437, columnNumber: 27 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 1440, columnNumber: 29 }, __self: this }, " ", /*#__PURE__*/ React.createElement("input", { "aria-label": "Musixmatch Search Query", id: "musixmatch-search-query", type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Video title auto-populates here...", className: "flex-1 px-4 py-2 bg-gray-900/50 backdrop-blur-sm rounded-lg text-gray-100 placeholder-gray-500 border border-gray-700/50 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/20", onKeyDown: (e)=>{ if (e.key === "Enter") handleGeneralSearch("musixmatch"); }, __source: { fileName: "", lineNumber: 1442, columnNumber: 31 }, __self: this }), " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleGeneralSearch("musixmatch"), className: "px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-all", __source: { fileName: "", lineNumber: 1455, columnNumber: 31 }, __self: this }, "Search"), " "), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 1464, columnNumber: 29 }, __self: this }, " ", /*#__PURE__*/ React.createElement("input", { "aria-label": "Artist Name", id: "musixmatch-artist-input", type: "text", value: artist, onChange: (e)=>setArtist(e.target.value), placeholder: "Artist name...", className: "flex-1 px-4 py-2 bg-gray-900/50 backdrop-blur-sm rounded-lg text-gray-100 placeholder-gray-500 border border-gray-700/50 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/20", onKeyDown: (e)=>{ if (e.key === "Enter") handleArtistSongSearch(); }, __source: { fileName: "", lineNumber: 1466, columnNumber: 31 }, __self: this }), " ", /*#__PURE__*/ React.createElement("input", { "aria-label": "Song Name", id: "musixmatch-song-input", type: "text", value: songName, onChange: (e)=>setSongName(e.target.value), placeholder: "Song name...", className: "flex-1 px-4 py-2 bg-gray-900/50 backdrop-blur-sm rounded-lg text-gray-100 placeholder-gray-500 border border-gray-700/50 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/20", onKeyDown: (e)=>{ if (e.key === "Enter") handleArtistSongSearch(); }, __source: { fileName: "", lineNumber: 1479, columnNumber: 31 }, __self: this }), " ", /*#__PURE__*/ React.createElement("button", { onClick: handleArtistSongSearch, className: "px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-all whitespace-nowrap flex-shrink-0 min-w-max", __source: { fileName: "", lineNumber: 1492, columnNumber: 31 }, __self: this }, "Search"), " ")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 pt-2", __source: { fileName: "", lineNumber: 1502, columnNumber: 25 }, __self: this }, iframeUrl && videoId && videoTitle && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSaveTranslation("", "", "", iframeUrl), disabled: isSaving, className: "px-3 py-1 text-xs bg-green-700 hover:bg-green-600 text-white rounded-md transition-colors flex items-center gap-1 disabled:opacity-50", title: "Save current Musixmatch link", __source: { fileName: "", lineNumber: 1504, columnNumber: 29 }, __self: this }, isSaving ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 border-2 border-t-transparent border-white rounded-full animate-spin mr-1", __source: { fileName: "", lineNumber: 1514, columnNumber: 35 }, __self: this }), "Saving...") : "Save Link"), iframeUrl && /*#__PURE__*/ React.createElement("button", { onClick: clearMusixmatch, className: "text-xs text-gray-400 hover:text-red-400 transition-colors underline", __source: { fileName: "", lineNumber: 1523, columnNumber: 29 }, __self: this }, "Clear View"))), /*#__PURE__*/ React.createElement("div", { className: `min-h-0 border border-gray-700/50 rounded-lg overflow-hidden ${musixmatchIframeExpanded ? "fixed inset-6 md:inset-10 lg:inset-14 z-50 bg-gray-900/95 shadow-2xl p-3 flex flex-col backdrop-blur-sm" // Expanded styles : "relative flex-1" // Normal state }`, __source: { fileName: "", lineNumber: 1534, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `mb-1 flex ${musixmatchIframeExpanded ? "justify-end" : "justify-end absolute top-1 right-1 z-20"}`, __source: { fileName: "", lineNumber: 1543, columnNumber: 23 }, __self: this }, iframeUrl && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMusixmatchIframeExpanded(!musixmatchIframeExpanded), className: `p-1 px-2 text-xs rounded ${musixmatchIframeExpanded ? "bg-red-600 hover:bg-red-500" : "bg-blue-600 hover:bg-blue-500"} text-white`, title: musixmatchIframeExpanded ? "Collapse Frame" : "Expand Frame", __source: { fileName: "", lineNumber: 1552, columnNumber: 27 }, __self: this }, musixmatchIframeExpanded ? "Collapse" : "Expand")), isMusixmatchLoading && iframeUrl && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-800/50 text-gray-400 z-10", __source: { fileName: "", lineNumber: 1575, columnNumber: 25 }, __self: this }, "Loading Musixmatch..."), iframeUrl ? /*#__PURE__*/ React.createElement("iframe", { ref: iframeRef, key: iframeUrl, src: iframeUrl, className: `w-full border-0 rounded bg-white ${isMusixmatchLoading ? "opacity-50" : "opacity-100"} ${musixmatchIframeExpanded ? "flex-1" : "h-full"}`, title: "Lyrics Search", sandbox: "allow-scripts allow-same-origin allow-popups allow-forms", onLoad: handleIframeLoad, onError: handleIframeLoad, __source: { fileName: "", lineNumber: 1581, columnNumber: 25 }, __self: this }) : showLyricsControls && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-full text-gray-500", __source: { fileName: "", lineNumber: 1595, columnNumber: 27 }, __self: this }, "Search Musixmatch above...")), musixmatchIframeExpanded && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/70 z-40", onClick: ()=>setMusixmatchIframeExpanded(false), __source: { fileName: "", lineNumber: 1603, columnNumber: 23 }, __self: this })), activeTab === "search" && /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col min-h-0", __source: { fileName: "", lineNumber: 1612, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-4 flex-shrink-0", __source: { fileName: "", lineNumber: 1613, columnNumber: 21 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 1615, columnNumber: 23 }, __self: this }, " ", /*#__PURE__*/ React.createElement("input", { "aria-label": "Google Search Term", id: "google-search-term-input", type: "text", value: currentGoogleSearchTerm, onChange: (e)=>setCurrentGoogleSearchTerm(e.target.value), placeholder: "Enter search term for lyrics...", className: "flex-1 px-4 py-2 bg-white backdrop-blur-sm rounded-lg text-gray-900 placeholder-gray-500 border border-gray-300 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/30", onKeyDown: (e)=>{ if (e.key === "Enter") handleGoogleLyricsSearch(); }, __source: { fileName: "", lineNumber: 1617, columnNumber: 25 }, __self: this }), " ", /*#__PURE__*/ React.createElement("button", { onClick: handleGoogleLyricsSearch, className: "px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-lg transition-all", __source: { fileName: "", lineNumber: 1631, columnNumber: 25 }, __self: this }, "Search Google"), " "), " ", googleSearchIframeUrl && /*#__PURE__*/ React.createElement("button", { onClick: clearGoogleSearch, className: "text-xs text-gray-400 hover:text-red-400 transition-colors underline", __source: { fileName: "", lineNumber: 1639, columnNumber: 25 }, __self: this }, "Clear Search View"), " "), /*#__PURE__*/ React.createElement("div", { className: `min-h-0 border border-gray-700/50 rounded-lg overflow-hidden ${googleIframeExpanded ? "fixed inset-6 md:inset-10 lg:inset-14 z-50 bg-gray-900/95 shadow-2xl p-3 flex flex-col backdrop-blur-sm" // Expanded styles : "relative flex-1" // Normal state }`, __source: { fileName: "", lineNumber: 1648, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `mb-1 flex ${googleIframeExpanded ? "justify-end" : "justify-end absolute top-1 right-1 z-20"}`, __source: { fileName: "", lineNumber: 1657, columnNumber: 23 }, __self: this }, googleSearchIframeUrl && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGoogleIframeExpanded(!googleIframeExpanded), className: `p-1 px-2 text-xs rounded ${googleIframeExpanded ? "bg-red-600 hover:bg-red-500" : "bg-blue-600 hover:bg-blue-500"} text-white`, title: googleIframeExpanded ? "Collapse Frame" : "Expand Frame", __source: { fileName: "", lineNumber: 1666, columnNumber: 27 }, __self: this }, googleIframeExpanded ? "Collapse" : "Expand")), googleSearchIframeUrl ? /*#__PURE__*/ React.createElement("iframe", { key: googleSearchIframeUrl, src: googleSearchIframeUrl, className: `w-full border-0 bg-white ${googleIframeExpanded ? "flex-1" : "h-full"}`, title: "Google Lyrics Search", sandbox: "allow-scripts allow-same-origin allow-popups allow-forms", onError: (e)=>{ console.error("GSearch Iframe error:", e); setGoogleSearchIframeUrl(""); alert("Google Search frame blocked."); }, __source: { fileName: "", lineNumber: 1687, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-full text-gray-500 p-4 text-center", __source: { fileName: "", lineNumber: 1702, columnNumber: 25 }, __self: this }, " ", "Enter search term. ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 1704, columnNumber: 46 }, __self: this }), " ", /*#__PURE__*/ React.createElement("span", { className: "text-xs mt-2 block", __source: { fileName: "", lineNumber: 1705, columnNumber: 27 }, __self: this }, "(Note: Google often blocks frame loading.)"), " ")), googleIframeExpanded && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/70 z-40", onClick: ()=>setGoogleIframeExpanded(false), __source: { fileName: "", lineNumber: 1713, columnNumber: 23 }, __self: this })), activeTab === "translate" && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 space-y-4 pt-1", __source: { fileName: "", lineNumber: 1722, columnNumber: 19 }, __self: this }, error && activeTab === "translate" && /*#__PURE__*/ React.createElement("div", { role: "alert", className: "p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-200 text-sm flex-shrink-0", __source: { fileName: "", lineNumber: 1724, columnNumber: 23 }, __self: this }, error), saveStatus && /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg text-xs flex-shrink-0 ${saveStatus.startsWith("Error") || saveStatus.startsWith("Fail") ? "bg-red-500/10 border border-red-500/30 text-red-200" : "bg-green-500/10 border border-green-500/30 text-green-200"}`, __source: { fileName: "", lineNumber: 1732, columnNumber: 23 }, __self: this }, saveStatus), interleavedLyrics.length === 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1 min-h-0", __source: { fileName: "", lineNumber: 1745, columnNumber: 25 }, __self: this }, " ", /*#__PURE__*/ React.createElement("label", { htmlFor: "original-lyrics-input", className: "block text-sm font-medium text-gray-300 mb-1 flex-shrink-0", __source: { fileName: "", lineNumber: 1747, columnNumber: 27 }, __self: this }, "Original Lyrics"), " ", /*#__PURE__*/ React.createElement("textarea", { id: "original-lyrics-input", value: sourceLyrics, onChange: (e)=>setSourceLyrics(e.target.value), placeholder: "Enter or paste lyrics here to translate...", className: "w-full flex-1 px-3 py-2 bg-gray-900/50 backdrop-blur-sm rounded-lg text-gray-100 placeholder-gray-500 border border-gray-700/50 focus:border-blue-500/50 focus:outline-none focus:ring-1 focus:ring-blue-500/30 resize-none overflow-y-auto", style: { minHeight: "150px" }, __source: { fileName: "", lineNumber: 1753, columnNumber: 27 }, __self: this }), " "), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, disabled: isTranslating || !sourceLyrics.trim() || !IS_MS_KEY_CONFIGURED, title: !IS_MS_KEY_CONFIGURED ? "Translator API key not configured" : "Translate lyrics to English", className: "w-full px-4 py-2 bg-gradient-to-r from-teal-600 to-cyan-600 hover:from-teal-500 hover:to-cyan-500 text-white rounded-lg transition-colors duration-200 transform hover:scale-[1.02] disabled:opacity-50 disabled:hover:scale-100 shadow-md shadow-cyan-500/20 font-semibold flex items-center justify-center gap-2 flex-shrink-0", __source: { fileName: "", lineNumber: 1762, columnNumber: 25 }, __self: this }, " ", isTranslating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-t-transparent border-white rounded-full animate-spin", __source: { fileName: "", lineNumber: 1779, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1780, columnNumber: 31 }, __self: this }, "Translating...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 1784, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M3 5h12M9 3v2m1.06 7.94l-2.12 2.12M12 21a9 9 0 110-18 9 9 0 010 18zM12 3v2m0 16v2m-7.07-4.93l2.12-2.12M17.66 6.34L15.54 8.46", __source: { fileName: "", lineNumber: 1790, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1797, columnNumber: 31 }, __self: this }, "Translate to English")), " "), !IS_MS_KEY_CONFIGURED && /*#__PURE__*/ React.createElement("p", { className: "text-xs text-center text-yellow-400 flex-shrink-0", __source: { fileName: "", lineNumber: 1802, columnNumber: 27 }, __self: this }, "MS Translator API key needed.")) : /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col min-h-0", __source: { fileName: "", lineNumber: 1808, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-2 flex-shrink-0 gap-2 flex-wrap", __source: { fileName: "", lineNumber: 1809, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1810, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400", __source: { fileName: "", lineNumber: 1811, columnNumber: 29 }, __self: this }, "Translation"), detectedLanguage && /*#__PURE__*/ React.createElement("span", { className: "block text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 1815, columnNumber: 31 }, __self: this }, "(Detected: ", detectedLanguage.toUpperCase(), detectedLangConfidence !== null ? ` - ${Math.round(detectedLangConfidence * 100)}%` : "", ")")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end gap-2", __source: { fileName: "", lineNumber: 1827, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 flex-shrink-0", __source: { fileName: "", lineNumber: 1828, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: copyInterleavedLyrics, className: `px-3 py-1 text-xs ${copySuccess ? "bg-green-600" : "bg-blue-700 hover:bg-blue-600"} text-white rounded-md transition-colors flex items-center gap-1`, title: "Copy translation", __source: { fileName: "", lineNumber: 1829, columnNumber: 31 }, __self: this }, " ", /*#__PURE__*/ React.createElement("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 16 16", __source: { fileName: "", lineNumber: 1839, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("path", { fillRule: "evenodd", d: "M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z", __source: { fileName: "", lineNumber: 1844, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z", __source: { fileName: "", lineNumber: 1848, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z", __source: { fileName: "", lineNumber: 1849, columnNumber: 35 }, __self: this })), " ", copySuccess ? "Copied!" : "Copy"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSaveTranslation(sourceLyrics, translatedLyrics, detectedLanguage), disabled: isSaving || !videoId || !videoTitle, className: "px-3 py-1 text-xs bg-green-700 hover:bg-green-600 text-white rounded-md transition-colors flex items-center gap-1 disabled:opacity-50", title: !videoId || !videoTitle ? "Video info missing" : "Save translation", __source: { fileName: "", lineNumber: 1853, columnNumber: 31 }, __self: this }, " ", isSaving ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 border-2 border-t-transparent border-white rounded-full animate-spin mr-1", __source: { fileName: "", lineNumber: 1872, columnNumber: 37 }, __self: this }), "Saving...") : "Save"), /*#__PURE__*/ React.createElement("button", { onClick: clearTranslation, className: "px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-md transition-colors", title: "Clear translation", __source: { fileName: "", lineNumber: 1879, columnNumber: 31 }, __self: this }, "Clear")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-1 w-full justify-end flex-wrap", __source: { fileName: "", lineNumber: 1887, columnNumber: 29 }, __self: this }, " ", /*#__PURE__*/ React.createElement("button", { onClick: toggleAutoScroll, className: `px-3 py-1 text-xs rounded-md transition-colors flex items-center gap-1 ${isAutoScrolling ? "bg-red-600 hover:bg-red-500 text-white" : "bg-gray-600 hover:bg-gray-500 text-gray-200"}`, __source: { fileName: "", lineNumber: 1890, columnNumber: 31 }, __self: this }, isAutoScrolling ? "Stop Scroll" : "Auto Scroll"), isAutoScrolling && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1 text-xs bg-gray-700/50 p-1 rounded-md", __source: { fileName: "", lineNumber: 1903, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrollSpeed("slow", true), className: `px-2 py-0.5 rounded ${scrollSpeedSetting === "slow" ? "bg-blue-600 text-white" : "bg-gray-600 hover:bg-gray-500 text-gray-300"}`, title: "Slow Speed", __source: { fileName: "", lineNumber: 1904, columnNumber: 35 }, __self: this }, "S"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrollSpeed("medium", true), className: `px-2 py-0.5 rounded ${scrollSpeedSetting === "medium" ? "bg-blue-600 text-white" : "bg-gray-600 hover:bg-gray-500 text-gray-300"}`, title: "Medium Speed", __source: { fileName: "", lineNumber: 1915, columnNumber: 35 }, __self: this }, "M"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrollSpeed("fast", true), className: `px-2 py-0.5 rounded ${scrollSpeedSetting === "fast" ? "bg-blue-600 text-white" : "bg-gray-600 hover:bg-gray-500 text-gray-300"}`, title: "Fast Speed", __source: { fileName: "", lineNumber: 1928, columnNumber: 35 }, __self: this }, "F"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "100", value: scrollSliderValue, onChange: (e)=>setScrollSpeed(e.target.value, false), className: "w-20 h-2 bg-gray-500 rounded-lg appearance-none cursor-pointer accent-blue-500", title: `Scroll Speed: ${scrollSliderValue}`, __source: { fileName: "", lineNumber: 1939, columnNumber: 35 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { ref: lyricsScrollRef, className: "flex-1 overflow-y-auto space-y-3 pr-2 border border-gray-700/50 rounded-lg p-3 bg-gray-900/20", __source: { fileName: "", lineNumber: 1955, columnNumber: 25 }, __self: this }, interleavedLyrics.map((pair)=>/*#__PURE__*/ React.createElement("div", { key: pair.id, className: "border-b border-gray-700/50 pb-2 last:border-b-0", __source: { fileName: "", lineNumber: 1960, columnNumber: 29 }, __self: this }, " ", /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm font-light whitespace-pre-wrap break-words", __source: { fileName: "", lineNumber: 1965, columnNumber: 31 }, __self: this }, pair.original || "\u00A0"), " ", /*#__PURE__*/ React.createElement("p", { className: "text-blue-300 text-sm mt-1 ml-2 whitespace-pre-wrap break-words", __source: { fileName: "", lineNumber: 1968, columnNumber: 31 }, __self: this }, pair.translated || "\u00A0"), " "))))), activeTab === "manual" && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 space-y-4 pt-1", __source: { fileName: "", lineNumber: 1980, columnNumber: 19 }, __self: this }, " ", saveStatus && /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg text-xs flex-shrink-0 ${saveStatus.startsWith("Error") || saveStatus.startsWith("Fail") ? "bg-red-500/10 border border-red-500/30 text-red-200" : "bg-green-500/10 border border-green-500/30 text-green-200"}`, __source: { fileName: "", lineNumber: 1983, columnNumber: 23 }, __self: this }, saveStatus), " ", /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col min-h-0", __source: { fileName: "", lineNumber: 1994, columnNumber: 21 }, __self: this }, " ", /*#__PURE__*/ React.createElement("label", { htmlFor: "manual-lyrics-input", className: "block text-sm font-medium text-gray-300 mb-1 flex-shrink-0", __source: { fileName: "", lineNumber: 1996, columnNumber: 23 }, __self: this }, "Lyrics (Paste to save/copy)"), " ", /*#__PURE__*/ React.createElement("textarea", { id: "manual-lyrics-input", value: manualLyrics, onChange: (e)=>setManualLyrics(e.target.value), placeholder: "Paste lyrics here...", className: "w-full flex-1 px-3 py-2 bg-gray-900/50 backdrop-blur-sm rounded-lg text-gray-100 placeholder-gray-500 border border-gray-700/50 focus:border-blue-500/50 focus:outline-none focus:ring-1 focus:ring-blue-500/30 resize-none overflow-y-auto", style: { minHeight: "150px" }, __source: { fileName: "", lineNumber: 2002, columnNumber: 23 }, __self: this }), " ", /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2 flex-shrink-0", __source: { fileName: "", lineNumber: 2010, columnNumber: 23 }, __self: this }, " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSaveTranslation(manualLyrics, "", ""), disabled: isSaving || !videoId || !videoTitle || !manualLyrics.trim(), className: "px-3 py-1 text-xs bg-green-700 hover:bg-green-600 text-white rounded-md transition-colors flex items-center gap-1 disabled:opacity-50", title: !videoId || !videoTitle ? "Video info missing" : !manualLyrics.trim() ? "No lyrics to save" : "Save manual lyrics", __source: { fileName: "", lineNumber: 2012, columnNumber: 25 }, __self: this }, " ", isSaving ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 border-2 border-t-transparent border-white rounded-full animate-spin mr-1", __source: { fileName: "", lineNumber: 2034, columnNumber: 31 }, __self: this }), "Saving...") : "Save Manual Lyrics", " "), " "), " "), " ")))), isFullscreen && /*#__PURE__*/ React.createElement("button", { onClick: toggleFullscreen, className: "fixed top-4 right-4 p-3 bg-black/50 hover:bg-black/70 rounded-full transition-all z-[60]", title: "Exit Fullscreen", "aria-label": "Exit Fullscreen", __source: { fileName: "", lineNumber: 2050, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 2056, columnNumber: 15 }, __self: this }, " ", /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 2063, columnNumber: 17 }, __self: this }), " "))), " ", showSavedLyricsModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-[70] flex items-center justify-center bg-black/70 backdrop-blur-sm p-4", onClick: closeSavedLyricsModal, "aria-modal": "true", role: "dialog", __source: { fileName: "", lineNumber: 2076, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[80vh] flex flex-col text-gray-100", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 2082, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4 flex-shrink-0", __source: { fileName: "", lineNumber: 2086, columnNumber: 15 }, __self: this }, " ", /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400", __source: { fileName: "", lineNumber: 2088, columnNumber: 17 }, __self: this }, "Saved Translations"), " ", /*#__PURE__*/ React.createElement("button", { onClick: closeSavedLyricsModal, className: "p-1 rounded-full hover:bg-gray-700 text-gray-400 hover:text-gray-100 transition-colors", "aria-label": "Close modal", __source: { fileName: "", lineNumber: 2091, columnNumber: 17 }, __self: this }, " ", /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 2097, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 2103, columnNumber: 21 }, __self: this })), " "), " "), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex-shrink-0", __source: { fileName: "", lineNumber: 2112, columnNumber: 15 }, __self: this }, " ", /*#__PURE__*/ React.createElement("input", { type: "text", "aria-label": "Search saved translations", placeholder: "Search saved by title...", value: modalSearchQuery, onChange: (e)=>setModalSearchQuery(e.target.value), className: "w-full px-3 py-2 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-md border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", __source: { fileName: "", lineNumber: 2114, columnNumber: 17 }, __self: this }), " "), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto pr-2", __source: { fileName: "", lineNumber: 2123, columnNumber: 15 }, __self: this }, isLoadingAllSaved ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-10", __source: { fileName: "", lineNumber: 2125, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block w-6 h-6 border-4 border-t-transparent border-blue-400 rounded-full animate-spin", __source: { fileName: "", lineNumber: 2126, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 2127, columnNumber: 21 }, __self: this }, "Loading...")) : savedLyricsError ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-10 text-red-400", __source: { fileName: "", lineNumber: 2130, columnNumber: 19 }, __self: this }, savedLyricsError) : filteredTranslations.length === 0 && modalSearchQuery ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-10 text-gray-500", __source: { fileName: "", lineNumber: 2134, columnNumber: 19 }, __self: this }, "No matches found.") : filteredTranslations.length === 0 && !isLoadingAllSaved ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-10 text-gray-500", __source: { fileName: "", lineNumber: 2138, columnNumber: 19 }, __self: this }, "No translations saved.") : /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 2142, columnNumber: 19 }, __self: this }, " ", filteredTranslations.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: item.videoId + "-" + index, className: "p-3 bg-gray-700/50 rounded-md border border-gray-600/50 hover:bg-gray-700/70 transition-colors cursor-pointer", onClick: ()=>handleSavedLyricClick(item), title: `Load: ${item.videoTitle || item.videoId}`, __source: { fileName: "", lineNumber: 2145, columnNumber: 23 }, __self: this }, " ", /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-100 truncate", title: item.videoTitle, __source: { fileName: "", lineNumber: 2152, columnNumber: 25 }, __self: this }, item.videoTitle || `Video ID: ${item.videoId}`), " ", /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 2158, columnNumber: 25 }, __self: this }, " ", item.sourceLanguage ? `Src: ${item.sourceLanguage.toUpperCase()} | ` : "", " ", "Saved:", " ", item.savedAt ? new Date(item.savedAt).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" }) : "N/A", " "), " ")), " ")), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-4 flex-shrink-0", __source: { fileName: "", lineNumber: 2176, columnNumber: 15 }, __self: this }, "Note: Backend needed for persistence."))), " "), " ") // End Component Root ; } // End MainComponent Function // NO export default MainComponent;