From f2b439cc86a392dfa865534c49bbded586d2d581 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 13 Apr 2026 09:11:46 -0700
Subject: [PATCH] fix: prevent stream exit during overlays

---
 js/src/components/keybindings-overlay.tsx            | 9 +++++++++
 js/src/features/particles/rename-stream-overlay.tsx  | 8 ++++++++
 js/src/features/particles/stream-members-overlay.tsx | 8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/js/src/components/keybindings-overlay.tsx b/js/src/components/keybindings-overlay.tsx
index 9344b65..01b5300 100644
--- a/js/src/components/keybindings-overlay.tsx
+++ b/js/src/components/keybindings-overlay.tsx
@@ -1,3 +1,4 @@
+import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 
@@ -24,6 +25,14 @@ export function KeybindingsOverlay({
   groups,
   title = "Keyboard Shortcuts",
 }: KeybindingsOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    if (!open) return;
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
     const handler = (e: KeyboardEvent) => {
diff --git a/js/src/features/particles/rename-stream-overlay.tsx b/js/src/features/particles/rename-stream-overlay.tsx
index 456c69b..9ca0969 100644
--- a/js/src/features/particles/rename-stream-overlay.tsx
+++ b/js/src/features/particles/rename-stream-overlay.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { updateParticleProperties } 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 RenameStreamOverlayProps {
   networkId: string;
@@ -17,6 +18,13 @@ export function RenameStreamOverlay({
   streamParticle,
   onClose,
 }: RenameStreamOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, []);
+
   const [name, setName] = useState(streamParticle.properties.name);
   const [saving, setSaving] = useState(false);
 
diff --git a/js/src/features/particles/stream-members-overlay.tsx b/js/src/features/particles/stream-members-overlay.tsx
index c2e7652..f9ba7e2 100644
--- a/js/src/features/particles/stream-members-overlay.tsx
+++ b/js/src/features/particles/stream-members-overlay.tsx
@@ -13,6 +13,7 @@ import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
 import { useNetwork } from "@/hooks/use-networks";
 import { cn, getInitials } from "@/lib/utils";
 import type { Particle } from "@/api/types";
+import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 
 interface StreamMembersOverlayProps {
   networkId: string;
@@ -27,6 +28,13 @@ export function StreamMembersOverlay({
   isCreator,
   onClose,
 }: StreamMembersOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, []);
+
   const network = useNetwork(networkId);
   const humans = network?.humans ?? [];
   const creatorId = streamParticle.created_by_human_id;