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>
This commit is contained in:
Nuwan 2026-01-15 23:11:19 +05:30
parent 281c6eba7f
commit e4d51fb452
1 changed files with 9 additions and 5 deletions

View File

@ -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'>