);
}
// ── Audio Player ────────────────────────────────────────────────────────────
function fmtTime(s) {
s = Math.max(0, Math.floor(s));
const m = Math.floor(s / 60), r = s % 60;
return m + ":" + (r < 10 ? "0" : "") + r;
}
// Hand-drawn play / pause glyph used by inline player AND the bottom bar.
function PlayGlyph({ playing }) {
return (
);
}
// Controlled player — App owns playback state so the bottom bar can mirror it.
function AudioPlayer({ duration, t, playing, onSeek, onTogglePlay, onScrub }) {
const containerRef = useRef(null);
useEffect(() => {
const node = containerRef.current; if (!node) return;
const onKey = (e) => {
if (e.key === " ") { e.preventDefault(); onTogglePlay(); }
else if (e.key === "ArrowLeft") { e.preventDefault(); onScrub(Math.max(0, t - 15)); }
else if (e.key === "ArrowRight") { e.preventDefault(); onScrub(Math.min(duration, t + 15)); }
};
node.addEventListener("keydown", onKey);
return () => node.removeEventListener("keydown", onKey);
}, [duration, t, onTogglePlay, onScrub]);
const pct = duration ? (t / duration) * 100 : 0;
const seek = (e) => {
const r = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width;
onSeek(Math.max(0, Math.min(duration, Math.round(x * duration))));
};
return (
{fmtTime(t)} / {fmtTime(duration)}
);
}
// ── Show notes (companion page content) ────────────────────────────────────
// Renders inside Spotlight when episode.show_notes is present. ChapterList rows
// are clickable when chapter has a real start_s (audio rendered with [chapter:]
// tags); rows with start_s: null render as disabled (the script has chapters
// listed but the audio hasn't been re-rendered to capture timestamps yet).
function ChapterList({ chapters, currentT, onSeek }) {
if (!chapters || chapters.length === 0) return null;
// Determine which chapter is currently active. A chapter is active when
// currentT >= its start_s and < the next chapter's start_s. Ignores
// chapters with start_s == null (those don't participate in active tracking).
const realChapters = chapters
.map((c, i) => ({ ...c, idx: i }))
.filter(c => typeof c.start_s === "number");
// playback.t arrives as an integer (the audio element's timeupdate handler
// floors currentTime), so compare against floored start_s — otherwise a click
// on a chapter that starts at e.g. 366.41 leaves currentT at 366 and the
// boundary check skips this chapter as not-yet-active.
let activeIdx = -1;
for (let i = 0; i < realChapters.length; i++) {
const c = realChapters[i];
const next = realChapters[i + 1];
const start = Math.floor(c.start_s);
const nextStart = next ? Math.floor(next.start_s) : Infinity;
if (currentT >= start && currentT < nextStart) {
activeIdx = c.idx;
break;
}
}
return (
{chapters.map((c, i) => {
const clickable = typeof c.start_s === "number";
const isActive = i === activeIdx;
return (
{clickable ? (
) : (
—:—{c.title}
)}
);
})}
);
}
function ShowNotes({ notes, currentT, onSeek, episodeSlug }) {
// Collapsable wrapper around the whole notes block. Default-closed because
// the contents (summary + chapter list + takeaways + sources) easily double
// the spotlight's height. Reset to closed when the spotlight episode changes
// so jumping between episodes doesn't carry over the previous open state.
const [open, setOpen] = useState(false);
useEffect(() => { setOpen(false); }, [episodeSlug]);
if (!notes) return null;
// summary_md is plain paragraphs separated by blank lines (per the agent spec).
const paragraphs = (notes.summary_md || "")
.split(/\n\s*\n/)
.map(p => p.trim())
.filter(Boolean);
const counts = [];
if (notes.chapters?.length) counts.push(`${notes.chapters.length} chapters`);
if (notes.takeaways?.length) counts.push(`${notes.takeaways.length} takeaways`);
if (notes.sources?.length) counts.push(`${notes.sources.length} sources`);
const subline = counts.join(" · ");
return (
{open && (