implement stream player

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

@@ -1,6 +1,7 @@
 import { Particle } from "@/api/types";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
 import type { ParticlePath } from "@/lib/particle-path";
+import { useComposeKeyboard } from "@/features/compose/use-compose-keyboard";
 
 interface FolderViewProps {
   folderParticle: Particle;
@@ -8,6 +9,7 @@ interface FolderViewProps {
 }
 
 export function FolderView({ path, folderParticle }: FolderViewProps) {
+  useComposeKeyboard();
   const { children, error, isLoading } = useLiveParticleChildren(path);
 
   return (

js/src/features/particles/particle-list-view.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useComposeKeyboard } from "@/features/compose/use-compose-keyboard";
 import { useNavigate } from "react-router-dom";
 import { Radio } from "lucide-react";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
@@ -54,6 +55,7 @@ interface ParticleListViewProps {
  * List of stream particles for a container (network root, folder, etc.).
  */
 export function ParticleListView({ path }: ParticleListViewProps) {
+  useComposeKeyboard();
   const { children, isLoading } = useLiveParticleChildren(path);
   const { networkId } = parseParticlePath(path);
   const navigate = useNavigate();

js/src/features/particles/particle-preview.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from "react";
+import type { Particle } from "@/api/types";
+import { apiClient } from "@/api/client";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Video,
+  Mic,
+  ScrollText,
+  BookOpen,
+  FileIcon,
+  FolderIcon,
+} from "lucide-react";
+
+export function ParticlePreview({ particle }: { particle: Particle }) {
+  switch (particle.type) {
+    case "text":
+      return <TextPreview particle={particle} />;
+    case "media":
+      return <MediaPreview particle={particle} />;
+    case "quest":
+      return <QuestPreview particle={particle} />;
+    case "paper":
+      return <PaperPreview particle={particle} />;
+    case "file":
+      return <FilePreview particle={particle} />;
+    case "folder":
+      return <FolderPreview particle={particle} />;
+    default:
+      return <EmptyPreview />;
+  }
+}
+
+function TextPreview({ particle }: { particle: Extract<Particle, { type: "text" }> }) {
+  const truncated =
+    particle.properties.content.length > 30
+      ? particle.properties.content.slice(0, 30) + "..."
+      : particle.properties.content;
+  return (
+    <div className="flex h-full w-full items-center justify-center p-4">
+      <p className="line-clamp-4 text-center text-4xl leading-relaxed">
+        {truncated}
+      </p>
+    </div>
+  );
+}
+
+function MediaPreview({ particle }: { particle: Extract<Particle, { type: "media" }> }) {
+  const { mime_type, duration_ms } = particle.properties;
+  const isVideo = mime_type.startsWith("video");
+  const durationSec = Math.round(duration_ms / 1000);
+  const durationLabel = `${Math.floor(durationSec / 60)}:${String(durationSec % 60).padStart(2, "0")}`;
+
+  if (isVideo) {
+    return <VideoThumbnail particleId={particle.id} duration={durationLabel} />;
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-black/90">
+      <Mic className="h-8 w-8 text-white/60" />
+      <span className="font-mono text-xs text-white/50">{durationLabel}</span>
+    </div>
+  );
+}
+
+function VideoThumbnail({
+  particleId,
+  duration,
+}: {
+  particleId: string;
+  duration: string;
+}) {
+  const [url, setUrl] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    apiClient
+      .getParticleDownloadUrl(particleId)
+      .then((downloadUrl) => {
+        if (!cancelled) setUrl(downloadUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setError(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [particleId]);
+
+  if (error) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-black/80">
+        <Video className="h-8 w-8 text-white/40" />
+      </div>
+    );
+  }
+
+  if (!url) {
+    return <Skeleton className="h-full w-full rounded-none" />;
+  }
+
+  return (
+    <div className="relative h-full w-full bg-black">
+      <video
+        src={url}
+        preload="metadata"
+        muted
+        playsInline
+        className="h-full w-full object-cover"
+      />
+      <span className="absolute right-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-0.5 font-mono text-[10px] text-white/80">
+        {duration}
+      </span>
+    </div>
+  );
+}
+
+function QuestPreview({ particle }: { particle: Extract<Particle, { type: "quest" }> }) {
+  const { title, status } = particle.properties;
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-amber-500/10 p-4">
+      <ScrollText className="h-6 w-6 text-amber-600/70 dark:text-amber-400/70" />
+      <p className="line-clamp-2 text-center text-sm font-medium">
+        {title}
+      </p>
+      {status && (
+        <span className="text-muted-foreground text-[10px] uppercase tracking-wide">
+          {status}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function PaperPreview({ particle }: { particle: Extract<Particle, { type: "paper" }> }) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-blue-500/10 p-4">
+      <BookOpen className="h-6 w-6 text-blue-600/70 dark:text-blue-400/70" />
+      <p className="line-clamp-2 text-center text-sm font-medium">
+        {particle.properties.title}
+      </p>
+    </div>
+  );
+}
+
+function FilePreview({ particle }: { particle: Extract<Particle, { type: "file" }> }) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-emerald-500/10 p-4">
+      <FileIcon className="h-6 w-6 text-emerald-600/70 dark:text-emerald-400/70" />
+      <p className="text-muted-foreground line-clamp-1 text-center text-xs">
+        {particle.properties.filename}
+      </p>
+    </div>
+  );
+}
+
+function FolderPreview({ particle }: { particle: Extract<Particle, { type: "folder" }> }) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-orange-500/10 p-4">
+      <FolderIcon className="h-6 w-6 text-orange-600/70 dark:text-orange-400/70" />
+      <p className="text-muted-foreground line-clamp-1 text-center text-xs">
+        {particle.properties.name}
+      </p>
+    </div>
+  );
+}
+
+function EmptyPreview() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <p className="text-muted-foreground text-xs italic">No messages yet</p>
+    </div>
+  );
+}

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>
   );
 }