/* global React */
// t21 / v06p — Audio page.
//
// TWO sections, repurposed:
// 1. CHARACTER VOICES — a preview row PER character that has an
// ElevenLabs voice assigned (set on the Assets / Characters
// modal). Each row plays the cached voice preview audio so
// Hugo can quickly hear what each character will sound like
// WITHOUT generating a real shot take.
// 2. NARRATION / VO — all real VO takes generated via the
// Generate → Voice Over workflow. Grouped by segment
// (shot id or shot range like "SH0010 → SH0060"), then by
// character. Multiple versions (v001, v002, …) for the same
// segment sit together so Hugo can compare takes.
//
// Persistent mini-player at the bottom holds the active track +
// scrub bar + transport controls + volume.
function fmtAudioTime(s) {
if (!Number.isFinite(s) || s < 0) return "0:00";
const m = Math.floor(s / 60);
const sec = Math.floor(s % 60);
return `${m}:${String(sec).padStart(2, "0")}`;
}
function AudioPage() {
const fetcher = window.authFetch || fetch;
const [assets, setAssets] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
// Mini-player state. currentTrack is the asset row, queue is the
// ordered list of remaining tracks after currentTrack.
const [currentTrack, setCurrentTrack] = React.useState(null);
const [queue, setQueue] = React.useState([]);
const [isPlaying, setIsPlaying] = React.useState(false);
const [progress, setProgress] = React.useState(0);
const [duration, setDuration] = React.useState(0);
const [volume, setVolume] = React.useState(0.85);
const audioRef = React.useRef(null);
// v06p — Character previews fetched from the in-memory app
// data. We re-render on changes (so adding a character voice on
// the Assets page surfaces here immediately).
const [appDataRev, setAppDataRev] = React.useState(0);
React.useEffect(() => {
const bump = () => setAppDataRev(r => r + 1);
window.addEventListener("paradise-sse", bump);
return () => window.removeEventListener("paradise-sse", bump);
}, []);
const charactersWithVoice = React.useMemo(() => {
const data = (typeof window !== "undefined" && window.__appData) || {};
// 24 Sep 2026 (G5) — another project: the characters of ITS character categories.
const arr = (window.__projectCharacters && window.__isDefaultProject && !window.__isDefaultProject())
? window.__projectCharacters()
: ((data.assets && data.assets.characters) || []);
return Array.isArray(arr) ? arr.filter(c => c.voice_id) : [];
}, [appDataRev]);
const load = React.useCallback(() => {
setLoading(true); setError(null);
fetcher("/api/audio")
.then(r => r.ok ? r.json() : null)
.then(d => { setAssets((d && d.assets) || []); setLoading(false); })
.catch(err => { setError(err.message); setLoading(false); });
}, [fetcher]);
React.useEffect(() => { load(); }, [load]);
// v06p — Auto-reload audio list whenever the server broadcasts
// a new VO take so freshly-generated audio appears without a
// manual refresh.
React.useEffect(() => {
const fn = (e) => {
try {
const msg = (e && e.detail) || JSON.parse(e.data || "{}");
if (msg && msg.type === "audio_asset_added") load();
} catch (_) {}
};
window.addEventListener("paradise-sse", fn);
return () => window.removeEventListener("paradise-sse", fn);
}, [load]);
// ─── Narration grouping (v06p) ────────────────────────────────
// Every saved VO take (including takes that have a
// character_name) is treated as NARRATION here — the
// Character Voices section is now reserved for character
// previews. We accept legacy `character_voice` rows that have
// a shot_id too, so old data isn't orphaned.
const narrationTakes = React.useMemo(() => assets.filter(a =>
(a.type === "narration") || (a.type === "character_voice" && a.shot_id)
), [assets]);
// Group by (segment_label, character_name). Within a group,
// takes are sorted newest-first by version number desc.
const narrationGroups = React.useMemo(() => {
const map = new Map();
for (const a of narrationTakes) {
const seg = a.segment_label || a.shot_id || "(unscoped)";
const who = a.character_name || "Narration";
const key = `${seg}::${who}`;
if (!map.has(key)) map.set(key, { segment: seg, character: who, shot_id: a.shot_id, takes: [] });
map.get(key).takes.push(a);
}
for (const g of map.values()) {
g.takes.sort((a, b) => {
const av = parseInt((a.version || "v0").replace(/[^0-9]/g, ""), 10) || 0;
const bv = parseInt((b.version || "v0").replace(/[^0-9]/g, ""), 10) || 0;
return bv - av;
});
}
// Order groups: by shot id ascending where possible.
return [...map.values()].sort((a, b) => {
const an = parseInt(String(a.shot_id || "").replace(/[^0-9]/g, ""), 10) || 0;
const bn = parseInt(String(b.shot_id || "").replace(/[^0-9]/g, ""), 10) || 0;
if (an !== bn) return an - bn;
return a.character.localeCompare(b.character);
});
}, [narrationTakes]);
// ─── Transport (v06p) ─────────────────────────────────────────
// Plays a track. If the audio element is already mounted with a
// different src, switching the src triggers a load → we wait
// a tick for the new src to settle before calling play().
const playTrack = (track, after = []) => {
setCurrentTrack(track);
setQueue(after);
setIsPlaying(true);
setTimeout(() => {
if (audioRef.current) {
try { audioRef.current.currentTime = 0; audioRef.current.play(); } catch (e) {}
}
}, 30);
};
// v06p — Toggle: if the row clicked is ALREADY the active
// track, pause/resume it instead of restarting. Previously the
// row's play button always called playTrack(), which reset
// currentTime to 0 — so the pause button visually toggled but
// the audio just jumped back to start.
const togglePlayRow = (track) => {
if (currentTrack && currentTrack.id === track.id && audioRef.current) {
if (isPlaying) audioRef.current.pause();
else audioRef.current.play();
return;
}
playTrack(track);
};
const togglePlay = () => {
if (!currentTrack || !audioRef.current) return;
if (isPlaying) audioRef.current.pause();
else audioRef.current.play();
};
const next = () => {
if (queue.length === 0) {
setIsPlaying(false);
return;
}
const [head, ...rest] = queue;
playTrack(head, rest);
};
const restart = () => {
if (audioRef.current) {
try { audioRef.current.currentTime = 0; audioRef.current.play(); } catch (e) {}
}
};
const seekTo = (ratio) => {
if (!audioRef.current || !duration) return;
audioRef.current.currentTime = Math.max(0, Math.min(duration, ratio * duration));
};
// v06p — Character voice preview. Builds a synthetic "track"
// pointing at the cached ElevenLabs preview_url (or a server-
// generated TTS fallback), then pipes it through the same
// mini-player.
const previewCharacterVoice = (c) => {
const id = `char:${c.id}`;
// Prefer the cached preview_url saved on the character record.
// Fallback: stream via /api/voiceover/preview which TTS-es a
// short sample on demand (slower, costs a tiny TTS call).
const previewUrl = c.voice_preview_url
? c.voice_preview_url
: `/api/voiceover/preview?voice_id=${encodeURIComponent(c.voice_id)}&text=${encodeURIComponent("Hello — this is " + c.name + ".")}`;
const track = {
id,
isPreview: true,
segment_label: `${c.name} · voice preview`,
character_name: c.name,
version: c.voice_name || "",
shot_id: null,
file_path: previewUrl,
cover_url: c.cover_url || c.image || null,
};
setCurrentTrack(track);
setQueue([]);
setIsPlaying(true);
setTimeout(() => {
if (audioRef.current) {
try { audioRef.current.currentTime = 0; audioRef.current.play(); } catch (e) {}
}
}, 30);
};
// Build the audio src for the current track. Previews stream
// their src directly (ElevenLabs CDN URL or our preview proxy);
// saved takes go through /api/audio/:id/stream.
const currentSrc = currentTrack
? (currentTrack.isPreview ? currentTrack.file_path : `/api/audio/${currentTrack.id}/stream`)
: null;
return (
VOICE & VO
Audio
Character voice previews and narration / VO takes.