/* global React, useT, useLang, NeonVisualizer, PageHeader */ // Sora News — podcast section. Self-contained audio player with the same // neon visualizer as Studio, but the audio graph and state live here (no // shared provider). News content is foreground listening — when the user // leaves the section the audio stops (unmount cleanup). Language follows // the global i18n: 'es' → ES track, anything else → EN. const { useState, useEffect, useRef, useMemo } = React; const NEWS_FALLBACK = [ { slug: 'episodio-2', published_at: '2026-05-23T18:00:00Z', title_es: 'El tweetstorm de Makoto Takemiya', title_en: "Makoto Takemiya's tweetstorm", summary_es: 'Análisis de los 4 artículos publicados por Makoto Takemiya en la semana del 10 de mayo de 2026.', summary_en: 'Breakdown of the 4 articles Makoto Takemiya posted during the week of May 10, 2026.', cover_path: '/news/media/episodio-2/cover.jpeg', audio_path_es: '/news/media/episodio-2/es.mp3', audio_path_en: '/news/media/episodio-2/en.mp3', video_path_es: '/news/media/episodio-2/es.mp4', video_path_en: '/news/media/episodio-2/en.mp4', duration_s: 376, }, { slug: 'episodio-1', published_at: '2026-05-23T12:00:00Z', title_es: 'Por qué SORA Nexus existe', title_en: 'Why SORA Nexus exists', summary_es: 'Marco filosófico de Fisher 1939, Yamaguchi y la respuesta de SORA al sistema monetario actual.', summary_en: "The philosophical framework from Fisher 1939, Yamaguchi, and SORA's answer to the current monetary system.", cover_path: '/news/media/episodio-1/cover.jpg', audio_path_es: '/news/media/episodio-1/es.mp3', audio_path_en: '/news/media/episodio-1/en.mp3', video_path_es: '/news/media/episodio-1/es.mp4', video_path_en: '/news/media/episodio-1/en.mp4', duration_s: 295, }, ]; // Static cache buster — appended to media URLs so CloudFlare treats them as // new resources, avoiding stale 404s cached before the files were deployed. // Bump the suffix when redeploying media to force a fresh fetch. const MEDIA_VER = 'v1'; function bust(url) { return url ? url + (url.includes('?') ? '&' : '?') + 'v=' + MEDIA_VER : url; } function fmtMMSS(s) { s = Math.max(0, Math.floor(Number.isFinite(s) ? s : 0)); return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0'); } function fmtDate(iso, lang) { try { const d = new Date(iso); return d.toLocaleDateString(lang === 'es' ? 'es-ES' : 'en-US', { year: 'numeric', month: 'short', day: 'numeric', }); } catch { return iso || ''; } } function NewsSection() { const { lang: uiLang, t } = useLang(); const [episodes, setEpisodes] = useState(NEWS_FALLBACK); const [idx, setIdx] = useState(0); const [playing, setPlaying] = useState(false); const [elapsed, setElapsed] = useState(0); const [volume, setVolume] = useState(0.85); const [freq, setFreq] = useState(null); const audioRef = useRef(null); const ctxRef = useRef(null); const analyserRef = useRef(null); const sourceRef = useRef(null); const gainRef = useRef(null); const rafRef = useRef(0); // Load real episodes from the API, fall back to the inline list if it 404s // (e.g. local preview without backend). useEffect(() => { let cancelled = false; fetch('/news/episodes').then(r => r.ok ? r.json() : null).then(j => { if (cancelled) return; if (j && Array.isArray(j.episodes) && j.episodes.length) { setEpisodes(j.episodes); } }).catch(() => {}); return () => { cancelled = true; }; }, []); const ep = episodes[idx] || episodes[0]; const audioLang = uiLang === 'es' ? 'es' : 'en'; const audioSrc = ep ? bust(audioLang === 'es' ? ep.audio_path_es : ep.audio_path_en) : null; const title = ep ? (uiLang === 'es' ? ep.title_es : ep.title_en) : ''; const summary = ep ? (uiLang === 'es' ? ep.summary_es : ep.summary_en) : ''; // Load track when episode or language changes. Pause if switching. useEffect(() => { const el = audioRef.current; if (!el || !audioSrc) return; el.src = audioSrc; el.load(); setElapsed(0); }, [audioSrc]); // Build audio graph lazily on first play (Web Audio needs a user gesture). const ensureGraph = () => { const el = audioRef.current; if (!el || sourceRef.current) { ctxRef.current?.resume(); return; } try { const Ctx = window.AudioContext || window.webkitAudioContext; if (!Ctx) return; const ctx = new Ctx(); const src = ctx.createMediaElementSource(el); const analyser = ctx.createAnalyser(); analyser.fftSize = 256; analyser.smoothingTimeConstant = 0.82; const gain = ctx.createGain(); gain.gain.value = volume; src.connect(analyser); analyser.connect(gain); gain.connect(ctx.destination); ctxRef.current = ctx; analyserRef.current = analyser; sourceRef.current = src; gainRef.current = gain; } catch {} }; // Play / pause. useEffect(() => { const el = audioRef.current; if (!el) return; if (playing) { ensureGraph(); el.play().catch(() => setPlaying(false)); } else { el.pause(); } }, [playing, audioSrc]); // Volume — same pre-graph / post-graph dance as Studio. useEffect(() => { const el = audioRef.current; if (el) el.volume = volume; if (gainRef.current) gainRef.current.gain.value = volume; }, [volume]); // Timebase + auto-pause at end (no auto-advance; user picks the next ep). useEffect(() => { const el = audioRef.current; if (!el) return; const onTime = () => setElapsed(el.currentTime || 0); const onEnd = () => setPlaying(false); el.addEventListener('timeupdate', onTime); el.addEventListener('ended', onEnd); return () => { el.removeEventListener('timeupdate', onTime); el.removeEventListener('ended', onEnd); }; }, []); // Drive frequency data while playing. useEffect(() => { if (!playing) { cancelAnimationFrame(rafRef.current); return; } const tick = () => { const a = analyserRef.current; if (a) { const arr = new Uint8Array(a.frequencyBinCount); a.getByteFrequencyData(arr); setFreq(arr); } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [playing]); // Stop and tear down the audio context when leaving the section. useEffect(() => () => { try { audioRef.current?.pause(); } catch {} try { ctxRef.current?.close(); } catch {} }, []); const dur = audioRef.current?.duration || ep?.duration_s || 0; const progress = dur > 0 ? elapsed / dur : 0; const onSeek = (e) => { const el = audioRef.current; if (!el || !dur) return; const rect = e.currentTarget.getBoundingClientRect(); const p = (e.clientX - rect.left) / rect.width; el.currentTime = p * dur; setElapsed(p * dur); }; const energy = useMemo(() => { if (!freq || freq.length === 0) return 0; let sum = 0; const lim = Math.min(32, freq.length); for (let i = 0; i < lim; i++) sum += freq[i]; return sum / (lim * 255); }, [freq]); const pickEpisode = (i) => { setIdx(i); setPlaying(true); }; // Slug → episode number for the "EPISODIO N" tag. Falls back to the // reverse index so newer schemes still produce a label. const episodeNumber = (slug, fallbackIndex) => { const m = (slug || '').match(/(\d+)/); return m ? Number(m[1]) : (episodes.length - fallbackIndex); }; // Countdown overlay during the first 30s of playback (audio is muted during // those seconds in the production mix — voice enters at t=25, dominates by // t=30, so the overlay disappears as the voice takes over). const COUNTDOWN_LEN = 30; const showCountdown = playing && elapsed < COUNTDOWN_LEN; const countdownValue = Math.max(1, COUNTDOWN_LEN - Math.floor(elapsed)); return (
{playing ? t('news.nowPlaying') : '—'} · {episodes.length} ep