1 files changed, 12 insertions, 2 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
index 01ab4e0..d2d56b5 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
@@ -99,6 +99,12 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   const onPlayQueue = useCallback((tracks, startIndex) => {
     setMusicQueue({ tracks, startIndex, nonce: Date.now() });
   }, []);
+  // This component instance is not remounted when switching to a *different*
+  // group on the same /group/:id route (only groupId as a prop changes, see
+  // the connect effect's own comment below) — so leaving music playing here
+  // would carry it into whatever group is opened next. Tab switches inside
+  // one group must not stop it; leaving the group itself must.
+  useEffect(() => { setMusicQueue(null); }, [groupId]);
   // Paired ≠ operator account. `is_node_admin` says the hub account owning this
   // node is the one connecting; this says the node pinned *this browser's* key
   // as an operator key. Only the second one lets you sign an invite, and only
@@ -595,9 +601,13 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
             once something has been played this session, the bar stays
             mounted and keeps playing regardless of which tab is active —
             switching to Chat or Files must not stop the music. Renders
-            nothing of its own until onPlayQueue has been called once. */
+            nothing of its own until onPlayQueue has been called once.
+            Its own close button, and the effect above on leaving the
+            group, both go through the same setMusicQueue(null) — the
+            bar's own unmount cleanup is what actually stops playback. */
         musicQueue && html`
-        <${MusicPlayerBar} transportRef=${transportRef} gekRef=${gekRef} queue=${musicQueue} />
+        <${MusicPlayerBar} transportRef=${transportRef} gekRef=${gekRef} queue=${musicQueue}
+          onClose=${() => setMusicQueue(null)} />
       `}
     </div>
   `;