step 4: stream playback experience

2026-04-29 12:01:34 -07:00
parent 73cc65c5d1
commit ddfcf1ee12
15 changed files with 1217 additions and 9 deletions
@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+import {
+  FileIcon,
+  HelpCircle,
+  ScrollText,
+  BookOpen,
+  type LucideIcon,
+} from "lucide-react-native";
+import type { Particle } from "@/api/types";
+import { useNetwork } from "@/hooks/use-networks";
+import { resolveHumanDisplay } from "@/lib/humans";
+
+const TYPE_META: Record<string, { icon: LucideIcon; label: string }> = {
+  quest: { icon: ScrollText, label: "Quest" },
+  paper: { icon: BookOpen, label: "Paper" },
+  file: { icon: FileIcon, label: "File" },
+};
+
+const PLACEHOLDER_DURATION_MS = 5000;
+
+interface FallbackParticleViewProps {
+  particle: Particle;
+  networkId: string;
+  paused: boolean;
+  onEnded: () => void;
+}
+
+export function FallbackParticleView({
+  particle,
+  networkId,
+  paused,
+  onEnded,
+}: FallbackParticleViewProps) {
+  const network = useNetwork(networkId);
+  const creator = resolveHumanDisplay(
+    particle.created_by_human_id,
+    network?.humans,
+  );
+  const meta = TYPE_META[particle.type] ?? {
+    icon: HelpCircle,
+    label: particle.type,
+  };
+  const Icon = meta.icon;
+  const title = (() => {
+    switch (particle.type) {
+      case "quest":
+        return particle.properties.title;
+      case "paper":
+        return particle.properties.title;
+      case "file":
+        return particle.properties.filename;
+      case "folder":
+        return particle.properties.name;
+      default:
+        return null;
+    }
+  })();
+
+  useEffect(() => {
+    if (paused) return;
+    const timeout = setTimeout(onEnded, PLACEHOLDER_DURATION_MS);
+    return () => clearTimeout(timeout);
+  }, [paused, onEnded, particle.id]);
+
+  return (
+    <View className="flex-1 items-center justify-center px-8">
+      <View className="bg-white/10 w-full max-w-sm rounded-2xl px-5 py-5">
+        <View className="flex-row items-center gap-3">
+          <Icon color="rgba(255,255,255,0.7)" size={22} strokeWidth={1.5} />
+          <View className="flex-1">
+            <Text className="text-white text-base font-semibold">
+              {meta.label}
+            </Text>
+            {title ? (
+              <Text className="text-white/70 text-sm" numberOfLines={2}>
+                {title}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        <Text className="text-white/50 mt-4 text-xs">
+          From {creator.displayName}
+        </Text>
+        <Text className="text-white/50 mt-1 text-xs">View on desktop</Text>
+      </View>
+    </View>
+  );
+}