// Jai Mahal Audio Tour — Checkpoint screen (fixed, no outer scroll) // Top: brand + chapter counter. // Middle: photo carousel (auto-cycle) or scrollable transcript panel. // Bottom: PlayerBar with Home · Prev · Play/Pause · Next · Read/Listen. const { useState, useEffect, useRef, useMemo } = React; function CheckpointScreen({ chId, onHome, onNext, onPrev, onComplete, lang = "en", setLang }) { const T = window.TOUR; const ch = T.chapters.find((c) => c.id === chId); // Resolve language-specific values (durSec / audioSrc / captions / timings). const pick = (v) => (v && typeof v === "object" && !Array.isArray(v) ? (v[lang] ?? v.en) : v); const durSec = pick(ch?.durSec) || 180; const audioSrc = pick(ch?.audioSrc) || null; const [mode, setMode] = useState("listen"); // "listen" | "read" // Include lang in the key so switching language reloads the correct audio track. const audio = useFakeAudio(durSec, ch ? `${ch.id}-${lang}` : null, audioSrc); // Auto-advance: when the audio finishes, move to the next chapter / closing. useEffect(() => { if (!ch) return; if (audio.t >= durSec && !audio.playing) { const isLast = ch.id === T.chapters.length; const delay = setTimeout(() => { if (isLast) onComplete && onComplete(); else onNext && onNext(); }, 1200); return () => clearTimeout(delay); } }, [audio.t, audio.playing, ch, durSec]); // Photo carousel images: hero first (at 0s), then the gallery — each carrying // an `at` timestamp (seconds) for the CURRENT language's audio track. const carouselImages = useMemo(() => { if (!ch) return []; const hero = { src: ch.hero, pos: ch.heroPos || "center", caption: pick(ch.heroCaption) || ch.tagline, at: pick(ch.heroAt) || 0, }; const gallery = ch.gallery.map((g) => ({ src: g.src, pos: g.pos, caption: pick(g.caption), at: pick(g.at) || 0, })); return [hero, ...gallery]; }, [ch, lang]); // Image index is driven by the audio's current time: show the last image // whose `at` timestamp has been reached. This keeps the visuals in lockstep // with the narration (and stays correct through pause / seek / skip). const activeIdx = useMemo(() => { let idx = 0; for (let i = 0; i < carouselImages.length; i++) { if (audio.t >= (carouselImages[i].at || 0)) idx = i; else break; } return idx; }, [audio.t, carouselImages]); const imgIdx = activeIdx; // Reset mode when chapter changes (image index follows audio time automatically). useEffect(() => { setMode("listen"); }, [chId]); if (!ch) return null; return (
{/* ── TOP BAR ───────────────────────────────────────── */}
{/* Logo + title — clickable, goes home */} {/* Right side: language toggle + End Tour */}
{/* ── CONTENT AREA ─────────────────────────────────── */} {mode === "listen" ? ( ) : ( )} {/* ── PLAYER BAR ──────────────────────────────────── */}
); } // ─── LISTEN MODE: full-bleed photo carousel, synced to the audio timeline ───── function ListenMode({ ch, images, playing, imgIdx }) { return (
{/* Top gradient — to keep dots legible if needed */}
{/* Bottom gradient — for title legibility */}
{/* Caption (active image) — top-left */} {images[imgIdx]?.caption && (
{images[imgIdx].caption}
)} {/* Chapter title overlay — bottom-left */}
Chapter

{ch.title}

); } // ─── READ MODE: scrollable transcript (text + heading only) ────── function ReadMode({ ch, lang = "en" }) { const paras = Array.isArray(ch.paragraphs) ? ch.paragraphs : (ch.paragraphs[lang] || ch.paragraphs.en); const dropCap = lang === "en"; // Latin drop-cap only; skip for Devanagari. return (
{/* Title block */}
Chapter

{ch.title}

{/* Transcript */}
{paras.map((p, i) => (

{i === 0 && dropCap && ( {p.charAt(0)} )} {i === 0 && dropCap ? p.slice(1) : p}

))}
); } // ─── Side panels (kept from earlier version) ────────────────────── function Timeline({ items }) { return (
A Brief Chronology
    {items.map((m, i) => (
  1. {m.year}
    {m.text}
    2. ))}
); } function FactsGrid({ facts }) { return (
{facts.map((f, i) => (
{f.k}
{f.v}
))}
); } function VenuesList({ venues }) { return (
Within the Walls
); } function Pullquote({ text, attr }) { return (

“{text}”

{attr && (
{attr}
)}
); } window.CheckpointScreen = CheckpointScreen;