Spaces:
Runtime error
Runtime error
| import { useEffect, useRef, useState } from "react"; | |
| import type { VideoScene } from "../../api/types"; | |
| import type { PanelProps } from "./EditorPanels"; | |
| const GROUP = 5; | |
| const clock = (s: number) => { | |
| const t = Math.max(0, Math.round(s)); | |
| return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`; | |
| }; | |
| /** Each scene's voiceover, grouped by five (one group open at a time), to play with a progress bar. */ | |
| export function Voiceovers(p: PanelProps & { scenes: VideoScene[] }) { | |
| const { scenes } = p; | |
| const [openGroup, setOpenGroup] = useState<number | null>(0); | |
| const [playing, setPlaying] = useState<{ id: number; at: number; length: number } | null>(null); | |
| const audio = useRef<HTMLAudioElement | null>(null); | |
| const ready = scenes.filter((s) => s.audio_url).length; | |
| const total = Math.round(scenes.reduce((n, s) => n + Number(s.duration_seconds ?? 0), 0)); | |
| // Stop playback when leaving the tab. | |
| useEffect(() => () => audio.current?.pause(), []); | |
| function toggle(s: VideoScene) { | |
| const el = audio.current; | |
| if (!el || !s.audio_url) return; | |
| if (playing?.id === s.id) { | |
| el.pause(); | |
| setPlaying(null); | |
| return; | |
| } | |
| el.src = s.audio_url; | |
| el.currentTime = 0; | |
| setPlaying({ id: s.id, at: 0, length: Number(s.duration_seconds ?? 0) }); | |
| el.play().catch(() => setPlaying(null)); | |
| } | |
| const groups: VideoScene[][] = []; | |
| for (let i = 0; i < scenes.length; i += GROUP) groups.push(scenes.slice(i, i + GROUP)); | |
| return ( | |
| <section className="card stack"> | |
| <div className="vw-vo-head"> | |
| <h3>Voiceovers</h3> | |
| <span className="muted small">{ready} / {scenes.length} scenes · {total}s total</span> | |
| <span className="vw-vo-legend muted small"> | |
| <span><i className="vw-vo-dot ok" /> Ready</span> | |
| <span><i className="vw-vo-dot" /> Pending</span> | |
| </span> | |
| </div> | |
| <audio ref={audio} preload="none" hidden | |
| onTimeUpdate={(e) => { | |
| const el = e.currentTarget; | |
| setPlaying((pl) => pl && { ...pl, at: el.currentTime, length: el.duration || pl.length }); | |
| }} | |
| onEnded={() => setPlaying(null)} /> | |
| {groups.map((group, g) => { | |
| const first = g * GROUP + 1; | |
| const open = openGroup === g; | |
| return ( | |
| <section key={g} className="vw-group"> | |
| <button type="button" className="vw-group-head" aria-expanded={open} onClick={() => setOpenGroup(open ? null : g)}> | |
| <span>Scenes {first}–{first + group.length - 1}{!open && <span className="muted small"> · Expand to view scenes</span>}</span> | |
| <span className="muted">{open ? "︿" : "﹀"}</span> | |
| </button> | |
| {open && group.map((s) => { | |
| const on = playing?.id === s.id; | |
| const length = on ? playing.length : Number(s.duration_seconds ?? 0); | |
| const at = on ? playing.at : 0; | |
| return ( | |
| <div key={s.id} className="vw-vo-row"> | |
| <span className="vw-num-badge">{s.order}</span> | |
| <button type="button" className="vw-vo-play" disabled={!s.audio_url} | |
| aria-label={on ? `Pause scene ${s.order}` : `Play scene ${s.order}`} onClick={() => toggle(s)}> | |
| {on ? <span className="vw-vo-pause" /> : <span className="vw-vo-tri" />} | |
| </button> | |
| <div className="vw-vo-main"> | |
| <div className="vw-vo-line"> | |
| <strong>{s.title || `Scene ${s.order}`}</strong> | |
| <span className="mono muted small">{clock(at)} / {clock(length)}</span> | |
| </div> | |
| <div className="vw-vo-bar"><span style={{ width: `${length ? Math.min(100, (at / length) * 100) : 0}%` }} /></div> | |
| </div> | |
| <i className={`vw-vo-dot${s.audio_url ? " ok" : ""}`} title={s.audio_url ? "Ready" : "Pending"} /> | |
| </div> | |
| ); | |
| })} | |
| </section> | |
| ); | |
| })} | |
| </section> | |
| ); | |
| } | |