feat: autoplay inbound clips

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Radio,
@@ -26,6 +26,7 @@ import { Separator } from "@/components/ui/separator";
 import { Progress } from "@/components/ui/progress";
 import { Small } from "@/components/ui/typography";
 import type { Particle, StreamProperties } from "@/api/types";
+import { useAutoplayStore } from "@/stores/autoplay-store";
 
 function getParticleTypeIcon(particle: Particle): LucideIcon {
   switch (particle.type) {
@@ -86,6 +87,28 @@ function StreamRow({
   const userId = user?.id ?? "";
   const userEmail = user?.email ?? "";
 
+  // Autoplay: trigger only when latestChild *changes* to a new media particle,
+  // not on initial data load. We track the "settled" id — the first non-null value
+  // we see — and only autoplay on subsequent changes from that baseline.
+  const settledIdRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (!latestChild) return;
+
+    // First real value: record it as baseline, don't autoplay
+    if (settledIdRef.current === undefined) {
+      settledIdRef.current = latestChild.id;
+      return;
+    }
+
+    if (latestChild.id === settledIdRef.current) return;
+    settledIdRef.current = latestChild.id;
+
+    if (latestChild.type !== "media") return;
+    if (latestChild.created_by_email === userEmail) return;
+
+    useAutoplayStore.getState().play(latestChild, particle.id);
+  }, [latestChild?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const isDM =
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith("human:"));