/* ============================================================ SERMONS PAGE ============================================================ */ const YT_API_KEY = 'AIzaSyDYsqthvDl1TygsQt0QPD4PDq4-Q5fsxSM'; const YT_CHANNEL_ID = 'UCvNeLuA60FRBdIHloA1bCpg'; const SHEET_ID = '1NAh-f3ydap1DI0mI7CaLMsUEN_Xy4pS2o9fRlrBYoTA'; // Cache helpers — TTL in ms function cacheGet(key, ttl) { try { const raw = localStorage.getItem(key); if (!raw) return null; const { t, v } = JSON.parse(raw); if (Date.now() - t > ttl) return null; return v; } catch { return null; } } function cacheSet(key, v) { try { localStorage.setItem(key, JSON.stringify({ t: Date.now(), v })); } catch {} } function bestThumb(thumbs) { if (!thumbs) return null; return (thumbs.maxres && thumbs.maxres.url) || (thumbs.standard && thumbs.standard.url) || (thumbs.high && thumbs.high.url) || (thumbs.medium && thumbs.medium.url) || (thumbs.default && thumbs.default.url) || null; } function relativeDate(d) { if (!d) return ''; const date = new Date(d); const days = Math.floor((Date.now() - date.getTime()) / 86400000); if (days < 1) return 'Today'; if (days < 2) return 'Yesterday'; if (days < 7) return `${days} days ago`; if (days < 14) return '1 week ago'; if (days < 30) return `${Math.floor(days/7)} weeks ago`; if (days < 60) return '1 month ago'; if (days < 365) return `${Math.floor(days/30)} months ago`; if (days < 730) return '1 year ago'; return `${Math.floor(days/365)} years ago`; } function SermonsPage() { const [query, setQuery] = useState(''); const [recent, setRecent] = useState(null); const [seriesList, setSeriesList] = useState(SERIES); // sheet ordering, hardcoded fallback const [seriesData, setSeriesData] = useState({}); // { [playlistId]: { thumb, itemCount, latestTitle, latestDate, latestVid } } // Fetch series list from Google Sheet (preserves editorial ordering) useEffect(() => { const cached = cacheGet('bb_sheet_series', 30 * 60 * 1000); // 30 min if (cached) { setSeriesList(cached); return; } const url = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:csv&gid=0`; fetch(url) .then(r => r.ok ? r.text() : Promise.reject(r.status)) .then(csv => { const rows = []; let row = [], cell = '', inQ = false; for (let i = 0; i < csv.length; i++) { const c = csv[i]; if (inQ) { if (c === '"' && csv[i+1] === '"') { cell += '"'; i++; } else if (c === '"') { inQ = false; } else { cell += c; } } else { if (c === '"') inQ = true; else if (c === ',') { row.push(cell); cell = ''; } else if (c === '\n') { row.push(cell); rows.push(row); row = []; cell = ''; } else if (c === '\r') {} else cell += c; } } if (cell || row.length) { row.push(cell); rows.push(row); } const parsed = rows.slice(1).map((r, i) => { const rawTitle = (r[0] || '').trim(); const displayFlag = (r[1] || '').trim().toLowerCase(); const url = (r[2] || '').trim(); const m = url.match(/[?&]list=([^&]+)/); if (!rawTitle || !m) return null; const dash = rawTitle.indexOf(' - '); const title = dash > -1 ? rawTitle.slice(dash + 3) : rawTitle; const sub = dash > -1 ? rawTitle.slice(0, dash) : ''; const showTitle = displayFlag === 'yes' || displayFlag === 'y' || displayFlag === 'true'; return { title, sub, playlistId: m[1], tone: (i % 6) + 1, showTitle }; }).filter(Boolean); if (parsed.length) { setSeriesList(parsed); cacheSet('bb_sheet_series', parsed); } }) .catch(() => {}); }, []); // Fetch recent uploads via YouTube Data API (uploads playlist = channelId with UC→UU) useEffect(() => { const cached = cacheGet('bb_recent_v2', 60 * 60 * 1000); // 1hr if (cached) { setRecent(cached); return; } const uploads = 'UU' + YT_CHANNEL_ID.slice(2); const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=12&playlistId=${uploads}&key=${YT_API_KEY}`; fetch(url) .then(r => r.ok ? r.json() : Promise.reject(r.status)) .then(j => { const items = (j.items || []).map(it => ({ title: it.snippet.title, vid: it.snippet.resourceId?.videoId, link: `https://www.youtube.com/watch?v=${it.snippet.resourceId?.videoId}`, img: bestThumb(it.snippet.thumbnails), date: it.snippet.publishedAt ? new Date(it.snippet.publishedAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) : '', author: it.snippet.videoOwnerChannelTitle || 'Bethany Baptist', })); setRecent(items); if (items.length) cacheSet('bb_recent_v2', items); }) .catch(() => setRecent([])); }, []); // Enrich each series with itemCount + latest video via API useEffect(() => { if (!seriesList.length) return; const cached = cacheGet('bb_series_data_v2', 6 * 60 * 60 * 1000); // 6hr if (cached) { setSeriesData(cached); return; } let cancelled = false; (async () => { const next = {}; // Step 1: batch playlists info (50 at a time max — we have ~26) const ids = seriesList.map(s => s.playlistId); const chunks = []; for (let i = 0; i < ids.length; i += 50) chunks.push(ids.slice(i, i + 50)); for (const chunk of chunks) { const url = `https://www.googleapis.com/youtube/v3/playlists?part=snippet,contentDetails&maxResults=50&id=${chunk.join(',')}&key=${YT_API_KEY}`; try { const r = await fetch(url); if (!r.ok) continue; const j = await r.json(); for (const p of (j.items || [])) { next[p.id] = { thumb: bestThumb(p.snippet.thumbnails), itemCount: p.contentDetails?.itemCount || 0, latestTitle: null, latestDate: null, latestVid: null, }; } } catch {} } if (cancelled) return; setSeriesData({ ...next }); // Step 2: fetch the latest video for every series — used for "Latest:" line // on featured/recent, and for sorting the archive by recency. // Cost: ~1 unit per playlist × ~26 playlists = ~26 units. Negligible. for (const s of seriesList) { if (cancelled) return; try { const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=1&playlistId=${s.playlistId}&key=${YT_API_KEY}`; const r = await fetch(url); if (!r.ok) continue; const j = await r.json(); const it = (j.items || [])[0]; if (it && next[s.playlistId]) { next[s.playlistId].latestTitle = it.snippet.title; next[s.playlistId].latestDate = it.snippet.publishedAt; next[s.playlistId].latestVid = it.snippet.resourceId?.videoId; if (!cancelled) setSeriesData({ ...next }); } } catch {} } if (!cancelled && Object.keys(next).length) cacheSet('bb_series_data_v2', next); })(); return () => { cancelled = true; }; }, [seriesList]); const visible = useMemo(() => { if (!recent) return []; if (!query) return recent; const q = query.toLowerCase(); return recent.filter(v => v.title.toLowerCase().includes(q) || (v.author||'').toLowerCase().includes(q)); }, [recent, query]); // Tier the series: [0] = featured current, [1..3] = recent series, rest = archive const featured = seriesList[0]; const recentSeries = seriesList.slice(1, 4); // Sort archive by latest-video date (newest first); fall back to sheet order if no date yet const archive = useMemo(() => { const arr = seriesList.slice(4); return arr.slice().sort((a, b) => { const da = seriesData[a.playlistId]?.latestDate; const db = seriesData[b.playlistId]?.latestDate; if (!da && !db) return 0; if (!da) return 1; if (!db) return -1; return new Date(db) - new Date(da); }); }, [seriesList, seriesData]); return ( <> Sermons & Series} lede="Every Sunday message, carefully taught and freely shared. Watch live, catch up later, or dig into a full series." /> {/* Hero player */}