144 lines
4.1 KiB
TypeScript
144 lines
4.1 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import type { Particle } from "@/api/types";
|
|
import type { ParticlePath } from "@/lib/particle-path";
|
|
import { useDownloadUrl } from "@/hooks/use-download-url";
|
|
import { useTranscriptPlayback } from "@/hooks/use-transcript-playback";
|
|
import { TranscriptOverlay } from "@/features/particles/transcript-overlay";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { AudioLevelBars } from "@/components/audio/audio-level-bars";
|
|
import { useAudioSource } from "@/components/audio/use-audio-source";
|
|
import { useParticleAttachments } from "@/hooks/use-particle-attachments";
|
|
import { ParticleAttachments } from "@/features/particles/particle-attachments";
|
|
|
|
type MediaParticle = Extract<Particle, { type: "media" }>;
|
|
|
|
interface MediaParticleViewProps {
|
|
particle: MediaParticle;
|
|
streamPath: ParticlePath;
|
|
paused: boolean;
|
|
onEnded: () => void;
|
|
onProgress?: (ratio: number) => void;
|
|
}
|
|
|
|
export function MediaParticleView({
|
|
particle,
|
|
streamPath,
|
|
paused,
|
|
onEnded,
|
|
onProgress,
|
|
}: MediaParticleViewProps) {
|
|
const { data: url, error } = useDownloadUrl(particle.properties.object_id);
|
|
const { attachments } = useParticleAttachments(streamPath, particle.id);
|
|
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const audioRef = useRef<HTMLAudioElement>(null);
|
|
const isAudio = particle.properties.mime_type?.startsWith("audio/");
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
|
|
const transcript = particle.properties.transcript;
|
|
const { activeSentence, activeWordIndex } = useTranscriptPlayback(
|
|
transcript,
|
|
currentTime,
|
|
);
|
|
|
|
// WORKAROUND: useAudioSource needs an audio element, but audioRef is only set after mount
|
|
const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
|
|
const audioSource = useAudioSource(audioEl);
|
|
|
|
useEffect(() => {
|
|
const el = isAudio ? audioRef.current : videoRef.current;
|
|
if (!el) return;
|
|
|
|
if (paused) {
|
|
el.pause();
|
|
} else {
|
|
el.play().catch(() => {
|
|
console.warn("Playback failed", { particleId: particle.id });
|
|
});
|
|
}
|
|
}, [paused, isAudio, particle.id]);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="text-muted-foreground flex items-center justify-center text-sm">
|
|
Failed to load media
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!url) {
|
|
return <Skeleton className="h-full w-full rounded-none" />;
|
|
}
|
|
|
|
const handleTimeUpdate = (e: React.SyntheticEvent<HTMLAudioElement | HTMLVideoElement>) => {
|
|
const { currentTime: time, duration } = e.currentTarget;
|
|
setCurrentTime(time);
|
|
if (duration > 0) onProgress?.(time / duration);
|
|
};
|
|
|
|
const attachmentOverlay = attachments.length > 0 && (
|
|
<div className="absolute inset-x-0 bottom-16 z-10 px-4">
|
|
<ParticleAttachments attachments={attachments} />
|
|
</div>
|
|
);
|
|
|
|
if (isAudio) {
|
|
return (
|
|
<div className="relative flex h-full w-full items-center justify-center bg-black/90">
|
|
<audio
|
|
ref={(el) => {
|
|
audioRef.current = el;
|
|
setAudioEl(el);
|
|
}}
|
|
crossOrigin="anonymous"
|
|
src={url}
|
|
autoPlay
|
|
onEnded={onEnded}
|
|
onTimeUpdate={handleTimeUpdate}
|
|
/>
|
|
|
|
{audioSource && (
|
|
<div className="z-10 absolute bottom-5">
|
|
<AudioLevelBars sourceNode={audioSource.sourceNode} />
|
|
</div>
|
|
)}
|
|
|
|
{transcript && (
|
|
<TranscriptOverlay
|
|
transcript={transcript}
|
|
activeSentence={activeSentence}
|
|
activeWordIndex={activeWordIndex}
|
|
centered
|
|
/>
|
|
)}
|
|
|
|
{attachmentOverlay}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
<video
|
|
ref={videoRef}
|
|
src={url}
|
|
autoPlay
|
|
playsInline
|
|
onEnded={onEnded}
|
|
onTimeUpdate={handleTimeUpdate}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
|
|
{transcript && (
|
|
<TranscriptOverlay
|
|
transcript={transcript}
|
|
activeSentence={activeSentence}
|
|
activeWordIndex={activeWordIndex}
|
|
/>
|
|
)}
|
|
|
|
{attachmentOverlay}
|
|
</div>
|
|
);
|
|
}
|