From e74c3ab44fb2c5560bb7646a4e476e2229f495e3 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 16 Jan 2026 09:32:35 +0530
Subject: [PATCH] fix(05-03): show backing track section immediately when
 player opens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes issue where backing track wasn't appearing because mixerHelper
data hadn't arrived yet via WebSocket. Now shows section immediately
with loading state until mixer data arrives.

Changes:
- Removed dependency on mixerHelper.backingTracks for initial display
- Section now shows when showBackingTrackPlayer is true
- Header shows filename from backingTrackData.backingTrack immediately
- Displays "Loading backing track controls..." until mixer data arrives
- Once MIXER_CHANGES WebSocket message arrives, shows full track with VU/gain

Display flow:
1. Player opens → showBackingTrackPlayer = true
2. Section immediately appears with header and filename
3. Shows loading message for controls
4. WebSocket MIXER_CHANGES arrives → mixerHelper.backingTracks populated
5. Full track controls appear (VU meter, gain, pan menu)

This provides immediate visual feedback while waiting for server data.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../src/components/client/JKSessionScreen.js  | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index a1d53294a..70aa3195f 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -189,6 +189,9 @@ const JKSessionScreen = () => {
   // Redux backing track state (modal visibility and data)
   const backingTrackData = useSelector(selectBackingTrackData);
   const showBackingTrackPlayer = Boolean(backingTrackData);
+  
+  console.log('Backing Track Data:', backingTrackData);
+  console.log('mixerHelper.backingTracks:', mixerHelper.backingTracks);
 
   // Stable callback for backing track popup close
   const handleBackingTrackClose = useCallback(() => {
@@ -1102,12 +1105,16 @@ const JKSessionScreen = () => {
           )}
 
           {/* Backing Track Section - Show track when player is open */}
-          {showBackingTrackPlayer && mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
+          {showBackingTrackPlayer && (
             <>
               <div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
               <div className='backingTrack'>
                 <h5>
-                  Backing Track: {mixerHelper.backingTracks[0].shortFilename || 'Audio File'}
+                  Backing Track: {
+                    mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0
+                      ? (mixerHelper.backingTracks[0].shortFilename || 'Audio File')
+                      : (backingTrackData.backingTrack?.split('/').pop().split('\\').pop() || 'Loading...')
+                  }
                   <a
                     href="#"
                     className="text-muted ml-2"
@@ -1121,11 +1128,17 @@ const JKSessionScreen = () => {
                     <FontAwesomeIcon icon="times" /> Close
                   </a>
                 </h5>
-                <JKSessionBackingTrack
-                  backingTrack={mixerHelper.backingTracks[0]}
-                  mixers={mixerHelper.backingTracks[0].mixers}
-                  onClose={handleBackingTrackMainClose}
-                />
+                {mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 ? (
+                  <JKSessionBackingTrack
+                    backingTrack={mixerHelper.backingTracks[0]}
+                    mixers={mixerHelper.backingTracks[0].mixers}
+                    onClose={handleBackingTrackMainClose}
+                  />
+                ) : (
+                  <div style={{ textAlign: 'center', padding: '20px', color: '#6c757d' }}>
+                    Loading backing track controls...
+                  </div>
+                )}
               </div>
             </>
           )}