Playback fix

docs/architecture/README.md

@@ -13,6 +13,7 @@ JellyTau uses a client-server architecture: business logic lives in a comprehens
 - **Business Logic in Rust**: Core logic — playback, repository, sync, downloads, connectivity — lives in Rust for performance, reliability, and type safety.
 - **Presentation in Svelte**: The frontend (~20.5k non-test lines) owns UI, layout, navigation, and interaction state and invokes Rust commands. It is intentionally UI-heavy, **not** a thin wrapper. Largest pieces: components + routes (~14.6k lines), stores (~3.4k), api/services/utils (~2.4k); `VideoPlayer.svelte` alone is ~1.6k lines.
 - **Events + Polling hybrid**: Rust emits events the frontend listens to, and the UI also polls status on short intervals in a few hot spots (e.g. queue status in `library/+layout.svelte`, playback progress in `VideoPlayer.svelte`).
+- **Unified player boundary**: UI components control playback only through the frontend facade `src/lib/player/index.ts` (`playerController`), never by calling `commands.player*` directly. Webview-rendered HTML5 video reports its state back into Rust via `src/lib/player/html5Adapter.ts` and the `player_report_*` commands, so the `PlayerController` stays the single source of truth in both native (MPV/ExoPlayer) and HTML5 modes (see [05-platform-backends.md](05-platform-backends.md)).
 - **Handle-Based Resources**: UUID handles for stateful Rust objects.
 - **Cache-First**: Parallel queries with intelligent fallback.
 - **Single source of truth for reachability**: Server reachability is derived from the outcome of *real repository traffic*, not a side-channel poller. The `OnlineRepository` reports each server result to the `ConnectivityMonitor` (classified via `RepoError`), which applies a time-window debounce before declaring the server offline and recovers instantly on the first success. The standalone `/System/Info/Public` probe runs *only while offline*, as a recovery detector for idle sessions.
@@ -166,6 +167,9 @@ src/lib/
 │   ├── repository-client.ts # RepositoryClient wrapper (~100 lines)
 │   ├── client.ts            # JellyfinClient (helper for streaming)
 │   └── sessions.ts          # SessionsApi (remote session control)
+├── player/                  # Unified player boundary (frontend)
+│   ├── index.ts             # playerController facade — the only write-side entry point for playback
+│   └── html5Adapter.ts      # Reports webview <video> DOM events back into Rust (player_report_*)
 ├── services/
 │   ├── playerEvents.ts      # Tauri event listener for player events
 │   └── playbackReporting.ts # Thin wrapper (~50 lines)

src-tauri/src/commands/player/timers.rs

@@ -247,3 +247,51 @@ pub async fn player_on_playback_ended(
 
     Ok(())
 }
+
+// ===== HTML5 video state-report commands =====
+//
+// On platforms where video renders in the webview (Linux WebKitGTK HTML5
+// <video>), the real player lives outside the native backend, so the frontend
+// HTML5 adapter reports DOM events back through these commands. The controller
+// re-emits them through the same PlayerStatusEvent pipeline the native backends
+// use, keeping the Rust controller the single source of truth and the frontend
+// player store fed from one place (playerEvents.ts) in both modes.
+
+/// Report an HTML5 <video> state change (playing/paused/loading/stopped/idle).
+#[tauri::command]
+#[specta::specta]
+pub async fn player_report_state(
+    player: State<'_, PlayerStateWrapper>,
+    state: String,
+    media_id: Option<String>,
+) -> Result<(), String> {
+    let controller = player.0.lock().await;
+    controller.report_html5_state(state, media_id);
+    Ok(())
+}
+
+/// Report an HTML5 <video> position tick (seconds). The adapter should throttle
+/// these to roughly match the native backends' ~250ms cadence.
+#[tauri::command]
+#[specta::specta]
+pub async fn player_report_position(
+    player: State<'_, PlayerStateWrapper>,
+    position: f64,
+    duration: f64,
+) -> Result<(), String> {
+    let controller = player.0.lock().await;
+    controller.report_html5_position(position, duration);
+    Ok(())
+}
+
+/// Report that the HTML5 <video> finished loading and knows its duration.
+#[tauri::command]
+#[specta::specta]
+pub async fn player_report_media_loaded(
+    player: State<'_, PlayerStateWrapper>,
+    duration: f64,
+) -> Result<(), String> {
+    let controller = player.0.lock().await;
+    controller.report_html5_media_loaded(duration);
+    Ok(())
+}

src-tauri/src/lib.rs

