// TikTok-style vertical video feed. Full-bleed, swipe/scroll/keys. // Mounted at #feed (mobile + desktop) and reachable from a floating // button on the home / shadow pages and a nav-drawer entry. // Uses IntersectionObserver to autoplay only the visible video. function VideoFeedPage({ nav, params }) { const cat = useVideoCatalog(); const familyStories = useFamilyStories(); const kind = params?.kind || "all"; // Build the three source lists. const lists = useMemo(() => { const music = (cat.videos || []).map(v => ({ id: v.id, shorts: v.shorts, full: v.full, title: v.title, scripture: v.scripture, psalm: v.psalm, collectionTitle: v.collectionTitle, })); const stories = []; const storyList = [{ id: "jacob", name: "Jacob — Israel" }, ...TRIBES.map(t => ({ id: t.id, name: t.name }))]; storyList.forEach(s => { const sv = (typeof storyVideo === "function") ? storyVideo(s.id) : null; if (sv) stories.push({ id: "story-" + s.id, shorts: sv.preview, full: sv.full, title: s.name, scripture: null, collectionTitle: "Biblical Stories" }); }); const insp = []; if (window.TRIBE_INSPIRATIONS) { Object.entries(window.TRIBE_INSPIRATIONS).forEach(([tribeN, items]) => { (items || []).forEach(item => insp.push({ id: "insp-" + tribeN + "-" + item.id, shorts: item.videoUrl, full: item.videoUrl, title: "Reflection " + item.id, scripture: null, collectionTitle: "Inspirations" })); }); } const family = (familyStories || []).map(f => ({ id: f.id, shorts: f.shorts, full: f.full, title: f.title, scripture: null, collectionTitle: f.collectionTitle, })); return { music, stories, insp, family }; }, [cat.videos, familyStories]); const list = useMemo(() => { if (kind === "music") return lists.music; if (kind === "stories") return lists.stories; if (kind === "inspirations") return lists.insp; if (kind === "family") return lists.family; // "all" — mix every series and shuffle randomly. const merged = [...lists.music, ...lists.stories, ...lists.insp, ...lists.family]; for (let i = merged.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [merged[i], merged[j]] = [merged[j], merged[i]]; } return merged; }, [lists, kind]); const startId = params?.id; const containerRef = useRef(null); const [activeIdx, setActiveIdx] = useState(0); const [muted, setMuted] = useState(true); const [autoplay, setAutoplay] = useState(() => { try { return localStorage.getItem("feedAutoplay") !== "off"; } catch { return true; } }); useEffect(() => { try { localStorage.setItem("feedAutoplay", autoplay ? "on" : "off"); } catch {} }, [autoplay]); const p = usePlayer(); // Pause any sticky audio while the feed is active — only one media at a time. useEffect(() => { if (p.playing) p.toggle(); return () => {}; }, []); // Scroll to the starting video on mount useEffect(() => { if (!containerRef.current) return; if (!list.length) return; const idx = startId ? Math.max(0, list.findIndex(v => v.id === startId)) : 0; const el = containerRef.current.children[idx]; if (el) el.scrollIntoView({ behavior: "instant", block: "start" }); setActiveIdx(idx); }, [list.length]); // Detect which slide is in view useEffect(() => { const c = containerRef.current; if (!c) return; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio > 0.6) { const idx = Number(entry.target.dataset.idx); setActiveIdx(idx); } }); }, { root: c, threshold: [0.6] }); Array.from(c.children).forEach((child) => io.observe(child)); return () => io.disconnect(); }, [list.length]); // Keyboard nav useEffect(() => { const onKey = (e) => { if (e.key === "ArrowDown" || e.key === "j") { e.preventDefault(); scrollBy(1); } else if (e.key === "ArrowUp" || e.key === "k") { e.preventDefault(); scrollBy(-1); } else if (e.key === "m") { setMuted(m => !m); } else if (e.key === "Escape") { window.history.back(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [activeIdx, list.length]); function scrollBy(delta) { const c = containerRef.current; if (!c) return; const nextIdx = Math.max(0, Math.min(list.length - 1, activeIdx + delta)); const el = c.children[nextIdx]; if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); } // Autoplay advance — wraps to the first clip after the last for a continuous cycle. function advanceAuto() { const c = containerRef.current; if (!c) return; const ni = activeIdx + 1 >= list.length ? 0 : activeIdx + 1; const el = c.children[ni]; if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); } if (!list.length) { return (
Loading the feed…
); } return (
{/* Scroll container */}
{list.map((v, i) => ( ))}
{/* Top bar */}
The Feed
{/* Autoplay toggle — gold when on, default on, persisted */} {/* Mute/Unmute toggle — gold text + icon */}
{/* Bottom hint — flip for more */}
Flip for more
); } // Single full-bleed slide function FeedSlide({ video, idx, active, near, muted, autoplay, onAdvance, nav }) { const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; v.muted = muted; if (active) { v.currentTime = 0; v.play().catch(() => {}); } else { v.pause(); } }, [active, muted, near]); const onTap = () => { const v = videoRef.current; if (!v) return; if (v.paused) v.play().catch(() => {}); else v.pause(); }; return (
{/* Mount the video only for the active slide — one load at a time. */} {active && ( <>
); } function FeedAction({ label, icon, onClick }) { return ( ); } // Floating launcher button — appears on home + shadow pages function FeedLaunchButton({ nav, label = "The Feed" }) { return ( ); } Object.assign(window, { VideoFeedPage, FeedSlide, FeedLaunchButton });