From d19754bf548fe72a72a832c97c83bca3d30097ca Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 16 Jan 2026 11:53:54 +0530
Subject: [PATCH] refactor(05-03): revert workaround and remove debug logs

Now that useMixerHelper properly exposes backingTracks, we can:
- Revert the loading state workaround
- Restore original conditional requiring both showBackingTrackPlayer
  and mixerHelper.backingTracks
- Remove debug console.log statements

The backing track section now waits for both conditions:
1. Player popup is open (showBackingTrackPlayer)
2. WebSocket data has arrived (mixerHelper.backingTracks)

This provides a cleaner implementation without loading placeholders.

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

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index 70aa3195f..a1d53294a 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -189,9 +189,6 @@ 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(() => {
@@ -1105,16 +1102,12 @@ const JKSessionScreen = () => {
           )}
 
           {/* Backing Track Section - Show track when player is open */}
-          {showBackingTrackPlayer && (
+          {showBackingTrackPlayer && mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
             <>
               <div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
               <div className='backingTrack'>
                 <h5>
-                  Backing Track: {
-                    mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0
-                      ? (mixerHelper.backingTracks[0].shortFilename || 'Audio File')
-                      : (backingTrackData.backingTrack?.split('/').pop().split('\\').pop() || 'Loading...')
-                  }
+                  Backing Track: {mixerHelper.backingTracks[0].shortFilename || 'Audio File'}
                   <a
                     href="#"
                     className="text-muted ml-2"
@@ -1128,17 +1121,11 @@ const JKSessionScreen = () => {
                     <FontAwesomeIcon icon="times" /> Close
                   </a>
                 </h5>
-                {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>
-                )}
+                <JKSessionBackingTrack
+                  backingTrack={mixerHelper.backingTracks[0]}
+                  mixers={mixerHelper.backingTracks[0].mixers}
+                  onClose={handleBackingTrackMainClose}
+                />
               </div>
             </>
           )}