refactor: organize desktop vs. mobile into separate folders

2026-04-29 08:42:56 -07:00
parent 3d9fe67936
commit 3a11a82cd3
194 changed files with 213 additions and 213 deletions
@@ -0,0 +1,170 @@
+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 { 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" }>;
+
+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) {
+  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/");
+
+  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,
+  );
+
+  // 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 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">
+            <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 ${particle.properties.source === "screen" ? "object-contain bg-black" : "object-cover"}`}
+      />
+
+      {transcript && (
+        <TranscriptOverlay
+          transcript={transcript}
+          activeSentence={activeSentence}
+          activeWordIndex={activeWordIndex}
+        />
+      )}
+
+      {attachmentOverlay}
+    </div>
+  );
+});