fix: implement stream playback cleaner structure

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: