implement stream player

js/src/features/playback/ack-button.tsx

@@ -1,84 +0,0 @@
-import { Heart } from "lucide-react";
-import { useCallback } from "react";
-import type { AckInfo } from "@/api/types";
-import { apiClient } from "@/api/client";
-import { useAuthStore } from "@/stores/auth-store";
-import { useAppStore } from "@/stores/app-store";
-import { cn } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-interface AckButtonProps {
-  particleId: string;
-  acks: AckInfo[];
-}
-
-function getInitials(email: string): string {
-  const prefix = email.split("@")[0];
-  const parts = prefix.split(/[._-]/);
-  if (parts.length >= 2) {
-    return (parts[0][0] + parts[1][0]).toUpperCase();
-  }
-  return prefix.slice(0, 2).toUpperCase();
-}
-
-export function AckButton({ particleId, acks }: AckButtonProps) {
-  const currentEmail = useAuthStore((s) => s.user?.email);
-  const ackParticle = useAppStore((s) => s.ackParticle);
-  const hasAcked = acks.some((a) => a.email === currentEmail);
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (hasAcked || !currentEmail) return;
-      ackParticle(particleId, currentEmail);
-      apiClient.ackParticle(particleId).catch(() => {});
-    },
-    [hasAcked, currentEmail, particleId, ackParticle],
-  );
-
-  const displayedAcks = acks.slice(0, 3);
-
-  return (
-    <div className="flex flex-col items-center gap-1.5">
-      <button
-        type="button"
-        onClick={handleClick}
-        className={cn(
-          "flex h-10 w-10 flex-col items-center justify-center rounded-full bg-black/30 backdrop-blur-sm transition-colors",
-          hasAcked
-            ? "text-red-500"
-            : "text-white hover:bg-black/40",
-        )}
-      >
-        <Heart
-          className="h-4 w-4"
-          fill={hasAcked ? "currentColor" : "none"}
-        />
-        <span className="mt-0.5 text-[10px] font-medium leading-none">
-          {acks.length}
-        </span>
-      </button>
-
-      {displayedAcks.length > 0 && (
-        <div className="flex flex-col items-center gap-1">
-          {displayedAcks.map((ack) => (
-            <Tooltip key={ack.email}>
-              <TooltipTrigger asChild>
-                <div className="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-[10px] font-medium text-white backdrop-blur-sm">
-                  {getInitials(ack.email)}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                <p>{ack.email}</p>
-              </TooltipContent>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,5 +1,4 @@
-import type { StreamParticle } from "@/api/types";
-import { getParticleData } from "@/api/types";
+import type { Particle } from "@/api/types";
 import {
   Card,
   CardContent,
@@ -16,7 +15,7 @@ const TYPE_META: Record<string, { icon: typeof FileIcon; label: string }> = {
 };
 
 interface FallbackParticleViewProps {
-  particle: StreamParticle;
+  particle: Particle;
 }
 
 export function FallbackParticleView({ particle }: FallbackParticleViewProps) {
@@ -28,13 +27,13 @@ export function FallbackParticleView({ particle }: FallbackParticleViewProps) {
   const title = (() => {
     switch (particle.type) {
       case "quest":
-        return getParticleData(particle, "quest").title;
+        return particle.properties.title;
       case "paper":
-        return getParticleData(particle, "paper").title;
+        return particle.properties.title;
       case "file":
-        return getParticleData(particle, "file").filename;
+        return particle.properties.filename;
       case "folder":
-        return getParticleData(particle, "folder").name;
+        return particle.properties.name;
       default:
         return null;
     }

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

@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from "react";
-import type { MediaParticleData, StreamParticle } from "@/api/types";
+import type { Particle } from "@/api/types";
 import { apiClient } from "@/api/client";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { Skeleton } from "@/components/ui/skeleton";
-import { AudioLevelBars } from "@/components/audio/audio-level-bars";
-import { useAudioSource } from "@/components/audio/use-audio-source";
+
+type MediaParticle = Extract<Particle, { type: "media" }>;
 
 interface MediaParticleViewProps {
-  particle: StreamParticle;
+  particle: MediaParticle;
 }
 
 function formatTime(ms: number): string {
@@ -48,17 +48,14 @@ export function MediaParticleView({
   const audioRef = useRef<HTMLAudioElement>(null);
   const [currentTimeMs, setCurrentTimeMs] = useState(0);
 
-  const data = particle.data as MediaParticleData;
-  const isAudio = data.mime_type?.startsWith("audio/");
+  const isAudio = particle.properties.mime_type?.startsWith("audio/");
 
   useEffect(() => {
-    if (cachedUrl) {
-      return;
-    }
+    if (cachedUrl) return;
 
     let cancelled = false;
     apiClient
-      .getParticleDownloadUrl(particle.id)
+      .getParticleDownloadUrl(particle.properties.object_id)
       .then((downloadUrl) => {
         if (cancelled) return;
         cacheDownloadUrl(particle.id, downloadUrl);
@@ -70,17 +67,10 @@ export function MediaParticleView({
     return () => {
       cancelled = true;
     };
-  }, [particle.id, cacheDownloadUrl]);
+  }, [particle.id, particle.properties.object_id, cacheDownloadUrl]);
 
-  // Handle pause/resume
   useEffect(() => {
-    var el: HTMLVideoElement | HTMLAudioElement | null = null;
-    if (isAudio) {
-      el = audioRef.current;
-    } else {
-      el = videoRef.current;
-    }
-
+    const el = isAudio ? audioRef.current : videoRef.current;
     if (!el) return;
 
     if (paused) {
@@ -120,7 +110,7 @@ export function MediaParticleView({
 
         <DurationPill
           currentTimeMs={currentTimeMs}
-          totalDurationMs={data.duration_ms}
+          totalDurationMs={particle.properties.duration_ms}
         />
       </div>
     );
@@ -141,7 +131,7 @@ export function MediaParticleView({
       />
       <DurationPill
         currentTimeMs={currentTimeMs}
-        totalDurationMs={data.duration_ms}
+        totalDurationMs={particle.properties.duration_ms}
       />
     </div>
   );

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

@@ -1,15 +1,11 @@
-import { useEffect, useRef } from "react";
-import type { StreamParticle } from "@/api/types";
-import { apiClient } from "@/api/client";
-import { useAppStore } from "@/stores/app-store";
+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";
-import { AckButton } from "./ack-button";
 
 interface ParticleRendererProps {
-  particle: StreamParticle;
+  particle: Particle;
 }
 
 export function ParticleRenderer({
@@ -18,17 +14,6 @@ export function ParticleRenderer({
   const next = usePlaybackStore((s) => s.next);
   const prev = usePlaybackStore((s) => s.prev);
 
-  const markParticlesSeen = useAppStore((s) => s.markParticlesSeen);
-  const markedRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    if (!particle.seen && markedRef.current !== particle.id) {
-      markedRef.current = particle.id;
-      markParticlesSeen([particle.id]);
-      apiClient.markSeen(particle.id);
-    }
-  }, [particle.id, particle.seen, markParticlesSeen]);
-
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const x = (e.clientX - rect.left) / rect.width;
@@ -42,17 +27,13 @@ export function ParticleRenderer({
       onClick={handleClick}
     >
       <ParticleContent particle={particle} />
-      <div className="absolute right-4 bottom-16">
-        <AckButton particleId={particle.id} acks={particle.acks} />
-      </div>
     </div>
   );
 }
 
-function ParticleContent({ particle }: { particle: StreamParticle }) {
+function ParticleContent({ particle }: { particle: Particle }) {
   switch (particle.type) {
     case "media":
-      {/* NOTE: it's more robust to re-mount the MediaParticleView when the particle changes, to ensure playback state is well-behaved */ }
       return <MediaParticleView key={particle.id} particle={particle} />;
     case "text":
       return <TextParticleView particle={particle} />;

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

@@ -1,8 +1,10 @@
-import type { StreamParticle, TextParticleData } from "@/api/types";
+import type { Particle } from "@/api/types";
 import { cn } from "@/lib/utils";
 
+type TextParticle = Extract<Particle, { type: "text" }>;
+
 interface TextParticleViewProps {
-  particle: StreamParticle;
+  particle: TextParticle;
 }
 
 function getTextStyle(length: number) {
@@ -13,8 +15,7 @@ function getTextStyle(length: number) {
 }
 
 export function TextParticleView({ particle }: TextParticleViewProps) {
-  const data = particle.data as TextParticleData;
-  const style = getTextStyle(data.content.length);
+  const style = getTextStyle(particle.properties.content.length);
 
   return (
     <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
@@ -25,7 +26,7 @@ export function TextParticleView({ particle }: TextParticleViewProps) {
           style.weight,
         )}
       >
-        {data.content}
+        {particle.properties.content}
       </p>
     </div>
   );