feat(05-03): show JamTrack stems when player is ready

Shows JamTrack stems in session screen only when the player is ready
to play (after download/packaging is complete), matching backing track
behavior.

Changes:
- Added jamTrackDownloadState selector
- Updated conditional render to check download state
- Stems now show when state is 'synchronized' or 'idle'
- Prevents showing stems during packaging/downloading

Stems display flow:
1. User selects JamTrack from modal
2. handleJamTrackSelect fetches JamTrack with stems
3. Sets selectedJamTrack and jamTrackStems in Redux
4. Player opens and begins packaging/downloading if needed
5. Once downloadState becomes 'synchronized', stems appear in session
6. Clicking close (player or session) removes stems and closes player

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Nuwan 2026-01-15 22:40:15 +05:30
parent 81de545e49
commit c3d8076590
1 changed files with 4 additions and 2 deletions

View File

@ -209,6 +209,7 @@ const JKSessionScreen = () => {
// Redux jam track state
const selectedJamTrack = useSelector(selectSelectedJamTrack);
const jamTrackStems = useSelector(selectJamTrackStems);
const jamTrackDownloadState = useSelector(state => state.media.downloadState);
// JamTrack close handler (used by both player and session screen)
const handleJamTrackClose = useCallback(async () => {
@ -1067,8 +1068,9 @@ const JKSessionScreen = () => {
</div>
</div>
{/* JamTrack Section */}
{selectedJamTrack && jamTrackStems.length > 0 && (
{/* JamTrack Section - Show stems when player is ready */}
{selectedJamTrack && jamTrackStems.length > 0 &&
(jamTrackDownloadState.state === 'synchronized' || jamTrackDownloadState.state === 'idle') && (
<>
<div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
<div className='jamTrack'>