implement stream player

js/src/features/particles/stream-view.tsx

@@ -1,6 +1,15 @@
-import { Particle } from "@/api/types";
+import { useEffect, useCallback } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import type { Particle } from "@/api/types";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
 import type { ParticlePath } from "@/lib/particle-path";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useComposeStore } from "@/stores/compose-store";
+import { useComposeKeyboard } from "@/features/compose/use-compose-keyboard";
+import { PlaybackPageIndicator } from "@/features/playback/playback-page-indicator";
+import { ParticleRenderer } from "@/features/playback/particle-renderer";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import ControlsIndicator from "@/features/compose/controls-indicator";
 
 interface StreamViewProps {
   streamParticle: Particle;
@@ -8,29 +17,146 @@ interface StreamViewProps {
 }
 
 export function StreamView({ path, streamParticle }: StreamViewProps) {
-  const { children, error, isLoading } = useLiveParticleChildren(path);
+  const { networkId } = useParams();
+  const navigate = useNavigate();
+  const { children } = useLiveParticleChildren(path);
+
+  const status = usePlaybackStore((s) => s.status);
+  const currentIndex = usePlaybackStore((s) => s.currentIndex);
+  const particles = usePlaybackStore((s) => s.particles);
+  const initStream = usePlaybackStore((s) => s.initStream);
+  const goTo = usePlaybackStore((s) => s.goTo);
+  const next = usePlaybackStore((s) => s.next);
+  const prev = usePlaybackStore((s) => s.prev);
+  const pause = usePlaybackStore((s) => s.pause);
+  const resume = usePlaybackStore((s) => s.resume);
+  const reset = usePlaybackStore((s) => s.reset);
+
+  // Compose keyboard (backtick, t, q, escape-during-compose)
+  useComposeKeyboard();
+
+  // Init playback when children change
+  useEffect(() => {
+    if (children.length > 0) {
+      initStream(streamParticle.id, children, 0);
+    }
+    return () => reset();
+  }, [children, streamParticle.id, initStream, reset]);
+
+  // Pause/resume playback when compose overlay opens/closes
+  useEffect(() => {
+    return useComposeStore.subscribe((state) => {
+      if (state.step !== "idle") {
+        pause();
+      } else {
+        resume();
+      }
+    });
+  }, [pause, resume]);
+
+  // Playback keyboard: arrows, escape
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const composeStep = useComposeStore.getState().step;
+      if (composeStep !== "idle") return;
+
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault();
+          next();
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          prev();
+          break;
+        case "Escape":
+          e.preventDefault();
+          navigate(`/${networkId}`);
+          break;
+      }
+    },
+    [next, prev, navigate, networkId],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  const currentParticle = particles[currentIndex] ?? null;
+
+  // Stream name from properties (narrowed to stream type)
+  const streamName =
+    streamParticle.type === "stream"
+      ? streamParticle.properties.name
+      : "";
+
+  // Author info from current particle
+  const authorEmail = currentParticle?.created_by_email ?? "";
+  const authorInitials = authorEmail.split("@")[0]?.slice(0, 2).toUpperCase() ?? "";
+
+  if (children.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4 bg-black text-white">
+        <p className="text-muted-foreground text-sm">
+          No particles in this stream yet
+        </p>
+        <ControlsIndicator type="reply" />
+      </div>
+    );
+  }
 
   return (
-    <div className="flex h-full items-center justify-center">
-      <p className="text-muted-foreground text-sm">
-        Stream view — {streamParticle.id}
-      </p>
+    <div className="relative flex h-full flex-col bg-black text-white">
+      {/* Progress indicator */}
+      <div className="z-10 pt-1">
+        <PlaybackPageIndicator
+          total={particles.length}
+          current={currentIndex}
+          onGoTo={goTo}
+        />
+      </div>
 
-      {isLoading && <p className="text-muted-foreground text-sm">Loading stream data...</p>}
-      {error && <p className="text-destructive text-sm">Failed to load stream data</p>}
-
-      {!isLoading && !error && (
-        <div className="mt-4">
-          <p className="text-sm font-medium">Stream Children:</p>
-          <ul className="list-disc list-inside">
-            {children.map((child) => (
-              <li key={child.id} className="text-sm">
-                {child.id} ({child.type})
-              </li>
-            ))}
-          </ul>
+      {/* Author overlay */}
+      {currentParticle && (
+        <div className="absolute top-5 left-0 right-0 z-10 flex items-center justify-center gap-2">
+          <Avatar size="sm">
+            <AvatarFallback className="bg-white/20 text-[10px] font-medium text-white">
+              {authorInitials}
+            </AvatarFallback>
+          </Avatar>
+          <span className="text-xs text-white/70">
+            {authorEmail.split("@")[0]}
+          </span>
         </div>
       )}
+
+      {/* Main playback area */}
+      <div className="flex-1 overflow-hidden">
+        {currentParticle && status !== "ended" ? (
+          <ParticleRenderer particle={currentParticle} />
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-muted-foreground text-sm">End of stream</p>
+          </div>
+        )}
+      </div>
+
+      {/* Stream name overlay */}
+      <div className="z-10 flex items-center justify-center pb-3 pt-1">
+        <span className="text-sm font-medium text-white/60">{streamName}</span>
+      </div>
     </div>
   );
 }