Spaces:
Runtime error
Runtime error
| import { useAudioData, visualizeAudio } from "@remotion/media-utils"; | |
| import { AbsoluteFill, Audio, useCurrentFrame, useVideoConfig } from "remotion"; | |
| import { FPS, type AudiogramSquareProps } from "../schema"; | |
| import { theme } from "../theme"; | |
| import { Logo, ProgressBar } from "./shared"; | |
| import { Starfield } from "./Starfield"; | |
| const BARS = 48; | |
| export function audiogramDuration(props: AudiogramSquareProps): number { | |
| return Math.max(FPS, Math.round(props.durationS * FPS)); | |
| } | |
| function Waveform({ src, accent }: { src: string; accent: string }) { | |
| const frame = useCurrentFrame(); | |
| const { fps } = useVideoConfig(); | |
| const audio = useAudioData(src); | |
| const values = audio | |
| ? visualizeAudio({ fps, frame, audioData: audio, numberOfSamples: 64, smoothing: true }).slice(0, BARS) | |
| : Array.from({ length: BARS }, () => 0.02); | |
| return ( | |
| <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, height: 260 }}> | |
| {values.map((v, i) => { | |
| const h = Math.max(6, Math.min(1, v * 6) * 240); | |
| return ( | |
| <div | |
| key={i} | |
| style={{ | |
| width: 10, | |
| height: h, | |
| borderRadius: 5, | |
| background: i % 2 ? theme.white : accent, | |
| boxShadow: `0 0 16px ${accent}`, | |
| opacity: 0.9, | |
| }} | |
| /> | |
| ); | |
| })} | |
| </div> | |
| ); | |
| } | |
| /** 1:1 audiogram: title, live waveform, the current line of the conversation and who is speaking. */ | |
| export function AudiogramSquare(props: AudiogramSquareProps) { | |
| const accent = props.brand.accent ?? theme.blue; | |
| const frame = useCurrentFrame(); | |
| const ms = (frame / FPS) * 1000; | |
| const current = props.segments.find((s) => ms >= s.startMs && ms < s.endMs); | |
| const speaker = current?.speaker === "host_b" ? "Host B" : "Host A"; | |
| return ( | |
| <AbsoluteFill> | |
| <Starfield accent={accent} count={100} /> | |
| <Audio src={props.audioUrl} /> | |
| <AbsoluteFill style={{ padding: 90, justifyContent: "space-between" }}> | |
| <div> | |
| <p style={{ fontFamily: theme.mono, fontSize: 26, letterSpacing: 4, color: accent, textTransform: "uppercase" }}> | |
| Audio overview | |
| </p> | |
| <h1 style={{ fontFamily: theme.display, fontSize: 58, lineHeight: 1.1, color: theme.white, marginTop: 18 }}> | |
| {props.title} | |
| </h1> | |
| </div> | |
| <Waveform src={props.audioUrl} accent={accent} /> | |
| <div style={{ minHeight: 220 }}> | |
| {current && ( | |
| <> | |
| <p style={{ fontFamily: theme.mono, fontSize: 24, color: "rgba(255,255,255,0.6)" }}>{speaker}</p> | |
| <p style={{ fontFamily: theme.body, fontSize: 38, lineHeight: 1.3, color: theme.white, marginTop: 10 }}> | |
| {current.text.length > 180 ? `${current.text.slice(0, 180)}...` : current.text} | |
| </p> | |
| </> | |
| )} | |
| </div> | |
| </AbsoluteFill> | |
| <ProgressBar accent={accent} height={8} /> | |
| <Logo url={props.brand.logoUrl} size={64} inset={50} /> | |
| </AbsoluteFill> | |
| ); | |
| } | |