fix(plex): the player drops a session answer that lands late, and Next neither loses nor lends a position

Deep-review round 3 of bug hunt 2026-09.

- loadSession checks, after its await, that it is still the newest call and the player is still
  mounted. A late answer used to replace what was playing (Next twice quickly: the slower transcode
  landed last and played the middle item under the last one's title, recording its progress there)
  or attach a stream to the detached <video> after Back, never destroyed.
- The <video>'s clock is trusted only once the new session has answered. go()'s pause() fires a
  timeupdate AFTER the reset to 0 (measured in Chrome), so the previous item's position was sent as
  the next item's subtitle position and saved as its progress (final, pushed to Plex).
- Next settles the item being left (final checkpoint + reopen-cache patch) before switching: the
  progress cleanup ran with the position already reset and skipped, so every Next dropped the last
  stretch watched.
- A seek-restart puts its target into the position state too; the ref alone was re-synced back to
  the pre-seek spot by the restart's own render.
- The unmount teardown captures the <video> at mount: React detaches refs before an unmount's
  cleanups, so the stop/detach never ran.
- The tracks panel exposes the selected audio/subtitle track via aria-pressed.

Verified in real Chrome on localdev (Westworld S1E6 → Next): the item left was settled at 783 s, the
next asked for subtitles at its own start (0), and no progress was written for it.

frontend/src/lib/plexPlayerHooks.ts

@@ -79,14 +79,20 @@ export function useControlsVisibility(opts: {
 // Periodic + on-unmount progress checkpoint. Reads live position/duration through refs (owned by the
 // component, since seeking/skip/ended all mutate absRef too) so the interval and unload beacon see the
 // current spot without rebuilding the effect.
+//
+// `settle` is what leaving the item does (the final checkpoint + the reopen-cache patch). The player
+// calls it itself BEFORE it moves to another item: by the time this effect's cleanup runs for the
+// outgoing id, the position has already been reset for the incoming one — so the cleanup found 0 and
+// skipped, and every Next dropped the last stretch watched of the episode being left.
 export function usePlexProgress(opts: {
   id: string;
   qc: QueryClient;
   videoRef: RefObject<HTMLVideoElement | null>;
   absRef: MutableRefObject<number>;
   durationRef: MutableRefObject<number>;
-}): void {
+}): { settle: () => void } {
   const { id, qc, videoRef, absRef, durationRef } = opts;
+  const settleRef = useRef<() => void>(() => {});
   useEffect(() => {
     // `final` = a settled checkpoint (pause / page-hide / leaving the player) vs. the periodic tick.
     // Only final checkpoints get mirrored to a linked Plex account (backend-side debounce), so Plex
@@ -120,23 +126,15 @@ export function usePlexProgress(opts: {
         api.plexProgressBeacon(id, Math.floor(absRef.current), durationRef.current, true);
     };
     window.addEventListener("pagehide", onHide);
-    return () => {
-      window.clearInterval(iv);
-      window.clearTimeout(seekTimer);
-      window.removeEventListener("pagehide", onHide);
-      video?.removeEventListener("pause", onPauseFlush);
-      video?.removeEventListener("seeked", onSeekFlush);
+    // Back (unmount) persists the position server-side via flush(), but reopening the same item in
+    // the SAME session read react-query's CACHED detail — whose position_seconds predated this watch —
+    // so the resume landed at the old spot (the progress GET could also race the POST). So leaving
+    // also patches the cached detail, and a reopen resumes from where we left off. (F5 was always fine:
+    // a reload starts with an empty cache and fetches the fresh position.) Safe to do only when leaving
+    // — patching while mounted would retrigger the loadSession effect and reseek mid-play. Reading the
+    // LATEST abs/duration is the whole point of the checkpoint (the resume point when leaving).
+    const settle = () => {
       flush(true);
-      // Back (unmount) persists the position server-side via flush(), but reopening the same item in
-      // the SAME session read react-query's CACHED detail — whose position_seconds predated this
-      // watch — so the resume landed at the old spot (the progress GET could also race the POST).
-      // Patch the cached detail here so a reopen resumes from where we left off. (F5 was always fine:
-      // a reload starts with an empty cache and fetches the fresh position.) Safe to do only on
-      // unmount — patching while mounted would retrigger the loadSession effect and reseek mid-play.
-      // Reading the LATEST abs/duration at cleanup is the whole point of the checkpoint (the resume
-      // point when leaving), not a stale snapshot — the "ref value may have changed" hint is a false
-      // positive here. Scoped disable so the deps array below is still checked.
-      /* eslint-disable react-hooks/exhaustive-deps */
       if (absRef.current > 0 && durationRef.current > 0) {
         const pos = Math.floor(absRef.current);
         // Match the language-keyed detail query (E5 S6) so the optimistic resume patch lands.
@@ -144,13 +142,23 @@ export function usePlexProgress(opts: {
           old ? { ...old, position_seconds: pos } : old,
         );
       }
-      /* eslint-enable react-hooks/exhaustive-deps */
+    };
+    settleRef.current = settle;
+    return () => {
+      window.clearInterval(iv);
+      window.clearTimeout(seekTimer);
+      window.removeEventListener("pagehide", onHide);
+      video?.removeEventListener("pause", onPauseFlush);
+      video?.removeEventListener("seeked", onSeekFlush);
+      settle();
+      settleRef.current = () => {};
       qc.invalidateQueries({ queryKey: qk.plexLibrary() });
       qc.invalidateQueries({ queryKey: qk.plexShow() });
     };
     // absRef/durationRef/videoRef are stable ref objects — listed to satisfy exhaustive-deps without
     // changing when the effect re-runs (id/qc only), matching the original in-component effect.
   }, [id, qc, absRef, durationRef, videoRef]);
+  return { settle: useCallback(() => settleRef.current(), []) };
 }
 
 // Volume/mute for the Plex player's HTML5 <video> (0..1 float, independent .muted flag). Persists to