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,52 @@
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+import { Trash2 } from "lucide-react-native";
+import type { Particle } from "@/api/types";
+import { useNetwork } from "@/hooks/use-networks";
+import { resolveHumanDisplay } from "@/lib/humans";
+
+// How long to linger on a tombstone before auto-advancing. Same cadence as
+// desktop — a beat long enough to read "this was deleted," not so long it
+// stalls the stream.
+const TOMBSTONE_DURATION_MS = 2000;
+
+interface DeletedParticleViewProps {
+  particle: Particle;
+  networkId: string;
+  paused: boolean;
+  onEnded: () => void;
+}
+
+export function DeletedParticleView({
+  particle,
+  networkId,
+  paused,
+  onEnded,
+}: DeletedParticleViewProps) {
+  const network = useNetwork(networkId);
+  const deleterId =
+    "deleted_by_human_id" in particle ? particle.deleted_by_human_id : undefined;
+  const deleter = deleterId
+    ? resolveHumanDisplay(deleterId, network?.humans)
+    : null;
+
+  useEffect(() => {
+    if (paused) return;
+    const timeout = setTimeout(onEnded, TOMBSTONE_DURATION_MS);
+    return () => clearTimeout(timeout);
+  }, [paused, onEnded, particle.id]);
+
+  return (
+    <View className="flex-1 items-center justify-center px-8">
+      <Trash2 color="rgba(255,255,255,0.4)" size={28} strokeWidth={1.5} />
+      <Text className="text-white/70 mt-3 text-base font-medium">
+        This particle was deleted
+      </Text>
+      {deleter ? (
+        <Text className="text-white/40 mt-1 text-xs">
+          by {deleter.displayName}
+        </Text>
+      ) : null}
+    </View>
+  );
+}