const { useState, useEffect, useRef, useCallback } = React; const API_BASE = ""; const MOD_CODE = "filmscout-mod-2025"; const SK = "SKIP", MU = "MUTE", HU = "HEADS UP", GL = "ALL CLEAR"; const STYLE_D = { SKIP: { bg:"#1a0808", border:"#dc2626", text:"#fca5a5", badge:"#dc2626", badgeText:"#fff" }, MUTE: { bg:"#160d02", border:"#ea580c", text:"#fdba74", badge:"#ea580c", badgeText:"#fff" }, "HEADS UP": { bg:"#111008", border:"#b45309", text:"#fcd34d", badge:"#d97706", badgeText:"#000" }, "ALL CLEAR": { bg:"#061208", border:"#22c55e", text:"#86efac", badge:"#22c55e", badgeText:"#000" }, }; const STYLE_L = { SKIP: { bg:"#fff1f1", border:"#dc2626", text:"#b91c1c", badge:"#dc2626", badgeText:"#fff" }, MUTE: { bg:"#fff5ee", border:"#ea580c", text:"#c2410c", badge:"#ea580c", badgeText:"#fff" }, "HEADS UP": { bg:"#fffbeb", border:"#b45309", text:"#92400e", badge:"#d97706", badgeText:"#000" }, "ALL CLEAR": { bg:"#f0fdf4", border:"#22c55e", text:"#166534", badge:"#22c55e", badgeText:"#000" }, }; const ICON = { SKIP:"⏭", MUTE:"πŸ”‡", "HEADS UP":"⚠️", "ALL CLEAR":"βœ…" }; const LABEL = { SKIP:"Skip to", MUTE:"Unmute at", "HEADS UP":"Safe at", "ALL CLEAR":"Safe until" }; const fmt = s => { const t=Math.max(0,Math.floor(s)),h=Math.floor(t/3600),m=Math.floor((t%3600)/60),sc=t%60; return h ? `${h}:${String(m).padStart(2,"0")}:${String(sc).padStart(2,"0")}` : `${String(m).padStart(2,"0")}:${String(sc).padStart(2,"0")}`; }; const resolveTs = (sc, platform) => { if (!sc.platform_ts) return { s: sc.s||0, e: sc.e||0 }; return sc.platform_ts[platform] || sc.platform_ts["default"] || { s: sc.s||0, e: sc.e||0 }; }; function createAlarm(onBlocked) { let ctx = null, blocked = false; function init() { if (ctx || blocked) return; try { ctx = new (window.AudioContext || window.webkitAudioContext)(); const osc = ctx.createOscillator(), g = ctx.createGain(); g.gain.value = 0.00001; osc.connect(g); g.connect(ctx.destination); osc.start(); if (ctx.state === "suspended") ctx.resume(); } catch(e) { blocked = true; if (onBlocked) onBlocked(); } } function beep(freq, t, dur, vol=0.4) { if (!ctx || blocked) return; try { const o=ctx.createOscillator(), g=ctx.createGain(); o.frequency.value=freq; g.gain.setValueAtTime(vol,t); g.gain.exponentialRampToValueAtTime(0.001,t+dur); o.connect(g); g.connect(ctx.destination); o.start(t); o.stop(t+dur+0.05); } catch(e) {} } return { init, isBlocked: ()=>blocked, warning() { const t=ctx?.currentTime||0; beep(880,t,0.18); beep(880,t+0.28,0.18); }, active() { const t=ctx?.currentTime||0; beep(1100,t,0.12,0.5); beep(1100,t+0.18,0.12,0.5); beep(1100,t+0.36,0.12,0.5); }, }; } const GENRES = ["All","Action","Sci-Fi","Horror","Comedy","Drama","Fantasy","Musical","War","Romance"]; const SERVICES = ["All","Disney+","Netflix","Max","Prime Video","Paramount+","Apple TV+","Hulu","Peacock"]; const GENRE_COLOR = { "All":["#94a3b8","transparent","#334155"],"Action":["#fca5a5","#3f0f0f","#dc2626"], "Sci-Fi":["#93c5fd","#0c1a3f","#3b82f6"],"Horror":["#86efac","#061a0f","#22c55e"], "Comedy":["#fde68a","#2d1f03","#f59e0b"],"Drama":["#d8b4fe","#1e0d3f","#a855f7"], "Fantasy":["#67e8f9","#031a20","#06b6d4"],"Musical":["#f9a8d4","#2d0a1a","#ec4899"], "War":["#cbd5e1","#1a1f2e","#64748b"],"Romance":["#fda4af","#2d0a10","#f43f5e"], }; const SVC = { "All": ["#94a3b8","transparent","#334155","","transparent","#334155"], "Disney+": ["#93c5fd","#0a1535","#1d4ed8","🏰","#eff6ff","#1e40af"], "Netflix": ["#fca5a5","#2d0505","#dc2626","🎬","#fff1f1","#991b1b"], "Max": ["#c4b5fd","#160d35","#7c3aed","〽️","#faf5ff","#5b21b6"], "Prime Video":["#67e8f9","#031520","#0891b2","πŸ“¦","#ecfeff","#155e75"], "Paramount+": ["#fde68a","#1f1503","#ca8a04","⛰️","#fffbeb","#92400e"], "Apple TV+": ["#6b7280","#111318","#6b7280","🍎","#f3f4f6","#374151"], "Hulu": ["#86efac","#031a0a","#16a34a","πŸ’š","#f0fdf4","#166534"], "Peacock": ["#f97316","#1a0d03","#ea580c","🦚","#fff7ed","#9a3412"], }; const getSVC = (sv, isDark) => { const s = SVC[sv] || ["#94a3b8","transparent","#334155","","transparent","#334155"]; return [isDark ? s[0] : s[5], isDark ? s[1] : s[4], s[2], s[3]]; }; const genreOf = m => m.genre.split(/[Β·,\/]/)[0].trim(); const getFingerprint = () => { try { const n = navigator.userAgent + navigator.language + screen.width + screen.height; let h = 0; for (let i=0;i getFingerprint(); const apiFetch = (path, opts={}) => { const jwt = (() => { try { return localStorage.getItem("fs_jwt"); } catch(e) { return null; } })(); const headers = { "Content-Type":"application/json", ...(jwt ? {"Authorization":"Bearer "+jwt} : {}), ...(opts.headers||{}) }; return fetch(API_BASE + path, { ...opts, headers }); }; // ───────────────────────────────────────────────────────────────────────────── const IC = { home: , settings: , film: , search: , close: , arrowR: , resync: , check: , shield: , user: , star: , pencil: , share: , }; function Logo({ size }) { const s = size || 28; return FilmScout; } function Badge({ type, isDark }) { if (type === "mod") return {IC.shield} Mod Verified; if (type === "pro") return {IC.star} Pro Verified; if (type === "user") return {IC.user} User Edited - Needs Pro Review; return null; } function SceneRow({ sc, platform, onEdit, T, isDark }) { const st = (isDark?STYLE_D:STYLE_L)[sc.a], ts = resolveTs(sc, platform); return (
{ICON[sc.a]} {sc.a}
{sc.t}
{fmt(ts.s)} β†’
{fmt(ts.e)}
{onEdit && }
{sc.d &&
{sc.d}
}
); } function MovieCard({ movie, onSelect, locked, isGuestMovie, T, isDark }) { const flagged = movie.scenes.filter(s=>s.a!==GL); const skip=flagged.filter(s=>s.a===SK).length, mute=flagged.filter(s=>s.a===MU).length, warn=flagged.filter(s=>s.a===HU).length; const hues = {Action:"#ef4444","Sci-Fi":"#f97316",Horror:"#22c55e",Comedy:"#f59e0b",Drama:"#a855f7",Fantasy:"#06b6d4",Musical:"#f472b6",War:"#94a3b8",Romance:"#ec4899"}; const accent = hues[genreOf(movie)]||"#f97316"; return (
onSelect(movie)} style={{background:T.surface,border:"1px solid "+T.border,borderRadius:12,overflow:"hidden",cursor:"pointer",transition:"transform 0.15s, box-shadow 0.15s"}} onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow="0 6px 24px "+accent+"20";}} onMouseLeave={e=>{e.currentTarget.style.transform="";e.currentTarget.style.boxShadow="";}}>
{movie.title}{movie.sub&& {movie.sub}}
{movie.year}
{movie.genre} Β· {movie.year} {movie.rating&&{movie.rating}}
{skip>0&&⏭ {skip}} {mute>0&&πŸ”‡ {mute}} {warn>0&&⚠️ {warn}}
{locked ? (
β–Ά 7-Day Free Trial or 1 free as guest
) : isGuestMovie ? (
βœ“ Guest preview
) : (
β–Ά Watch
)} {(movie.stream||[]).length>0&&(
{(movie.stream||[]).map(sv=>{ const [ct,cb,cbr,icon]=getSVC(sv,isDark); return {icon&&{icon}}{sv}; })}
)}
); } function Sheet({children, onClose, borderColor, T}) { return (
{children}
); } function CloseBtn({onClose, T}) { return ; } function FilmScout() { const [phase,setPhase] = useState("home"); const [movie,setMovie] = useState(null); const [search,setSearch] = useState(""); const [genre,setGenre] = useState([]); const [service,setService] = useState([]); const [filterAct,setFilterAct] = useState([]); const [scenesOpen,setScenesOpen] = useState(false); const [showGreen,setShowGreen] = useState(false); const [elapsed,setElapsed] = useState(0); const [playing,setPlaying] = useState(false); const [alertScene,setAlertScene] = useState(null); const [confirmLeave,setConfirmLeave] = useState(false); const [confirmClear,setConfirmClear] = useState(false); const [dismissed,setDismissed] = useState(new Set()); const [toast,setToast] = useState(null); const [alarmOn,setAlarmOn] = useState(()=>{ try{return localStorage.getItem('fs_alarm')!=='0';}catch(e){return true;} }); const [vibrationOn,setVibrationOn] = useState(()=>{ try{return localStorage.getItem('fs_vib')!=='0';}catch(e){return true;} }); const [warnAhead,setWarnAhead] = useState(()=>{ try{return parseInt(localStorage.getItem('fs_warn')||'30');}catch(e){return 30;} }); const [resyncOpen,setResyncOpen] = useState(false); const [isPro,setIsPro] = useState(false); const [isBetaFree,setIsBetaFree] = useState(false); const [trialActive,setTrialActive] = useState(false); const [currentUser,setCurrentUser] = useState(null); const [isGuest,setIsGuest] = useState(false); const [guestMovieId,setGuestMovieId] = useState(()=>{ try{return localStorage.getItem("fs_gm")||null;}catch(e){return null;} }); useEffect(()=>{ if(guestMovieId) return; const fp = getFP(); apiFetch("/api/guest?fp="+encodeURIComponent(fp)) .then(r=>r.json()).then(d=>{ if(d.movieId){ setGuestMovieId(d.movieId); try{localStorage.setItem("fs_gm",d.movieId);}catch(e){} } }) .catch(()=>{}); },[]); const [feedbackOpen,setFeedbackOpen] = useState(false); const [feedbackCategory,setFeedbackCategory] = useState(""); const [feedbackText,setFeedbackText] = useState(""); const [feedbackDone,setFeedbackDone] = useState(false); const [feedbackSubmitting,setFeedbackSubmitting] = useState(false); const [requestOpen,setRequestOpen] = useState(false); const [requestText,setRequestText] = useState(""); const [requestDone,setRequestDone] = useState(false); const [theme,setTheme] = useState("dark"); const [highContrast,setHighContrast] = useState(false); const [upgradeOpen,setUpgradeOpen] = useState(false); const [checkoutLoading,setCheckoutLoading] = useState(null); // "monthly" | "annual" | null const [showDisclaimer,setShowDisclaimer] = useState(()=>{ try{return!localStorage.getItem('fs_disc');}catch(e){return true;} }); const [manualTime,setManualTime] = useState(""); const [resyncTime,setResyncTime] = useState(""); const [platform,setPlatform] = useState(""); const [movies,setMovies] = useState([]); const [loading,setLoading] = useState(true); const [pendingMovie,setPendingMovie] = useState(null); const [tsOpen,setTsOpen] = useState(false); const [tsScene,setTsScene] = useState(null); const [tsPlatform,setTsPlatform] = useState(""); const [tsType,setTsType] = useState([]); const [tsStart,setTsStart] = useState(""); const [tsEnd,setTsEnd] = useState(""); const [tsNeighbors,setTsNeighbors] = useState({prev:null,next:null}); const [corrections,setCorrections] = useState(()=>{ try{return JSON.parse(localStorage.getItem("fs_c")||"[]");}catch(e){return[];} }); const [isMod,setIsMod] = useState(()=>{ try{return localStorage.getItem("fs_mod")==="1";}catch(e){return false;} }); const [modCodeInput,setModCodeInput] = useState(""); const [modCodeError,setModCodeError] = useState(false); const refCode = (() => { try { const fp=getFP(); return "FS"+Math.abs(parseInt(fp.replace("fp_",""),36)).toString(36).toUpperCase().slice(0,6); } catch(e){return "FSGUEST";} })(); const refUrl = "https://getfilmscout.com?ref="+refCode; const [refCount,setRefCount] = useState(()=>{ try{return parseInt(localStorage.getItem("fs_rc")||"0");}catch(e){return 0;} }); const [loginOpen,setLoginOpen] = useState(false); const [loginMode,setLoginMode] = useState(null); const [loginTab,setLoginTab] = useState("social"); const [emailInput,setEmailInput] = useState(""); const [passInput,setPassInput] = useState(""); const [emailError,setEmailError] = useState(""); const [trialUsed,setTrialUsed] = useState(()=>{ try{const fp=getFP();return !!(JSON.parse(localStorage.getItem("fs_t")||"{}")[fp]);}catch(e){return false;} }); const [username,setUsername] = useState(null); const [oldUsernames,setOldUsernames] = useState([]); const [oldEmails,setOldEmails] = useState([]); const [hasPassword,setHasPassword] = useState(false); const [unameEdit,setUnameEdit] = useState(false); const [unameInput,setUnameInput] = useState(""); const [unameExpanded,setUnameExpanded] = useState(false); const [emailEdit,setEmailEdit] = useState(false); const [emailInput2,setEmailInput2] = useState(""); const [emailExpanded,setEmailExpanded] = useState(false); const [pwModal,setPwModal] = useState(false); const [pwCurrentInput,setPwCurrentInput] = useState(""); const [pwNewInput,setPwNewInput] = useState(""); const [pwConfirmInput,setPwConfirmInput] = useState(""); const [pwSaving,setPwSaving] = useState(false); const [refUserId] = useState(()=>{ try{ const p=new URLSearchParams(window.location.search); const r=p.get('ref'); if(r){try{localStorage.setItem('fs_ref',r);}catch(e){} return r;} return localStorage.getItem('fs_ref')||null; }catch(e){return null;} }); const [unamePromptOpen,setUnamePromptOpen] = useState(false); const [unamePromptMode,setUnamePromptMode] = useState(null); const [unamePromptInput,setUnamePromptInput] = useState(""); const [deleteConfirmOpen,setDeleteConfirmOpen] = useState(false); const [deleteConfirmInput,setDeleteConfirmInput] = useState(""); const refreshUserData = async () => { try { const r = await apiFetch("/api/auth/me"); const data = await r.json(); if (!data.user) return; setCurrentUser(data.user); setUsername(data.user.username || null); setOldUsernames(data.user.old_usernames || []); setOldEmails(data.user.old_emails || []); setHasPassword(!!data.user.has_password); if (data.plan === "pro") setIsPro(true); else if (data.plan === "trial") setTrialActive(true); else if (data.plan === "beta_free") setIsBetaFree(true); } catch(e) {} }; useEffect(()=>{ refreshUserData(); },[]); useEffect(()=>{ fetch("/api/movies") .then(r=>r.json()) .then(data=>{ setMovies(Array.isArray(data)?data:[]); setLoading(false); }) .catch(()=>setLoading(false)); },[]); // Handle Stripe return β€” ?payment=success cleans URL and waits for webhook to update JWT useEffect(()=>{ try { const params = new URLSearchParams(window.location.search); const payment = params.get("payment"); if (payment === "success") { // Clean URL window.history.replaceState({}, "", window.location.pathname); // Poll for updated JWT up to 10s (webhook may take a moment) let attempts = 0; const poll = setInterval(async () => { attempts++; try { const res = await apiFetch("/api/auth/me"); const data = await res.json(); if (data.plan === "pro") { if (data.token) { try { localStorage.setItem("fs_jwt", data.token); } catch(e) {} } setIsPro(true); setUpgradeOpen(false); showToast("πŸŽ‰ FilmScout Pro activated!","#22c55e"); clearInterval(poll); } } catch(e) {} if (attempts >= 10) { clearInterval(poll); showToast("Payment received β€” sign in to activate Pro","#d45b17"); } }, 1000); } else if (payment === "cancelled") { window.history.replaceState({}, "", window.location.pathname); showToast("Checkout cancelled","#94a3b8"); } // Handle Google OAuth return const auth = params.get("auth"); if (auth === "success") { const hash = window.location.hash; const token = hash.match(/token=([^&]+)/)?.[1]; window.history.replaceState({}, "", window.location.pathname); if (token) { try { localStorage.setItem("fs_jwt", token); } catch(e) {} try { const parts = token.split("."); const payload = JSON.parse(atob(parts[1].replace(/-/g,"+").replace(/_/g,"/"))); if (payload.email) setCurrentUser({email: payload.email}); if (payload.plan === "pro") { setIsPro(true); showToast("Welcome back β€” FilmScout Pro!","#22c55e"); } else if (payload.plan === "beta_free") { setIsBetaFree(true); showToast("Signed in with Google βœ“", "#22c55e"); } else { showToast("Signed in with Google βœ“", "#22c55e"); } } catch(e) {} setLoginOpen(false); } } else if (auth === "error") { window.history.replaceState({}, "", window.location.pathname); showToast("Sign in failed β€” please try again","#f87171"); } else if (auth === "cancelled") { window.history.replaceState({}, "", window.location.pathname); } } catch(e) {} },[]); const startRef=useRef(null), pausedRef=useRef(null), totalPausedRef=useRef(0); const playingRef=useRef(false), alarmRef=useRef(true), vibrationRef=useRef(true), timerRef=useRef(null), lastAlertRef=useRef(null), warnAheadRef=useRef(30); useEffect(()=>{playingRef.current=playing;},[playing]); useEffect(()=>{ alarmRef.current=alarmOn; try{localStorage.setItem('fs_alarm',alarmOn?'1':'0');}catch(e){}; },[alarmOn]); useEffect(()=>{ vibrationRef.current=vibrationOn; try{localStorage.setItem('fs_vib',vibrationOn?'1':'0');}catch(e){}; },[vibrationOn]); useEffect(()=>{ warnAheadRef.current=warnAhead; try{localStorage.setItem('fs_warn',String(warnAhead));}catch(e){}; },[warnAhead]); const showToast = (msg,color) => { setToast({msg,color:color||"#d45b17"}); setTimeout(()=>setToast(null),2800); }; const alarmRef2=useRef(null); if(!alarmRef2.current) alarmRef2.current=createAlarm(()=>showToast("Audio blocked - tap screen to enable","#f87171")); const alarm=alarmRef2.current; useEffect(()=>{ if(playing){ timerRef.current=setInterval(()=>{ const s=(Date.now()-startRef.current-totalPausedRef.current)/1000; setElapsed(Math.min(s,movie?.rt??99999)); },100); } else clearInterval(timerRef.current); return ()=>clearInterval(timerRef.current); },[playing,movie]); const sysDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? true; const isDark = theme==="dark"||(theme==="system"&&sysDark); const hc = highContrast; const T = isDark ? { bg:hc?"#000":"#0d1117", surface:hc?"#0a0e14":"#0c1219", surface2:hc?"#000":"#0f0500", border:hc?"#3d5166":"#1e293b", border2:hc?"#7a3000":"#431407", text:hc?"#fff":"#f1f5f9", textMuted:hc?"#c8daea":"#94a3b8", textDim:hc?"#b0cce0":"#94afc7", textFaint:hc?"#90b4ca":"#7e95a8", accent:"#d45b17", accentLt:hc?"#ffe5c0":"#fed7aa", accentDk:"#c2410c", accentBg:hc?"#130800":"#1a0900", grad:"linear-gradient(135deg,#ff8f3c 0%,#d45b17 100%)", headerBg:hc?"#000":"#0d1117", headerBd:hc?"#3a1800":"#1a0900", sheetBg:hc?"#0a0800":"#130800", inputBg:hc?"#0a0800":"#130800", } : { bg:hc?"#fff":"#f8fafc", surface:hc?"#f0f4f8":"#fff", surface2:hc?"#e2e8f0":"#f1f5f9", border:hc?"#475569":"#e2e8f0", border2:hc?"#9a3412":"#fed7aa", text:hc?"#000":"#0f172a", textMuted:hc?"#1e293b":"#475569", textDim:hc?"#1e3a50":"#475569", textFaint:hc?"#2d4a60":"#64748b", accent:"#d45b17", accentLt:hc?"#7c2d12":"#9a3412", accentDk:"#c2410c", accentBg:hc?"#fff7ed":"#fff7ed", grad:"linear-gradient(135deg,#ff8f3c 0%,#d45b17 100%)", headerBg:hc?"#fff":"#fff", headerBd:hc?"#cbd5e1":"#e2e8f0", sheetBg:hc?"#f8fafc":"#fff", inputBg:hc?"#f0f4f8":"#f8fafc", }; useEffect(()=>{ if(phase!=="playing"||!movie) return; let found=null; for(const sc of movie.scenes){ if(dismissed.has(sc.id)) continue; const ts=resolveTs(sc,platform), d=ts.s-elapsed; if(elapsed>=ts.s&&elapsed<=ts.e){ found={...sc,...ts,mode:"active"}; break; } if(d>0&&d<=warnAheadRef.current){ found={...sc,...ts,mode:"warning",countdown:Math.ceil(d)}; break; } } setAlertScene(found||null); if(found&&found.id!==lastAlertRef.current&&alarmRef.current){ lastAlertRef.current=found.id; if(found.mode==="warning"){ alarm.warning(); if(vibrationRef.current&&navigator.vibrate) navigator.vibrate([150,80,150]); } if(found.mode==="active"){ alarm.active(); if(vibrationRef.current&&navigator.vibrate) navigator.vibrate([200,80,200,80,200]); } } if(!found) lastAlertRef.current=null; },[elapsed,phase,dismissed,movie,platform]); const nudge = n => { startRef.current-=n*1000; setElapsed(e=>Math.max(0,Math.min(e+n,movie.rt))); showToast((n>0?"+":"")+n+"s applied"); }; const seekTo = useCallback(sec=>{ const s=Math.max(0,Math.min(sec,movie?.rt??99999)); startRef.current=Date.now()-s*1000-totalPausedRef.current; if(!playingRef.current) pausedRef.current=Date.now(); setElapsed(s); lastAlertRef.current=null; setDismissed(new Set()); },[movie]); const parseTime = str => { const p=str.trim().split(":").map(Number); if(p.some(isNaN))return null; if(p.length===2)return p[0]*60+p[1]; if(p.length===3)return p[0]*3600+p[1]*60+p[2]; return null; }; const handlePlay = () => { alarm.init(); startRef.current=Date.now(); totalPausedRef.current=0; pausedRef.current=null; lastAlertRef.current=null; setElapsed(0); setPlaying(true); setPhase("playing"); setDismissed(new Set()); setAlertScene(null); setScenesOpen(true); }; const togglePause = () => { if(playingRef.current){pausedRef.current=Date.now();setPlaying(false);}else{if(pausedRef.current){totalPausedRef.current+=Date.now()-pausedRef.current;pausedRef.current=null;}setPlaying(true);} }; const goHome = () => { if(phase==="playing"&&playing){ setConfirmLeave(true); return; } goHomeImmediate(); }; const goHomeImmediate = () => { setPhase("home"); setPlaying(false); setElapsed(0); setAlertScene(null); setDismissed(new Set()); setMovie(null); setScenesOpen(false); setShowGreen(false); setPlatform(""); setPendingMovie(null); setConfirmLeave(false); }; const canAccess = (m) => { if(isPro||isBetaFree||trialActive) return true; if(isGuest && m && guestMovieId === m.id) return true; return false; }; const handleGuest = () => { if(!pendingMovie) return; setGuestMovieId(pendingMovie.id); setIsGuest(true); try{ localStorage.setItem("fs_gm", pendingMovie.id); }catch(e){} apiFetch("/api/guest", {method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({ fp: getFP(), movieId: pendingMovie.id })}).catch(()=>{}); setLoginOpen(false); showToast("Guest access granted - 1 free movie", "#22c55e"); setMovie(pendingMovie); setPhase("platform"); setPendingMovie(null); }; const handleLogin = async (provider) => { // Google β€” redirect to real OAuth flow if (provider === "Google") { window.location.href = API_BASE + "/api/auth/google/redirect"; return; } if(loginMode==="trial") { try { const res = await apiFetch("/api/auth/trial", {method:"POST",headers:{"Content-Type":"application/json"}}); const data = await res.json(); if(data.ok) { setTrialActive(true); setTrialUsed(true); setLoginOpen(false); showToast("7-day trial activated!",T.accent); if(pendingMovie){ setMovie(pendingMovie); setPhase("platform"); setPendingMovie(null); } return; } } catch(e) {} } if(loginMode==="trial"){ try{ const fp=getFP(),used=JSON.parse(localStorage.getItem("fs_t")||"{}"); used[fp]=Date.now(); localStorage.setItem("fs_t",JSON.stringify(used)); }catch(e){} setTrialUsed(true); setTrialActive(true); setLoginOpen(false); showToast("Signed in with "+provider+" β€” trial active!",T.accent); if(pendingMovie){ setMovie(pendingMovie); setPhase("platform"); setPendingMovie(null); } } else { setIsPro(true); setLoginOpen(false); showToast("FilmScout Pro unlocked!",T.accent); if(pendingMovie){ setMovie(pendingMovie); setPhase("platform"); setPendingMovie(null); } } }; const handleUpgrade = async (plan) => { // TODO live: PRICE_IDS must match your Stripe dashboard price IDs // plan "monthly" β†’ price_monthly, plan "annual" β†’ price_annual setCheckoutLoading(plan); try { const res = await apiFetch("/api/stripe/create-checkout", { method: "POST", body: JSON.stringify({ plan, fp: getFP() }), }); const data = await res.json(); if (data.url) { window.location.href = data.url; // redirect to Stripe checkout } else if (res.status === 401) { setCheckoutLoading(null); setUpgradeOpen(false); setLoginOpen(true); setLoginMode("upgrade"); showToast("Sign in first to subscribe","#d45b17"); } else { showToast("Could not start checkout β€” try again","#f87171"); setCheckoutLoading(null); } } catch(e) { showToast("Network error β€” try again","#f87171"); setCheckoutLoading(null); } }; const handleBetaAccess = async () => { setCheckoutLoading("beta"); try { const res = await apiFetch("/api/auth/beta-access", { method: "POST" }); if (res.status === 401) { setCheckoutLoading(null); setUpgradeOpen(false); setLoginOpen(true); setLoginMode("upgrade"); showToast("Sign in first","#d45b17"); return; } const data = await res.json(); if (data.ok) { setIsBetaFree(true); setUpgradeOpen(false); showToast("Welcome to the FilmScout beta β€” thank you for helping us test!","#22c55e"); } else { showToast("Could not activate beta access β€” try again","#f87171"); } } catch(e) { showToast("Network error β€” try again","#f87171"); } setCheckoutLoading(null); }; const selectMovie = m => { if(canAccess(m)){setMovie(m);setPhase("platform");}else{setPendingMovie(m);setLoginOpen(true);setLoginMode("trial");} }; const confirmPlatform = p => { setPlatform(p); setPhase("detail"); setScenesOpen(false); setFilterAct([]); setShowGreen(false); }; const saveUsername = async () => { const val = unameInput.toLowerCase().trim(); if (!/^[a-z0-9_]{3,20}$/.test(val)) { showToast("3–20 chars: lowercase letters, numbers, underscores only","#f87171"); return; } const RESERVED = ['admin','filmscout','support','help','api','app','u','join','account','settings','login','signup','register','home','about','terms','privacy']; if (RESERVED.includes(val)) { showToast("Reserved username","#f87171"); return; } try { const r = await apiFetch("/api/account/username",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:val})}); const d = await r.json(); if (!r.ok) { showToast(d.error||"Error saving username","#f87171"); return; } setUsername(d.username); setOldUsernames(d.old_usernames||[]); setUnameEdit(false); showToast("Username saved","#22c55e"); } catch(e) { showToast("Network error","#f87171"); } }; const saveEmail2 = async () => { const val = emailInput2.toLowerCase().trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) { showToast("Invalid email address","#f87171"); return; } try { const r = await apiFetch("/api/account/email",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:val})}); const d = await r.json(); if (!r.ok) { showToast(d.error||"Error saving email","#f87171"); return; } setCurrentUser(u=>({...u,email:d.email})); setOldEmails(d.old_emails||[]); setEmailEdit(false); showToast("Email updated","#22c55e"); } catch(e) { showToast("Network error","#f87171"); } }; const savePassword = async () => { if (pwNewInput !== pwConfirmInput) { showToast("Passwords don't match","#f87171"); return; } if (pwNewInput.length < 8) { showToast("Password must be at least 8 characters","#f87171"); return; } setPwSaving(true); try { const r = await apiFetch("/api/account/password",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({current:pwCurrentInput,new:pwNewInput})}); const d = await r.json(); if (!r.ok) { showToast(d.error||"Error changing password","#f87171"); setPwSaving(false); return; } setPwModal(false); setPwCurrentInput(""); setPwNewInput(""); setPwConfirmInput(""); showToast("Password changed","#22c55e"); } catch(e) { showToast("Network error","#f87171"); } setPwSaving(false); }; const openWithUsernameGate = (mode) => { if (!currentUser) { setLoginOpen(true); setLoginMode(null); return; } if (!username) { setUnamePromptMode(mode); setUnamePromptInput(''); setUnamePromptOpen(true); return; } if (mode === 'feedback') setFeedbackOpen(true); if (mode === 'share') handleShare(); }; const savePromptUsername = async () => { const val = unamePromptInput.toLowerCase().trim(); if (!/^[a-z0-9_]{3,20}$/.test(val)) { showToast("3–20 chars: lowercase letters, numbers, underscores only","#f87171"); return; } const RESERVED = ['admin','filmscout','support','help','api','app','u','join','account','settings','login','signup','register','home','about','terms','privacy']; if (RESERVED.includes(val)) { showToast("Reserved username","#f87171"); return; } try { const r = await apiFetch("/api/account/username",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:val})}); const d = await r.json(); if (!r.ok) { showToast(d.error||"Error saving username","#f87171"); return; } setUsername(d.username); setOldUsernames(d.old_usernames||[]); const mode = unamePromptMode; setUnamePromptOpen(false); showToast("Username saved","#22c55e"); if (mode === 'feedback') setFeedbackOpen(true); if (mode === 'share') handleShare(); } catch(e) { showToast("Network error","#f87171"); } }; const handleDeleteAccount = async () => { if (deleteConfirmInput !== "DELETE") return; try { const r = await apiFetch("/api/account",{method:"DELETE",credentials:"include"}); const d = await r.json(); if (!r.ok) { showToast(d.error||"Error deleting account","#f87171"); return; } try{ Object.keys(localStorage).filter(k=>k.startsWith("fs_")).forEach(k=>localStorage.removeItem(k)); }catch(e){} setIsPro(false); setIsBetaFree(false); setTrialActive(false); setCurrentUser(null); setIsGuest(false); setCorrections([]); setIsMod(false); setUsername(null); setOldUsernames([]); setOldEmails([]); setHasPassword(false); setUnameEdit(false); setEmailEdit(false); setDeleteConfirmOpen(false); setDeleteConfirmInput(""); setPhase("home"); showToast("Account deleted","#94a3b8"); } catch(e) { showToast("Network error","#f87171"); } }; const handleShare = async () => { const url = username ? `https://getfilmscout.com/u/${username}` : refUrl; const text = "I'm using FilmScout to watch movies with my kids β€” check it out:"; if (navigator.share) { try { await navigator.share({ title:"FilmScout", text, url }); } catch(e) { if(e.name!=="AbortError") showToast("Could not open share sheet","#f87171"); } } else { try { await navigator.clipboard.writeText(url); showToast("Link copied to clipboard","#22c55e"); } catch(e) { showToast("Copy: "+url,"#d45b17"); } } }; const openTsEdit = (sc) => { const ts = resolveTs(sc, platform); const allScenes = [...(movie?.scenes||[]), ...(movie?.green||[])] .sort((a,b) => resolveTs(a,platform).s - resolveTs(b,platform).s); const idx = allScenes.findIndex(s => s.id === sc.id && s.a === sc.a); const prevSc = idx > 0 ? allScenes[idx-1] : null; const nextSc = idx < allScenes.length-1 ? allScenes[idx+1] : null; setTsNeighbors({ prev: prevSc ? { title: prevSc.t, end: fmt(resolveTs(prevSc,platform).e), endS: resolveTs(prevSc,platform).e } : null, next: nextSc ? { title: nextSc.t, start: fmt(resolveTs(nextSc,platform).s), startS: resolveTs(nextSc,platform).s } : null, }); setTsScene(sc); setTsPlatform(platform||"default"); setTsType([]); setTsStart(fmt(ts.s)); setTsEnd(fmt(ts.e)); setTsOpen(true); }; const submitTs = () => { const s=parseTime(tsStart), e=parseTime(tsEnd); if(s===null||e===null||e<=s){ showToast("Invalid timestamps","#f87171"); return; } const corr = { id: Date.now(), movieId: movie.id, movieTitle: movie.title, sceneId: tsScene.id, sceneTitle: tsScene.t, scene_type: tsScene.a === GL ? "green" : "flagged", platform: tsPlatform, types: tsType, newStart: s, newEnd: e, note: "", submittedBy: isPro?"pro":"user", status:"pending", }; const updated = [...corrections, corr]; setCorrections(updated); try{ localStorage.setItem("fs_c", JSON.stringify(updated)); }catch(e){} apiFetch("/api/corrections", { method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify(corr) }).catch(()=>{}); setMovies(prev=>prev.map(m=>{ if(m.id!==movie.id)return m; return {...m,scenes:m.scenes.map(sc=>sc.id!==tsScene.id?sc:{...sc,verified_by:isPro?"pro":"user"})}; })); if(movie) setMovie(prev=>({...prev,scenes:prev.scenes.map(sc=>sc.id!==tsScene.id?sc:{...sc,verified_by:isPro?"pro":"user"})})); setTsOpen(false); showToast("Correction submitted β€” thank you!","#22c55e"); }; const pct = movie ? Math.min(elapsed/movie.rt,1)*100 : 0; const filteredMovies = movies.filter(m=>{ if(search && !m.title.toLowerCase().includes(search.toLowerCase()) && !(m.sub||"").toLowerCase().includes(search.toLowerCase())) return false; if(genre.length>0 && !genre.includes(genreOf(m))) return false; if(service.length>0 && !(m.stream||[]).some(s=>service.includes(s))) return false; return true; }); const allConversations = { SKIP: { type:"SKIP", q:"Why did we skip that part?", a:"Some scenes can be scary or confusing. We can talk about what happened in the story without watching those parts." }, MUTE: { type:"MUTE", q:"Why did we mute the sound?", a:"Sometimes people in movies say things we don't want filling our home. The story is still great β€” we just chose not to hear that part." }, "HEADS UP":{ type:"HEADS UP", q:"That scene looked intense β€” is everything okay?", a:"Yes! It was intense, but it's all made up. The actors are safe. Feeling a little uneasy during movies is totally normal." }, "ALL CLEAR":{ type:"ALL CLEAR",q:"I loved that happy part!", a:"Me too! What was your favorite moment so far?" }, }; const conversations = movie ? [...new Set(movie.scenes.map(s=>s.a))].map(a=>allConversations[a]).filter(Boolean) : []; return (
{/* Header */}
{(isPro||isBetaFree||trialActive) ? ( {isPro?"PRO":isBetaFree?"BETA":"TRIAL"} ) : ( )} {!currentUser && ( )}
{/* Toast */} {toast && (
{toast.msg}
)} {/* Disclaimer β€” first-run modal */} {showDisclaimer && (
FilmScout
Family-safe movie companion
πŸ‘‹ Welcome
FilmScout counts up from zero alongside your movie. Tap "I'm pressing Play" the moment your movie starts on TV and we'll alert you before flagged scenes arrive.
⏱ Timestamps are community-sourced and approximate. The more families use FilmScout, the more accurate they become.
)} {/* Home */} {phase==="home" && (
{IC.search} setSearch(e.target.value)} placeholder="Search movies…" style={{width:"100%",paddingLeft:30,paddingRight:12,paddingTop:9,paddingBottom:9,borderRadius:10,border:"1px solid "+T.border,background:T.surface,color:T.text,fontSize:13,outline:"none"}}/>
{/* Genre filter */}
{GENRES.map(g=>{ const [ct,cb,cbr]=GENRE_COLOR[g]||["#94a3b8","transparent","#334155"]; const isAll=g==="All"; const active=isAll?genre.length===0:genre.includes(g); const toggle=()=>{ if(isAll){setGenre([]);return;} setGenre(f=>f.includes(g)?f.filter(x=>x!==g):[...f,g]); }; return ; })}
{/* Service filter */}
{SERVICES.map(sv=>{ const [ct,cb,cbr,icon]=getSVC(sv,isDark); const isAll=sv==="All"; const active=isAll?service.length===0:service.includes(sv); const toggle=()=>{ if(isAll){setService([]);return;} setService(f=>f.includes(sv)?f.filter(x=>x!==sv):[...f,sv]); }; return ; })}
{loading ? (
Loading movies…
) : filteredMovies.length === 0 ? (
🎬
No movies found
Try a different search or filter
) : (
{filteredMovies.map(m=>( ))}
)}
)} {/* Platform selection */} {phase==="platform" && movie && (
{movie.title}{movie.sub&& {movie.sub}}
Choose the service you're watching on to get accurate timestamps
{SERVICES.filter(sv=>sv!=="All").map((sv,i)=>{ const [ct,cb,cbr,icon]=getSVC(sv,isDark); const known=(movie.stream||[]).includes(sv); return ( ); })}
)} {/* Detail / scene list */} {phase==="detail" && movie && (
{movie.title}
{movie.sub&&
{movie.sub}
}
{movie.year} Β· {movie.genre} Β· {platform}
Tap once your TV starts playing
{/* Safe scenes pill toggle */}
family-friendly, no flags
{/* Unified scene list */}
{showGreen?"🎬 All Scenes":"⚠️ Flagged Scenes"}
{movie.scenes.length} scenes{showGreen?" + "+(movie.green?.length||0)+" safe":""}
{(()=>{ if(!showGreen) { if(movie.scenes.length===0) return
βœ… No flagged scenes for this movie
; return movie.scenes.map(sc=>); } const all=[...(movie.scenes||[]).map(s=>({...s,_type:"flagged"})),...(movie.green||[]).map(s=>({...s,_type:"green"}))].sort((a,b)=>resolveTs(a,platform).s-resolveTs(b,platform).s); return all.map((sc,i)=>sc._type==="green"?(
βœ… ALL CLEAR
{sc.t}
{fmt(resolveTs(sc,platform).s)} β†’
{fmt(resolveTs(sc,platform).e)}
):); })()}
{/* Timestamps disclaimer */}
⏱ Timestamps are approximate and community-sourced. The more families use FilmScout, the more accurate they get.
Streaming data powered by Watchmode.com
{/* Conversation starters */}
πŸ’¬ Conversation Starters
Use these to talk through tough scenes with your kids
{conversations.map((c,i)=>(
{ICON[c.type]||"πŸ’¬"} {c.type}
"{c.q}"
{c.a}
))}
)} {/* Playing view */} {phase==="playing" && movie && (
{/* Alert Banner */} {alertScene && (
{ICON[alertScene.a]}
{alertScene.mode==="warning"?`${alertScene.countdown}s β€” ${alertScene.a}`:`NOW: ${alertScene.a}`}
{alertScene.t}
{alertScene.d &&
{alertScene.d}
}
{LABEL[alertScene.a]}: {fmt(alertScene.e)}
)} {/* Timer */}
0?"minute-tick 0.6s ease":"none"}}> {fmt(elapsed)}
{movie.title}{movie.sub?" "+movie.sub:""} Β· {platform}
{/* Progress bar */}
{ const r=e.currentTarget.getBoundingClientRect(); seekTo(((e.clientX-r.left)/r.width)*movie.rt); }}>
{/* Scene markers */} {movie.scenes.map(sc=>{ const ts=resolveTs(sc,platform); const x=(ts.s/movie.rt)*100; const col=(isDark?STYLE_D:STYLE_L)[sc.a]?.border||"#d45b17"; return
; })}
{fmt(elapsed)} {fmt(movie.rt)}
{/* Controls */}
{/* Manual seek + resync */}
setManualTime(e.target.value)} placeholder="Jump to… (e.g. 1:23:45)" style={{flex:1,padding:"9px 12px",borderRadius:10,border:"1px solid "+T.border,background:T.surface,color:T.text,fontSize:13,outline:"none"}}/>
{/* Upcoming scenes */}
Upcoming Scenes
{scenesOpen && (
{movie.scenes.filter(sc=>resolveTs(sc,platform).s>elapsed).slice(0,5).map(sc=>( ))} {movie.scenes.filter(sc=>resolveTs(sc,platform).s>elapsed).length===0 && (
βœ… No more flagged scenes ahead
)}
)}
)} {/* Settings */} {phase==="settings" && (
Settings
{/* Theme */}
Appearance
{["dark","light","system"].map(t=>( ))}
High Contrast
Welcome Screen
Show on next open
{/* Alerts */}
Alerts
Sound Alarm
Audio beep before scenes
Vibration
Haptic feedback on mobile
Warn Ahead
{[15,30,60].map(s=>( ))}
{/* Account */}
Account
{isPro ? (
βœ“ FilmScout Pro β€” Active
) : isBetaFree ? (
βœ“ Beta Access β€” Active
) : trialActive ? (
βœ“ 7-Day Trial β€” Active
) : ( )} {(isPro||trialActive) && ( )} {currentUser ? ( ) : ( )}
{/* Username */} {currentUser&&(
Username
{!unameEdit?( <>
0?10:0}}> {username||"Not set"}
{oldUsernames.length>0&&( <> {unameExpanded&&(
{oldUsernames.map((u,i)=>{u})}
)} )} ):( <> setUnameInput(e.target.value.toLowerCase())} placeholder="username" maxLength={20} style={{width:"100%",padding:"10px 12px",borderRadius:8,border:"1px solid "+T.border,background:T.inputBg,color:T.text,fontSize:13,fontFamily:"monospace",outline:"none",marginBottom:6,boxSizing:"border-box"}}/>
3–20 characters: a–z, 0–9, underscores only
)}
)} {/* Email */} {currentUser&&(
Email
{!emailEdit?( <>
0?10:0}}> {currentUser.email}
{oldEmails.length>0&&( <> {emailExpanded&&(
{oldEmails.map((e,i)=>{e})}
)} )} ):( <> setEmailInput2(e.target.value)} type="email" placeholder="you@example.com" style={{width:"100%",padding:"10px 12px",borderRadius:8,border:"1px solid "+T.border,background:T.inputBg,color:T.text,fontSize:13,outline:"none",marginBottom:12,boxSizing:"border-box"}}/>
)}
)} {/* Security */} {currentUser&&(
Security
{hasPassword?( ):(
You signed in with Google β€” manage your password through your Google Account.
)}
)} {/* Feedback */}
Feedback
{/* Your Corrections */}
Your Corrections {corrections.length>0&&"("+corrections.length+")"}
{corrections.length===0?(
No corrections yet
Help improve timestamps for everyone β€” tap the edit icon on any scene while watching.
):( corrections.slice(-3).map(c=>(
{c.sceneTitle}
{(c.types||[c.type]).slice(0,2).join(", ")}{(c.types||[]).length>2?" & "+(c.types.length-2)+" more":""} Β· {c.platform} {c.status==="pending"&&● pending} {c.status==="approved"&&● applied} {c.status==="rejected"&&● rejected}
)) )}
{/* Referral */}
Refer a Friend
{currentUser&&username?( <>
Share your link. When someone signs up through it, each of you gets an extra free week.
getfilmscout.com/u/{username}
):currentUser&&!username?( <>
Set a username to get your referral link.
):(
Sign in to get your referral link.
)}
{/* Moderator panel */} {isMod?(
{IC.shield}
Moderator Mode
{(()=>{ const pending = corrections.filter(c=>c.status==="pending"); if(pending.length===0) return
No pending corrections
; return pending.map(c=>(
{c.movieTitle} β€” {c.sceneTitle}
{(c.types||[c.type]).join(", ")} Β· {c.platform} Β· by {c.submittedBy}
{c.note&&
"{c.note}"
}
)); })()}
):(
Moderator Access
{setModCodeInput(e.target.value);setModCodeError(false);}} placeholder="Enter mod code" type="password" style={{flex:1,padding:"9px 12px",borderRadius:8,border:"1px solid "+(modCodeError?"#f87171":T.border),background:T.inputBg,color:T.text,fontSize:13}}/>
{modCodeError&&
Invalid code
}
)} {/* Danger Zone */} {currentUser&&(
Danger Zone
)} {/* Version */}
FilmScout Β· v1.0.0-beta
)} {/* Bottom nav */} {phase!=="playing" && (
{[ {id:"home",label:"Browse",icon:IC.home}, {id:"settings",label:"Settings",icon:IC.settings}, ].map(tab=>( ))}
)} {/* Login / Trial Modal */} {loginOpen && ( {setLoginOpen(false);setPendingMovie(null);setLoginTab("social");setEmailInput("");setPassInput("");setEmailError("");}} T={T}>
{loginMode==="trial"?"Start Free Trial":"Upgrade to Pro"}
{pendingMovie?`Watch ${pendingMovie.title}${pendingMovie.sub?" "+pendingMovie.sub:""}`:""}
{setLoginOpen(false);setPendingMovie(null);setLoginTab("social");setEmailInput("");setPassInput("");setEmailError("");}} T={T}/>
{loginMode==="trial" && !trialUsed && (
🎬 7-Day Free Trial
Full access to all movies and scene alerts. No credit card required.
)} {trialUsed && loginMode==="trial" && (
Your free trial has been used. Upgrade to Pro to continue.
)} {/* Social login buttons */}
{[ ["google","Google"], // TODO: Re-enable after Apple OAuth is implemented post-beta // ["apple","Apple"], // TODO: Re-enable after Facebook OAuth is implemented post-beta // ["facebook","Facebook"], ].map(([id,name])=>{ const logos={ google:, apple:, facebook:, }; return ( ); })}
{/* Email option */}
{loginTab==="email" && (
setEmailInput(e.target.value)} placeholder="Email" type="email" style={{padding:"11px 12px",borderRadius:10,border:"1px solid "+(emailError?T.accent:T.border),background:T.inputBg,color:T.text,fontSize:13,outline:"none"}}/> setPassInput(e.target.value)} placeholder="Password" type="password" style={{padding:"11px 12px",borderRadius:10,border:"1px solid "+T.border,background:T.inputBg,color:T.text,fontSize:13,outline:"none"}}/> {emailError &&
{emailError}
}
)}
{loginMode==="trial" && !trialUsed && ( )}
By continuing you agree to our{" "} Terms {" "}and{" "} Privacy Policy
)} {/* Upgrade Modal */} {upgradeOpen && ( setUpgradeOpen(false)} T={T} borderColor={T.accent}>
FilmScout Pro
setUpgradeOpen(false)} T={T}/>
{["Unlimited access to all movies","30-second advance scene alerts","Platform-accurate timestamps","Audio alarm + vibration alerts","Support independent development"].map(f=>(
{IC.check}{f}
))}
)} {/* Feedback Modal */} {feedbackOpen && ( {setFeedbackOpen(false);setFeedbackDone(false);setFeedbackText("");setFeedbackCategory("");}} T={T}>
Send Feedback
{setFeedbackOpen(false);setFeedbackDone(false);setFeedbackText("");setFeedbackCategory("");}} T={T}/>
{feedbackDone ? (
πŸ™
Thank you!
Your feedback helps improve FilmScout for every family.
) : ( <>
{["Timestamp Wrong","Missing Scene","App Bug","Feature Request","Other"].map(cat=>( ))}