# Phase 1: Backing Track Playback Monitoring - Context

**Gathered:** 2026-01-13
**Status:** Ready for planning

<vision>
## How This Should Work

Replicate how playback monitoring is handled in the legacy web project, but using jam-ui standards and techniques (React hooks, modern patterns). The player should continuously poll the native client (500ms intervals) to get current playback position and duration, then display these in real-time as the track plays.

Users should see the current position updating smoothly as the track plays, matching the behavior they're familiar with from the legacy web version.

</vision>

<essential>
## What Must Be Nailed

- **Functional parity with legacy web** - The monitoring must work exactly like the jQuery/Rails version, with 500ms polling and accurate time display
- **Accurate time display** - Current position and total duration must be precise and match the native client's actual playback state
- **UI layout matching reference** - Current time (MM:SS) on left of slider, total duration (MM:SS) on right, as shown in reference screenshot

</essential>

<boundaries>
## What's Out of Scope

- **Seek bar functionality** - Just display times, don't implement the drag-to-seek behavior (that's Phase 2)
- **Error handling** - Focus on happy path monitoring, edge cases handled in Phase 3
- **Visual redesign** - Keep existing player UI structure, just make the time displays functional
- **Performance optimization** - Basic polling pattern first, optimizations in Phase 3

</boundaries>

<specifics>
## Specific Ideas

Reference UI layout from screenshot at `/Users/nuwan/Desktop/Screenshot 2026-01-13 at 20.10.48.png`:

```
Backing Track: Hendrix Blues Jam (G).wav

[Play] [Stop]   1:02 ————————◉———— 5:13

☑ Loop playback

                [Close]
```

Key elements:
- Current time: "1:02" (left side)
- Duration: "5:13" (right side)
- Format: M:SS or MM:SS (no padding on minutes if single digit)
- Horizontal slider between times (non-functional in this phase)
- Play/Stop buttons and Loop checkbox already working

Legacy implementation uses:
- 500ms polling interval via setTimeout
- jamClient methods: SessionGetTracksPlayDurationMs(), SessionCurrrentPlayPosMs(), isSessionTrackPlaying()
- Time formatting: milliseconds → "M:SS" display format

</specifics>

<notes>
## Additional Context

This phase establishes the monitoring foundation that Phase 2 (seek controls) will build upon. The polling mechanism and time display logic created here will be reused when adding seek functionality.

User provided a reference screenshot showing the exact layout and formatting expected. The component already has the UI structure in place - this phase is about making the hardcoded "0:00" values dynamic and real-time.

Current state in JKSessionBackingTrackPlayer.js:
- Duration and currentTime are useState variables hardcoded to "0:00"
- Player controls (play/pause/stop) work via jamClient
- Need to add useEffect with polling logic to update these values

</notes>

---

*Phase: 01-backing-track-playback-monitoring*
*Context gathered: 2026-01-13*
