Tracing a click¶

Here's what happens when you open Songs, sort by Most played, and click the third song while the output is the server's speakers:

sequenceDiagram
  participant U as You
  participant R as router.js / main.js
  participant V as views/tracks.js
  participant L as nessie-track-list
  participant P as Player → ServerOutput
  participant S as Server
  U->>R: choose "Most played" in the sort menu
  R->>R: setQuery({sort: "plays"}) → hash changes → showRoute()
  R->>V: render(root, ctx)
  V->>S: GET /v1/library/libraries/1/tracks?sort=playsℴ=desc&limit=50
  S-->>V: { items, total, ... } (your own plays, since plays defaults to mine)
  V->>L: list.tracks = page.items
  U->>L: click row 3
  L->>R: emit nessie:play { trackIds, start: 2 }
  R->>P: player.play(trackIds, 2)
  P->>S: POST /v1/player/play { track_ids, start: 2 }
  S->>S: note the listener, load mpv's playlist, play
  S-->>P: PlayerStateOut
  P-->>L: 'state' → nowPlaying → row 3 highlighted
  Note over S: when the track ends, mpv's event thread calls<br/>record_pi_play() → plays.record_play(..., listener)

Files to open, in order:

• frontend/js/views/tracks.js
• frontend/js/views/common.js (bindListControls)
• frontend/js/components/nessie-track-list.js (playFrom)
• frontend/js/main.js (setupRequests)
• frontend/js/player/player.js
• frontend/js/player/server-output.js
• app/api/library_routes.py (list_library_tracks)
• app/repositories/tracks.py
• app/api/player_routes.py (play)
• app/services/player.py