llink/js/desktop/src/features/particles/media-particle-view.tsx

import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  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 { CenteredWaveform } from '@/components/audio/centered-waveform';
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' }>;

export interface MediaParticleHandle {
  /** Seek by delta. Returns true if seeked, false if at boundary (should navigate). */
  seek: (deltaSec: number) => boolean;
  setPlaybackRate: (rate: number) => void;
}

interface MediaParticleViewProps {
  particle: MediaParticle;
  streamPath: ParticlePath;
  paused: boolean;
  onEnded: () => void;
  onProgress?: (ratio: number) => void;
}

export const MediaParticleView = forwardRef<
  MediaParticleHandle,
  MediaParticleViewProps
>(function MediaParticleView(
  { particle, streamPath, paused, onEnded, onProgress },
  ref,
) {
  // Prefer the worker-produced iOS-playable variant when present so desktop and
  // mobile read the same canonical asset, falling back to the original. Pinned
  // on mount (the parent keys this component by particle.id, so a new particle
  // remounts and re-picks): if a transcoded variant arrives via Firestore for
  // the same particle, swapping the <video> src would restart playback from 0.
  const [pickedSource] = useState(() => ({
    objectId:
      particle.properties.transcoded_object_id ?? particle.properties.object_id,
    mime:
      particle.properties.transcoded_mime_type ?? particle.properties.mime_type,
  }));
  const activeObjectId = pickedSource.objectId;
  const activeMime = pickedSource.mime;
  const { data: url, error } = useDownloadUrl(activeObjectId);
  const { attachments } = useParticleAttachments(streamPath, particle.id);

  const videoRef = useRef<HTMLVideoElement>(null);
  const audioRef = useRef<HTMLAudioElement>(null);
  const isAudio = activeMime?.startsWith('audio/');

  useImperativeHandle(
    ref,
    () => ({
      seek(deltaSec: number) {
        const el = isAudio ? audioRef.current : videoRef.current;
        if (!el) return false;
        if (deltaSec < 0 && el.currentTime < Math.abs(deltaSec)) return false;
        if (deltaSec > 0 && el.duration - el.currentTime < deltaSec)
          return false;
        el.currentTime = Math.max(
          0,
          Math.min(el.duration, el.currentTime + deltaSec),
        );
        return true;
      },
      setPlaybackRate(rate: number) {
        const el = isAudio ? audioRef.current : videoRef.current;
        if (el) el.playbackRate = rate;
      },
    }),
    [isAudio],
  );
  const [currentTime, setCurrentTime] = useState(0);

  const transcript = particle.properties.transcript;
  const { activeSentence, activeWordIndex } = useTranscriptPlayback(
    transcript,
    currentTime,
  );

  // useAudioSource needs the 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 if (!el.ended) {
      // Calling play() on a naturally-finished element restarts it from 0.
      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);
    // WebM files from MediaRecorder (screen recordings) often report Infinity/NaN
    // duration until fully buffered — fall back to the known duration from metadata.
    const effectiveDuration =
      Number.isFinite(duration) && duration > 0
        ? duration
        : particle.properties.duration_ms / 1000;
    if (effectiveDuration > 0) onProgress?.(time / effectiveDuration);
  };

  const attachmentOverlay = attachments.length > 0 && (
    <div className="absolute inset-x-0 top-12 z-10 px-4">
      <ParticleAttachments attachments={attachments} variant="compact" />
    </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-20">
            <CenteredWaveform
              sourceNode={audioSource.sourceNode}
              className="text-white"
            />
          </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-contain bg-black"
      />

      {transcript && (
        <TranscriptOverlay
          transcript={transcript}
          activeSentence={activeSentence}
          activeWordIndex={activeWordIndex}
        />
      )}

      {attachmentOverlay}
    </div>
  );
});