@@ -40,6 +40,8 @@ use commands::{
     player_set_sleep_timer, player_cancel_sleep_timer, player_get_sleep_timer,
     player_get_autoplay_settings, player_set_autoplay_settings,
     player_cancel_autoplay_countdown, player_play_next_episode, player_on_playback_ended,
+    // HTML5 video state-report commands
+    player_report_state, player_report_position, player_report_media_loaded,
     // Queue manipulation commands
     player_add_to_queue, player_add_track_by_id, player_add_tracks_by_ids,
     player_remove_from_queue, player_move_in_queue, player_skip_to,
@@ -476,6 +478,9 @@ fn specta_builder() -> Builder<tauri::Wry> {
             player_cancel_autoplay_countdown,
             player_play_next_episode,
             player_on_playback_ended,
+            player_report_state,
+            player_report_position,
+            player_report_media_loaded,
             // Preload commands
             player_preload_upcoming,
             player_set_cache_config,

src-tauri/src/player/mod.rs

@@ -777,6 +777,44 @@ impl PlayerController {
         }
     }
 
+    // ===== HTML5 video report methods =====
+    //
+    // On platforms where video is rendered in the webview (Linux WebKitGTK
+    // HTML5 <video>), the real player lives outside the native backend, so it
+    // cannot emit PlayerStatusEvents itself. The frontend HTML5 adapter reports
+    // DOM events here, and these methods re-emit them through the SAME event
+    // pipeline the native backends use. This keeps the frontend's player store
+    // fed from one place (playerEvents.ts) in both native and HTML5 modes, so
+    // the Rust controller stays the single source of truth for player state.
+
+    /// Report an HTML5 <video> state change (playing/paused/loading/stopped).
+    ///
+    /// Re-emits a `StateChanged` event identical to what MpvBackend/ExoPlayer
+    /// would emit, so `playerEvents.ts` needs no HTML5-specific branch.
+    pub fn report_html5_state(&self, state: String, media_id: Option<String>) {
+        if let Some(emitter) = self.event_emitter.lock_safe().as_ref() {
+            emitter.emit(PlayerStatusEvent::StateChanged { state, media_id });
+        }
+    }
+
+    /// Report an HTML5 <video> position tick.
+    ///
+    /// Re-emits a `PositionUpdate` event mirroring the native backends' periodic
+    /// position updates (the adapter is expected to throttle to ~250ms like MPV).
+    pub fn report_html5_position(&self, position: f64, duration: f64) {
+        if let Some(emitter) = self.event_emitter.lock_safe().as_ref() {
+            emitter.emit(PlayerStatusEvent::PositionUpdate { position, duration });
+        }
+    }
+
+    /// Report that the HTML5 <video> element finished loading and knows its
+    /// duration. Mirrors the native `MediaLoaded` event.
+    pub fn report_html5_media_loaded(&self, duration: f64) {
+        if let Some(emitter) = self.event_emitter.lock_safe().as_ref() {
+            emitter.emit(PlayerStatusEvent::MediaLoaded { duration });
+        }
+    }
+
     // ===== Autoplay Methods =====
 
     /// Get autoplay settings
@@ -1139,6 +1177,83 @@ impl Default for PlayerController {
 mod tests {
     use super::*;
 
+    /// Test emitter that captures events for asserting the HTML5 report methods
+    /// re-emit through the normal PlayerStatusEvent pipeline.
+    struct CapturingEmitter {
+        events: std::sync::Mutex<Vec<PlayerStatusEvent>>,
+    }
+
+    impl CapturingEmitter {
+        fn new() -> Self {
+            Self {
+                events: std::sync::Mutex::new(Vec::new()),
+            }
+        }
+        fn events(&self) -> Vec<PlayerStatusEvent> {
+            self.events.lock_safe().clone()
+        }
+    }
+
+    impl PlayerEventEmitter for CapturingEmitter {
+        fn emit(&self, event: PlayerStatusEvent) {
+            self.events.lock_safe().push(event);
+        }
+    }
+
+    #[test]
+    fn test_report_html5_state_emits_state_changed() {
+        let controller = PlayerController::default();
+        let emitter = Arc::new(CapturingEmitter::new());
+        controller.set_event_emitter(emitter.clone());
+
+        controller.report_html5_state("playing".to_string(), Some("item-1".to_string()));
+
+        let events = emitter.events();
+        assert_eq!(events.len(), 1);
+        match &events[0] {
+            PlayerStatusEvent::StateChanged { state, media_id } => {
+                assert_eq!(state, "playing");
+                assert_eq!(media_id.as_deref(), Some("item-1"));
+            }
+            other => panic!("expected StateChanged, got {:?}", other),
+        }
+    }
+
+    #[test]
+    fn test_report_html5_position_emits_position_update() {
+        let controller = PlayerController::default();
+        let emitter = Arc::new(CapturingEmitter::new());
+        controller.set_event_emitter(emitter.clone());
+
+        controller.report_html5_position(12.5, 300.0);
+
+        let events = emitter.events();
+        assert_eq!(events.len(), 1);
+        match &events[0] {
+            PlayerStatusEvent::PositionUpdate { position, duration } => {
+                assert_eq!(*position, 12.5);
+                assert_eq!(*duration, 300.0);
+            }
+            other => panic!("expected PositionUpdate, got {:?}", other),
+        }
+    }
+
+    #[test]
+    fn test_report_html5_media_loaded_emits_media_loaded() {
+        let controller = PlayerController::default();
+        let emitter = Arc::new(CapturingEmitter::new());
+        controller.set_event_emitter(emitter.clone());
+
+        controller.report_html5_media_loaded(420.0);
+
+        let events = emitter.events();
+        assert_eq!(events.len(), 1);
+        match &events[0] {
+            PlayerStatusEvent::MediaLoaded { duration } => assert_eq!(*duration, 420.0),
+            other => panic!("expected MediaLoaded, got {:?}", other),
+        }
+    }
+
     #[test]
     fn test_controller_volume_default() {
         let controller = PlayerController::default();

src/lib/api/bindings.ts

@@ -197,6 +197,25 @@ async playerPlayNextEpisode(item: PlayItemRequest) : Promise<PlayerStatus> {
 async playerOnPlaybackEnded(itemId: string | null, repositoryHandle: string | null) : Promise<null> {
     return await TAURI_INVOKE("player_on_playback_ended", { itemId, repositoryHandle });
 },
+/**
+ * Report an HTML5 <video> state change (playing/paused/loading/stopped/idle).
+ */
+async playerReportState(state: string, mediaId: string | null) : Promise<null> {
+    return await TAURI_INVOKE("player_report_state", { state, mediaId });
+},
+/**
+ * Report an HTML5 <video> position tick (seconds). The adapter should throttle
+ * these to roughly match the native backends' ~250ms cadence.
+ */
+async playerReportPosition(position: number, duration: number) : Promise<null> {
+    return await TAURI_INVOKE("player_report_position", { position, duration });
+},
+/**
+ * Report that the HTML5 <video> finished loading and knows its duration.
+ */
+async playerReportMediaLoaded(duration: number) : Promise<null> {
+    return await TAURI_INVOKE("player_report_media_loaded", { duration });
+},
 /**
  * Preload upcoming tracks from the queue
  * This queues background downloads for the next N tracks that aren't already downloaded

src/lib/components/library/PlaylistDetailView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { commands } from "$lib/api/bindings";
+  import { playerController } from "$lib/player";
   import type { MediaItem, PlaylistEntry } from "$lib/api/types";
   import { auth } from "$lib/stores/auth";
   import { toast } from "$lib/stores/toast";
@@ -48,10 +48,8 @@
   async function handlePlayAll() {
     if (entries.length === 0) return;
     try {
-      const repo = auth.getRepository();
-      const repositoryHandle = repo.getHandle();
       const trackIds = entries.map(e => e.id);
-      await commands.playerPlayTracks(repositoryHandle, {
+      await playerController.playTracks({
         trackIds,
         startIndex: 0,
         shuffle: false,
@@ -70,10 +68,8 @@
   async function handleShufflePlay() {
     if (entries.length === 0) return;
     try {
-      const repo = auth.getRepository();
-      const repositoryHandle = repo.getHandle();
       const trackIds = entries.map(e => e.id);
-      await commands.playerPlayTracks(repositoryHandle, {
+      await playerController.playTracks({
         trackIds,
         startIndex: 0,
         shuffle: true,

src/lib/components/library/TrackList.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { commands } from "$lib/api/bindings";
+  import { playerController } from "$lib/player";
   import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import type { PlayTracksContext } from "$lib/api/bindings";
   import { goto } from "$app/navigation";
   import { queue } from "$lib/stores/queue";
-  import { auth } from "$lib/stores/auth";
   import { currentMedia } from "$lib/stores/player";
   import { toast } from "$lib/stores/toast";
   import type { MediaItem } from "$lib/api/types";
@@ -54,17 +53,10 @@
     try {
       isPlayingTrack = track.id;
 
-      // Validate auth before proceeding
-      const repo = auth.getRepository();
-      if (!repo) {
-        throw new Error("Not authenticated");
-      }
-
       // If this is an album, use the backend album command (more efficient)
       if (context && context.type === "album") {
-        const repositoryHandle = repo.getHandle();
         console.log(`[TrackList] Playing track: "${track.name}" (ID: ${track.id}, index in list: ${index})`);
-        await commands.playerPlayAlbumTrack(repositoryHandle, {
+        await playerController.playAlbumTrack({
           albumId: context.albumId,
           albumName: context.albumName,
           trackId: track.id,
@@ -75,7 +67,6 @@
 
       // Use new backend command for non-album contexts (playlists, custom queues, etc.)
       // Backend handles all metadata fetching and queue building
-      const repositoryHandle = repo.getHandle();
       const trackIds = tracks.map((t) => t.id);
 
       // Determine context for queue
@@ -90,7 +81,7 @@
         playContext = { type: "custom", label: null };
       }
 
-      await commands.playerPlayTracks(repositoryHandle, {
+      await playerController.playTracks({
         trackIds,
         startIndex: index,
         shuffle: false,

src/lib/components/player/AudioPlayer.svelte

@@ -1,10 +1,9 @@
 <!-- TRACES: UR-004, UR-005, UR-028 | DR-009 -->
 <script lang="ts">
-  import { commands } from "$lib/api/bindings";
+  import { playerController } from "$lib/player";
   import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { goto } from "$app/navigation";
   import type { MediaItem } from "$lib/api/types";
-  import { auth } from "$lib/stores/auth";
   import { sleepTimerActive } from "$lib/stores/sleepTimer";
   import { queue, queueItems, currentQueueIndex } from "$lib/stores/queue";
   import {
@@ -75,28 +74,28 @@
   async function handleSeekEnd() {
     seeking = false;
     seekPending = true; // Keep showing target position until backend catches up
-    await commands.playerSeek(seekValue);
+    await playerController.seek(seekValue);
   }
 
   // Control handlers for Controls component
   async function handlePlayPause() {
-    await commands.playerToggle();
+    await playerController.toggle();
   }
 
   async function handlePrevious() {
-    await commands.playerPrevious();
+    await playerController.previous();
   }
 
   async function handleNext() {
-    await commands.playerNext();
+    await playerController.next();
   }
 
   async function handleToggleShuffle() {
-    await commands.playerToggleShuffle();
+    await playerController.toggleShuffle();
   }
 
   async function handleCycleRepeat() {
-    await commands.playerCycleRepeat();
+    await playerController.cycleRepeat();
   }
 
   // Prefer album ID for artwork (all tracks in an album share the same cover)
@@ -129,7 +128,7 @@
   async function handleQueueItemClick(index: number) {
     try {
       queue.skipTo(index);
-      await commands.playerSkipTo(index);
+      await playerController.skipTo(index);
     } catch (e) {
       console.error("Failed to skip to queue item:", e);
     }

src/lib/components/player/MiniPlayer.svelte

@@ -14,7 +14,7 @@
    * @req: UR-010 - Control playback of Jellyfin remote sessions
    */
 
-  import { commands } from "$lib/api/bindings";
+  import { playerController } from "$lib/player";
   import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { goto } from "$app/navigation";
   import type { MediaItem } from "$lib/api/types";
@@ -106,23 +106,23 @@
 
   // Control handlers for Controls component
   async function handlePlayPause() {
-    await commands.playerToggle();
+    await playerController.toggle();
   }
 
   async function handlePrevious() {
-    await commands.playerPrevious();
+    await playerController.previous();
   }
 
   async function handleNext() {
-    await commands.playerNext();
+    await playerController.next();
   }
 
   async function handleToggleShuffle() {
-    await commands.playerToggleShuffle();
+    await playerController.toggleShuffle();
   }
 
   async function handleCycleRepeat() {
-    await commands.playerCycleRepeat();
+    await playerController.cycleRepeat();
   }
 
   // Scrubbing (seek) handler
@@ -134,7 +134,7 @@
     const newPosition = percent * displayDuration;
 
     try {
-      await commands.playerSeek(newPosition);
+      await playerController.seek(newPosition);
       haptics.tap();
     } catch (err) {
       console.error("Failed to seek:", err);

src/lib/components/player/Queue.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { commands } from "$lib/api/bindings";
+  import { playerController } from "$lib/player";
   import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { dndzone, SOURCES, TRIGGERS } from "svelte-dnd-action";
   import type { MediaItem } from "$lib/api/types";
@@ -80,7 +80,7 @@
         queue.moveInQueue(fromIndex, toIndex);
 
         // Sync with backend
-        await commands.playerMoveInQueue(fromIndex, toIndex);
+        await playerController.moveInQueue(fromIndex, toIndex);
       } catch (e) {
         console.error("Failed to move queue item:", e);
         // The store already updated optimistically, refresh if needed
@@ -107,7 +107,7 @@
     e.stopPropagation();
     try {
       queue.removeFromQueue(index);
-      await commands.playerRemoveFromQueue(index);
+      await playerController.removeFromQueue(index);
     } catch (err) {
       console.error("Failed to remove from queue:", err);
     }

src/lib/components/player/VideoPlayer.scrubRegression.test.ts

@@ -1,22 +1,27 @@
 /**
- * VideoPlayer scrub regression tests (Android native backend path)
+ * VideoPlayer scrub regression tests (Android backend path)
  *
  * Reproduces the reported bug: with a sleep timer active, scrubbing the
  * video seek bar "seeks, then jumps back to the old position".
  *
- * These tests mount the REAL VideoPlayer in native-backend mode (what
+ * Root cause history:
- * Android uses: playerPlayItem responds useHtml5Element=false), scrub the
+ * - Native init called onDestroy() after an await -> lifecycle_outside_component
- * seek bar, then drive the same backend signals the app receives at
+ *   -> the catch treated init as failed and silently flipped useHtml5Element to
- * runtime (position updates, sleep-timer ticks) and assert the seek bar
+ *   true, so seeks went down the HTML5 path while ExoPlayer kept playing.
- * does not snap back.
+ * - The native SurfaceView has never been visible through the webview, so the
+ *   INTERIM behavior (until the video-player API refactor) is: when the backend
+ *   reports native mode, VideoPlayer deliberately overrides to HTML5 rendering
+ *   and stops the native backend (single audio source, webview owns playback).
+ *
+ * These tests pin the interim behavior: Android's native response is
+ * overridden, the backend is stopped exactly once, and scrubbing keeps
+ * working (and holds its position) with a sleep timer active.
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
 // ---- Mocks (must precede component import) --------------------------------
 
-// Capture raw-channel listeners VideoPlayer registers in native mode
-// ("player://position-update", "player://state-changed").
 const channelHandlers: Record<string, (event: any) => void> = {};
 vi.mock("@tauri-apps/api/event", () => ({
   listen: vi.fn(async (channel: string, handler: any) => {
@@ -32,6 +37,7 @@ vi.mock("@tauri-apps/api/core", () => ({
 }));
 
 const playerPlayItem = vi.fn(async () => ({
+  // What Android reports: native ExoPlayer backend
   useHtml5Element: false,
   backend: "exoplayer",
   state: { kind: "playing" },
@@ -104,7 +110,7 @@ function sleepTimerTick(remaining = 2) {
   });
 }
 
-async function mountNativePlayer() {
+async function mountAndroidPlayer() {
   const utils = render(VideoPlayer, {
     props: {
       media: makeEpisode(),
@@ -115,38 +121,36 @@ async function mountNativePlayer() {
     },
   });
 
-  // Wait for onMount init: backend chosen (native), raw listeners registered.
+  // Init: backend reports native, component overrides to HTML5 and stops it.
   await waitFor(() => expect(playerPlayItem).toHaveBeenCalled());
-  await waitFor(() =>
+  await waitFor(() => expect(playerStop).toHaveBeenCalled());
-    expect(channelHandlers["player://position-update"]).toBeDefined()
-  );
-
-  // Backend reports playing at 300s.
-  channelHandlers["player://state-changed"]({ payload: { state: "playing" } });
-  channelHandlers["player://position-update"]({
-    payload: { position: 300, duration: 1440 },
-  });
-  await tick();
 
   const slider = utils.container.querySelector(
     'input[type="range"]'
   ) as HTMLInputElement;
+  const video = utils.container.querySelector("video") as HTMLVideoElement;
   expect(slider).not.toBeNull();
-  expect(parseFloat(slider.value)).toBeCloseTo(300);
+  expect(video).not.toBeNull();
-  return { ...utils, slider };
+  return { ...utils, slider, video };
 }
 
 /** Scrub the seek bar to `target` seconds like a user drag. */
-async function scrubTo(slider: HTMLInputElement, target: number) {
+async function scrubTo(
+  slider: HTMLInputElement,
+  video: HTMLVideoElement,
+  target: number
+) {
   await fireEvent.mouseDown(slider);
   slider.value = String(target);
   await fireEvent.input(slider);
   await fireEvent.change(slider);
   await fireEvent.mouseUp(slider);
+  // Resolve the "wait for seeked" step of the HTML5 native-seek path.
+  await fireEvent(video, new Event("seeked"));
   await tick();
 }
 
-describe("VideoPlayer scrubbing with active sleep timer (native backend)", () => {
+describe("VideoPlayer scrubbing with active sleep timer (Android)", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     for (const key of Object.keys(channelHandlers)) delete channelHandlers[key];
@@ -154,10 +158,17 @@ describe("VideoPlayer scrubbing with active sleep timer (native backend)", () =>
     sleepTimerExpiredSignal.set(0);
   });
 
-  it("scrubbing without a timer issues a native seek and keeps the new position", async () => {
+  it("overrides the native backend response to HTML5 rendering and stops the backend once", async () => {
-    const { slider } = await mountNativePlayer();
+    await mountAndroidPlayer();
+    // The native backend must be stopped so it doesn't play audio behind the
+    // webview (frozen picture + double audio source).
+    expect(playerStop).toHaveBeenCalledTimes(1);
+  });
 
-    await scrubTo(slider, 600);
+  it("scrubbing without a timer seeks via the HTML5 path and keeps the new position", async () => {
+    const { slider, video } = await mountAndroidPlayer();
+
+    await scrubTo(slider, video, 600);
 
     await waitFor(() =>
       expect(playerSeekVideo).toHaveBeenCalledWith(
@@ -165,14 +176,14 @@ describe("VideoPlayer scrubbing with active sleep timer (native backend)", () =>
         600,
         "src-1",
         null,
-        false
+        true // HTML5 path: the webview owns playback after the override
       )
     );
     expect(parseFloat(slider.value)).toBeCloseTo(600);
   });
 
-  it("scrubbing still works after enabling an episodes sleep timer", async () => {
+  it("scrubbing still works (and holds position) after enabling an episodes sleep timer", async () => {
-    const { slider } = await mountNativePlayer();
+    const { slider, video } = await mountAndroidPlayer();
 
     // Enable "2 more episodes" timer; backend then ticks every second.
     sleepTimerTick(2);
@@ -180,50 +191,31 @@ describe("VideoPlayer scrubbing with active sleep timer (native backend)", () =>
     sleepTimerTick(2);
     await tick();
 
-    await scrubTo(slider, 600);
+    await scrubTo(slider, video, 600);
+    await waitFor(() => expect(playerSeekVideo).toHaveBeenCalledTimes(1));
+    expect(parseFloat(slider.value)).toBeCloseTo(600);
 
-    await waitFor(() => expect(playerSeekVideo).toHaveBeenCalled());
+    // Timer ticks after the seek must not snap the bar back.
-    expect(playerSeekVideo).toHaveBeenCalledWith("repo-1", 600, "src-1", null, false);
+    sleepTimerTick(2);
+    await tick();
     expect(parseFloat(slider.value)).toBeCloseTo(600);
 
     // A second scrub must also work.
-    await scrubTo(slider, 900);
+    await scrubTo(slider, video, 900);
     await waitFor(() => expect(playerSeekVideo).toHaveBeenCalledTimes(2));
     expect(parseFloat(slider.value)).toBeCloseTo(900);
   });
 
-  it("REGRESSION: a stale backend position tick right after scrubbing must not snap the bar back", async () => {
-    const { slider } = await mountNativePlayer();
-
-    sleepTimerTick(2);
-    await tick();
-
-    await scrubTo(slider, 600);
-    await waitFor(() => expect(playerSeekVideo).toHaveBeenCalled());
-    expect(parseFloat(slider.value)).toBeCloseTo(600);
-
-    // ExoPlayer's position poller runs on its own cadence: a tick captured
-    // just before the seek landed arrives now, carrying the OLD position.
-    channelHandlers["player://position-update"]({
-      payload: { position: 301, duration: 1440 },
-    });
-    // Plus the per-second sleep-timer tick.
-    sleepTimerTick(2);
-    await tick();
-
-    // The bar must hold the seek target, not snap back to the stale position.
-    expect(parseFloat(slider.value)).toBeCloseTo(600);
-  });
-
   it("sleep-timer ticks alone never move the seek bar", async () => {
-    const { slider } = await mountNativePlayer();
+    const { slider } = await mountAndroidPlayer();
 
+    const before = slider.value;
     for (let i = 0; i < 5; i++) {
       sleepTimerTick(2);
       await tick();
     }
 
-    expect(parseFloat(slider.value)).toBeCloseTo(300);
+    expect(slider.value).toBe(before);
     expect(playerSeekVideo).not.toHaveBeenCalled();
   });
 });

src/lib/components/player/VideoPlayer.svelte

@@ -14,6 +14,7 @@
   import CachedImage from "../common/CachedImage.svelte";
   import { sleepTimerActive, sleepTimerExpiredSignal } from "$lib/stores/sleepTimer";
   import { playbackPosition } from "$lib/stores/player";
+  import * as html5Adapter from "$lib/player/html5Adapter";
 
   interface Props {
     media: MediaItem | null;
@@ -216,6 +217,7 @@
       hasPerformedInitialSeek = false; // Reset so new video can seek to initial position
       lastAppliedInitialPosition = undefined; // New stream - forget the previously-applied resume point
       endedFired = false; // New stream loaded - allow onEnded to fire again
+      html5Adapter.resetReporting(); // New stream - clear position-report throttle
     }
   });
 
@@ -319,6 +321,25 @@
           console.log('[VideoPlayer] HLS manifest parsed, ready to play');
         });
 
+        // On the Android WebView the element's own `canplay` may not fire for
+        // MSE-fed HLS, so treat the first buffered fragment as "ready" too.
+        // This reveals the <video> element (otherwise it stays invisible behind
+        // the black poster card while audio plays).
+        hls.on(Hls.Events.FRAG_BUFFERED, () => {
+          markMediaReady();
+        });
+
+        // The canplay-fallback timeout is normally armed from the element's
+        // `loadstart` event, but with hls.js the element's `src` is "" and
+        // `loadstart` may not fire, so arm a backstop here directly.
+        if (canplayFallbackTimeout) clearTimeout(canplayFallbackTimeout);
+        canplayFallbackTimeout = setTimeout(() => {
+          if (!isMediaReady && videoElement && videoElement.readyState >= 2) {
+            console.warn('[VideoPlayer] HLS canplay fallback - revealing video (readyState:', videoElement.readyState, ')');
+            markMediaReady();
+          }
+        }, 5000);
+
         // Reset recovery attempts for new HLS instance
         hlsFatalRecoveryAttempts = 0;
 
@@ -490,9 +511,27 @@
         backendChosen = true;
         console.log(`[VideoPlayer] Backend: ${response.backend}, useHtml5Element: ${useHtml5Element}`);
 
+        // INTERIM (until the video-player API refactor lands): always render
+        // through the webview HTML5 element, including Android. The native
+        // ExoPlayer SurfaceView sits behind an opaque webview and has never
+        // actually been visible (an init bug kept the app on the HTML5 path
+        // since the POC), so true native mode plays audio behind a frozen
+        // picture. Stop the native backend and let the webview own playback,
+        // matching Linux behavior and avoiding dual audio.
+        if (!useHtml5Element) {
+          console.warn("[VideoPlayer] Native video backend reported - overriding to HTML5 rendering (native surface not visible through webview)");
+          useHtml5Element = true;
+          try {
+            await commands.playerStop();
+            didStopBackendEarly = true;
+          } catch (err) {
+            console.warn("[VideoPlayer] Failed to stop native backend:", err);
+          }
+        }
+
         // If using HTML5 element for non-transcoded content, stop the backend player
         // For transcoded content, we need to keep the backend running to handle seeking/audio track switching
-        if (useHtml5Element && !needsTranscoding) {
+        if (useHtml5Element && !needsTranscoding && !didStopBackendEarly) {
           try {
             console.log("[VideoPlayer] Using HTML5 for direct stream - stopping backend player to prevent dual audio");
             await commands.playerStop();
@@ -646,6 +685,9 @@
       const newCurrentTime = seekOffset + videoElement.currentTime;
       if (videoElement.readyState >= 2) {
         currentTime = newCurrentTime;
+        // Feed the Rust controller a throttled position tick (~250ms) so it
+        // stays the source of truth for HTML5 video without flooding IPC.
+        html5Adapter.reportPosition(currentTime, duration);
       }
     }
 
@@ -695,6 +737,10 @@
       console.log("[VideoPlayer] videoDuration state is now:", videoDuration);
     }
 
+    // Tell the Rust controller the media is loaded and its duration (mirrors the
+    // native MediaLoaded event so the backend has a duration for HTML5 video).
+    html5Adapter.reportMediaLoaded(duration);
+
     // Use setTimeout to log the derived value after reactive updates
     setTimeout(() => {
       console.log("[VideoPlayer] Derived duration value:", duration);
@@ -702,6 +748,20 @@
     }, 0);
   }
 
+  // Flip out of the Loading state and reveal the <video> element (which is
+  // `invisible` and covered by the black poster card until then). Multiple
+  // signals can legitimately mean "ready": the native `canplay` event, hls.js
+  // buffering its first fragment, or the element actually reaching `playing`.
+  // On the Android system WebView the HLS path feeds the element through MSE
+  // with `src=""`, so `loadstart`/`canplay` don't fire reliably and the
+  // canplay-fallback timeout was never armed — audio played while the video
+  // stayed invisible. Any of these callers now reveals it.
+  function markMediaReady() {
+    if (isMediaReady) return;
+    console.log("[VideoPlayer] Marking media ready");
+    isMediaReady = true;
+  }
+
   async function handleCanPlay() {
     // Media is ready to play - transition from Loading to Playing state (DR-001)
     console.log("[VideoPlayer] canplay event fired - media is ready");
@@ -799,6 +859,9 @@
   function handlePlaying() {
     console.log("[VideoPlayer] playing event - playback resumed");
     isBuffering = false;
+    // Safety net: if we reached `playing` we are definitely renderable, even if
+    // `canplay`/hls FRAG_BUFFERED were missed on this WebView.
+    markMediaReady();
   }
 
   function handleLoadStart() {
@@ -881,6 +944,10 @@
   function handlePlay() {
     isPlaying = true;
     startTimeUpdates(); // Start RAF loop for smooth time updates
+    // Mirror the DOM state into the Rust PlayerController so it is the single
+    // source of truth for HTML5 video (the <video> lives in the webview, which
+    // Rust cannot observe directly). See html5Adapter.ts.
+    html5Adapter.reportState("playing", reportMediaId ?? null);
     // Report playback start on first play (skip for live - no resume tracking)
     if (!isLive && !hasReportedStart && onReportStart) {
       onReportStart(currentTime, reportMediaId);
@@ -891,6 +958,8 @@
   function handlePause() {
     isPlaying = false;
     stopTimeUpdates(); // Stop RAF loop when paused
+    html5Adapter.reportState("paused", reportMediaId ?? null);
+    html5Adapter.reportPosition(currentTime, duration, { force: true });
     // Report progress when paused
     if (onReportProgress) {
       onReportProgress(currentTime, true, reportMediaId);
@@ -900,6 +969,7 @@
   function handleEnded() {
     isPlaying = false;
     stopTimeUpdates(); // Stop RAF loop when ended
+    html5Adapter.reportState("stopped", reportMediaId ?? null);
     // Report stop when video ends (skip for live - no resume tracking)
     if (!isLive && onReportStop) {
       onReportStop(currentTime, reportMediaId);

src/lib/components/player/VolumeControl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { commands } from "$lib/api/bindings";
+  import { playerController } from "$lib/player";
   import { volume, isMuted, mergedVolume } from "$lib/stores/player";
   import { isRemoteMode } from "$lib/stores/playbackMode";
   import { selectedSession, sessions } from "$lib/stores/sessions";
@@ -31,7 +31,7 @@
       // Remote mode: send volume as 0-100 integer to remote session
       await sessions.sendVolume($selectedSession.id, Math.round(newVolume * 100));
     } else {
-      await commands.playerSetVolume(newVolume);
+      await playerController.setVolume(newVolume);
     }
   }
 
@@ -39,7 +39,7 @@
     if ($isRemoteMode && $selectedSession) {
       await sessions.sendToggleMute($selectedSession.id);
     } else {
-      await commands.playerToggleMute();
+      await playerController.toggleMute();
     }
   }
 

src/lib/player/html5Adapter.ts

@@ -0,0 +1,84 @@
+/**
+ * HTML5 <video> → Rust reporting adapter ("html5+rust internal module").
+ *
+ * On platforms where video renders in the webview (Linux WebKitGTK HTML5
+ * <video>; and, per the current interim behavior, Android too), the real player
+ * is the DOM element, which the Rust backend cannot observe directly. This
+ * module is the single place that reports the element's lifecycle back into
+ * Rust, so the `PlayerController` stays the source of truth and the frontend
+ * `player` store is fed from ONE pipeline (playerEvents.ts) in both native and
+ * HTML5 modes.
+ *
+ * The VideoPlayer component owns the element and its UI; it calls these
+ * functions from its DOM event handlers. Keeping the `commands.playerReport*`
+ * calls here (rather than scattered in the component) is the boundary: UI code
+ * never talks to the report commands directly.
+ *
+ * TRACES: UR-003, UR-005 | DR-001, DR-028
+ */
+
+import { commands } from "$lib/api/bindings";
+
+/** Player states mirrored to Rust (must match the strings playerEvents.ts handles). */
+export type Html5PlayerState = "playing" | "paused" | "loading" | "stopped" | "idle";
+
+/**
+ * Report an HTML5 <video> state transition to Rust. The controller re-emits a
+ * `StateChanged` event identical to the native backends', so the frontend
+ * player store updates through its normal path.
+ */
+export async function reportState(
+  state: Html5PlayerState,
+  mediaId: string | null
+): Promise<void> {
+  try {
+    await commands.playerReportState(state, mediaId);
+  } catch (err) {
+    console.warn("[html5Adapter] Failed to report state:", err);
+  }
+}
+
+/**
+ * Position reporting is throttled to ~250ms to match the native backends'
+ * cadence and avoid flooding the IPC channel from the 60fps RAF loop.
+ */
+let lastPositionReport = 0;
+const POSITION_REPORT_INTERVAL_MS = 250;
+
+/**
+ * Report an HTML5 <video> position tick to Rust (throttled). Safe to call every
+ * animation frame; only forwards at most every {@link POSITION_REPORT_INTERVAL_MS}.
+ */
+export async function reportPosition(
+  position: number,
+  duration: number,
+  { force = false }: { force?: boolean } = {}
+): Promise<void> {
+  const now = Date.now();
+  if (!force && now - lastPositionReport < POSITION_REPORT_INTERVAL_MS) {
+    return;
+  }
+  lastPositionReport = now;
+  try {
+    await commands.playerReportPosition(position, Number.isFinite(duration) ? duration : 0);
+  } catch (err) {
+    console.warn("[html5Adapter] Failed to report position:", err);
+  }
+}
+
+/**
+ * Report that the HTML5 <video> finished loading metadata and knows its
+ * duration. Mirrors the native `MediaLoaded` event.
+ */
+export async function reportMediaLoaded(duration: number): Promise<void> {
+  try {
+    await commands.playerReportMediaLoaded(Number.isFinite(duration) ? duration : 0);
+  } catch (err) {
+    console.warn("[html5Adapter] Failed to report media loaded:", err);
+  }
+}
+
+/** Reset internal throttle state (call when a new stream loads). */
+export function resetReporting(): void {
+  lastPositionReport = 0;
+}

src/lib/player/index.ts

@@ -0,0 +1,219 @@
+/**
+ * Unified frontend player API (the boundary).
+ *
+ * This is the single write-side entry point for playback. Every UI component
+ * that wants to *control* the player calls a method here; nothing else should
+ * invoke `commands.player*` directly. The Rust `PlayerController` remains the
+ * single source of truth — these methods only send intent-level commands and
+ * let state flow back through `PlayerStatusEvent` → `playerEvents.ts` → the
+ * `player`/`queue` stores.
+ *
+ * Reads stay on the established stores: this module re-exports the read-only
+ * derived + merged (remote-session-aware) stores so UI can import state and
+ * actions from one place, in both local and remote modes.
+ *
+ * TRACES: UR-005 | DR-001, DR-009
+ */
+
+import { get } from "svelte/store";
+import { commands } from "$lib/api/bindings";
+import type {
+  PlayTracksContext,
+  PlayAlbumTrackRequest,
+  PlayItemRequest,
+} from "$lib/api/bindings";
+import { auth } from "$lib/stores/auth";
+
+/**
+ * Resolve the current repository handle, throwing a clear error if the user is
+ * not authenticated. Centralizes the `auth.getRepository().getHandle()` dance
+ * that was previously duplicated across every context-play call site.
+ */
+function requireHandle(): string {
+  const authState = get(auth);
+  if (!authState.isAuthenticated) {
+    throw new Error("User not authenticated");
+  }
+  const repo = auth.getRepository();
+  if (!repo) {
+    throw new Error("No repository available");
+  }
+  return repo.getHandle();
+}
+
+// ---------------------------------------------------------------------------
+// Transport controls (no repository handle required)
+// ---------------------------------------------------------------------------
+
+async function play() {
+  await commands.playerPlay();
+}
+
+async function pause() {
+  await commands.playerPause();
+}
+
+async function toggle() {
+  await commands.playerToggle();
+}
+
+async function stop() {
+  await commands.playerStop();
+}
+
+async function seek(positionSeconds: number) {
+  await commands.playerSeek(positionSeconds);
+}
+
+async function next() {
+  await commands.playerNext();
+}
+
+async function previous() {
+  await commands.playerPrevious();
+}
+
+async function skipTo(index: number) {
+  await commands.playerSkipTo(index);
+}
+
+// ---------------------------------------------------------------------------
+// Queue mode controls
+// ---------------------------------------------------------------------------
+
+async function toggleShuffle() {
+  await commands.playerToggleShuffle();
+}
+
+async function cycleRepeat() {
+  await commands.playerCycleRepeat();
+}
+
+async function removeFromQueue(index: number) {
+  await commands.playerRemoveFromQueue(index);
+}
+
+async function moveInQueue(fromIndex: number, toIndex: number) {
+  await commands.playerMoveInQueue(fromIndex, toIndex);
+}
+
+// ---------------------------------------------------------------------------
+// Volume
+// ---------------------------------------------------------------------------
+
+async function setVolume(volume: number) {
+  await commands.playerSetVolume(volume);
+}
+
+async function toggleMute() {
+  await commands.playerToggleMute();
+}
+
+// ---------------------------------------------------------------------------
+// Track selection (video)
+// ---------------------------------------------------------------------------
+
+async function setSubtitleTrack(streamIndex: number | null) {
+  await commands.playerSetSubtitleTrack(streamIndex);
+}
+
+// ---------------------------------------------------------------------------
+// Context-aware playback (repository handle required — resolved internally)
+// ---------------------------------------------------------------------------
+
+/**
+ * Play a set of tracks by ID with an explicit queue context. The backend
+ * fetches all metadata and builds the queue; the frontend queue store updates
+ * from the resulting `queue_changed` event.
+ */
+async function playTracks(request: {
+  trackIds: string[];
+  startIndex: number;
+  shuffle: boolean;
+  context: PlayTracksContext;
+  startPosition?: number;
+}) {
+  await commands.playerPlayTracks(requireHandle(), request);
+}
+
+/** Play a single track within its album context (more efficient than playTracks). */
+async function playAlbumTrack(request: PlayAlbumTrackRequest) {
+  await commands.playerPlayAlbumTrack(requireHandle(), request);
+}
+
+/** Play a single explicit media item (used by the video path). */
+async function playItem(request: PlayItemRequest) {
+  return commands.playerPlayItem(request);
+}
+
+/** Add a single track to the queue by ID. */
+async function addTrackById(trackId: string, position: "next" | "end" = "end") {
+  await commands.playerAddTrackById(requireHandle(), { trackId, position });
+}
+
+/** Add multiple tracks to the queue by ID. */
+async function addTracksByIds(
+  trackIds: string[],
+  position: "next" | "end" = "end"
+) {
+  await commands.playerAddTracksByIds(requireHandle(), { trackIds, position });
+}
+
+/**
+ * The unified player facade. Import this and call its methods instead of
+ * reaching for `commands.player*` in UI code.
+ */
+export const playerController = {
+  play,
+  pause,
+  toggle,
+  stop,
+  seek,
+  next,
+  previous,
+  skipTo,
+  toggleShuffle,
+  cycleRepeat,
+  removeFromQueue,
+  moveInQueue,
+  setVolume,
+  toggleMute,
+  setSubtitleTrack,
+  playTracks,
+  playAlbumTrack,
+  playItem,
+  addTrackById,
+  addTracksByIds,
+};
+
+// ---------------------------------------------------------------------------
+// Read-side re-exports: UI reads state from ONE place, in both local & remote
+// modes. These remain the single source of truth fed by playerEvents.ts.
+// ---------------------------------------------------------------------------
+
+export {
+  playerState,
+  currentMedia,
+  isPlaying,
+  isPaused,
+  isLoading,
+  playbackPosition,
+  playbackDuration,
+  volume,
+  isMuted,
+  mergedMedia,
+  mergedIsPlaying,
+  mergedPosition,
+  mergedDuration,
+  mergedVolume,
+} from "$lib/stores/player";
+
+export {
+  queueItems,
+  currentQueueIndex,
+  currentQueueItem,
+  isShuffle,
+  repeatMode,
+  hasNext,
+  hasPrevious,
+} from "$lib/stores/queue";

src/routes/player/[id]/+page.svelte

@@ -21,6 +21,7 @@
     reportPlaybackStopped,
   } from "$lib/services/playbackReporting";
   import { cleanup as cleanupNextEpisode } from "$lib/services/nextEpisodeService";
+  import * as html5Adapter from "$lib/player/html5Adapter";
 
   const itemId = $derived($page.params.id);
   const queueParam = $derived($page.url.searchParams.get("queue"));
@@ -514,6 +515,11 @@
     if (id) {
       reportPlaybackStart(id, positionSeconds, context.type, context.id);
     }
+    // Mirror HTML5 <video> state into the Rust PlayerController so it is the
+    // single source of truth for video playback (see html5Adapter.ts). The
+    // element lives in the webview and Rust cannot observe it directly.
+    html5Adapter.reportState("playing", id ?? null);
+    html5Adapter.reportPosition(positionSeconds, get(playbackDuration), { force: true });
   }
 
   function handleReportProgress(positionSeconds: number, isPaused: boolean, reportId?: string) {
@@ -521,6 +527,9 @@
     if (id) {
       reportPlaybackProgress(id, positionSeconds, isPaused);
     }
+    // Feed the Rust controller the current position and play/pause state.
+    html5Adapter.reportState(isPaused ? "paused" : "playing", id ?? null);
+    html5Adapter.reportPosition(positionSeconds, get(playbackDuration), { force: true });
   }
 
   function handleReportStop(positionSeconds: number, reportId?: string) {
@@ -528,6 +537,7 @@
     if (id) {
       reportPlaybackStopped(id, positionSeconds);
     }
+    html5Adapter.reportState("stopped", id ?? null);
   }
 
   async function handleVideoEnded() {