/* AI Podcast Generator — output renderer. * * Mirrors the visual language of the AI Music Generator's player: * glassmorphism card on a tinted gradient + ambient blurred backdrop * derived from the cover art, a square cover, big custom play/pause * button, custom seek bar, and a collapsible content panel. * * Adaptations for podcast vs music: * - `data.coverArt` instead of `data.albumArt` * - Collapsible "Transcript" panel showing speaker label + dialogue * for each turn (instead of a flat list of lyric lines) * - Sub-line under title shows runtime + turn count */ const { useEffect, useRef, useState } = React; // Apple-Podcasts-style preset stops, covering the full 0.5x–2x range // requested. Tapping the speed button cycles through these in order // and wraps back to 0.5x after 2x. const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]; function formatTime(value) { if (!Number.isFinite(value) || value < 0) return "0:00"; const minutes = Math.floor(value / 60); const seconds = Math.floor(value % 60).toString().padStart(2, "0"); return `${minutes}:${seconds}`; } function formatRuntime(value) { if (!Number.isFinite(value) || value <= 0) return ""; const totalMin = Math.round(value / 60); if (totalMin < 1) return "<1 min"; return `${totalMin} min`; } function formatRate(rate) { // Render integer rates without a trailing ".0" (so "1" not "1.0", // "2" not "2.0") and keep fractional rates as-is ("0.5", "1.25"). return Number.isInteger(rate) ? `${rate}` : `${rate}`; } function PlayIcon() { return ( ); } function PauseIcon() { return ( ); } function Tool({ data = {} }) { const audioRef = useRef(null); const speedControlRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [showTranscript, setShowTranscript] = useState(false); const [playbackRate, setPlaybackRate] = useState(1); const [showSpeedMenu, setShowSpeedMenu] = useState(false); const turns = Array.isArray(data.transcript) ? data.transcript .map((t) => { if (!t || typeof t !== "object") return null; const speaker = (t.speaker || t.name || t.role || "Speaker").toString().trim(); const dialogue = (t.dialogue || t.text || t.line || "").toString().trim(); if (!dialogue) return null; return { speaker, dialogue }; }) .filter(Boolean) : []; const title = data.title || "Untitled Episode"; const progress = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0; const remaining = duration > 0 ? Math.max(0, duration - currentTime) : 0; const runtimeSec = duration || data.durationSec || 0; const runtimeLabel = formatRuntime(runtimeSec); useEffect(() => { const audio = audioRef.current; if (!audio) return; const syncTime = () => setCurrentTime(audio.currentTime || 0); const syncDuration = () => setDuration(audio.duration || 0); const handleEnded = () => setIsPlaying(false); audio.addEventListener("timeupdate", syncTime); audio.addEventListener("loadedmetadata", syncDuration); audio.addEventListener("durationchange", syncDuration); audio.addEventListener("ended", handleEnded); syncDuration(); syncTime(); return () => { audio.removeEventListener("timeupdate", syncTime); audio.removeEventListener("loadedmetadata", syncDuration); audio.removeEventListener("durationchange", syncDuration); audio.removeEventListener("ended", handleEnded); }; }, [data.audioFile]); // Keep audio.playbackRate in sync with the selected speed. Re-applies // on src change (HTML5 resets playbackRate to 1 when the underlying // resource changes) so the user's pick survives loading a new episode. useEffect(() => { const audio = audioRef.current; if (audio) audio.playbackRate = playbackRate; }, [playbackRate, data.audioFile]); // Close the speed-pick popover when the user clicks outside it or // hits Escape. The mousedown handler runs before click, so clicking // a menu option still resolves cleanly: the menu's onClick fires // before this handler can close anything (and our contains-check // would skip closing anyway since the option is inside speedControlRef). useEffect(() => { if (!showSpeedMenu) return; function handleOutsideClick(event) { const root = speedControlRef.current; if (root && !root.contains(event.target)) { setShowSpeedMenu(false); } } function handleEscape(event) { if (event.key === "Escape") setShowSpeedMenu(false); } document.addEventListener("mousedown", handleOutsideClick); document.addEventListener("keydown", handleEscape); return () => { document.removeEventListener("mousedown", handleOutsideClick); document.removeEventListener("keydown", handleEscape); }; }, [showSpeedMenu]); function pickPlaybackRate(rate) { setPlaybackRate(rate); setShowSpeedMenu(false); } async function togglePlayback() { const audio = audioRef.current; if (!audio || !data.audioFile) return; if (audio.paused) { await audio.play(); setIsPlaying(true); } else { audio.pause(); setIsPlaying(false); } } function handleSeek(event) { const next = Number(event.target.value); const audio = audioRef.current; setCurrentTime(next); if (audio) audio.currentTime = next; } if (data.error) { return (

Generation failed

We could not create this episode.

{data.error}

); } return (

{data.coverArt &&

}

{data.coverArt ? ( Generated cover art

) : ( // placeholder-shimmer is the platform-provided utility class // (defined in src/lib/interactive-base/base.css.ts) — gentle // gradient sweep across the square cover-art slot. The // .cover-art class supplies width/height 100% so the shimmer // fills the parent .art-wrap exactly. No centered text — the // platform overlay chip already shows "Generating · 0:42" in // the corner. Mirrors the music-tool empty state in // [scripts/music-tool-renderer.jsx](../music-tool-renderer.jsx).

)}

{title}

{(runtimeLabel || turns.length > 0) && (

{runtimeLabel} {runtimeLabel && turns.length > 0 && ·} {turns.length > 0 && `${turns.length} turns`}

)}

{formatTime(currentTime)} -{formatTime(remaining)}

{showSpeedMenu && ( )}

{turns.length > 0 && (

{showTranscript && (

{turns.map((turn, i) => (

{turn.speaker.toUpperCase()}

{turn.dialogue}

))}

)}

); } ReactDOM.createRoot(document.getElementById("root")).render( React.createElement(Tool, { data: window.__toolData, runMeta: window.__runMeta, sendAction: window.__sendAction, requestDisplayMode: window.__requestDisplayMode, }) );

AI Podcast Generatora Constants tool made by Constants