fix: implement stream playback cleaner structure

js/src/features/playback/media-particle-view.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import type { Particle } from "@/api/types";
-import { apiClient } from "@/api/client";
-import { usePlaybackStore } from "@/stores/playback-store";
+import { useDownloadUrl } from "@/hooks/use-download-url";
 import { Skeleton } from "@/components/ui/skeleton";
 
 type MediaParticle = Extract<Particle, { type: "media" }>;
 
 interface MediaParticleViewProps {
   particle: MediaParticle;
+  paused: boolean;
+  onEnded: () => void;
 }
 
 function formatTime(ms: number): string {
@@ -35,14 +36,10 @@ function DurationPill({
 
 export function MediaParticleView({
   particle,
+  paused,
+  onEnded,
 }: MediaParticleViewProps) {
-  const cachedUrl = usePlaybackStore(
-    (s) => s.downloadUrlCache[particle.id],
-  );
-  const cacheDownloadUrl = usePlaybackStore((s) => s.cacheDownloadUrl);
-  const next = usePlaybackStore((s) => s.next);
-  const paused = usePlaybackStore((s) => s.paused);
-  const [error, setError] = useState<string | null>(null);
+  const { data: url, error } = useDownloadUrl(particle.properties.object_id);
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
@@ -50,25 +47,6 @@ export function MediaParticleView({
 
   const isAudio = particle.properties.mime_type?.startsWith("audio/");
 
-  useEffect(() => {
-    if (cachedUrl) return;
-
-    let cancelled = false;
-    apiClient
-      .getParticleDownloadUrl(particle.properties.object_id)
-      .then((downloadUrl) => {
-        if (cancelled) return;
-        cacheDownloadUrl(particle.id, downloadUrl);
-      })
-      .catch(() => {
-        if (!cancelled) setError("Failed to load media");
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [particle.id, particle.properties.object_id, cacheDownloadUrl]);
-
   useEffect(() => {
     const el = isAudio ? audioRef.current : videoRef.current;
     if (!el) return;
@@ -80,17 +58,17 @@ export function MediaParticleView({
         console.warn("Playback failed", { particleId: particle.id });
       });
     }
-  }, [paused]);
+  }, [paused, isAudio, particle.id]);
 
   if (error) {
     return (
       <div className="text-muted-foreground flex items-center justify-center text-sm">
-        {error}
+        Failed to load media
       </div>
     );
   }
 
-  if (!cachedUrl) {
+  if (!url) {
     return <Skeleton className="h-full w-full rounded-none" />;
   }
 
@@ -100,9 +78,9 @@ export function MediaParticleView({
         <audio
           ref={audioRef}
           crossOrigin="anonymous"
-          src={cachedUrl}
+          src={url}
           autoPlay
-          onEnded={next}
+          onEnded={onEnded}
           onTimeUpdate={(e) => {
             setCurrentTimeMs(e.currentTarget.currentTime * 1000);
           }}
@@ -120,10 +98,10 @@ export function MediaParticleView({
     <div className="relative h-full w-full">
       <video
         ref={videoRef}
-        src={cachedUrl}
+        src={url}
         autoPlay
         playsInline
-        onEnded={next}
+        onEnded={onEnded}
         onTimeUpdate={(e) => {
           setCurrentTimeMs(e.currentTarget.currentTime * 1000);
         }}

js/src/features/playback/particle-renderer.tsx

@@ -1,24 +1,26 @@
 import type { Particle } from "@/api/types";
-import { usePlaybackStore } from "@/stores/playback-store";
 import { MediaParticleView } from "./media-particle-view";
 import { TextParticleView } from "./text-particle-view";
 import { FallbackParticleView } from "./fallback-particle-view";
 
 interface ParticleRendererProps {
   particle: Particle;
+  paused: boolean;
+  onNext: () => void;
+  onPrev: () => void;
 }
 
 export function ParticleRenderer({
   particle,
+  paused,
+  onNext,
+  onPrev,
 }: ParticleRendererProps) {
-  const next = usePlaybackStore((s) => s.next);
-  const prev = usePlaybackStore((s) => s.prev);
-
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const x = (e.clientX - rect.left) / rect.width;
-    if (x < 0.3) prev();
-    else if (x > 0.7) next();
+    if (x < 0.3) onPrev();
+    else if (x > 0.7) onNext();
   };
 
   return (
@@ -26,15 +28,30 @@ export function ParticleRenderer({
       className="relative flex h-full w-full cursor-pointer items-center justify-center"
       onClick={handleClick}
     >
-      <ParticleContent particle={particle} />
+      <ParticleContent particle={particle} paused={paused} onEnded={onNext} />
     </div>
   );
 }
 
-function ParticleContent({ particle }: { particle: Particle }) {
+function ParticleContent({
+  particle,
+  paused,
+  onEnded,
+}: {
+  particle: Particle;
+  paused: boolean;
+  onEnded: () => void;
+}) {
   switch (particle.type) {
     case "media":
-      return <MediaParticleView key={particle.id} particle={particle} />;
+      return (
+        <MediaParticleView
+          key={particle.id}
+          particle={particle}
+          paused={paused}
+          onEnded={onEnded}
+        />
+      );
     case "text":
       return <TextParticleView particle={particle} />;
     default: