From e4d51fb452b30908ace34bd24416933678a83f0d Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 15 Jan 2026 23:11:19 +0530
Subject: [PATCH] fix(05-03): show backing track when player opens and fix
 close

Fixes backing track display to show when the player popup is open,
matching JamTrack behavior. Also properly clears all state when closed.

Changes:
- Added showBackingTrackPlayer boolean from backingTrackData
- Updated conditional render to check showBackingTrackPlayer
- Track now displays only when popup is actually open
- handleBackingTrackMainClose now clears backingTrackData
- Also closes the modal to ensure popup is hidden

Display flow:
1. User selects backing track
2. handleBackingTrackSelected opens file and sets backingTrackData
3. Player popup opens (showBackingTrackPlayer = true)
4. WebSocket MIXER_CHANGES updates mixerHelper.backingTracks
5. Track appears in session screen (both conditions met)
6. Clicking close removes track and closes popup

Close flow:
1. Calls closeMedia() to close native client media
2. Clears backingTrackData (hides track and popup)
3. Closes modal (ensures popup window closes)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 jam-ui/src/components/client/JKSessionScreen.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index 8840b3d60..a1d53294a 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -188,6 +188,7 @@ const JKSessionScreen = () => {
 
   // Redux backing track state (modal visibility and data)
   const backingTrackData = useSelector(selectBackingTrackData);
+  const showBackingTrackPlayer = Boolean(backingTrackData);
 
   // Stable callback for backing track popup close
   const handleBackingTrackClose = useCallback(() => {
@@ -197,10 +198,13 @@ const JKSessionScreen = () => {
   }, [dispatch]);
 
   // Stable callback for backing track close in main screen
-  const handleBackingTrackMainClose = useCallback(() => {
+  const handleBackingTrackMainClose = useCallback(async () => {
     console.log('JKSessionScreen: Backing Track main screen close requested');
-    closeMedia();
-  }, [closeMedia]);
+    await closeMedia();
+    // Also clear the backing track popup data
+    dispatch(clearBackingTrackData());
+    dispatch(closeModal('backingTrack'));
+  }, [closeMedia, dispatch]);
 
   // Redux JamTrack player state (modal visibility and data)
   const jamTrackData = useSelector(selectJamTrackData);
@@ -1097,8 +1101,8 @@ const JKSessionScreen = () => {
             </>
           )}
 
-          {/* Backing Track Section */}
-          {mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
+          {/* Backing Track Section - Show track when player is open */}
+          {showBackingTrackPlayer && mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
             <>
               <div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
               <div className='backingTrack'>