From 03ced6d18088b998ec09b7cf0b2e90834cd18ed1 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 25 Apr 2026 12:49:01 -0700
Subject: [PATCH] fix: pause playback during delete particle overlay

---
 js/src/features/particles/delete-particle-overlay.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/js/src/features/particles/delete-particle-overlay.tsx b/js/src/features/particles/delete-particle-overlay.tsx
index 7f15b86..5d3167e 100644
--- a/js/src/features/particles/delete-particle-overlay.tsx
+++ b/js/src/features/particles/delete-particle-overlay.tsx
@@ -1,9 +1,10 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { ConfirmDestructiveOverlay } from "@/components/confirm-destructive-overlay";
 import { softDeleteParticle } from "@/lib/firestore-particles";
 import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
 import type { Particle } from "@/api/types";
+import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 
 interface DeleteParticleOverlayProps {
   networkId: string;
@@ -20,6 +21,13 @@ export function DeleteParticleOverlay({
   userId,
   onClose,
 }: DeleteParticleOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, []);
+
   const [deleting, setDeleting] = useState(false);
 
   const handleDelete = useCallback(async () => {