build uses android signing key

Reviewed-on: #9

.gitea/workflows/build-and-test.yml

@@ -60,16 +60,24 @@ jobs:
           cargo test
           cd ..
 
-  build:
+  # Fast per-commit Android compile check. This does NOT build a shippable APK:
-    name: Build Android APK
+  # the full signed release APK is built only on tag pushes by build-release.yml
+  # (which runs sync-android-sources.sh + signing). Running the full bundle here
+  # too would duplicate a ~15min build and, without the sync step, produced an
+  # unsigned APK missing our custom sources/icons/proguard rules anyway.
+  # `cargo check` for the Android target (~1min) catches Android-specific Rust
+  # breakage without linking, bundling, or signing.
+  android-check:
+    name: Android Compile Check
     runs-on: linux/amd64
     needs: test
     container:
       image: gitea.tourolle.paris/dtourolle/jellytau-builder:latest
     env:
       ANDROID_HOME: /opt/android-sdk
-      NDK_VERSION: 27.0.11902837
+      ANDROID_SDK_ROOT: /opt/android-sdk
       NDK_HOME: /opt/android-sdk/ndk/27.0.11902837
+      ANDROID_NDK_HOME: /opt/android-sdk/ndk/27.0.11902837
 
     steps:
       - name: Checkout repository
@@ -97,42 +105,13 @@ jobs:
             ${{ runner.os }}-bun-
 
       - name: Install dependencies
-        run: |
+        run: bun install
-          bun install
 
-      - name: Build frontend
+      - name: Cargo check (aarch64-linux-android)
-        run: bun run build
-
-      - name: Ensure Android NDK
-        run: |
-          if [ ! -d "$NDK_HOME" ]; then
-            echo "NDK not found at $NDK_HOME, installing ndk;$NDK_VERSION"
-            yes | "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" --sdk_root="$ANDROID_HOME" "ndk;$NDK_VERSION"
-          fi
-          echo "Using NDK at $NDK_HOME"
-          ls "$NDK_HOME"
-
-      - name: Initialize Android project
         run: |
+          TC="$NDK_HOME/toolchains/llvm/prebuilt/linux-x86_64/bin"
+          export CARGO_TARGET_AARCH64_LINUX_ANDROID_LINKER="$TC/aarch64-linux-android24-clang"
+          export CC_aarch64_linux_android="$TC/aarch64-linux-android24-clang"
+          export AR_aarch64_linux_android="$TC/llvm-ar"
           cd src-tauri
-          echo "" | bunx tauri android init
+          cargo check --target aarch64-linux-android --lib
-          cd ..
-
-      - name: Build Android APK
-        id: build
-        run: |
-          mkdir -p artifacts
-          bun run tauri android build --apk true --target aarch64
-
-          # Find the generated APK file
-          ARTIFACT=$(find src-tauri/gen/android/app/build/outputs/apk -name "*.apk" -type f -print -quit)
-          echo "artifact=${ARTIFACT}" >> $GITHUB_OUTPUT
-          echo "Found artifact: ${ARTIFACT}"
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: jellytau-apk
-          path: ${{ steps.build.outputs.artifact }}
-          retention-days: 30
-          if-no-files-found: error

docs/architecture/05-platform-backends.md

@@ -90,6 +90,50 @@ flowchart LR
 
 **Important**: The command is `player_get_queue` (returns `QueueStatus` with `hasNext`/`hasPrevious`). There is no `player_get_queue_status` command.
 
+## HTML5 Video Adapter (webview-rendered video)
+
+**Location**: `src/lib/player/html5Adapter.ts`, `src/lib/player/index.ts`, report commands in
+`src-tauri/src/commands/player/timers.rs`
+
+Video on desktop (Linux WebKitGTK) — and, per current interim behavior, Android — is rendered by an
+HTML5 `<video>`/HLS element **inside the webview**. libmpv is initialized audio-only (`vo=null`,
+`video=false`), so the native backend cannot render or observe this element. The `<video>` is therefore
+the real player, living outside Rust's reach.
+
+To keep the `PlayerController` the single source of truth (matching the audio path), the HTML5 element
+is treated as **a dumb output device that reports back into Rust**, rather than an independent state
+authority:
+
+```mermaid
+flowchart LR
+    subgraph Webview["Webview"]
+        Video["HTML5 <video> / HLS.js"]
+        Adapter["html5Adapter.ts<br/>(reports DOM events)"]
+    end
+    subgraph Backend["Rust"]
+        Cmds["player_report_state<br/>player_report_position<br/>player_report_media_loaded"]
+        Controller["PlayerController"]
+        Emitter["TauriEventEmitter"]
+    end
+    subgraph Frontend["Frontend"]
+        Events["playerEvents.ts"]
+        Store["player store"]
+    end
+
+    Video -->|DOM events| Adapter --> Cmds --> Controller --> Emitter --> Events --> Store
+```
+
+**Key points:**
+- The adapter re-emits the *same* `PlayerStatusEvent`s (`StateChanged`, `PositionUpdate`, `MediaLoaded`)
+  the native backends emit, so `playerEvents.ts` needs **no** HTML5-specific branch — HTML5 is just
+  another event source feeding the existing pipeline.
+- Position reports are throttled (~250ms) to match the MPV cadence and avoid flooding IPC from the
+  60fps RAF loop.
+- **Boundary rule**: UI components never touch the report commands or `videoElement` state directly.
+  Playback *control* goes through the unified facade `src/lib/player/index.ts` (`playerController`);
+  HTML5 *state reporting* goes through `html5Adapter.ts`. This restores the documented invariant
+  ("frontend only displays state and invokes commands") for the video path.
+
 ## MpvBackend (Linux)
 
 **Location**: `src-tauri/src/player/mpv/`

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)

scripts/build-and-deploy.sh

@@ -3,15 +3,19 @@
 
 set -e
 
-BUILD_TYPE="${1:-debug}"
-
 echo "🚀 Build and Deploy Android APK"
 echo ""
 
-# Build APK
+# Pass all args (build type and/or --clean) through to the build script.
-./scripts/build-android.sh "$BUILD_TYPE"
+./scripts/build-android.sh "$@"
 
 echo ""
 
-# Deploy APK
+# Deploy APK — extract build type (default debug), ignoring flags like --clean.
+BUILD_TYPE="debug"
+for arg in "$@"; do
+    case "$arg" in
+        debug|release) BUILD_TYPE="$arg" ;;
+    esac
+done
 ./scripts/deploy-android.sh "$BUILD_TYPE"

scripts/build-android.sh

@@ -15,13 +15,24 @@ echo "Android SDK: $ANDROID_HOME"
 echo "NDK: $NDK_HOME"
 echo ""
 
-# Build type: debug or release (default: debug)
+# Parse args: build type (debug/release) and optional --clean flag.
-BUILD_TYPE="${1:-debug}"
+# By default the build is INCREMENTAL — Cargo and Vite reuse their caches.
+# Pass --clean (or CLEAN=1) to wipe all caches for a from-scratch build.
+BUILD_TYPE="debug"
+CLEAN="${CLEAN:-0}"
+for arg in "$@"; do
+    case "$arg" in
+        --clean) CLEAN=1 ;;
+        debug|release) BUILD_TYPE="$arg" ;;
+    esac
+done
 
-# Step 0: Clear build caches to ensure fresh builds
+# Step 0: Optionally clear build caches for a fully fresh build.
-echo "🧹 Clearing build caches..."
+if [ "$CLEAN" = "1" ]; then
-rm -rf node_modules/.vite dist .svelte-kit .next build target src-tauri/target 2>/dev/null || true
+    echo "🧹 Clearing build caches (clean build)..."
-npm install > /dev/null 2>&1
+    rm -rf node_modules/.vite dist .svelte-kit .next build target src-tauri/target 2>/dev/null || true
+    npm install > /dev/null 2>&1
+fi
 
 # Step 1: Sync Android source files
 echo "🔄 Syncing Android sources..."
@@ -33,6 +44,9 @@ bun run build
 
 # Step 2: Build Android APK
 if [ "$BUILD_TYPE" = "release" ]; then
+    # Configure release signing from .env (single source of truth). Must run
+    # after sync-android-sources.sh, since gen/android is (re)generated there.
+    ./scripts/write-keystore-properties.sh
     echo "📦 Building release APK..."
     bun run tauri android build --apk true
 else

scripts/sync-android-sources.sh

@@ -41,4 +41,49 @@ if [ -f "$APP_GRADLE_SRC" ]; then
     echo "  Copied: app/build.gradle.kts"
 fi
 
+# Custom ProGuard/R8 keep rules. Required for minified release builds:
+# the player/ and security/ Kotlin classes are loaded by name via JNI from
+# Rust, so R8 can't see the references and would strip them without this.
+# build.gradle.kts globs **/*.pro, so dropping it in app/ is enough.
+PROGUARD_SRC="$PROJECT_ROOT/src-tauri/android/app/proguard-jellytau.pro"
+PROGUARD_DST="$PROJECT_ROOT/src-tauri/gen/android/app/proguard-jellytau.pro"
+if [ -f "$PROGUARD_SRC" ]; then
+    cp "$PROGUARD_SRC" "$PROGUARD_DST"
+    echo "  Copied: app/proguard-jellytau.pro"
+fi
+
+# Launcher icons / adaptive-icon mipmaps. `tauri android init` generates
+# low-quality launcher icons from tauri.conf.json (which has no high-res
+# Android source), so overwrite them with the real committed mipmaps.
+RES_SRC="$PROJECT_ROOT/src-tauri/android/src/main/res"
+RES_DST="$PROJECT_ROOT/src-tauri/gen/android/app/src/main/res"
+if [ -d "$RES_SRC" ]; then
+    for dir in "$RES_SRC"/mipmap-*; do
+        [ -d "$dir" ] || continue
+        name="$(basename "$dir")"
+        mkdir -p "$RES_DST/$name"
+        cp "$dir"/* "$RES_DST/$name/"
+        echo "  Copied res: $name"
+    done
+    # We ship only the color adaptive icon (background + foreground). Drop any
+    # monochrome layer Tauri may generate: the themed-icon monochrome doesn't
+    # render well, and our adaptive-icon xml no longer references it, so a stray
+    # ic_launcher_monochrome.png would just be dead weight.
+    rm -f "$RES_DST"/mipmap-*/ic_launcher_monochrome.png
+
+    # `tauri android init` also emits the Android Studio DEFAULT adaptive icon
+    # as API-qualified VECTOR drawables:
+    #   drawable/ic_launcher_background.xml      (solid #3DDC84 green)
+    #   drawable-v24/ic_launcher_foreground.xml  (the Android robot)
+    # Because drawable-v24 is a more specific match than our unqualified
+    # mipmap-*/ic_launcher_*.png, on API 24+ the vector WINS and the app ships
+    # the green square robot instead of our jellyfish. Remove them so the
+    # adaptive-icon xml resolves @mipmap/ic_launcher_{background,foreground}
+    # to the real committed PNGs.
+    rm -f "$RES_DST"/drawable/ic_launcher_background.xml \
+          "$RES_DST"/drawable-v24/ic_launcher_foreground.xml \
+          "$RES_DST"/drawable*/ic_launcher_foreground.xml \
+          "$RES_DST"/drawable*/ic_launcher_background.xml
+fi
+
 echo "✓ Android sources synced successfully"

scripts/write-keystore-properties.sh

@@ -0,0 +1,52 @@
+#!/bin/bash
+# Regenerate src-tauri/gen/android/keystore.properties from the gitignored .env.
+#
+# .env is the single source of truth for local release signing. `tauri android
+# init` wipes/regenerates gen/android, so keystore.properties must be rewritten
+# from .env before every release build (this is the local mirror of what the CI
+# workflow does from Gitea secrets).
+#
+# Required .env vars:
+#   ANDROID_KEY_ALIAS, ANDROID_KEYSTORE_PASSWORD, ANDROID_KEY_PASSWORD,
+#   ANDROID_KEYSTORE_FILE (absolute path to the .jks)
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+ENV_FILE="$PROJECT_ROOT/.env"
+PROPS="$PROJECT_ROOT/src-tauri/gen/android/keystore.properties"
+
+if [ ! -f "$ENV_FILE" ]; then
+    echo "❌ $ENV_FILE not found — cannot configure release signing." >&2
+    echo "   Create it with ANDROID_KEY_ALIAS / ANDROID_KEYSTORE_PASSWORD /" >&2
+    echo "   ANDROID_KEY_PASSWORD / ANDROID_KEYSTORE_FILE." >&2
+    exit 1
+fi
+
+# Load .env without leaking it into the caller's environment beyond what we need.
+set -a
+# shellcheck disable=SC1090
+. "$ENV_FILE"
+set +a
+
+: "${ANDROID_KEY_ALIAS:?ANDROID_KEY_ALIAS missing from .env}"
+: "${ANDROID_KEYSTORE_PASSWORD:?ANDROID_KEYSTORE_PASSWORD missing from .env}"
+: "${ANDROID_KEY_PASSWORD:?ANDROID_KEY_PASSWORD missing from .env}"
+: "${ANDROID_KEYSTORE_FILE:?ANDROID_KEYSTORE_FILE missing from .env}"
+
+if [ ! -f "$ANDROID_KEYSTORE_FILE" ]; then
+    echo "❌ Keystore not found at ANDROID_KEYSTORE_FILE=$ANDROID_KEYSTORE_FILE" >&2
+    exit 1
+fi
+
+mkdir -p "$(dirname "$PROPS")"
+umask 077
+cat > "$PROPS" <<EOF
+storeFile=$ANDROID_KEYSTORE_FILE
+storePassword=$ANDROID_KEYSTORE_PASSWORD
+keyAlias=$ANDROID_KEY_ALIAS
+keyPassword=$ANDROID_KEY_PASSWORD
+EOF
+
+echo "🔐 Wrote release signing config to keystore.properties (from .env)"

src-tauri/android/app/proguard-jellytau.pro

@@ -0,0 +1,14 @@
+# JellyTau custom keep rules.
+#
+# These classes are loaded by name from the Rust backend via JNI
+# (env.find_class / class-loader lookups), so R8 cannot see the
+# references and would otherwise strip or rename them in a minified
+# release build — causing an instant ClassNotFoundException crash on
+# startup. See src-tauri/src/player/android/mod.rs and
+# src-tauri/src/credentials.rs.
+-keep class com.dtourolle.jellytau.player.** { *; }
+-keep class com.dtourolle.jellytau.security.** { *; }
+
+# Media3 / ExoPlayer is accessed reflectively in places; keep it intact.
+-keep class androidx.media3.** { *; }
+-dontwarn androidx.media3.**

src-tauri/android/src/main/java/com/dtourolle/jellytau/VideoOverlayManager.kt

@@ -15,6 +15,8 @@ import com.dtourolle.jellytau.player.JellyTauPlayer
 object VideoOverlayManager {
 
     private var attachedSurfaceView: SurfaceView? = null
+    private var contentLayoutListener: android.view.View.OnLayoutChangeListener? = null
+    private var listenerContentView: ViewGroup? = null
 
     /**
      * Attach the video SurfaceView to the Activity's content view.
@@ -51,6 +53,23 @@ object VideoOverlayManager {
             contentView.addView(surfaceView, 0, layoutParams)
             attachedSurfaceView = surfaceView
 
+            // Re-fit the video whenever the content view's bounds change (e.g. on
+            // device rotation) so the video is letterboxed to fit instead of being
+            // stretched/cropped by the MATCH_PARENT surface.
+            removeLayoutListener()
+            val listener = android.view.View.OnLayoutChangeListener {
+                _, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom ->
+                if (right - left != oldRight - oldLeft || bottom - top != oldBottom - oldTop) {
+                    player.fitSurfaceToScreen()
+                }
+            }
+            contentView.addOnLayoutChangeListener(listener)
+            contentLayoutListener = listener
+            listenerContentView = contentView
+
+            // Fit once now that the surface is attached and the parent is sized.
+            player.fitSurfaceToScreen()
+
             android.util.Log.d("VideoOverlayManager", "Video surface attached to view hierarchy")
         } catch (e: Exception) {
             android.util.Log.e("VideoOverlayManager", "Failed to attach video surface", e)
@@ -64,6 +83,7 @@ object VideoOverlayManager {
      */
     fun detachVideoSurface(activity: Activity) {
         try {
+            removeLayoutListener()
             attachedSurfaceView?.let { surfaceView ->
                 val contentView = activity.window.decorView.findViewById<ViewGroup>(android.R.id.content)
                 contentView.removeView(surfaceView)
@@ -83,4 +103,12 @@ object VideoOverlayManager {
     fun isVideoSurfaceAttached(): Boolean {
         return attachedSurfaceView != null
     }
+
+    private fun removeLayoutListener() {
+        contentLayoutListener?.let { listener ->
+            listenerContentView?.removeOnLayoutChangeListener(listener)
+        }
+        contentLayoutListener = null
+        listenerContentView = null
+    }
 }

src-tauri/android/src/main/java/com/dtourolle/jellytau/player/JellyTauPlaybackService.kt

@@ -295,6 +295,14 @@ class JellyTauPlaybackService : MediaSessionService() {
         // Update MediaSession playback state
         session.setPlaybackState(buildPlaybackState(isPlaying, position))
 
+        // While casting, re-assert the remote volume provider. Metadata pushes
+        // arrive on the session poller thread and can race with (or arrive
+        // before) enableRemoteVolume(); this keeps the session routed to the
+        // remote (absolute) volume slider instead of the local media stream.
+        if (isRemoteVolumeEnabled) {
+            volumeProvider?.let { session.setPlaybackToRemote(it) }
+        }
+
         // Update the notification
         updateNotification(title, artist, isPlaying)
     }
@@ -326,8 +334,17 @@ class JellyTauPlaybackService : MediaSessionService() {
      *
      * The reported playback speed is 1.0 while playing and 0.0 while paused so
      * Android does not extrapolate the position past a paused track.
+     *
+     * While remote volume control is enabled (casting), the state is forced to
+     * STATE_PLAYING regardless of [isPlaying]. Android only surfaces the remote
+     * (absolute) volume slider for a session that is actively playing; if a
+     * periodic metadata/position push reports paused (e.g. before the remote
+     * session has actually started), reporting STATE_PAUSED here makes the
+     * system tear down the remote slider set up by setPlaybackToRemote() and
+     * fall back to the local media-stream volume.
      */
     private fun buildPlaybackState(isPlaying: Boolean, position: Long): PlaybackStateCompat {
+        val playing = isPlaying || isRemoteVolumeEnabled
         return PlaybackStateCompat.Builder()
             .setActions(
                 PlaybackStateCompat.ACTION_PLAY or
@@ -338,9 +355,9 @@ class JellyTauPlaybackService : MediaSessionService() {
                 PlaybackStateCompat.ACTION_SEEK_TO
             )
             .setState(
-                if (isPlaying) PlaybackStateCompat.STATE_PLAYING else PlaybackStateCompat.STATE_PAUSED,
+                if (playing) PlaybackStateCompat.STATE_PLAYING else PlaybackStateCompat.STATE_PAUSED,
                 position,
-                if (isPlaying) 1.0f else 0.0f
+                if (playing) 1.0f else 0.0f
             )
             .build()
     }

src-tauri/android/src/main/java/com/dtourolle/jellytau/player/JellyTauPlayer.kt

@@ -161,6 +161,9 @@ class JellyTauPlayer(private val appContext: Context) {
     /** SurfaceView for video playback */
     private var surfaceView: SurfaceView? = null
     private var surfaceHolder: SurfaceHolder? = null
+    /** Last reported video frame size, used to fit the surface to the screen preserving aspect ratio */
+    private var videoWidth: Int = 0
+    private var videoHeight: Int = 0
     private var currentMediaType: MediaType = MediaType.AUDIO
     private var currentActivity: java.lang.ref.WeakReference<android.app.Activity>? = null
 
@@ -262,7 +265,11 @@ class JellyTauPlayer(private val appContext: Context) {
             }
 
             override fun onVideoSizeChanged(videoSize: androidx.media3.common.VideoSize) {
-                android.util.Log.d("JellyTauPlayer", "▶ Video size: ${videoSize.width}x${videoSize.height}")
+                android.util.Log.d("JellyTauPlayer", "▶ Video size: ${videoSize.width}x${videoSize.height} par=${videoSize.pixelWidthHeightRatio}")
+                // Apply pixel aspect ratio so anamorphic content isn't distorted
+                videoWidth = (videoSize.width * videoSize.pixelWidthHeightRatio).toInt()
+                videoHeight = videoSize.height
+                fitSurfaceToScreen()
             }
 
             override fun onRenderedFirstFrame() {
@@ -873,17 +880,62 @@ class JellyTauPlayer(private val appContext: Context) {
 
     /**
      * Resize the video surface (for orientation changes).
+     *
+     * Re-fits the surface to the screen preserving the video's aspect ratio so
+     * nothing is cropped when the device rotates.
      */
     fun resizeSurface(width: Int, height: Int) {
+        fitSurfaceToScreen()
+    }
+
+    /**
+     * Size the video SurfaceView so the video fits entirely inside its parent
+     * (the full-screen content view) while preserving aspect ratio (letterbox/
+     * pillarbox). A raw SurfaceView with MATCH_PARENT otherwise stretches the
+     * video to the surface bounds, which crops the bottom on rotation.
+     */
+    fun fitSurfaceToScreen() {
         mainHandler.post {
-            surfaceView?.let { view ->
+            val view = surfaceView ?: return@post
-                view.layoutParams = view.layoutParams.apply {
+            val parent = view.parent as? ViewGroup
-                    this.width = width
+            // Available area: prefer the parent's measured size, fall back to the screen.
-                    this.height = height
+            val availW = parent?.width?.takeIf { it > 0 }
-                }
+                ?: appContext.resources.displayMetrics.widthPixels
-                view.requestLayout()
+            val availH = parent?.height?.takeIf { it > 0 }
-                android.util.Log.d("JellyTauPlayer", "Video surface resized to ${width}x${height}")
+                ?: appContext.resources.displayMetrics.heightPixels
+
+            if (videoWidth <= 0 || videoHeight <= 0 || availW <= 0 || availH <= 0) {
+                return@post
             }
+
+            val videoAspect = videoWidth.toFloat() / videoHeight.toFloat()
+            val viewAspect = availW.toFloat() / availH.toFloat()
+
+            val targetW: Int
+            val targetH: Int
+            if (videoAspect > viewAspect) {
+                // Video is wider than the screen → fit width, letterbox top/bottom
+                targetW = availW
+                targetH = (availW / videoAspect).toInt()
+            } else {
+                // Video is taller than the screen → fit height, pillarbox sides
+                targetH = availH
+                targetW = (availH * videoAspect).toInt()
+            }
+
+            val lp = view.layoutParams
+            // FrameLayout child: center the fitted surface within the full-screen parent.
+            if (lp is FrameLayout.LayoutParams) {
+                lp.gravity = android.view.Gravity.CENTER
+            }
+            lp.width = targetW
+            lp.height = targetH
+            view.layoutParams = lp
+            view.requestLayout()
+            android.util.Log.d(
+                "JellyTauPlayer",
+                "Video surface fitted to ${targetW}x${targetH} (video ${videoWidth}x${videoHeight}, avail ${availW}x${availH})"
+            )
         }
     }
 

src-tauri/android/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@mipmap/ic_launcher_background"/>
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

src-tauri/src/auth/mod.rs

@@ -133,7 +133,7 @@ impl AuthManager {
 
         log::info!("[AuthManager] Connecting to server: {}", normalized_url);
 
-        match self.http_client.get_json_with_retry::<PublicSystemInfo>(&endpoint).await {
+        match self.http_client.get_json_fast::<PublicSystemInfo>(&endpoint).await {
             Ok(info) => {
                 log::info!("[AuthManager] Connected to server: {} ({})", info.server_name, info.version);
 

src-tauri/src/commands/catalog.rs

@@ -0,0 +1,455 @@
+//! Tauri commands for the offline "browse & queue" feature.
+//!
+//! Two backend pieces support browsing the full server catalog while offline
+//! and queueing downloads that fire on reconnect:
+//!
+//! - [`sync_full_catalog`] walks every library while online and persists all
+//!   items to the offline cache so the whole catalog is browsable (greyed out)
+//!   offline. It reuses [`HybridRepository::cache_items_from_server`], which in
+//!   turn reuses `OfflineRepository::save_to_cache` (sets `synced_at`, which is
+//!   what `get_items` branch 3 serves offline).
+//! - [`resume_queued_downloads`] resolves and pumps the `pending` download rows
+//!   that were queued offline (they have `stream_url IS NULL`), mirroring the
+//!   heal-and-pump pattern in `player_preload_upcoming`.
+
+use std::sync::Arc;
+
+use log::{info, warn};
+use tauri::State;
+
+use crate::commands::repository::RepositoryManagerWrapper;
+use crate::commands::download::{pump_download_queue, DownloadManagerWrapper};
+use crate::commands::storage::DatabaseWrapper;
+use crate::repository::types::GetItemsOptions;
+use crate::storage::db_service::{DatabaseService, Query, QueryParam};
+
+/// app_settings key holding the RFC-3339 timestamp of the last successful
+/// full-catalog sync.
+const LAST_CATALOG_SYNC_KEY: &str = "last_catalog_sync";
+
+/// Item types worth caching for offline browsing: containers the library
+/// landing pages render plus the playable leaves users queue for download.
+const CATALOG_ITEM_TYPES: &[&str] = &[
+    "MusicAlbum",
+    "Movie",
+    "Series",
+    "Season",
+    "Episode",
+    "Audio",
+    "BoxSet",
+];
+
+#[derive(specta::Type, Debug, Clone, serde::Serialize, serde::Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct CatalogSyncResult {
+    /// Total items persisted to the offline cache across all libraries.
+    pub items_cached: usize,
+    /// Libraries that failed to sync (e.g. server hiccup); best-effort.
+    pub libraries_failed: usize,
+}
+
+#[derive(specta::Type, Debug, Clone, serde::Serialize, serde::Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct CatalogSyncStatus {
+    /// RFC-3339 timestamp of the last successful sync, if any.
+    pub last_synced_at: Option<String>,
+}
+
+/// Walk every library on the server and persist all items to the offline cache
+/// so the full catalog is browsable offline (greyed out when not downloaded).
+///
+/// Best-effort: a library that fails to fetch is counted and skipped rather than
+/// aborting the whole sync. Runs libraries sequentially to avoid hammering the
+/// server. Uses `Recursive=true` so a single request per library returns the
+/// containers and their playable children.
+#[tauri::command]
+#[specta::specta]
+pub async fn sync_full_catalog(
+    repository: State<'_, RepositoryManagerWrapper>,
+    db: State<'_, DatabaseWrapper>,
+    handle: String,
+) -> Result<CatalogSyncResult, String> {
+    use crate::repository::MediaRepository;
+
+    let repo = repository.0.get(&handle).ok_or("Repository not found")?;
+
+    let db_service = {
+        let database = db.0.lock().map_err(|e| e.to_string())?;
+        Arc::new(database.service())
+    };
+
+    let libraries = repo.get_libraries().await.map_err(|e| e.to_string())?;
+    info!("[Catalog] Full sync starting across {} libraries", libraries.len());
+
+    let include_types: Vec<String> = CATALOG_ITEM_TYPES.iter().map(|s| s.to_string()).collect();
+
+    let mut items_cached = 0usize;
+    let mut libraries_failed = 0usize;
+
+    for library in &libraries {
+        let opts = GetItemsOptions {
+            recursive: Some(true),
+            include_item_types: Some(include_types.clone()),
+            limit: Some(100_000),
+            ..Default::default()
+        };
+
+        match repo.cache_items_from_server(&library.id, Some(opts)).await {
+            Ok(items) => {
+                info!(
+                    "[Catalog] Cached {} items from library '{}'",
+                    items.len(),
+                    library.name
+                );
+                items_cached += items.len();
+            }
+            Err(e) => {
+                warn!("[Catalog] Failed to sync library '{}': {:?}", library.name, e);
+                libraries_failed += 1;
+            }
+        }
+    }
+
+    // Record the sync time so callers can skip re-syncing too eagerly.
+    let now = chrono::Utc::now().to_rfc3339();
+    let upsert = Query::with_params(
+        "INSERT INTO app_settings (key, value, updated_at) VALUES (?, ?, CURRENT_TIMESTAMP)
+         ON CONFLICT(key) DO UPDATE SET value = excluded.value, updated_at = CURRENT_TIMESTAMP",
+        vec![
+            QueryParam::String(LAST_CATALOG_SYNC_KEY.to_string()),
+            QueryParam::String(now),
+        ],
+    );
+    if let Err(e) = db_service.execute(upsert).await {
+        warn!("[Catalog] Failed to persist last-sync timestamp: {}", e);
+    }
+
+    info!(
+        "[Catalog] Full sync complete: {} items cached, {} libraries failed",
+        items_cached, libraries_failed
+    );
+
+    Ok(CatalogSyncResult {
+        items_cached,
+        libraries_failed,
+    })
+}
+
+/// Report the last-synced timestamp so the UI can show a hint / decide whether
+/// to trigger a fresh sync.
+#[tauri::command]
+#[specta::specta]
+pub async fn catalog_sync_status(
+    db: State<'_, DatabaseWrapper>,
+) -> Result<CatalogSyncStatus, String> {
+    let db_service = {
+        let database = db.0.lock().map_err(|e| e.to_string())?;
+        Arc::new(database.service())
+    };
+
+    let query = Query::with_params(
+        "SELECT value FROM app_settings WHERE key = ?",
+        vec![QueryParam::String(LAST_CATALOG_SYNC_KEY.to_string())],
+    );
+    let last_synced_at: Option<String> = db_service
+        .query_optional(query, |row| row.get(0))
+        .await
+        .map_err(|e| e.to_string())?;
+
+    Ok(CatalogSyncStatus { last_synced_at })
+}
+
+#[derive(specta::Type, Debug, Clone, serde::Serialize, serde::Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ResumeQueuedResult {
+    /// Rows whose stream URL was resolved and are now pump-eligible.
+    pub resolved: usize,
+    /// Rows that couldn't be resolved (item metadata / URL lookup failed).
+    pub failed: usize,
+}
+
+/// Core of [`resume_queued_downloads`], factored out for testing: select every
+/// `pending`/`stream_url IS NULL` row, resolve each via `resolve` (returning
+/// `None` leaves the row pending), and heal the row so the pump can start it.
+/// The `resolve` closure receives `(item_id, media_type, quality_preset)`.
+pub(crate) async fn resolve_pending_download_urls<F, Fut>(
+    db_service: &Arc<crate::storage::db_service::RusqliteService>,
+    target_dir: &str,
+    resolve: F,
+) -> Result<ResumeQueuedResult, String>
+where
+    F: Fn(String, String, String) -> Fut,
+    Fut: std::future::Future<Output = Option<String>>,
+{
+    let rows_query = Query::new(
+        "SELECT id, item_id, COALESCE(media_type, 'audio'), COALESCE(quality_preset, 'original')
+         FROM downloads
+         WHERE status = 'pending' AND stream_url IS NULL",
+    );
+    let rows: Vec<(i64, String, String, String)> = db_service
+        .query_many(rows_query, |row| {
+            Ok((row.get(0)?, row.get(1)?, row.get(2)?, row.get(3)?))
+        })
+        .await
+        .map_err(|e| e.to_string())?;
+
+    if rows.is_empty() {
+        return Ok(ResumeQueuedResult { resolved: 0, failed: 0 });
+    }
+
+    info!("[Catalog] Resolving {} offline-queued downloads on reconnect", rows.len());
+
+    let mut resolved = 0usize;
+    let mut failed = 0usize;
+
+    for (download_id, item_id, media_type, quality) in rows {
+        let stream_url = match resolve(item_id.clone(), media_type, quality).await {
+            Some(url) => url,
+            None => {
+                failed += 1;
+                continue;
+            }
+        };
+
+        // Heal the row so the pump can start it. Guard on stream_url IS NULL so a
+        // concurrent resolver doesn't clobber an already-started row.
+        let update = Query::with_params(
+            "UPDATE downloads SET stream_url = ?, target_dir = ?
+             WHERE id = ? AND status = 'pending' AND stream_url IS NULL",
+            vec![
+                QueryParam::String(stream_url),
+                QueryParam::String(target_dir.to_string()),
+                QueryParam::Int64(download_id),
+            ],
+        );
+        match db_service.execute(update).await {
+            Ok(n) if n > 0 => resolved += 1,
+            Ok(_) => {} // already resolved by someone else; not a failure
+            Err(e) => {
+                warn!("[Catalog] Failed to persist URL for download {}: {}", download_id, e);
+                failed += 1;
+            }
+        }
+    }
+
+    Ok(ResumeQueuedResult { resolved, failed })
+}
+
+/// Resolve the stream URL for every download row that was queued while offline
+/// (`status = 'pending' AND stream_url IS NULL`), then pump the queue so they
+/// start. Call this on reconnect.
+///
+/// Audio rows resolve via `get_audio_stream_url`; video rows (media_type =
+/// 'video') via the pure `get_video_download_url` builder using the row's stored
+/// `quality_preset` — mirroring `enqueue_video_downloads`. Rows whose URL can't
+/// be resolved are left pending (they retry on the next reconnect).
+#[tauri::command]
+#[specta::specta]
+pub async fn resume_queued_downloads(
+    repository: State<'_, RepositoryManagerWrapper>,
+    db: State<'_, DatabaseWrapper>,
+    download_manager: State<'_, DownloadManagerWrapper>,
+    app: tauri::AppHandle,
+    handle: String,
+) -> Result<ResumeQueuedResult, String> {
+    use crate::repository::MediaRepository;
+
+    use crate::repository::HybridRepository;
+
+    let repo = repository.0.get(&handle).ok_or("Repository not found")?;
+
+    // The pump needs a target_dir; use the same storage root the other download
+    // paths use (the database's parent directory — see `storage_get_path`).
+    let (db_service, target_dir) = {
+        let database = db.0.lock().map_err(|e| e.to_string())?;
+        let target_dir = database
+            .path()
+            .parent()
+            .ok_or_else(|| "Database path has no parent directory".to_string())?
+            .to_string_lossy()
+            .to_string();
+        (Arc::new(database.service()), target_dir)
+    };
+
+    // Recover stale downloads: rows left in 'downloading' when the app was killed
+    // mid-transfer are orphaned — nothing ever restarts them, so they show as
+    // permanently "downloading". Reset them to 'pending' and clear the stale
+    // stream_url so they get re-resolved and restarted from scratch below.
+    let recover_query = Query::new(
+        "UPDATE downloads SET status = 'pending', stream_url = NULL, progress = 0, \
+         bytes_downloaded = 0, started_at = NULL \
+         WHERE status = 'downloading'",
+    );
+    match db_service.execute(recover_query).await {
+        Ok(n) if n > 0 => info!("[Catalog] Reset {} stale 'downloading' rows to pending", n),
+        Ok(_) => {}
+        Err(e) => warn!("[Catalog] Failed to reset stale downloads: {}", e),
+    }
+
+    // Resolve each row's URL against the (now reachable) repository.
+    let repo_for_resolve = Arc::clone(&repo);
+    let outcome = resolve_pending_download_urls(
+        &db_service,
+        &target_dir,
+        move |item_id: String, media_type: String, quality: String| {
+            let repo = Arc::clone(&repo_for_resolve);
+            async move {
+                if media_type == "video" {
+                    Some(<HybridRepository as MediaRepository>::get_video_download_url(
+                        repo.as_ref(),
+                        &item_id,
+                        &quality,
+                        None,
+                    ))
+                } else {
+                    match repo.get_audio_stream_url(&item_id).await {
+                        Ok(url) => Some(url),
+                        Err(e) => {
+                            warn!("[Catalog] Failed to resolve audio URL for {}: {:?}", item_id, e);
+                            None
+                        }
+                    }
+                }
+            }
+        },
+    )
+    .await
+    .map_err(|e| e.to_string())?;
+
+    let ResumeQueuedResult { resolved, failed } = outcome;
+
+    // Kick the pump so the newly-resolved rows actually start.
+    if resolved > 0 {
+        let active_downloads = {
+            let manager = download_manager.0.lock().map_err(|e| e.to_string())?;
+            manager.get_active_downloads()
+        };
+        pump_download_queue(app, db_service, active_downloads).await;
+    }
+
+    info!("[Catalog] Resume complete: {} resolved, {} failed", resolved, failed);
+
+    Ok(ResumeQueuedResult { resolved, failed })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::storage::db_service::RusqliteService;
+    use rusqlite::Connection;
+    use std::sync::Mutex;
+
+    fn test_db() -> Arc<RusqliteService> {
+        let conn = Connection::open_in_memory().unwrap();
+        conn.execute_batch(
+            r#"
+            CREATE TABLE downloads (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                item_id TEXT NOT NULL,
+                status TEXT NOT NULL,
+                stream_url TEXT,
+                target_dir TEXT,
+                media_type TEXT,
+                quality_preset TEXT
+            );
+            "#,
+        )
+        .unwrap();
+        Arc::new(RusqliteService::new(Arc::new(Mutex::new(conn))))
+    }
+
+    async fn insert_download(
+        db: &Arc<RusqliteService>,
+        item_id: &str,
+        status: &str,
+        stream_url: Option<&str>,
+        media_type: Option<&str>,
+    ) {
+        let q = Query::with_params(
+            "INSERT INTO downloads (item_id, status, stream_url, media_type) VALUES (?, ?, ?, ?)",
+            vec![
+                QueryParam::String(item_id.to_string()),
+                QueryParam::String(status.to_string()),
+                stream_url.map(|s| QueryParam::String(s.to_string())).unwrap_or(QueryParam::Null),
+                media_type.map(|s| QueryParam::String(s.to_string())).unwrap_or(QueryParam::Null),
+            ],
+        );
+        db.execute(q).await.unwrap();
+    }
+
+    async fn get_row(db: &Arc<RusqliteService>, item_id: &str) -> (String, Option<String>, Option<String>) {
+        let q = Query::with_params(
+            "SELECT status, stream_url, target_dir FROM downloads WHERE item_id = ?",
+            vec![QueryParam::String(item_id.to_string())],
+        );
+        db.query_one(q, |row| Ok((row.get(0)?, row.get(1)?, row.get(2)?)))
+            .await
+            .unwrap()
+    }
+
+    #[tokio::test]
+    async fn resolves_offline_queued_row_and_leaves_resolved_rows_untouched() {
+        let db = test_db();
+        // A row queued offline: pending with no URL yet.
+        insert_download(&db, "queued-1", "pending", None, None).await;
+        // An already-resolved pending row: must NOT be touched.
+        insert_download(&db, "already", "pending", Some("http://existing/url"), None).await;
+        // A completed row: irrelevant.
+        insert_download(&db, "done", "completed", Some("http://done/url"), None).await;
+
+        let out = resolve_pending_download_urls(&db, "/data/downloads", |item_id, _mt, _q| async move {
+            Some(format!("http://resolved/{item_id}"))
+        })
+        .await
+        .unwrap();
+
+        assert_eq!(out.resolved, 1);
+        assert_eq!(out.failed, 0);
+
+        // The offline-queued row now has a URL + target dir and stays pending.
+        let (status, url, target) = get_row(&db, "queued-1").await;
+        assert_eq!(status, "pending");
+        assert_eq!(url.as_deref(), Some("http://resolved/queued-1"));
+        assert_eq!(target.as_deref(), Some("/data/downloads"));
+
+        // The already-resolved row is unchanged (not re-resolved).
+        let (_s, url2, _t) = get_row(&db, "already").await;
+        assert_eq!(url2.as_deref(), Some("http://existing/url"));
+    }
+
+    #[tokio::test]
+    async fn counts_unresolvable_rows_as_failed_and_leaves_them_pending() {
+        let db = test_db();
+        insert_download(&db, "bad", "pending", None, None).await;
+
+        // Resolver returns None (e.g. server lookup failed).
+        let out = resolve_pending_download_urls(&db, "/data", |_id, _mt, _q| async move { None })
+            .await
+            .unwrap();
+
+        assert_eq!(out.resolved, 0);
+        assert_eq!(out.failed, 1);
+
+        // Still pending with no URL, so a later reconnect can retry it.
+        let (status, url, _t) = get_row(&db, "bad").await;
+        assert_eq!(status, "pending");
+        assert_eq!(url, None);
+    }
+
+    #[tokio::test]
+    async fn video_rows_use_media_type_in_resolver() {
+        let db = test_db();
+        insert_download(&db, "vid-1", "pending", None, Some("video")).await;
+
+        let out = resolve_pending_download_urls(&db, "/data", |item_id, media_type, _q| async move {
+            assert_eq!(media_type, "video");
+            Some(format!("http://transcode/{item_id}"))
+        })
+        .await
+        .unwrap();
+
+        assert_eq!(out.resolved, 1);
+        let (_s, url, _t) = get_row(&db, "vid-1").await;
+        assert_eq!(url.as_deref(), Some("http://transcode/vid-1"));
+    }
+}

src-tauri/src/commands/download/mod.rs

@@ -1087,7 +1087,7 @@ pub async fn enqueue_video_downloads(
 /// (FIFO within a priority), registers each, flips it to `downloading`, and
 /// spawns a worker. Each spawned worker calls this again on completion/failure,
 /// so the queue drains itself without any frontend involvement.
-async fn pump_download_queue(
+pub(crate) async fn pump_download_queue(
     app: tauri::AppHandle,
     db_service: Arc<crate::storage::db_service::RusqliteService>,
     active_downloads: Arc<Mutex<std::collections::HashSet<i64>>>,
@@ -1268,13 +1268,50 @@ fn spawn_download_worker(
             debug!("   Unregistered download {}. Active downloads: {}", download_id, active.len());
         }
 
+        // The pump runs downloads in the background, so the terminal status MUST
+        // be persisted to the DB here — the frontend event handler only writes it
+        // when that download happens to be loaded in its store, which is not the
+        // case for auto-pumped rows (or any completion while the downloads page is
+        // closed). `check_for_local_download` filters on status = 'completed', so a
+        // missed write leaves finished files unrecognized: albums never show as
+        // downloaded and playback never switches from the (expiring) stream to the
+        // local file, cutting tracks off mid-play.
+        let db_service = {
+            let db = app.state::<DatabaseWrapper>();
+            let database = match db.0.lock() {
+                Ok(d) => d,
+                Err(e) => {
+                    error!("[pump] Failed to lock database after download {}: {}", download_id, e);
+                    return;
+                }
+            };
+            Arc::new(database.service())
+        };
+
         match result {
             Ok(res) => {
                 info!("Download completed successfully: {} bytes", res.bytes_downloaded);
+                let file_path = target_path.to_string_lossy().to_string();
+
+                let update = Query::with_params(
+                    "UPDATE downloads SET status = 'completed', progress = 1.0, \
+                     bytes_downloaded = ?, file_size = ?, file_path = ?, \
+                     completed_at = CURRENT_TIMESTAMP WHERE id = ?",
+                    vec![
+                        QueryParam::Int64(res.bytes_downloaded as i64),
+                        QueryParam::Int64(res.bytes_downloaded as i64),
+                        QueryParam::String(file_path.clone()),
+                        QueryParam::Int64(download_id),
+                    ],
+                );
+                if let Err(e) = db_service.execute(update).await {
+                    error!("[pump] Failed to persist completed status for download {}: {}", download_id, e);
+                }
+
                 let completed_event = DownloadEvent::Completed {
                     download_id,
                     item_id,
-                    file_path: target_path.to_string_lossy().to_string(),
+                    file_path,
                 };
                 match app.emit("download-event", completed_event) {
                     Ok(_) => debug!("   Completed event emitted successfully"),
@@ -1283,6 +1320,18 @@ fn spawn_download_worker(
             }
             Err(e) => {
                 error!("Download failed: {:?}", e);
+
+                let update = Query::with_params(
+                    "UPDATE downloads SET status = 'failed', error_message = ? WHERE id = ?",
+                    vec![
+                        QueryParam::String(e.to_string()),
+                        QueryParam::Int64(download_id),
+                    ],
+                );
+                if let Err(db_err) = db_service.execute(update).await {
+                    error!("[pump] Failed to persist failed status for download {}: {}", download_id, db_err);
+                }
+
                 let failed_event = DownloadEvent::Failed {
                     download_id,
                     item_id,
@@ -1296,17 +1345,6 @@ fn spawn_download_worker(
         }
 
         // A slot just freed — start the next pending download (if any).
-        let db_service = {
-            let db = app.state::<DatabaseWrapper>();
-            let database = match db.0.lock() {
-                Ok(d) => d,
-                Err(e) => {
-                    error!("[pump] Failed to lock database after download {}: {}", download_id, e);
-                    return;
-                }
-            };
-            Arc::new(database.service())
-        };
         pump_download_queue(app.clone(), db_service, active_downloads).await;
     });
 }

src-tauri/src/commands/mod.rs

@@ -2,6 +2,7 @@
 // TRACES: UR-002, UR-003, UR-004, UR-005, UR-009, UR-011, UR-012, UR-017, UR-019, UR-025 |
 //         DR-015, DR-017, DR-021, DR-028
 pub mod auth;
+pub mod catalog;
 pub mod connectivity;
 pub mod conversions;
 pub mod device;
@@ -17,6 +18,7 @@ pub mod storage;
 pub mod sync;
 
 pub use auth::*;
+pub use catalog::*;
 pub use connectivity::*;
 pub use conversions::*;
 pub use device::*;

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

@@ -378,6 +378,65 @@ pub(super) async fn check_for_local_download(
     }
 }
 
+/// Re-point queued streaming items at completed local downloads.
+///
+/// Sources are resolved once when the queue is built, so downloads that finish
+/// while it plays (preloaded upcoming tracks) — or that existed before the
+/// connection dropped — would otherwise keep streaming. Called before advancing
+/// so the next track always prefers the on-disk copy.
+///
+/// Returns the number of items switched to a local source.
+pub(super) async fn refresh_queue_local_sources(
+    controller: &PlayerController,
+    db: &DatabaseWrapper,
+) -> Result<usize, String> {
+    // Collect remote item IDs first; the queue lock must not be held across awaits.
+    let remote_ids: Vec<String> = {
+        let queue = controller.queue();
+        let queue_lock = queue.lock().map_err(|e| e.to_string())?;
+        queue_lock
+            .items()
+            .iter()
+            .filter_map(|item| match &item.source {
+                MediaSource::Remote { jellyfin_item_id, .. } => Some(jellyfin_item_id.clone()),
+                _ => None,
+            })
+            .collect()
+    };
+
+    if remote_ids.is_empty() {
+        return Ok(0);
+    }
+
+    let mut local_paths: Vec<(String, String)> = Vec::new();
+    for id in remote_ids {
+        if let Some(path) = check_for_local_download(db, &id).await? {
+            local_paths.push((id, path));
+        }
+    }
+
+    if local_paths.is_empty() {
+        return Ok(0);
+    }
+
+    let queue = controller.queue();
+    let mut queue_lock = queue.lock().map_err(|e| e.to_string())?;
+    let mut switched = 0;
+    for item in queue_lock.items_mut() {
+        if let MediaSource::Remote { jellyfin_item_id, .. } = &item.source {
+            if let Some((id, path)) = local_paths.iter().find(|(id, _)| id == jellyfin_item_id) {
+                info!("[Player] Switching queued track {} to local download: {}", id, path);
+                item.source = MediaSource::Local {
+                    file_path: PathBuf::from(path),
+                    jellyfin_item_id: Some(id.clone()),
+                };
+                switched += 1;
+            }
+        }
+    }
+    Ok(switched)
+}
+
 /// Play a single media item (audio or video)
 ///
 /// Accepts a PlayItemRequest with all optional fields properly defaulted.
@@ -679,6 +738,7 @@ pub async fn player_next(
     player: State<'_, PlayerStateWrapper>,
     session: State<'_, MediaSessionManagerWrapper>,
     playback_mode: State<'_, super::playback_mode::PlaybackModeManagerWrapper>,
+    db: State<'_, DatabaseWrapper>,
 ) -> Result<PlayerStatus, String> {
     debug!("[player_next] Command called from frontend");
 
@@ -697,6 +757,10 @@ pub async fn player_next(
     } else {
         // Local playback
         let controller = player.0.lock().await;
+        // Prefer downloads that completed since the queue was built
+        if let Err(e) = refresh_queue_local_sources(&controller, &db).await {
+            warn!("[player_next] Failed to refresh local sources: {}", e);
+        }
         controller.next().map_err(|e| e.to_string())?;
         controller.emit_queue_changed();
 
@@ -732,6 +796,7 @@ pub async fn player_previous(
     player: State<'_, PlayerStateWrapper>,
     session: State<'_, MediaSessionManagerWrapper>,
     playback_mode: State<'_, super::playback_mode::PlaybackModeManagerWrapper>,
+    db: State<'_, DatabaseWrapper>,
 ) -> Result<PlayerStatus, String> {
     // Check if we're in remote mode
     let mode = playback_mode.0.get_mode();
@@ -748,6 +813,10 @@ pub async fn player_previous(
     } else {
         // Local playback
         let controller = player.0.lock().await;
+        // Prefer downloads that completed since the queue was built
+        if let Err(e) = refresh_queue_local_sources(&controller, &db).await {
+            warn!("[player_previous] Failed to refresh local sources: {}", e);
+        }
         controller.previous().map_err(|e| e.to_string())?;
         controller.emit_queue_changed();
 
@@ -1353,13 +1422,14 @@ pub async fn player_play_album_track(
         info!("  [{}] {} (ID: {})", idx, track.name, track.id);
     }
 
-    // Find the index of the requested track
+    // Validate the requested track exists in the album (its position in the
+    // final queue is computed after building, since offline tracks are skipped).
     info!("Looking for track_id: {}", request.track_id);
-    let start_index = tracks.iter()
+    let album_index = tracks.iter()
         .position(|t| t.id == request.track_id)
         .ok_or_else(|| format!("Track {} not found in album", request.track_id))?;
 
-    info!("Track {} is at index {} in album", request.track_id, start_index);
+    info!("Track {} is at index {} in album", request.track_id, album_index);
 
     // Convert tracks to MediaItems
     let mut media_items = Vec::new();
@@ -1374,13 +1444,21 @@ pub async fn player_play_album_track(
                 jellyfin_item_id: Some(jellyfin_id.clone()),
             }
         } else {
-            // Get stream URL from repository (works online/offline)
+            // Non-downloaded track: needs a stream URL from the server. When the
-            let stream_url = repository.get_audio_stream_url(&track.id).await
+            // server is unreachable (offline), skip this track rather than failing
-                .map_err(|e| format!("Failed to get stream URL for {}: {}", track.name, e))?;
+            // the whole album — downloaded tracks must still be playable.
-
+            match repository.get_audio_stream_url(&track.id).await {
-            MediaSource::Remote {
+                Ok(stream_url) => MediaSource::Remote {
-                stream_url,
+                    stream_url,
-                jellyfin_item_id: jellyfin_id.clone(),
+                    jellyfin_item_id: jellyfin_id.clone(),
+                },
+                Err(e) => {
+                    warn!(
+                        "[Player] Skipping track {} ({}) — no local download and stream URL unavailable: {}",
+                        track.name, track.id, e
+                    );
+                    continue;
+                }
             }
         };
 
@@ -1420,6 +1498,18 @@ pub async fn player_play_album_track(
         media_items.push(media_item);
     }
 
+    if media_items.is_empty() {
+        return Err("No playable tracks available (offline and nothing downloaded)".to_string());
+    }
+
+    // Tracks with no local download and no reachable server were skipped above,
+    // so positions shifted. Re-locate the requested track in the built queue.
+    // If the tapped track itself was skipped, fall back to the first item.
+    let start_index = media_items
+        .iter()
+        .position(|item| item.id == request.track_id)
+        .unwrap_or(0);
+
     info!("Built queue with {} media items, starting at index {}", media_items.len(), start_index);
 
     // Handle shuffle before setting queue
@@ -1669,12 +1759,23 @@ pub async fn player_preload_upcoming(
     player: State<'_, PlayerStateWrapper>,
     db: State<'_, DatabaseWrapper>,
     smart_cache: State<'_, SmartCacheWrapper>,
+    download_manager: State<'_, crate::commands::download::DownloadManagerWrapper>,
+    app: tauri::AppHandle,
     user_id: String,
     _download_base_path: String,
 ) -> Result<PreloadResult, String> {
-    let db_service = {
+    // The pump only starts rows that carry both a stream URL and a target dir,
+    // so resolve the same storage root the user-initiated download paths use
+    // (storage_get_path = the database's parent directory).
+    let (db_service, target_dir) = {
         let database = db.0.lock().map_err(|e| e.to_string())?;
-        Arc::new(database.service())
+        let target_dir = database
+            .path()
+            .parent()
+            .ok_or_else(|| "Database path has no parent directory".to_string())?
+            .to_string_lossy()
+            .to_string();
+        (Arc::new(database.service()), target_dir)
     };
 
     // Get cache settings
@@ -1712,10 +1813,12 @@ pub async fn player_preload_upcoming(
 
     // Process each upcoming item
     for item in upcoming_items {
-        // Only process items with Remote source (not already local)
+        // Only process items with Remote source (not already local). The
-        let jellyfin_id = match &item.source {
+        // source already carries the resolved stream URL — reuse it so the
-            MediaSource::Remote { jellyfin_item_id, .. } => {
+        // pump can start the download without any extra resolution step.
-                jellyfin_item_id.clone()
+        let (jellyfin_id, stream_url) = match &item.source {
+            MediaSource::Remote { jellyfin_item_id, stream_url } => {
+                (jellyfin_item_id.clone(), stream_url.clone())
             }
             MediaSource::Local { .. } => {
                 already_downloaded += 1;
@@ -1727,9 +1830,13 @@ pub async fn player_preload_upcoming(
             }
         };
 
-        // Check if already downloaded
+        // Check if already downloaded or actively in flight. Stale pending rows
+        // without a stream URL are NOT skipped here — the upsert below heals
+        // them so the pump can finally start them.
         let query = Query::with_params(
-            "SELECT file_path FROM downloads WHERE item_id = ? AND user_id = ? AND status IN ('completed', 'downloading', 'pending') LIMIT 1",
+            "SELECT file_path FROM downloads WHERE item_id = ? AND user_id = ?
+             AND (status IN ('completed', 'downloading')
+                  OR (status = 'pending' AND stream_url IS NOT NULL)) LIMIT 1",
             vec![
                 QueryParam::String(jellyfin_id.clone()),
                 QueryParam::String(user_id.clone()),
@@ -1746,14 +1853,29 @@ pub async fn player_preload_upcoming(
             continue;
         }
 
-        // Queue for download with low priority (preload priority = -100)
+        // Queue for download with low priority (preload priority = -100) so
-        let file_path = format!("{}/{}.mp3", sanitize_filename(&item.album.clone().unwrap_or_default()), sanitize_filename(&item.title));
+        // user-initiated downloads always win a pump slot first.
+        let album_dir = item
+            .album
+            .as_deref()
+            .filter(|a| !a.is_empty())
+            .unwrap_or("Unknown Album");
+        let file_path = format!(
+            "downloads/{}/{}.mp3",
+            sanitize_filename(album_dir),
+            sanitize_filename(&item.title)
+        );
 
-        // Insert download record with preload priority
+        // Insert with the stream URL + target dir the pump needs to start it.
+        // On conflict, heal pre-existing rows that were queued without a URL
+        // (they could never start) instead of leaving them stuck.
         let insert_query = Query::with_params(
-            "INSERT INTO downloads (item_id, user_id, file_path, status, priority, queued_at, item_name, artist_name, album_name)
+            "INSERT INTO downloads (item_id, user_id, file_path, status, priority, queued_at, item_name, artist_name, album_name, download_source, media_type, stream_url, target_dir)
-             VALUES (?, ?, ?, 'pending', -100, CURRENT_TIMESTAMP, ?, ?, ?)
+             VALUES (?, ?, ?, 'pending', -100, CURRENT_TIMESTAMP, ?, ?, ?, 'auto', 'audio', ?, ?)
-             ON CONFLICT(item_id, user_id) DO NOTHING",
+             ON CONFLICT(item_id, user_id) DO UPDATE SET
+                 stream_url = excluded.stream_url,
+                 target_dir = excluded.target_dir
+             WHERE downloads.status = 'pending' AND downloads.stream_url IS NULL",
             vec![
                 QueryParam::String(jellyfin_id),
                 QueryParam::String(user_id.clone()),
@@ -1761,6 +1883,8 @@ pub async fn player_preload_upcoming(
                 QueryParam::String(item.title.clone()),
                 item.artist.clone().map(QueryParam::String).unwrap_or(QueryParam::Null),
                 item.album.clone().map(QueryParam::String).unwrap_or(QueryParam::Null),
+                QueryParam::String(stream_url),
+                QueryParam::String(target_dir.clone()),
             ],
         );
 
@@ -1780,6 +1904,16 @@ pub async fn player_preload_upcoming(
         }
     }
 
+    // Kick the pump so the queued preloads actually start; without this they'd
+    // only begin once some other download activity pumps the queue.
+    if queued_count > 0 {
+        let active_downloads = {
+            let manager = download_manager.0.lock().map_err(|e| e.to_string())?;
+            manager.get_active_downloads()
+        };
+        crate::commands::download::pump_download_queue(app, db_service, active_downloads).await;
+    }
+
     info!("[Preload] Result: queued={}, already_downloaded={}, skipped={}", queued_count, already_downloaded, skipped);
 
     Ok(PreloadResult {
@@ -1826,9 +1960,10 @@ pub async fn player_get_cache_config(
 #[specta::specta]
 pub async fn player_configure_jellyfin(
     player: State<'_, PlayerStateWrapper>,
+    db: State<'_, DatabaseWrapper>,
     server_url: String,
     access_token: String,
-    _user_id: String,
+    user_id: String,
     device_id: String,
 ) -> Result<(), String> {
     log::info!("[PlayerCommand] Configuring Jellyfin client for playback reporting");
@@ -1839,12 +1974,31 @@ pub async fn player_configure_jellyfin(
         device_id,
     };
 
-    let client = JellyfinClient::new(config)?;
+    // Legacy client (used for remote session control / casting).
+    let client = JellyfinClient::new(config.clone())?;
+
+    // Build the PlaybackReporter the player and backends (MPV + ExoPlayer)
+    // actually report through. Without this, Start/Progress/Stopped never reach
+    // Jellyfin, so playback position never syncs and you can't resume on another
+    // device. The reporter shares the player controller's Arc, so populating it
+    // here lights up reporting on both desktop and Android, on every auth path
+    // that configures the player (login / restore / reauth).
+    let db_service = {
+        let database = db.0.lock().map_err(|e| e.to_string())?;
+        Arc::new(database.service())
+    };
+    let reporter_client = JellyfinClient::new(config)?;
+    let reporter = crate::playback_reporting::PlaybackReporter::new(
+        db_service,
+        Arc::new(TokioMutex::new(Some(reporter_client))),
+        user_id,
+    );
 
     let controller = player.0.lock().await;
     controller.set_jellyfin_client(Some(client));
+    controller.set_playback_reporter(Some(reporter)).await;
 
-    log::info!("[PlayerCommand] Jellyfin client configured successfully");
+    log::info!("[PlayerCommand] Jellyfin client and playback reporter configured successfully");
     Ok(())
 }
 
@@ -1858,13 +2012,105 @@ pub async fn player_disable_jellyfin(
 
     let controller = player.0.lock().await;
     controller.set_jellyfin_client(None);
+    controller.set_playback_reporter(None).await;
 
-    log::info!("[PlayerCommand] Jellyfin client disabled");
+    log::info!("[PlayerCommand] Jellyfin client and playback reporter disabled");
     Ok(())
 }
 
 #[cfg(test)]
 mod tests {
+    /// Queue items enqueued as Remote must flip to Local once a completed
+    /// download exists on disk — this is what makes preloaded tracks (and
+    /// offline playback after a connection drop) actually use the cache.
+    #[tokio::test]
+    async fn test_refresh_queue_local_sources_switches_completed_downloads() {
+        use super::{refresh_queue_local_sources, DatabaseWrapper};
+        use crate::player::{MediaItem, MediaSource, MediaType, PlayerController};
+        use crate::storage::Database;
+        use std::sync::Mutex;
+
+        // A real file on disk for the completed download; a missing file for
+        // the second entry to prove nonexistent files are not switched.
+        let dir = std::env::temp_dir().join("jellytau-test-refresh-sources");
+        std::fs::create_dir_all(&dir).unwrap();
+        let existing = dir.join("track-a.mp3");
+        std::fs::write(&existing, b"audio").unwrap();
+        let missing = dir.join("track-b-missing.mp3");
+        let _ = std::fs::remove_file(&missing);
+
+        let database = Database::open_in_memory().unwrap();
+        {
+            let conn = database.connection();
+            let conn = conn.lock().unwrap();
+            conn.execute_batch(&format!(
+                r#"
+                INSERT INTO servers (id, name, url) VALUES ('srv', 'Test', 'http://test');
+                INSERT INTO users (id, server_id, username) VALUES ('user1', 'srv', 'tester');
+                INSERT INTO downloads (item_id, user_id, file_path, status)
+                    VALUES ('track-a', 'user1', '{}', 'completed');
+                INSERT INTO downloads (item_id, user_id, file_path, status)
+                    VALUES ('track-b', 'user1', '{}', 'completed');
+                "#,
+                existing.display(),
+                missing.display()
+            ))
+            .unwrap();
+        }
+        let db = DatabaseWrapper(Mutex::new(database));
+
+        let make_item = |id: &str| MediaItem {
+            id: id.to_string(),
+            title: id.to_string(),
+            name: None,
+            artist: None,
+            album: None,
+            album_name: None,
+            album_id: None,
+            artist_items: None,
+            artists: None,
+            primary_image_tag: None,
+            item_type: None,
+            playlist_id: None,
+            duration: None,
+            artwork_url: None,
+            media_type: MediaType::Audio,
+            source: MediaSource::Remote {
+                stream_url: format!("http://test/Audio/{}/stream", id),
+                jellyfin_item_id: id.to_string(),
+            },
+            video_codec: None,
+            needs_transcoding: false,
+            video_width: None,
+            video_height: None,
+            subtitles: vec![],
+            series_id: None,
+            server_id: None,
+        };
+
+        let controller = PlayerController::default();
+        controller
+            .set_queue(vec![make_item("track-a"), make_item("track-b")], 0)
+            .unwrap();
+
+        let switched = refresh_queue_local_sources(&controller, &db).await.unwrap();
+        assert_eq!(switched, 1, "only the download whose file exists switches");
+
+        let queue = controller.queue();
+        let queue_lock = queue.lock().unwrap();
+        match &queue_lock.items()[0].source {
+            MediaSource::Local { file_path, jellyfin_item_id } => {
+                assert_eq!(file_path, &existing);
+                assert_eq!(jellyfin_item_id.as_deref(), Some("track-a"));
+            }
+            other => panic!("track-a should be local, got {:?}", other),
+        }
+        assert!(
+            matches!(queue_lock.items()[1].source, MediaSource::Remote { .. }),
+            "track-b's file is missing, it must stay remote"
+        );
+    }
+
     /// Test track index finding in album
     /// This reproduces the bug where clicking songs 1-5 always played song 13
     #[test]

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

@@ -347,10 +347,16 @@ pub async fn player_add_tracks_by_ids(
 #[specta::specta]
 pub async fn player_skip_to(
     player: State<'_, PlayerStateWrapper>,
+    db: State<'_, DatabaseWrapper>,
     index: usize,
 ) -> Result<PlayerStatus, String> {
     let controller = player.0.lock().await;
 
+    // Prefer downloads that completed since the queue was built
+    if let Err(e) = super::refresh_queue_local_sources(&controller, &db).await {
+        log::warn!("[player_skip_to] Failed to refresh local sources: {}", e);
+    }
+
     // Skip to the index and get the item to play
     let item = {
         let queue = controller.queue();

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

@@ -142,6 +142,7 @@ pub async fn player_play_next_episode(
 pub async fn player_on_playback_ended(
     player: State<'_, PlayerStateWrapper>,
     repository_manager: State<'_, crate::commands::repository::RepositoryManagerWrapper>,
+    db: State<'_, DatabaseWrapper>,
     item_id: Option<String>,
     repository_handle: Option<String>,
 ) -> Result<(), String> {
@@ -174,8 +175,14 @@ pub async fn player_on_playback_ended(
     // Handle the decision
     match decision {
         AutoplayDecision::Stop => {
-            log::debug!("[Autoplay] Decision: Stop playback");
+            log::info!("[Autoplay] Decision: Stop playback");
             let controller = controller_arc.lock().await;
+            // Clear the queue so the frontend's currentQueueItem becomes null and
+            // the mini player hides. Without this, the queue still holds the last
+            // track and the bar would linger (the frontend keeps the bar visible
+            // through transient idle blips as long as a queue item exists).
+            controller.clear_queue();
+            controller.emit_queue_changed();
             if let Some(emitter) = controller.event_emitter() {
                 // Emit StateChanged to idle to clear the current media from mini player
                 // Note: Do NOT emit PlaybackEnded here - it would cause an infinite loop
@@ -187,9 +194,14 @@ pub async fn player_on_playback_ended(
             }
         }
         AutoplayDecision::AdvanceToNext => {
-            log::debug!("[Autoplay] Decision: Advance to next track");
+            log::info!("[Autoplay] Decision: Advance to next track");
             // Advance to next track in queue
             let controller = controller_arc.lock().await;
+            // Prefer downloads that completed since the queue was built (e.g.
+            // preloaded upcoming tracks) over continuing to stream.
+            if let Err(e) = super::refresh_queue_local_sources(&controller, &db).await {
+                log::warn!("[Autoplay] Failed to refresh local sources: {}", e);
+            }
             if let Err(e) = controller.next() {
                 log::error!("[Autoplay] Failed to advance to next track: {}", e);
                 // Emit PlaybackEnded event on error
@@ -235,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/commands/repository.rs

@@ -52,6 +52,7 @@ pub struct RepositoryManagerWrapper(pub RepositoryManager);
 #[specta::specta]
 pub async fn repository_create(
     manager: State<'_, RepositoryManagerWrapper>,
+    player: State<'_, crate::commands::player::PlayerStateWrapper>,
     db: State<'_, crate::commands::storage::DatabaseWrapper>,
     connectivity: State<'_, crate::commands::connectivity::ConnectivityMonitorWrapper>,
     server_url: String,
@@ -115,6 +116,14 @@ pub async fn repository_create(
     manager.0.create(handle.clone(), hybrid);
     info!("[REPO] Repository stored successfully");
 
+    // Give the player controller a repository for next-episode lookups. The
+    // Android playback-ended callback has no repository handle, so without
+    // this the episode autoplay countdown never triggers there.
+    if let Some(repo) = manager.0.get(&handle) {
+        let controller = player.0.lock().await;
+        controller.set_repository(repo);
+    }
+
     Ok(handle)
 }
 
@@ -179,6 +188,23 @@ pub async fn repository_get_item(
         .map_err(|e| format!("{:?}", e))
 }
 
+/// Query the optional JRay plugin for the actors on screen at time `t`
+/// (seconds) in an item. Returns an empty list when JRay isn't installed or
+/// has no data for the item, so the caller can render nothing without error.
+#[tauri::command]
+#[specta::specta]
+pub async fn repository_jray_actors_at(
+    manager: State<'_, RepositoryManagerWrapper>,
+    handle: String,
+    item_id: String,
+    t: f64,
+) -> Result<Vec<crate::repository::JRayActor>, String> {
+    let repo = manager.0.get(&handle).ok_or("Repository not found")?;
+    repo.as_ref().get_jray_actors(&item_id, t)
+        .await
+        .map_err(|e| format!("{:?}", e))
+}
+
 /// Get latest items in a library
 #[tauri::command]
 #[specta::specta]

src-tauri/src/jellyfin/http_client.rs

@@ -217,6 +217,45 @@ impl HttpClient {
             .map_err(|e| format!("Failed to parse JSON: {}", e))
     }
 
+    /// Make a GET request and deserialize JSON with a short timeout and no retries.
+    ///
+    /// Intended for the initial "connect to server" probe on the login screen:
+    /// a wrong/unreachable URL must fail fast instead of burning through the
+    /// default 30s-per-attempt timeout and exponential backoff retries.
+    pub async fn get_json_fast<T: DeserializeOwned>(&self, url: &str) -> Result<T, String> {
+        // Short timeout so an unreachable host fails quickly.
+        const FAST_TIMEOUT: Duration = Duration::from_secs(10);
+
+        let request = self
+            .client
+            .get(url)
+            .timeout(FAST_TIMEOUT)
+            .build()
+            .map_err(|e| format!("Failed to build request: {}", e))?;
+
+        // No retry: connection failures on a wrong URL won't succeed on retry,
+        // they'd only multiply the wait the user sees before an error.
+        let response = self
+            .client
+            .execute(request)
+            .await
+            .map_err(|e| format!("Request failed: {}", e))?;
+
+        if !response.status().is_success() {
+            let status = response.status();
+            let error_text = response
+                .text()
+                .await
+                .unwrap_or_else(|_| "Unknown error".to_string());
+            return Err(format!("HTTP {}: {}", status, error_text));
+        }
+
+        response
+            .json::<T>()
+            .await
+            .map_err(|e| format!("Failed to parse JSON: {}", e))
+    }
+
     /// Quick ping to check if a server is reachable (no retry)
     pub async fn ping(&self, url: &str) -> bool {
         let request = self.client.get(url)

src-tauri/src/lib.rs

@@ -23,6 +23,7 @@ use log::{error, info};
 use log::warn;
 
 use commands::{
+    sync_full_catalog, catalog_sync_status, resume_queued_downloads,
     cancel_download, clear_stale_downloads, delete_album_downloads, delete_all_downloads, delete_download,
     download_album, download_item, download_item_and_start, download_video, download_series, download_season,
     get_download_storage_stats, get_downloads, get_download_manager_stats, set_max_concurrent_downloads,
@@ -40,6 +41,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,
@@ -96,7 +99,7 @@ use commands::{
     storage_save_series_audio_preference, storage_get_series_audio_preference,
     // Repository commands
     repository_create, repository_destroy, repository_get_libraries, repository_get_items,
-    repository_get_item, repository_get_latest_items, repository_get_resume_items,
+    repository_get_item, repository_jray_actors_at, repository_get_latest_items, repository_get_resume_items,
     repository_get_next_up_episodes, repository_get_recently_played_audio, repository_get_resume_movies,
     repository_get_rediscover_albums,
     repository_get_genres, repository_search, repository_get_playback_info,
@@ -476,6 +479,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,
@@ -580,6 +586,9 @@ fn specta_builder() -> Builder<tauri::Wry> {
             start_download,
             enqueue_download,
             enqueue_video_downloads,
+            sync_full_catalog,
+            catalog_sync_status,
+            resume_queued_downloads,
             get_download_manager_stats,
             set_max_concurrent_downloads,
             get_smart_cache_stats,
@@ -634,6 +643,7 @@ fn specta_builder() -> Builder<tauri::Wry> {
             repository_get_libraries,
             repository_get_items,
             repository_get_item,
+            repository_jray_actors_at,
             repository_get_latest_items,
             repository_get_resume_items,
             repository_get_next_up_episodes,
@@ -676,6 +686,81 @@ fn specta_builder() -> Builder<tauri::Wry> {
         ])
 }
 
+/// Configure GStreamer (the media backend behind WebKitGTK's HTML5 `<video>`
+/// element on Linux) to prefer hardware-accelerated VAAPI decoding when the
+/// host provides it, falling back to software decoding otherwise.
+///
+/// All variables are only set if the user has not already exported them, so an
+/// explicit override (e.g. forcing software decode for debugging) is respected.
+/// They must be applied before WebKitGTK builds its GStreamer pipeline, hence the
+/// call at the very top of `run()`.
+#[cfg(target_os = "linux")]
+fn enable_linux_hardware_video_decoding() {
+    // Boost the rank of the modern stateless VAAPI decoders (gst-plugins-bad
+    // `va` plugin) so GStreamer selects them ahead of the software decoders. The
+    // `MAX` rank wins decoder autoplugging when the hardware/driver supports the
+    // codec; unsupported codecs simply fall through to software.
+    let rank_overrides = "vah264dec:MAX,vah265dec:MAX,vavp9dec:MAX,vaav1dec:MAX,\
+                          vampeg2dec:MAX,vavp8dec:MAX";
+
+    set_env_if_unset("GST_PLUGIN_FEATURE_RANK", rank_overrides);
+
+    // Ensure WebKit keeps GStreamer's hardware/DMABUF video path enabled. Setting
+    // this to "0" would force software decoding, so only default it to "1".
+    set_env_if_unset("WEBKIT_GST_ENABLE_HW_VIDEO_DECODER", "1");
+
+    info!("[INIT] Linux hardware video decoding (VAAPI) enabled where supported");
+
+    log_available_vaapi_decoders();
+}
+
+/// Probe (via `gst-inspect-1.0`, which ships with GStreamer) which VAAPI hardware
+/// video decoders GStreamer can actually load on this host, and log the result so
+/// it is clear at startup whether hardware decoding is genuinely available or
+/// whether playback will fall back to software.
+#[cfg(target_os = "linux")]
+fn log_available_vaapi_decoders() {
+    const HW_DECODERS: &[&str] = &[
+        "vah264dec", "vah265dec", "vavp9dec", "vaav1dec", "vampeg2dec", "vavp8dec",
+    ];
+
+    let available: Vec<&str> = HW_DECODERS
+        .iter()
+        .copied()
+        .filter(|name| {
+            std::process::Command::new("gst-inspect-1.0")
+                .arg(name)
+                .stdout(std::process::Stdio::null())
+                .stderr(std::process::Stdio::null())
+                .status()
+                .map(|s| s.success())
+                .unwrap_or(false)
+        })
+        .collect();
+
+    if available.is_empty() {
+        log::warn!(
+            "[INIT] No VAAPI hardware video decoders found via gst-inspect-1.0; \
+             video will use software decoding. Install the GStreamer 'va' plugin \
+             (gst-plugins-bad) and a VAAPI driver to enable hardware decoding."
+        );
+    } else {
+        info!(
+            "[INIT] VAAPI hardware video decoders available to GStreamer: {}",
+            available.join(", ")
+        );
+    }
+}
+
+#[cfg(target_os = "linux")]
+fn set_env_if_unset(key: &str, value: &str) {
+    if std::env::var_os(key).is_none() {
+        // SAFETY: called once at startup before any threads that read the
+        // environment (WebKitGTK/GStreamer) are spawned.
+        std::env::set_var(key, value);
+    }
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     // Initialize logger
@@ -683,6 +768,13 @@ pub fn run() {
         .filter_level(log::LevelFilter::Info)
         .init();
 
+    // On Linux, video plays through WebKitGTK's HTML5 <video> element, which uses
+    // GStreamer as its media backend. Enable hardware-accelerated (VAAPI) decoding
+    // when available so video transcoding/decoding does not fall back to the CPU.
+    // These must be set before WebKitGTK initializes its GStreamer pipeline.
+    #[cfg(target_os = "linux")]
+    enable_linux_hardware_video_decoding();
+
     // NOTE: TypeScript bindings are generated by the `export_typescript_bindings`
     // test (`cargo test export_typescript_bindings`), NOT at runtime. Calling
     // `.export()` here would try to write `../src/lib/api/bindings.ts` at app
@@ -842,9 +934,11 @@ pub fn run() {
                 playback_mode_arc.clone(),
             );
             session_poller.set_event_emitter(event_emitter.clone());
-            session_poller.start();
+            // Note: start() is deferred until after the connectivity monitor is
+            // created below, so the poller can report reachability from its first
+            // poll (it drives offline detection + recovery while the user is idle).
             let session_poller_arc = Arc::new(session_poller);
-            let session_poller_wrapper = SessionPollerWrapper(session_poller_arc);
+            let session_poller_wrapper = SessionPollerWrapper(session_poller_arc.clone());
             app.manage(session_poller_wrapper);
 
             // On Android, set up the MediaSession (lockscreen) handler and the
@@ -906,6 +1000,12 @@ pub fn run() {
             let mut connectivity_monitor = ConnectivityMonitor::new(http_client);
             connectivity_monitor.set_app_handle(app.handle().clone());
 
+            // Wire the connectivity reporter into the session poller so its
+            // continuous background polls drive reachability (offline detection
+            // + recovery) even when the user isn't browsing, then start it.
+            session_poller_arc.set_connectivity_reporter(connectivity_monitor.reporter());
+            session_poller_arc.start();
+
             // Wrap in Arc for sharing with AuthManager
             let connectivity_arc = Arc::new(tokio::sync::Mutex::new(connectivity_monitor));
             let connectivity_wrapper = ConnectivityMonitorWrapper(connectivity_arc.clone());
@@ -935,9 +1035,13 @@ pub fn run() {
             let repository_manager_wrapper = RepositoryManagerWrapper(repository_manager);
             app.manage(repository_manager_wrapper);
 
-            // Initialize playback reporter wrapper (initially empty, set on login)
+            // Initialize playback reporter wrapper. This MUST share the same Arc
+            // the player controller and MPV progress loop report through (created
+            // above at `playback_reporter`), otherwise `playback_reporter_init`
+            // would populate a dead, parallel Option and no Start/Progress/Stopped
+            // would ever reach Jellyfin.
             info!("[INIT] Initializing playback reporter wrapper...");
-            let playback_reporter_wrapper = PlaybackReporterWrapper(Arc::new(tokio::sync::Mutex::new(None)));
+            let playback_reporter_wrapper = PlaybackReporterWrapper(playback_reporter.clone());
             app.manage(playback_reporter_wrapper);
 
             info!("[INIT] Application setup completed successfully");

src-tauri/src/player/android/mod.rs

@@ -17,7 +17,8 @@ use super::backend::{PlayerBackend, PlayerError};
 use super::events::{PlayerStatusEvent, SharedEventEmitter};
 use super::media::{MediaItem, MediaType};
 use super::state::PlayerState;
-use crate::playback_reporting::{PlaybackReporter, EventThrottler};
+use crate::playback_reporting::{PlaybackReporter, EventThrottler, PlaybackOperation};
+use crate::utils::conversions::seconds_to_ticks;
 
 /// Global reference to the JavaVM for JNI callbacks
 static JAVA_VM: OnceLock<JavaVM> = OnceLock::new();
@@ -584,6 +585,75 @@ pub extern "system" fn Java_com_dtourolle_jellytau_player_JellyTauPlayer_nativeO
     } else {
         log::error!("[Android] WARNING: No event emitter for position update!");
     }
+
+    // Throttled progress reporting to Jellyfin so playback position syncs and can
+    // be resumed on another device. ExoPlayer only fires position updates while
+    // playing, but guard on the stored state anyway. Mirrors the MPV backend's
+    // progress loop; both share the same EventThrottler (every 30s per item).
+    report_android_progress(position);
+}
+
+/// Report throttled playback progress to Jellyfin from the Android position
+/// callback. No-op until the reporter/throttler are wired (post-login) or when
+/// not actively playing.
+fn report_android_progress(position: f64) {
+    let item_id = match SHARED_STATE.get() {
+        Some(state) => {
+            let state = state.lock_safe();
+            if !state.state.is_playing() {
+                return;
+            }
+            match state.current_media.as_ref().and_then(|m| m.jellyfin_id().map(|s| s.to_string())) {
+                Some(id) => id,
+                None => return,
+            }
+        }
+        None => return,
+    };
+
+    let throttler = match POSITION_THROTTLER.get() {
+        Some(t) => t,
+        None => return,
+    };
+    if !throttler.should_report(&item_id) {
+        return;
+    }
+
+    let reporter_arc = match PLAYBACK_REPORTER.get() {
+        Some(r) => r.clone(),
+        None => return,
+    };
+
+    let position_ticks = seconds_to_ticks(position);
+    let item_id_for_task = item_id.clone();
+
+    // The reporter is async; the JNI callback is sync. Spawn onto the Tokio
+    // runtime when present, otherwise a throwaway runtime on a new thread.
+    let spawn_report = move || async move {
+        let reporter_guard = reporter_arc.lock().await;
+        if let Some(reporter) = reporter_guard.as_ref() {
+            let operation = PlaybackOperation::Progress {
+                item_id: item_id_for_task.clone(),
+                position_ticks,
+                is_paused: false,
+            };
+            match reporter.report(operation, true).await {
+                Ok(_) => debug!("[Android] Reported progress for {}", item_id_for_task),
+                Err(e) => log::warn!("[Android] Failed to report progress: {}", e),
+            }
+        }
+    };
+
+    if let Ok(handle) = tokio::runtime::Handle::try_current() {
+        handle.spawn(spawn_report());
+    } else {
+        std::thread::spawn(move || {
+            let rt = tokio::runtime::Runtime::new().unwrap();
+            rt.block_on(spawn_report());
+        });
+    }
+
+    throttler.mark_reported(&item_id);
 }
 
 /// Called when player state changes.

src-tauri/src/player/events.rs

@@ -78,6 +78,11 @@ pub enum PlayerStatusEvent {
         /// Remaining seconds (for time-based timer)
         remaining_seconds: u32,
     },
+    /// Time-based sleep timer expired: playback must stop. The backend stops
+    /// its own (MPV/ExoPlayer) playback, but HTML5 video on Linux plays in the
+    /// webview outside the backend's control — the frontend pauses it on this
+    /// event.
+    SleepTimerExpired,
     /// Show next episode popup with countdown
     ShowNextEpisodePopup {
         /// Current episode that just finished
@@ -125,6 +130,17 @@ pub enum PlayerStatusEvent {
     /// frontend owns the two-step remote->local transfer (it must reload the
     /// media item locally), so the native side only signals intent here.
     RemoteDisconnectRequested,
+    /// Backend-originated control command targeting the active frontend player
+    /// adapter (the HTML5 <video> that lives in the webview, which Rust cannot
+    /// drive directly). Emitted by control paths like the sleep timer, lockscreen,
+    /// or remote so they can pause/play/seek/stop the webview element.
+    /// `playerEvents.ts` routes this to the active PlayerAdapter via the facade.
+    ControlCommand {
+        /// One of: "play", "pause", "stop", "seek".
+        action: String,
+        /// Target position in seconds (only meaningful for "seek").
+        position: Option<f64>,
+    },
 }
 
 /// Trait for emitting player events to the frontend.

src-tauri/src/player/mod.rs

@@ -165,9 +165,18 @@ impl PlayerController {
         self.jellyfin_client.clone()
     }
 
-    /// Configure the playback reporter for dual sync (local DB + server)
+    /// Configure the media repository used for next-episode lookups.
-    /// Will be called from initialization commands after login
+    ///
-    #[allow(dead_code)]
+    /// The Android ExoPlayer ended-callback calls `on_playback_ended` with no
+    /// repository handle (unlike the Linux HTML5 path, which passes one per
+    /// call), so the controller needs a repository of its own or episode
+    /// autoplay silently decides Stop.
+    pub fn set_repository(&self, repo: Arc<dyn MediaRepository>) {
+        *self.repository.lock_safe() = Some(repo);
+    }
+
+    /// Configure the playback reporter for dual sync (local DB + server).
+    /// Called from `player_configure_jellyfin` on login/restore/reauth.
     pub async fn set_playback_reporter(&self, reporter: Option<PlaybackReporter>) {
         let mut reporter_guard = self.playback_reporter.lock().await;
         *reporter_guard = reporter;
@@ -597,6 +606,13 @@ impl PlayerController {
         self.queue.clone()
     }
 
+    /// Clear the queue entirely (used when playback genuinely stops, e.g. the
+    /// sleep timer fires or the queue ends with repeat off). Pair with
+    /// `emit_queue_changed` so the frontend hides the mini player.
+    pub fn clear_queue(&self) {
+        self.queue.lock_safe().clear();
+    }
+
     /// Toggle shuffle
     pub fn toggle_shuffle(&self) {
         self.queue.lock_safe().toggle_shuffle();
@@ -701,6 +717,10 @@ impl PlayerController {
                                 mode: SleepTimerMode::Off,
                                 remaining_seconds: 0,
                             });
+                            // Tell the frontend playback must stop: HTML5 video
+                            // (Linux) plays outside the backend, so stopping the
+                            // backend below doesn't reach it.
+                            emitter.emit(PlayerStatusEvent::SleepTimerExpired);
                         }
                         drop(timer);
 
@@ -757,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
@@ -873,9 +931,17 @@ impl PlayerController {
             let repo = self.repository.lock_safe().clone();
             let jellyfin_id = current.jellyfin_id().unwrap_or(&current.id);
             let next_ep_result = if let Some(repo) = &repo {
-                self.fetch_next_episode_for_item(jellyfin_id, repo).await?
+                // Degrade lookup failures to Stop: playback already ended, and
+                // surfacing an error here just kills autoplay silently upstream.
+                match self.fetch_next_episode_for_item(jellyfin_id, repo).await {
+                    Ok(next) => next,
+                    Err(e) => {
+                        warn!("[PlayerController] Next-episode lookup failed for {}: {}", jellyfin_id, e);
+                        None
+                    }
+                }
             } else {
-                debug!("[PlayerController] No repository available for audio-path episode lookup");
+                warn!("[PlayerController] No repository available for episode lookup - cannot autoplay next episode");
                 None
             };
             if let Some(next_ep) = next_ep_result {
@@ -930,7 +996,7 @@ impl PlayerController {
             debug!("[PlayerController] Cleared stale end_reason for video: {:?}", stale_reason);
         }
 
-        debug!("[PlayerController] on_video_playback_ended: item_id={}", item_id);
+        log::info!("[PlayerController] on_video_playback_ended: item_id={}", item_id);
 
         // Check sleep timer state
         let timer_mode = {
@@ -963,8 +1029,17 @@ impl PlayerController {
             _ => {}
         }
 
-        // Fetch next episode for the video that just ended
+        // Fetch next episode for the video that just ended. Degrade lookup
-        if let Some(next_ep) = self.fetch_next_episode_for_item(item_id, &repo).await? {
+        // failures to Stop: playback already ended, and propagating an error
+        // here just kills autoplay silently upstream.
+        let next_ep_result = match self.fetch_next_episode_for_item(item_id, &repo).await {
+            Ok(next) => next,
+            Err(e) => {
+                warn!("[PlayerController] Next-episode lookup failed for {}: {}", item_id, e);
+                None
+            }
+        };
+        if let Some(next_ep) = next_ep_result {
             let settings = self.autoplay_settings.lock_safe().clone();
 
             let limit_reached = self.increment_autoplay_count();
@@ -1014,7 +1089,7 @@ impl PlayerController {
         let season_id = match &current_repo_item.season_id {
             Some(sid) => sid.clone(),
             None => {
-                debug!("[PlayerController] Current item has no season_id, cannot find next episode");
+                log::info!("[PlayerController] Current item has no season_id, cannot find next episode");
                 return Ok(None);
             }
         };
@@ -1036,19 +1111,19 @@ impl PlayerController {
         // (offline repo ignores sort_by and sorts by sort_name instead)
         let mut episodes = result.items;
         episodes.sort_by_key(|e| e.index_number.unwrap_or(i32::MAX));
-        debug!("[PlayerController] Season has {} episodes, looking for next after {}", episodes.len(), current_repo_item.id);
+        log::info!("[PlayerController] Season has {} episodes, looking for next after {}", episodes.len(), current_repo_item.id);
 
         // Find the current episode by ID and return the next one
         if let Some(current_idx) = episodes.iter().position(|e| e.id == current_repo_item.id) {
             if current_idx + 1 < episodes.len() {
                 let next = &episodes[current_idx + 1];
-                debug!("[PlayerController] Found next episode: {} (index {})", next.name, current_idx + 1);
+                log::info!("[PlayerController] Found next episode: {} (index {})", next.name, current_idx + 1);
                 return Ok(Some((current_repo_item, next.clone())));
             } else {
-                debug!("[PlayerController] Current episode is the last in the season");
+                log::info!("[PlayerController] Current episode is the last in the season");
             }
         } else {
-            debug!("[PlayerController] Current episode not found in season episodes");
+            log::info!("[PlayerController] Current episode not found in season episodes (ids: {:?})", episodes.iter().map(|e| e.id.as_str()).take(20).collect::<Vec<_>>());
         }
 
         Ok(None)
@@ -1102,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();
@@ -1760,4 +1912,280 @@ mod tests {
         let reason = controller.take_end_reason();
         assert!(reason.is_none(), "take_end_reason should clear the state");
     }
+
+    // ===== Next-episode autoplay decision tests =====
+
+    use crate::repository::types as repo_types;
+
+    /// Mock repository serving a single season of episodes for next-episode
+    /// lookup tests. Only `get_item` and `get_items` are used by
+    /// `fetch_next_episode_for_item`; everything else is unreachable.
+    struct MockEpisodeRepo {
+        episodes: Vec<repo_types::MediaItem>,
+    }
+
+    impl MockEpisodeRepo {
+        fn season(count: usize) -> Self {
+            let episodes = (1..=count)
+                .map(|i| {
+                    let mut item = make_repo_episode(&format!("ep{}", i), i as i32);
+                    item.name = format!("Episode {}", i);
+                    item
+                })
+                .collect();
+            Self { episodes }
+        }
+    }
+
+    fn make_repo_episode(id: &str, index: i32) -> repo_types::MediaItem {
+        repo_types::MediaItem {
+            id: id.to_string(),
+            name: format!("Episode {}", index),
+            item_type: "Episode".to_string(),
+            is_folder: false,
+            server_id: "server".to_string(),
+            parent_id: Some("season1".to_string()),
+            library_id: None,
+            overview: None,
+            genres: None,
+            runtime_ticks: None,
+            production_year: None,
+            premiere_date: None,
+            community_rating: None,
+            official_rating: None,
+            primary_image_tag: None,
+            backdrop_image_tags: None,
+            parent_backdrop_image_tags: None,
+            album_id: None,
+            album_name: None,
+            album_artist: None,
+            artists: None,
+            artist_items: None,
+            index_number: Some(index),
+            series_id: Some("series1".to_string()),
+            series_name: Some("Test Series".to_string()),
+            season_id: Some("season1".to_string()),
+            season_name: Some("Season 1".to_string()),
+            parent_index_number: Some(1),
+            user_data: None,
+            media_streams: None,
+            media_sources: None,
+            people: None,
+        }
+    }
+
+    #[async_trait::async_trait]
+    impl crate::repository::MediaRepository for MockEpisodeRepo {
+        async fn get_libraries(&self) -> Result<Vec<repo_types::Library>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_items(
+            &self,
+            parent_id: &str,
+            _options: Option<repo_types::GetItemsOptions>,
+        ) -> Result<repo_types::SearchResult, repo_types::RepoError> {
+            assert_eq!(parent_id, "season1", "episode lookup must query the season");
+            Ok(repo_types::SearchResult {
+                items: self.episodes.clone(),
+                total_record_count: self.episodes.len(),
+            })
+        }
+        async fn get_item(&self, item_id: &str) -> Result<repo_types::MediaItem, repo_types::RepoError> {
+            self.episodes
+                .iter()
+                .find(|e| e.id == item_id)
+                .cloned()
+                .ok_or(repo_types::RepoError::NotFound {
+                    message: format!("{} not found", item_id),
+                })
+        }
+        async fn get_latest_items(&self, _: &str, _: Option<usize>) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_resume_items(&self, _: Option<&str>, _: Option<usize>) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_next_up_episodes(&self, _: Option<&str>, _: Option<usize>) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_recently_played_audio(&self, _: Option<usize>) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_rediscover_albums(&self, _: Option<&str>, _: Option<usize>) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_resume_movies(&self, _: Option<usize>) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_genres(&self, _: Option<&str>) -> Result<Vec<repo_types::Genre>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn search(&self, _: &str, _: Option<repo_types::SearchOptions>) -> Result<repo_types::SearchResult, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_playback_info(&self, _: &str) -> Result<repo_types::PlaybackInfo, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_audio_stream_url(&self, _: &str) -> Result<String, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_live_tv_channels(&self) -> Result<Vec<repo_types::MediaItem>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_channels(&self) -> Result<repo_types::SearchResult, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn open_live_stream(&self, _: &str) -> Result<repo_types::LiveStreamInfo, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn report_playback_start(&self, _: &str, _: i64) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn report_playback_progress(&self, _: &str, _: i64) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn report_playback_stopped(&self, _: &str, _: i64) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        fn get_image_url(&self, _: &str, _: repo_types::ImageType, _: Option<repo_types::ImageOptions>) -> String {
+            unimplemented!()
+        }
+        fn get_subtitle_url(&self, _: &str, _: &str, _: i32, _: &str) -> String {
+            unimplemented!()
+        }
+        fn get_video_download_url(&self, _: &str, _: &str, _: Option<&str>) -> String {
+            unimplemented!()
+        }
+        async fn mark_favorite(&self, _: &str) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn unmark_favorite(&self, _: &str) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_person(&self, _: &str) -> Result<repo_types::MediaItem, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_items_by_person(&self, _: &str, _: Option<repo_types::GetItemsOptions>) -> Result<repo_types::SearchResult, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_similar_items(&self, _: &str, _: Option<usize>) -> Result<repo_types::SearchResult, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn create_playlist(&self, _: &str, _: &[String]) -> Result<repo_types::PlaylistCreatedResult, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn delete_playlist(&self, _: &str) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn rename_playlist(&self, _: &str, _: &str) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn get_playlist_items(&self, _: &str) -> Result<Vec<repo_types::PlaylistEntry>, repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn add_to_playlist(&self, _: &str, _: &[String]) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn remove_from_playlist(&self, _: &str, _: &[String]) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+        async fn move_playlist_item(&self, _: &str, _: &str, _: u32) -> Result<(), repo_types::RepoError> {
+            unimplemented!()
+        }
+    }
+
+    /// Video (HTML5/Linux) path: ending mid-season must produce the
+    /// next-episode popup with auto-advance.
+    #[tokio::test]
+    async fn test_video_playback_ended_offers_next_episode() {
+        let controller = PlayerController::default();
+        let repo: Arc<dyn MediaRepository> = Arc::new(MockEpisodeRepo::season(3));
+
+        let decision = controller
+            .on_video_playback_ended("ep2", repo)
+            .await
+            .expect("decision should succeed");
+
+        match decision {
+            AutoplayDecision::ShowNextEpisodePopup {
+                current_episode,
+                next_episode,
+                auto_advance,
+                ..
+            } => {
+                assert_eq!(current_episode.id, "ep2");
+                assert_eq!(next_episode.id, "ep3");
+                assert!(auto_advance, "default settings should auto-advance");
+            }
+            other => panic!("Expected ShowNextEpisodePopup, got {:?}", other),
+        }
+    }
+
+    /// Last episode of the season: no popup, stop.
+    #[tokio::test]
+    async fn test_video_playback_ended_last_episode_stops() {
+        let controller = PlayerController::default();
+        let repo: Arc<dyn MediaRepository> = Arc::new(MockEpisodeRepo::season(3));
+
+        let decision = controller
+            .on_video_playback_ended("ep3", repo)
+            .await
+            .expect("decision should succeed");
+
+        assert!(matches!(decision, AutoplayDecision::Stop));
+    }
+
+    /// Android/ExoPlayer path: `on_playback_ended` has no per-call repository,
+    /// so the controller-level repository (wired up in `repository_create`)
+    /// must be used for the next-episode lookup. Regression test for episode
+    /// autoplay never triggering on Android because no repository was set.
+    #[tokio::test]
+    async fn test_playback_ended_uses_controller_repository_for_episodes() {
+        let controller = PlayerController::default();
+        controller.set_repository(Arc::new(MockEpisodeRepo::season(3)));
+
+        // Queue holds the episode that just finished playing
+        let episode = MediaItem {
+            media_type: MediaType::Video,
+            source: MediaSource::Remote {
+                stream_url: "http://example.com/ep1.mkv".to_string(),
+                jellyfin_item_id: "ep1".to_string(),
+            },
+            ..create_test_items(1).remove(0)
+        };
+        controller.play_queue(vec![episode], 0).unwrap();
+
+        // Clear the NewTrackLoaded reason to simulate natural track end
+        controller.take_end_reason();
+
+        let decision = controller.on_playback_ended().await.unwrap();
+
+        match decision {
+            AutoplayDecision::ShowNextEpisodePopup { next_episode, .. } => {
+                assert_eq!(next_episode.id, "ep2");
+            }
+            other => panic!("Expected ShowNextEpisodePopup, got {:?}", other),
+        }
+    }
+
+    /// Without a controller repository the Android episode path must still
+    /// stop gracefully (previous behavior) rather than error.
+    #[tokio::test]
+    async fn test_playback_ended_without_repository_stops() {
+        let controller = PlayerController::default();
+
+        let episode = MediaItem {
+            media_type: MediaType::Video,
+            source: MediaSource::Remote {
+                stream_url: "http://example.com/ep1.mkv".to_string(),
+                jellyfin_item_id: "ep1".to_string(),
+            },
+            ..create_test_items(1).remove(0)
+        };
+        controller.play_queue(vec![episode], 0).unwrap();
+        controller.take_end_reason();
+
+        let decision = controller.on_playback_ended().await.unwrap();
+        assert!(matches!(decision, AutoplayDecision::Stop));
+    }
 }

src-tauri/src/player/queue.rs

@@ -62,6 +62,14 @@ impl QueueManager {
         &self.items
     }
 
+    /// Mutable access to queue items.
+    ///
+    /// Used to re-point streaming entries at a completed local download
+    /// without disturbing queue order, shuffle state, or the current index.
+    pub fn items_mut(&mut self) -> &mut [MediaItem] {
+        &mut self.items
+    }
+
     /// Get the current item index
     pub fn current_index(&self) -> Option<usize> {
         self.current_index
@@ -122,6 +130,18 @@ impl QueueManager {
         self.context = context;
     }
 
+    /// Clear the queue entirely, returning it to the empty state.
+    ///
+    /// Used when playback genuinely stops (sleep timer fires, or the queue ends
+    /// with repeat off) so the frontend's `currentQueueItem` becomes null and
+    /// the mini player hides. History and shuffle order are reset too.
+    pub fn clear(&mut self) {
+        self.items.clear();
+        self.current_index = None;
+        self.history.clear();
+        self.shuffle_order.clear();
+    }
+
     /// Add items to the queue
     pub fn add(&mut self, items: Vec<MediaItem>, position: AddPosition) {
         if items.is_empty() {
@@ -559,6 +579,21 @@ mod tests {
         assert_eq!(queue.current().unwrap().id, "item_0");
     }
 
+    /// Test clearing the queue returns it to the empty state so the frontend
+    /// hides the mini player on a genuine stop.
+    #[test]
+    fn test_clear() {
+        let mut queue = QueueManager::new();
+        queue.set_queue(create_test_items(3), 1);
+        assert_eq!(queue.current_index(), Some(1));
+
+        queue.clear();
+
+        assert_eq!(queue.items().len(), 0);
+        assert_eq!(queue.current_index(), None);
+        assert!(queue.current().is_none());
+    }
+
     /// Test next track navigation
     ///
     /// @req-test: UR-005 - Control media playback (skip to next track)

src-tauri/src/repository/hybrid.rs

@@ -45,6 +45,12 @@ impl HybridRepository {
         self.online.download_bytes(url).await
     }
 
+    /// Query the JRay plugin for actors on screen at time `t`. Online-only
+    /// (the plugin lives on the Jellyfin server); empty when JRay isn't present.
+    pub async fn get_jray_actors(&self, item_id: &str, t: f64) -> Result<Vec<super::JRayActor>, RepoError> {
+        self.online.get_jray_actors(item_id, t).await
+    }
+
     /// Get video stream URL with optional seeking support.
     /// This method is online-only since offline playback uses local file paths.
     pub async fn get_video_stream_url(
@@ -73,6 +79,26 @@ impl HybridRepository {
             .await
     }
 
+    /// Fetch a folder's items from the live server and persist them to the
+    /// offline cache synchronously (unlike `get_items`, which saves in a
+    /// fire-and-forget background task after a 100ms cache race).
+    ///
+    /// Used by the full-catalog pre-sync (`sync_full_catalog`) to deterministically
+    /// walk every library while online so the whole catalog is browsable — greyed
+    /// out — offline. Returns the items fetched so the caller can recurse into
+    /// containers. Server-only: errors if unreachable.
+    pub async fn cache_items_from_server(
+        &self,
+        parent_id: &str,
+        options: Option<GetItemsOptions>,
+    ) -> Result<Vec<MediaItem>, RepoError> {
+        let result = self.online.get_items(parent_id, options).await?;
+        if !result.items.is_empty() {
+            self.offline.save_to_cache(parent_id, &result.items).await?;
+        }
+        Ok(result.items)
+    }
+
     /// Search only the live Jellyfin server (full library).
     pub async fn search_server_only(
         &self,
@@ -190,11 +216,41 @@ impl HybridRepository {
 #[async_trait]
 impl MediaRepository for HybridRepository {
     async fn get_libraries(&self) -> Result<Vec<Library>, RepoError> {
-        // Libraries change infrequently, try cache first with fast timeout
+        // Cache-first (100ms). On a cache hit, refresh the cache from the server
-        let cache_future = self.cache_with_timeout(self.offline.get_libraries());
+        // in the background. On a miss, fetch from the server and persist so the
-        let server_future = self.online.get_libraries();
+        // list is available on the next (possibly offline) startup.
+        let cache_result = self.cache_with_timeout(self.offline.get_libraries()).await;
 
-        self.parallel_race(cache_future, server_future).await
+        if let Ok(libs) = &cache_result {
+            if libs.has_content() {
+                debug!("[HybridRepo] Cache hit for libraries, returning immediately");
+                let online = Arc::clone(&self.online);
+                let offline = Arc::clone(&self.offline);
+                tokio::spawn(async move {
+                    if let Ok(server_libs) = online.get_libraries().await {
+                        if !server_libs.is_empty() {
+                            if let Err(e) = offline.save_libraries_to_cache(&server_libs).await {
+                                warn!("[HybridRepo] Background library cache update failed: {:?}", e);
+                            }
+                        }
+                    }
+                });
+                return cache_result;
+            }
+        }
+
+        // Cache miss — fetch from server and persist for offline use.
+        match self.online.get_libraries().await {
+            Ok(server_libs) => {
+                if !server_libs.is_empty() {
+                    if let Err(e) = self.offline.save_libraries_to_cache(&server_libs).await {
+                        warn!("[HybridRepo] Failed to cache {} libraries: {:?}", server_libs.len(), e);
+                    }
+                }
+                Ok(server_libs)
+            }
+            Err(e) => cache_result.or(Err(e)),
+        }
     }
 
     async fn get_items(&self, parent_id: &str, options: Option<GetItemsOptions>) -> Result<SearchResult, RepoError> {
@@ -371,20 +427,60 @@ impl MediaRepository for HybridRepository {
     }
 
     async fn get_genres(&self, parent_id: Option<&str>) -> Result<Vec<Genre>, RepoError> {
-        let offline = Arc::clone(&self.offline);
+        // Cache-first (100ms). On a cache hit, refresh the cached genre catalog
-        let online = Arc::clone(&self.online);
+        // from the server in the background. On a miss, fetch from the server and
+        // persist so the full genre list is available offline. Mirrors
+        // get_libraries — NOT parallel_race, whose "any non-empty cache wins"
+        // rule would pin genres to whatever sparse set the local albums yield.
         let parent_id_str = parent_id.map(|s| s.to_string());
-        let parent_id_clone = parent_id_str.clone();
 
-        let cache_future = self.cache_with_timeout(async move {
+        let cache_offline = Arc::clone(&self.offline);
-            offline.get_genres(parent_id_str.as_deref()).await
+        let cache_pid = parent_id_str.clone();
-        });
+        let cache_result = self
+            .cache_with_timeout(async move { cache_offline.get_genres(cache_pid.as_deref()).await })
+            .await;
 
-        let server_future = async move {
+        if let Ok(genres) = &cache_result {
-            online.get_genres(parent_id_clone.as_deref()).await
+            if genres.has_content() {
-        };
+                debug!("[HybridRepo] Cache hit for genres, returning immediately");
+                let online = Arc::clone(&self.online);
+                let offline = Arc::clone(&self.offline);
+                let pid = parent_id_str.clone();
+                tokio::spawn(async move {
+                    if let Ok(server_genres) = online.get_genres(pid.as_deref()).await {
+                        if !server_genres.is_empty() {
+                            if let Err(e) =
+                                offline.save_genres_to_cache(pid.as_deref(), &server_genres).await
+                            {
+                                warn!("[HybridRepo] Background genre cache update failed: {:?}", e);
+                            }
+                        }
+                    }
+                });
+                return cache_result;
+            }
+        }
 
-        self.parallel_race(cache_future, server_future).await
+        // Cache miss — fetch from server and persist for offline use.
+        match self.online.get_genres(parent_id_str.as_deref()).await {
+            Ok(server_genres) => {
+                if !server_genres.is_empty() {
+                    if let Err(e) = self
+                        .offline
+                        .save_genres_to_cache(parent_id_str.as_deref(), &server_genres)
+                        .await
+                    {
+                        warn!(
+                            "[HybridRepo] Failed to cache {} genres: {:?}",
+                            server_genres.len(),
+                            e
+                        );
+                    }
+                }
+                Ok(server_genres)
+            }
+            Err(e) => cache_result.or(Err(e)),
+        }
     }
 
     async fn search(&self, query: &str, options: Option<SearchOptions>) -> Result<SearchResult, RepoError> {
@@ -1023,6 +1119,7 @@ mod tests {
             genres: Some(vec!["Action".to_string(), "Adventure".to_string()]),
             runtime_ticks: Some(7200000000),
             production_year: Some(2024),
+            premiere_date: None,
             community_rating: Some(8.5),
             official_rating: Some("PG-13".to_string()),
             primary_image_tag: Some("image-tag-123".to_string()),

src-tauri/src/repository/mod.rs

@@ -4,7 +4,7 @@ pub mod offline;
 pub mod hybrid;
 
 pub use types::*;
-pub use online::OnlineRepository;
+pub use online::{OnlineRepository, JRayActor};
 pub use offline::OfflineRepository;
 pub use hybrid::HybridRepository;
 

src-tauri/src/repository/offline.rs

@@ -39,6 +39,7 @@ impl OfflineRepository {
                 .and_then(|s| serde_json::from_str::<Vec<String>>(s).ok()),
             runtime_ticks: item.runtime_ticks,
             production_year: item.production_year,
+            premiere_date: item.premiere_date,
             community_rating: item.community_rating,
             official_rating: item.official_rating,
             primary_image_tag: item.primary_image_tag,
@@ -101,6 +102,7 @@ struct CachedItem {
     genres: Option<String>,
     runtime_ticks: Option<i64>,
     production_year: Option<i32>,
+    premiere_date: Option<String>,
     community_rating: Option<f64>,
     official_rating: Option<String>,
     primary_image_tag: Option<String>,
@@ -145,8 +147,9 @@ fn row_to_cached_item(row: &rusqlite::Row) -> rusqlite::Result<CachedItem> {
         season_id: row.get(20)?,
         season_name: row.get(21)?,
         parent_index_number: row.get(22)?,
-        // Appended as the final column in every SELECT that maps through this fn.
+        // Appended as the final columns in every SELECT that maps through this fn.
         is_folder: row.get::<_, Option<i64>>(23)?.unwrap_or(0) != 0,
+        premiere_date: row.get(24)?,
     })
 }
 
@@ -238,7 +241,7 @@ impl OfflineRepository {
                     genres, series_id, series_name,
                     season_id, season_name, index_number, parent_index_number,
                     album_id, album_name, album_artist, artists,
-                    production_year, runtime_ticks,
+                    production_year, premiere_date, runtime_ticks,
                     primary_image_tag, backdrop_image_tags,
                     community_rating, official_rating,
                     synced_at
@@ -248,10 +251,10 @@ impl OfflineRepository {
                     ?9, ?10, ?11,
                     ?12, ?13, ?14, ?15,
                     ?16, ?17, ?18, ?19,
-                    ?20, ?21,
+                    ?20, ?21, ?22,
-                    ?22, ?23,
+                    ?23, ?24,
-                    ?24, ?25,
+                    ?25, ?26,
-                    ?26
+                    ?27
                 )",
                 vec![
                     QueryParam::String(item.id.clone()),
@@ -318,6 +321,10 @@ impl OfflineRepository {
                         Some(y) => QueryParam::Int(y),
                         None => QueryParam::Null,
                     },
+                    match &item.premiere_date {
+                        Some(d) => QueryParam::String(d.clone()),
+                        None => QueryParam::Null,
+                    },
                     match item.runtime_ticks {
                         Some(r) => QueryParam::Int64(r),
                         None => QueryParam::Null,
@@ -352,6 +359,94 @@ impl OfflineRepository {
         Ok(count)
     }
 
+    /// Cache the library (view) list from the server into the local database.
+    /// Called by HybridRepository after a successful online fetch so the list is
+    /// available offline. Without this, the `libraries` table stays empty and
+    /// offline startup shows no libraries at all.
+    pub async fn save_libraries_to_cache(&self, libraries: &[Library]) -> Result<usize, RepoError> {
+        if libraries.is_empty() {
+            return Ok(0);
+        }
+
+        let mut count = 0;
+        for (idx, lib) in libraries.iter().enumerate() {
+            let query = Query::with_params(
+                "INSERT OR REPLACE INTO libraries (id, server_id, name, collection_type, image_tag, sort_order, synced_at)
+                 VALUES (?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)",
+                vec![
+                    QueryParam::String(lib.id.clone()),
+                    QueryParam::String(self.server_id.clone()),
+                    QueryParam::String(lib.name.clone()),
+                    QueryParam::String(lib.collection_type.clone()),
+                    lib.image_tag.clone().map(QueryParam::String).unwrap_or(QueryParam::Null),
+                    QueryParam::Int(idx as i32),
+                ],
+            );
+            self.db_service.execute(query).await
+                .map_err(|e| RepoError::Database { message: e })?;
+            count += 1;
+        }
+        Ok(count)
+    }
+
+    /// Cache the full server genre catalog for a library, so offline (and the
+    /// hybrid cache-first race) can return the complete list instead of only the
+    /// genres derivable from locally-cached albums. Replaces the scope's rows
+    /// wholesale so genres removed on the server don't linger.
+    pub async fn save_genres_to_cache(
+        &self,
+        parent_id: Option<&str>,
+        genres: &[Genre],
+    ) -> Result<usize, RepoError> {
+        if genres.is_empty() {
+            return Ok(0);
+        }
+
+        // library_id is part of the primary key; NULL keys don't de-dupe in
+        // SQLite, so store the "no library" scope as an empty string.
+        let library_id = parent_id.unwrap_or("").to_string();
+        let server_id = self.server_id.clone();
+        let genres: Vec<(String, String, Option<u32>)> = genres
+            .iter()
+            .map(|g| (g.id.clone(), g.name.clone(), g.album_count))
+            .collect();
+        let saved = genres.len();
+
+        self.db_service
+            .transaction(move |tx| {
+                use crate::storage::db_service::{Query, QueryParam};
+
+                // Clear the scope's existing genres, then re-insert the fresh set.
+                tx.execute(Query::with_params(
+                    "DELETE FROM genres WHERE server_id = ? AND library_id = ?",
+                    vec![
+                        QueryParam::String(server_id.clone()),
+                        QueryParam::String(library_id.clone()),
+                    ],
+                ))?;
+
+                for (id, name, album_count) in &genres {
+                    tx.execute(Query::with_params(
+                        "INSERT OR REPLACE INTO genres (id, server_id, library_id, name, album_count, synced_at)
+                         VALUES (?, ?, ?, ?, ?, CURRENT_TIMESTAMP)",
+                        vec![
+                            QueryParam::String(id.clone()),
+                            QueryParam::String(server_id.clone()),
+                            QueryParam::String(library_id.clone()),
+                            QueryParam::String(name.clone()),
+                            album_count.map(|c| QueryParam::Int(c as i32)).unwrap_or(QueryParam::Null),
+                        ],
+                    ))?;
+                }
+
+                Ok(())
+            })
+            .await
+            .map_err(|e| RepoError::Database { message: e })?;
+
+        Ok(saved)
+    }
+
     /// Cache playlist items from server into local database
     /// Called by HybridRepository after fetching from online
     pub async fn save_playlist_items_to_cache(
@@ -406,26 +501,17 @@ impl OfflineRepository {
 #[async_trait]
 impl MediaRepository for OfflineRepository {
     async fn get_libraries(&self) -> Result<Vec<Library>, RepoError> {
-        // Only show libraries that have downloaded content
+        // Return every cached library for this server. We deliberately do NOT
-        // Check both direct children and nested children (e.g., albums inside library)
+        // gate on `items.library_id` here: that column is not populated in the
+        // cache (the Jellyfin client doesn't parse it), so the old
+        // `INNER JOIN items i ON i.library_id = l.id` matched nothing and left
+        // offline startup with zero libraries. Navigating into a library still
+        // filters to downloaded content via get_items, so listing all cached
+        // libraries is correct — it's the "local first" list the UI browses.
         let query = Query::with_params(
-            "SELECT DISTINCT l.id, l.name, l.collection_type, l.image_tag
+            "SELECT l.id, l.name, l.collection_type, l.image_tag
              FROM libraries l
-             INNER JOIN items i ON i.library_id = l.id
              WHERE l.server_id = ?
-               AND (
-                   -- Direct playable items with downloads
-                   (i.item_type IN ('Audio', 'Movie', 'Episode')
-                    AND EXISTS (SELECT 1 FROM downloads d WHERE d.item_id = i.id AND d.status = 'completed'))
-                   OR
-                   -- Container items with downloaded children
-                   (i.item_type IN ('MusicAlbum', 'Series', 'Season', 'BoxSet', 'Folder', 'CollectionFolder')
-                    AND EXISTS (
-                        SELECT 1 FROM items children
-                        INNER JOIN downloads d ON children.id = d.item_id
-                        WHERE children.parent_id = i.id AND d.status = 'completed'
-                    ))
-               )
              ORDER BY l.sort_order ASC, l.name ASC",
             vec![QueryParam::String(self.server_id.clone())],
         );
@@ -446,6 +532,13 @@ impl MediaRepository for OfflineRepository {
         let limit = opts.limit.unwrap_or(10000);  // Match frontend limit for full library loading
         let start_index = opts.start_index.unwrap_or(0);
 
+        // SortBy=Random is the only sort the landing pages rely on offline (the
+        // hero "surprise" pool); everything else keeps the stable name order.
+        let order_by = match opts.sort_by.as_deref() {
+            Some("Random") => "RANDOM()",
+            _ => "i.sort_name ASC, i.name ASC",
+        };
+
         // Build type filter for optional filtering
         let type_filter = if let Some(include_item_types) = &opts.include_item_types {
             if !include_item_types.is_empty() {
@@ -480,7 +573,7 @@ impl MediaRepository for OfflineRepository {
                 -- Containers with downloaded children
                 SELECT DISTINCT i.id
                 FROM items i
-                INNER JOIN items children ON children.parent_id = i.id
+                INNER JOIN items children ON (children.parent_id = i.id OR children.album_id = i.id OR children.season_id = i.id OR children.series_id = i.id)
                 INNER JOIN downloads d ON children.id = d.item_id
                 WHERE d.status = 'completed'
                   AND i.item_type IN ('MusicAlbum', 'Series', 'Season', 'BoxSet', 'Folder', 'CollectionFolder')
@@ -496,20 +589,41 @@ impl MediaRepository for OfflineRepository {
                     i.runtime_ticks, i.production_year, i.community_rating, i.official_rating,
                     i.primary_image_tag, i.album_id, i.album_name, i.album_artist, i.artists,
                     i.index_number, i.series_id, i.series_name, i.season_id, i.season_name,
-                    i.parent_index_number, i.is_folder
+                    i.parent_index_number, i.is_folder, i.premiere_date
-             FROM items i
+            FROM items i
              INNER JOIN available_items ai ON i.id = ai.id
-             WHERE i.server_id = ? AND i.parent_id = ?{}
+             WHERE i.server_id = ?
-             ORDER BY i.sort_name ASC, i.name ASC
+               AND (
+                   i.parent_id = ? OR i.album_id = ? OR i.season_id = ? OR i.series_id = ?
+                   -- When the requested parent is a LIBRARY, there is no per-item
+                   -- link back to it (library_id/parent_id are NULL in the cache),
+                   -- so match every item on the server and let the type filter
+                   -- (e.g. MusicAlbum / Movie / Series) narrow it. This is what
+                   -- makes library landing pages show albums/movies/shows offline.
+                   OR EXISTS (
+                       SELECT 1 FROM libraries l
+                       WHERE l.id = ? AND l.server_id = i.server_id
+                   )
+               ){}
+             ORDER BY {}
              LIMIT {} OFFSET {}",
-            type_filter, limit, start_index
+            type_filter, order_by, limit, start_index
         );
 
+        // The requested id is compared against every hierarchy-linkage column
+        // because `parent_id` is not populated for cached items — music tracks
+        // link to their album via `album_id`, episodes to their season/series
+        // via `season_id`/`series_id`, and a library parent matches via the
+        // `libraries` EXISTS clause. See [[offline-libraries-never-cached]].
         let query = Query::with_params(
             sql,
             vec![
                 QueryParam::String(self.server_id.clone()),
-                QueryParam::String(parent_id.to_string()),
+                QueryParam::String(parent_id.to_string()), // i.parent_id = ?
+                QueryParam::String(parent_id.to_string()), // i.album_id = ?
+                QueryParam::String(parent_id.to_string()), // i.season_id = ?
+                QueryParam::String(parent_id.to_string()), // i.series_id = ?
+                QueryParam::String(parent_id.to_string()), // libraries.id = ?
             ],
         );
 
@@ -552,7 +666,7 @@ impl MediaRepository for OfflineRepository {
                 -- Containers with downloaded children
                 SELECT DISTINCT i.id
                 FROM items i
-                INNER JOIN items children ON children.parent_id = i.id
+                INNER JOIN items children ON (children.parent_id = i.id OR children.album_id = i.id OR children.season_id = i.id OR children.series_id = i.id)
                 INNER JOIN downloads d ON children.id = d.item_id
                 WHERE d.status = 'completed'
                   AND i.item_type IN ('MusicAlbum', 'Series', 'Season', 'BoxSet', 'Folder', 'CollectionFolder')
@@ -561,8 +675,8 @@ impl MediaRepository for OfflineRepository {
                     i.runtime_ticks, i.production_year, i.community_rating, i.official_rating,
                     i.primary_image_tag, i.album_id, i.album_name, i.album_artist, i.artists,
                     i.index_number, i.series_id, i.series_name, i.season_id, i.season_name,
-                    i.parent_index_number, i.is_folder
+                    i.parent_index_number, i.is_folder, i.premiere_date
-             FROM items i
+            FROM items i
              INNER JOIN downloaded_items di ON i.id = di.id
              WHERE i.id = ?",
             vec![QueryParam::String(item_id.to_string())],
@@ -597,7 +711,7 @@ impl MediaRepository for OfflineRepository {
                     -- Containers with downloaded children
                     SELECT DISTINCT i.id
                     FROM items i
-                    INNER JOIN items children ON children.parent_id = i.id
+                    INNER JOIN items children ON (children.parent_id = i.id OR children.album_id = i.id OR children.season_id = i.id OR children.series_id = i.id)
                     INNER JOIN downloads d ON children.id = d.item_id
                     WHERE d.status = 'completed'
                       AND i.item_type IN ('MusicAlbum', 'Series', 'Season', 'BoxSet', 'Folder', 'CollectionFolder')
@@ -606,8 +720,8 @@ impl MediaRepository for OfflineRepository {
                         i.runtime_ticks, i.production_year, i.community_rating, i.official_rating,
                         i.primary_image_tag, i.album_id, i.album_name, i.album_artist, i.artists,
                         i.index_number, i.series_id, i.series_name, i.season_id, i.season_name,
-                        i.parent_index_number, i.is_folder
+                        i.parent_index_number, i.is_folder, i.premiere_date
-                 FROM items i
+                FROM items i
                  INNER JOIN downloaded_items di ON i.id = di.id
                  WHERE i.server_id = ? AND i.library_id = ?
                  ORDER BY i.synced_at DESC
@@ -644,8 +758,8 @@ impl MediaRepository for OfflineRepository {
                             i.community_rating, i.official_rating, i.primary_image_tag,
                             i.album_id, i.album_name, i.album_artist, i.artists,
                             i.index_number, i.series_id, i.series_name, i.season_id,
-                            i.season_name, i.parent_index_number, i.is_folder
+                            i.season_name, i.parent_index_number, i.is_folder, i.premiere_date
-                     FROM items i
+                    FROM items i
                      JOIN user_data ud ON i.id = ud.item_id
                      INNER JOIN downloads d ON i.id = d.item_id
                      WHERE i.server_id = ? AND ud.user_id = ? AND i.library_id = ?
@@ -669,8 +783,8 @@ impl MediaRepository for OfflineRepository {
                             i.community_rating, i.official_rating, i.primary_image_tag,
                             i.album_id, i.album_name, i.album_artist, i.artists,
                             i.index_number, i.series_id, i.series_name, i.season_id,
-                            i.season_name, i.parent_index_number, i.is_folder
+                            i.season_name, i.parent_index_number, i.is_folder, i.premiere_date
-                     FROM items i
+                    FROM items i
                      JOIN user_data ud ON i.id = ud.item_id
                      INNER JOIN downloads d ON i.id = d.item_id
                      WHERE i.server_id = ? AND ud.user_id = ?
@@ -730,7 +844,7 @@ impl MediaRepository for OfflineRepository {
                     -- Containers with downloaded children (Albums)
                     SELECT DISTINCT i.id
                     FROM items i
-                    INNER JOIN items children ON children.parent_id = i.id
+                    INNER JOIN items children ON (children.parent_id = i.id OR children.album_id = i.id OR children.season_id = i.id OR children.series_id = i.id)
                     INNER JOIN downloads d ON children.id = d.item_id
                     WHERE d.status = 'completed'
                       AND i.item_type = 'MusicAlbum'
@@ -757,8 +871,8 @@ impl MediaRepository for OfflineRepository {
                        i.community_rating, i.official_rating, i.primary_image_tag,
                        i.album_id, i.album_name, i.album_artist, i.artists,
                        i.index_number, i.series_id, i.series_name, i.season_id,
-                       i.season_name, i.parent_index_number, i.is_folder
+                       i.season_name, i.parent_index_number, i.is_folder, i.premiere_date
-                FROM ranked_plays rp
+               FROM ranked_plays rp
                 JOIN items i ON rp.display_id = i.id
                 INNER JOIN downloaded_items di ON i.id = di.id
                 ORDER BY rp.most_recent_play DESC",
@@ -805,8 +919,8 @@ impl MediaRepository for OfflineRepository {
                         i.community_rating, i.official_rating, i.primary_image_tag,
                         i.album_id, i.album_name, i.album_artist, i.artists,
                         i.index_number, i.series_id, i.series_name, i.season_id,
-                        i.season_name, i.parent_index_number, i.is_folder
+                        i.season_name, i.parent_index_number, i.is_folder, i.premiere_date
-                 FROM items i
+                FROM items i
                  JOIN user_data ud ON i.id = ud.item_id
                  INNER JOIN downloads d ON i.id = d.item_id
                  WHERE i.server_id = ? AND ud.user_id = ? AND i.item_type = 'Movie'
@@ -835,59 +949,32 @@ impl MediaRepository for OfflineRepository {
     }
 
     async fn get_genres(&self, parent_id: Option<&str>) -> Result<Vec<Genre>, RepoError> {
-        // Derive genres from cached albums, tallying how many albums carry each
+        // Read the cached server genre catalog (populated by the hybrid repo via
-        // so the frontend can rank by popularity. We scope to MusicAlbum (genres
+        // save_genres_to_cache). This is the FULL genre list for the library, not
-        // power the music landing) and read every matching row — NOT DISTINCT —
+        // just the genres derivable from locally-cached albums — so offline keeps
-        // so the per-genre counts are real. Genres are stored as a JSON array
+        // the same variety the server has. library_id NULL is stored as ''.
-        // string per item.
+        let library_id = parent_id.unwrap_or("").to_string();
-        let (sql, params) = if let Some(pid) = parent_id {
-            (
-                "SELECT genres FROM items WHERE server_id = ? AND library_id = ? \
-                 AND item_type = 'MusicAlbum' AND genres IS NOT NULL",
-                vec![
-                    QueryParam::String(self.server_id.clone()),
-                    QueryParam::String(pid.to_string()),
-                ],
-            )
-        } else {
-            (
-                "SELECT genres FROM items WHERE server_id = ? \
-                 AND item_type = 'MusicAlbum' AND genres IS NOT NULL",
-                vec![QueryParam::String(self.server_id.clone())],
-            )
-        };
 
-        let query = Query::with_params(sql, params);
+        let query = Query::with_params(
+            "SELECT id, name, album_count FROM genres WHERE server_id = ? AND library_id = ?",
+            vec![
+                QueryParam::String(self.server_id.clone()),
+                QueryParam::String(library_id),
+            ],
+        );
 
-        let genres_rows: Vec<String> = self
+        let genres: Vec<Genre> = self
             .db_service
-            .query_many(query, |row| row.get(0))
+            .query_many(query, |row| {
+                Ok(Genre {
+                    id: row.get(0)?,
+                    name: row.get(1)?,
+                    album_count: row.get::<_, Option<i64>>(2)?.map(|c| c as u32),
+                })
+            })
             .await
             .map_err(|e| RepoError::Database { message: e })?;
 
-        // genre name -> album count
-        let mut counts: std::collections::HashMap<String, u32> = std::collections::HashMap::new();
-        for genres_json in genres_rows {
-            if let Ok(genres_vec) = serde_json::from_str::<Vec<String>>(&genres_json) {
-                // De-dupe within one album so a genre listed twice counts once.
-                let mut seen = std::collections::HashSet::new();
-                for genre in genres_vec {
-                    if seen.insert(genre.clone()) {
-                        *counts.entry(genre).or_insert(0) += 1;
-                    }
-                }
-            }
-        }
-
-        let genres = counts
-            .into_iter()
-            .map(|(name, count)| Genre {
-                id: name.clone(),
-                name,
-                album_count: Some(count),
-            })
-            .collect();
-
         Ok(genres)
     }
 
@@ -929,7 +1016,7 @@ impl MediaRepository for OfflineRepository {
                 -- Containers with downloaded children
                 SELECT DISTINCT i.id
                 FROM items i
-                INNER JOIN items children ON children.parent_id = i.id
+                INNER JOIN items children ON (children.parent_id = i.id OR children.album_id = i.id OR children.season_id = i.id OR children.series_id = i.id)
                 INNER JOIN downloads d ON children.id = d.item_id
                 WHERE d.status = 'completed'
                   AND i.item_type IN ('MusicAlbum', 'Series', 'Season', 'BoxSet', 'Folder', 'CollectionFolder')
@@ -939,8 +1026,8 @@ impl MediaRepository for OfflineRepository {
                     i.community_rating, i.official_rating, i.primary_image_tag,
                     i.album_id, i.album_name, i.album_artist, i.artists,
                     i.index_number, i.series_id, i.series_name, i.season_id,
-                    i.season_name, i.parent_index_number, i.is_folder
+                    i.season_name, i.parent_index_number, i.is_folder, i.premiere_date
-             FROM items i
+            FROM items i
              JOIN items_fts fts ON fts.rowid = i.rowid
              INNER JOIN downloaded_items di ON i.id = di.id
              WHERE i.server_id = ? AND items_fts MATCH ?{}
@@ -1099,6 +1186,7 @@ impl MediaRepository for OfflineRepository {
             genres: None,
             runtime_ticks: None,
             production_year: None,
+            premiere_date: None,
             community_rating: None,
             official_rating: None,
             primary_image_tag: person_data.3,
@@ -1142,7 +1230,7 @@ impl MediaRepository for OfflineRepository {
                     -- Containers with downloaded children
                     SELECT DISTINCT i.id
                     FROM items i
-                    INNER JOIN items children ON children.parent_id = i.id
+                    INNER JOIN items children ON (children.parent_id = i.id OR children.album_id = i.id OR children.season_id = i.id OR children.series_id = i.id)
                     INNER JOIN downloads d ON children.id = d.item_id
                     WHERE d.status = 'completed'
                       AND i.item_type IN ('MusicAlbum', 'Series', 'Season', 'BoxSet', 'Folder', 'CollectionFolder')
@@ -1152,8 +1240,8 @@ impl MediaRepository for OfflineRepository {
                         i.community_rating, i.official_rating, i.primary_image_tag,
                         i.album_id, i.album_name, i.album_artist, i.artists,
                         i.index_number, i.series_id, i.series_name, i.season_id,
-                        i.season_name, i.parent_index_number, i.is_folder
+                        i.season_name, i.parent_index_number, i.is_folder, i.premiere_date
-                 FROM items i
+                FROM items i
                  JOIN item_people ip ON i.id = ip.item_id
                  INNER JOIN downloaded_items di ON i.id = di.id
                  WHERE i.server_id = ? AND ip.person_id = ?
@@ -1263,7 +1351,7 @@ impl MediaRepository for OfflineRepository {
                     i.runtime_ticks, i.production_year, i.community_rating, i.official_rating, \
                     i.primary_image_tag, i.album_id, i.album_name, i.album_artist, i.artists, \
                     i.index_number, i.series_id, i.series_name, i.season_id, i.season_name, \
-                    i.parent_index_number, i.is_folder \
+                    i.parent_index_number, i.is_folder, i.premiere_date \
              FROM playlist_items pi \
              JOIN items i ON pi.item_id = i.id \
              WHERE pi.playlist_id = ? \
@@ -1302,6 +1390,7 @@ impl MediaRepository for OfflineRepository {
                     season_name: row.get(22)?,
                     parent_index_number: row.get(23)?,
                     is_folder: row.get::<_, Option<i64>>(24)?.unwrap_or(0) != 0,
+                    premiere_date: row.get(25)?,
                 };
                 Ok((entry_id.to_string(), cached))
             })
@@ -1473,6 +1562,7 @@ mod tests {
                 genres TEXT,
                 runtime_ticks INTEGER,
                 production_year INTEGER,
+                premiere_date TEXT,
                 community_rating REAL,
                 official_rating TEXT,
                 primary_image_tag TEXT,
@@ -1524,6 +1614,32 @@ mod tests {
             );
 
             CREATE INDEX idx_playlist_items_playlist ON playlist_items(playlist_id, sort_order);
+
+            CREATE TABLE downloads (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                item_id TEXT NOT NULL,
+                status TEXT NOT NULL
+            );
+
+            CREATE TABLE libraries (
+                id TEXT PRIMARY KEY,
+                server_id TEXT NOT NULL,
+                name TEXT NOT NULL,
+                collection_type TEXT,
+                image_tag TEXT,
+                sort_order INTEGER DEFAULT 0,
+                synced_at TEXT
+            );
+
+            CREATE TABLE genres (
+                id TEXT NOT NULL,
+                server_id TEXT NOT NULL,
+                library_id TEXT,
+                name TEXT NOT NULL,
+                album_count INTEGER,
+                synced_at TEXT DEFAULT CURRENT_TIMESTAMP,
+                PRIMARY KEY (server_id, library_id, name)
+            );
         "#).unwrap();
 
         // Insert a test server
@@ -1549,6 +1665,7 @@ mod tests {
             genres: None,
             runtime_ticks: None,
             production_year: None,
+            premiere_date: None,
             community_rating: None,
             official_rating: None,
             primary_image_tag: None,
@@ -1703,6 +1820,196 @@ mod tests {
         assert_eq!(result.unwrap(), 3);
     }
 
+    /// Regression: a MusicAlbum whose tracks link via `album_id` (and have a
+    /// NULL `parent_id`, which is how the Jellyfin cache actually stores them)
+    /// must be recognized as available offline when a track is downloaded.
+    ///
+    /// Before the fix, `get_item(album_id)` only matched children by
+    /// `children.parent_id = i.id`, so a fully-downloaded album returned
+    /// NotFound offline and playback fell through to the (unreachable) server.
+    #[tokio::test]
+    async fn test_get_item_album_available_via_album_id_link() {
+        use crate::storage::db_service::DatabaseService;
+        let db_service = create_test_db();
+
+        for sql in [
+            // Album container (no children by parent_id).
+            "INSERT INTO items (id, server_id, name, item_type, album_id, parent_id) \
+             VALUES ('album-1', 'test-server', 'Hadestown', 'MusicAlbum', NULL, NULL)",
+            // Track linked to the album ONLY via album_id, parent_id NULL.
+            "INSERT INTO items (id, server_id, name, item_type, album_id, parent_id) \
+             VALUES ('track-1', 'test-server', 'Wait For Me', 'Audio', 'album-1', NULL)",
+            "INSERT INTO downloads (item_id, status) VALUES ('track-1', 'completed')",
+        ] {
+            db_service.execute(Query::new(sql)).await.unwrap();
+        }
+
+        let repo = OfflineRepository::new(
+            db_service.clone(),
+            "test-server".to_string(),
+            "test-user".to_string(),
+        );
+
+        // The downloaded track itself resolves offline.
+        assert!(
+            repo.get_item("track-1").await.is_ok(),
+            "downloaded track should be available offline"
+        );
+
+        // The album must also resolve offline because it has a downloaded child
+        // linked by album_id (not parent_id).
+        let album = repo.get_item("album-1").await;
+        assert!(
+            album.is_ok(),
+            "album with an album_id-linked downloaded track should be available offline, got {:?}",
+            album.err()
+        );
+        assert_eq!(album.unwrap().id, "album-1");
+
+        // Browsing into the album (get_items) must return its tracks even though
+        // they link by album_id and have a NULL parent_id. This is the call
+        // play_album_track makes to build the queue.
+        let tracks = repo.get_items("album-1", None).await.unwrap();
+        assert_eq!(tracks.items.len(), 1, "get_items(album_id) should return the track");
+        assert_eq!(tracks.items[0].id, "track-1");
+    }
+
+    /// Regression: TV episodes link to their season/series via `season_id` /
+    /// `series_id` (NOT `parent_id`, which is NULL in the cache). A downloaded
+    /// episode must make both its Season and Series available offline, and
+    /// browsing either container must return the episode.
+    #[tokio::test]
+    async fn test_get_item_tv_available_via_season_series_link() {
+        use crate::storage::db_service::DatabaseService;
+        let db_service = create_test_db();
+
+        for sql in [
+            "INSERT INTO items (id, server_id, name, item_type, parent_id) \
+             VALUES ('series-1', 'test-server', 'Gilmore Girls', 'Series', NULL)",
+            "INSERT INTO items (id, server_id, name, item_type, series_id, parent_id) \
+             VALUES ('season-1', 'test-server', 'Season 1', 'Season', 'series-1', NULL)",
+            // Episode links to both season and series; parent_id NULL.
+            "INSERT INTO items (id, server_id, name, item_type, season_id, series_id, parent_id) \
+             VALUES ('ep-1', 'test-server', 'Pilot', 'Episode', 'season-1', 'series-1', NULL)",
+            "INSERT INTO downloads (item_id, status) VALUES ('ep-1', 'completed')",
+        ] {
+            db_service.execute(Query::new(sql)).await.unwrap();
+        }
+
+        let repo = OfflineRepository::new(
+            db_service.clone(),
+            "test-server".to_string(),
+            "test-user".to_string(),
+        );
+
+        assert!(repo.get_item("ep-1").await.is_ok(), "downloaded episode available offline");
+        assert!(
+            repo.get_item("season-1").await.is_ok(),
+            "season with a season_id-linked downloaded episode should be available offline"
+        );
+        assert!(
+            repo.get_item("series-1").await.is_ok(),
+            "series with a series_id-linked downloaded episode should be available offline"
+        );
+
+        // Browsing the season returns the episode.
+        let season_items = repo.get_items("season-1", None).await.unwrap();
+        assert!(
+            season_items.items.iter().any(|i| i.id == "ep-1"),
+            "get_items(season_id) should return the episode"
+        );
+
+        // Browsing the series returns the episode (via series_id link).
+        let series_items = repo.get_items("series-1", None).await.unwrap();
+        assert!(
+            series_items.items.iter().any(|i| i.id == "ep-1"),
+            "get_items(series_id) should surface the downloaded episode"
+        );
+    }
+
+    /// Regression: offline startup must list cached libraries. Previously
+    /// `get_libraries` joined on `items.library_id` (always NULL in the cache),
+    /// so it returned nothing offline and the app showed no libraries at all.
+    /// The list must round-trip through `save_libraries_to_cache`.
+    #[tokio::test]
+    async fn test_libraries_cache_roundtrip_available_offline() {
+        let db_service = create_test_db();
+        let repo = OfflineRepository::new(
+            db_service.clone(),
+            "test-server".to_string(),
+            "test-user".to_string(),
+        );
+
+        // Empty cache → no libraries (this is the state that fell through to the
+        // server and hung offline).
+        assert!(repo.get_libraries().await.unwrap().is_empty());
+
+        // Simulate the online path persisting the server's library list.
+        let server_libs = vec![
+            Library { id: "music".into(), name: "Music".into(), collection_type: "music".into(), image_tag: None },
+            Library { id: "movies".into(), name: "Movies".into(), collection_type: "movies".into(), image_tag: Some("tag".into()) },
+        ];
+        let saved = repo.save_libraries_to_cache(&server_libs).await.unwrap();
+        assert_eq!(saved, 2);
+
+        // Now offline get_libraries returns them without touching the server.
+        let offline_libs = repo.get_libraries().await.unwrap();
+        let names: Vec<&str> = offline_libs.iter().map(|l| l.name.as_str()).collect();
+        assert_eq!(names, vec!["Music", "Movies"], "cached libraries available offline in sort order");
+
+        // Re-saving is idempotent (INSERT OR REPLACE), not duplicating rows.
+        repo.save_libraries_to_cache(&server_libs).await.unwrap();
+        assert_eq!(repo.get_libraries().await.unwrap().len(), 2);
+    }
+
+    /// Regression: the music/TV/movie landing pages lost genre variety because
+    /// offline `get_genres` derived genres from cached albums only — so the
+    /// hybrid cache-first race pinned the list to whatever sparse set the local
+    /// albums yielded instead of the server's full catalog. The full genre list
+    /// must round-trip through `save_genres_to_cache` and come back scoped by
+    /// library.
+    #[tokio::test]
+    async fn test_genres_cache_roundtrip_scoped_by_library() {
+        let db_service = create_test_db();
+        let repo = OfflineRepository::new(
+            db_service.clone(),
+            "test-server".to_string(),
+            "test-user".to_string(),
+        );
+
+        // Empty cache → no genres.
+        assert!(repo.get_genres(Some("music-lib")).await.unwrap().is_empty());
+
+        // Simulate the online path persisting the server's full genre catalog.
+        let server_genres = vec![
+            Genre { id: "g1".into(), name: "Rock".into(), album_count: Some(42) },
+            Genre { id: "g2".into(), name: "Jazz".into(), album_count: Some(17) },
+            Genre { id: "g3".into(), name: "Ambient".into(), album_count: None },
+        ];
+        let saved = repo.save_genres_to_cache(Some("music-lib"), &server_genres).await.unwrap();
+        assert_eq!(saved, 3);
+
+        // Offline get_genres returns the full set for that library, counts intact.
+        let mut offline_genres = repo.get_genres(Some("music-lib")).await.unwrap();
+        offline_genres.sort_by(|a, b| a.name.cmp(&b.name));
+        let names: Vec<&str> = offline_genres.iter().map(|g| g.name.as_str()).collect();
+        assert_eq!(names, vec!["Ambient", "Jazz", "Rock"]);
+        let rock = offline_genres.iter().find(|g| g.name == "Rock").unwrap();
+        assert_eq!(rock.album_count, Some(42));
+
+        // Genres are scoped: a different library sees nothing.
+        assert!(repo.get_genres(Some("other-lib")).await.unwrap().is_empty());
+
+        // Re-saving replaces the scope's rows (server removed "Jazz").
+        let updated = vec![
+            Genre { id: "g1".into(), name: "Rock".into(), album_count: Some(50) },
+        ];
+        repo.save_genres_to_cache(Some("music-lib"), &updated).await.unwrap();
+        let after = repo.get_genres(Some("music-lib")).await.unwrap();
+        assert_eq!(after.len(), 1, "stale genres removed on refresh");
+        assert_eq!(after[0].album_count, Some(50), "counts updated on refresh");
+    }
+
     // ===== Playlist Tests =====
 
     /// Helper to seed items into the DB for playlist tests

src-tauri/src/repository/online.rs

@@ -11,6 +11,30 @@ use crate::connectivity::ConnectivityReporter;
 use crate::jellyfin::HttpClient;
 use super::{MediaRepository, types::*};
 
+/// A single actor returned by the JRay plugin's "context at time t" endpoint.
+///
+/// Mirrors the `actors[]` objects from `GET /Plugins/JRay/Items/{id}/jray?t=`.
+/// `jellyfin_id` (a Jellyfin Person item GUID) is preferred for navigation;
+/// the IMDb/TMDb ids are informational fallbacks. Unknown ids are `""`.
+#[derive(specta::Type, Debug, Clone, Serialize, Deserialize)]
+pub struct JRayActor {
+    pub name: String,
+    #[serde(default)]
+    pub imdb_id: String,
+    #[serde(default)]
+    pub tmdb_id: String,
+    #[serde(default)]
+    pub jellyfin_id: String,
+}
+
+/// Envelope returned by the JRay `jray?t=` endpoint. Extra keys (future
+/// `locations`, `trivia`, …) are ignored so the client tolerates schema growth.
+#[derive(Debug, Clone, Deserialize)]
+struct JRayContext {
+    #[serde(default)]
+    actors: Vec<JRayActor>,
+}
+
 /// Online repository - fetches data from Jellyfin server via HTTP
 pub struct OnlineRepository {
     http_client: Arc<HttpClient>,
@@ -104,8 +128,33 @@ impl OnlineRepository {
             .map_err(|e| format!("Failed to read bytes: {}", e))
     }
 
+    /// Query the JRay plugin for the actors on screen at time `t` (seconds) in
+    /// the given item. Returns an empty list when the plugin isn't installed or
+    /// has no truth data for the item (HTTP 404), so callers can treat "no JRay"
+    /// and "nobody on screen" identically. Other failures propagate.
+    pub async fn get_jray_actors(&self, item_id: &str, t: f64) -> Result<Vec<JRayActor>, RepoError> {
+        let endpoint = format!("/Plugins/JRay/Items/{}/jray?t={}", item_id, t);
+        match self.get_json::<JRayContext>(&endpoint).await {
+            Ok(context) => Ok(context.actors),
+            // No plugin / no truth data for this item — not an error to the user.
+            Err(RepoError::NotFound { .. }) => Ok(Vec::new()),
+            Err(e) => Err(e),
+        }
+    }
+
     /// Make authenticated GET request
     async fn get_json<T: for<'de> Deserialize<'de>>(&self, endpoint: &str) -> Result<T, RepoError> {
+        // Fast-fail when connectivity is known-offline. Without this every request
+        // still runs the full HTTP retry/backoff cycle (~7s) before giving up,
+        // which stalls cache-miss paths and makes offline browsing feel janky.
+        // The offline recovery probe (connectivity monitor) flips us back to
+        // reachable the moment the server returns, so this never sticks.
+        if let Some(reporter) = &self.connectivity {
+            if !reporter.is_reachable().await {
+                return Err(RepoError::Offline);
+            }
+        }
+
         let result = self.get_json_inner(endpoint).await;
         self.report_outcome(&result).await;
         result
@@ -369,6 +418,7 @@ struct JellyfinItem {
     overview: Option<String>,
     genres: Option<Vec<String>>,
     production_year: Option<i32>,
+    premiere_date: Option<String>,
     community_rating: Option<f64>,
     official_rating: Option<String>,
     run_time_ticks: Option<i64>,
@@ -459,6 +509,7 @@ impl JellyfinItem {
             overview: self.overview,
             genres: self.genres,
             production_year: self.production_year,
+            premiere_date: self.premiere_date,
             community_rating: self.community_rating,
             official_rating: self.official_rating,
             runtime_ticks: self.run_time_ticks,
@@ -586,7 +637,7 @@ impl MediaRepository for OnlineRepository {
         // Request image fields for list views (People only needed in get_item
         // detail view). Genres is needed so cached items carry their genres,
         // which lets the offline store derive genre lists + per-genre counts.
-        endpoint.push_str("&Fields=BackdropImageTags,ParentBackdropImageTags,Genres");
+        endpoint.push_str("&Fields=BackdropImageTags,ParentBackdropImageTags,Genres,PremiereDate");
 
         let response: ItemsResponse = self.get_json(&endpoint).await?;
 
@@ -601,7 +652,7 @@ impl MediaRepository for OnlineRepository {
     }
 
     async fn get_item(&self, item_id: &str) -> Result<MediaItem, RepoError> {
-        let endpoint = format!("/Users/{}/Items/{}?Fields=BackdropImageTags,ParentBackdropImageTags,People,MediaStreams,MediaSources", self.user_id, item_id);
+        let endpoint = format!("/Users/{}/Items/{}?Fields=BackdropImageTags,ParentBackdropImageTags,People,MediaStreams,MediaSources,PremiereDate", self.user_id, item_id);
 
         let item: JellyfinItem = self.get_json(&endpoint).await?;
         let media_item = item.to_media_item(self.user_id.clone());
@@ -738,6 +789,7 @@ impl MediaRepository for OnlineRepository {
                     overview: None,
                     genres: None,
                     production_year: None,
+                    premiere_date: None,
                     community_rating: None,
                     official_rating: None,
                     runtime_ticks: None,
@@ -905,7 +957,7 @@ impl MediaRepository for OnlineRepository {
 
         // Request image fields for list views (plus Genres so cached items
         // carry genres for offline genre lists/counts).
-        endpoint.push_str("&Fields=BackdropImageTags,ParentBackdropImageTags,Genres");
+        endpoint.push_str("&Fields=BackdropImageTags,ParentBackdropImageTags,Genres,PremiereDate");
 
         let response: ItemsResponse = self.get_json(&endpoint).await?;
         Ok(SearchResult {
@@ -1372,12 +1424,43 @@ impl MediaRepository for OnlineRepository {
         quality: &str,
         media_source_id: Option<&str>,
     ) -> String {
-        let mut url = format!("{}/Videos/{}/download", self.server_url, item_id);
+        // NOTE: Jellyfin's `/Videos/{id}/download` endpoint is not universally
+        // available (returns 404 on many server configs), which silently broke
+        // every movie/TV download. Use the progressive `stream.mp4` endpoint
+        // instead — it is always present and supports HTTP Range, which the
+        // download worker relies on for resume.
+        let mut url = format!("{}/Videos/{}/stream.mp4", self.server_url, item_id);
         let mut params = vec![format!("api_key={}", self.access_token)];
 
-        // Add quality parameter if not "original"
+        // Map the frontend quality preset to concrete transcode params. For
-        if quality != "original" {
+        // "original" we request a direct static copy (no transcode) which is
-            params.push(format!("quality={}", quality));
+        // byte-range resumable; other presets ask the server to transcode.
+        match quality {
+            "high" => {
+                params.push("videoBitrate=8000000".to_string());
+                params.push("maxHeight=1080".to_string());
+                params.push("audioBitrate=384000".to_string());
+                params.push("videoCodec=h264".to_string());
+                params.push("audioCodec=aac".to_string());
+            }
+            "medium" => {
+                params.push("videoBitrate=4000000".to_string());
+                params.push("maxHeight=720".to_string());
+                params.push("audioBitrate=256000".to_string());
+                params.push("videoCodec=h264".to_string());
+                params.push("audioCodec=aac".to_string());
+            }
+            "low" => {
+                params.push("videoBitrate=1500000".to_string());
+                params.push("maxHeight=480".to_string());
+                params.push("audioBitrate=128000".to_string());
+                params.push("videoCodec=h264".to_string());
+                params.push("audioCodec=aac".to_string());
+            }
+            // "original" (and any unknown value) → direct, resumable copy.
+            _ => {
+                params.push("Static=true".to_string());
+            }
         }
 
         // Add media source ID if provided
@@ -1385,10 +1468,8 @@ impl MediaRepository for OnlineRepository {
             params.push(format!("mediaSourceId={}", source_id));
         }
 
-        if !params.is_empty() {
+        url.push('?');
-            url.push('?');
+        url.push_str(&params.join("&"));
-            url.push_str(&params.join("&"));
-        }
 
         url
     }
@@ -1718,6 +1799,25 @@ mod tests {
         }
     }
 
+    /// When connectivity is known-offline, `get_json` must fast-fail with
+    /// `RepoError::Offline` instead of running the full HTTP retry cycle (~7s).
+    /// This is what keeps offline browsing snappy. `test.server.com` is
+    /// unroutable, so if the guard were absent this would hang on retries; the
+    /// assertion returning promptly with `Offline` proves the short-circuit.
+    #[tokio::test]
+    async fn test_get_json_fast_fails_when_offline() {
+        let (repo, reporter) = create_test_repository_with_connectivity();
+        reporter.mark_unreachable_for_test().await;
+        assert!(!reporter.is_reachable().await, "precondition: offline");
+
+        let result: Result<serde_json::Value, RepoError> = repo.get_json("/System/Info").await;
+        assert!(
+            matches!(result, Err(RepoError::Offline)),
+            "known-offline get_json should return Offline immediately, got {:?}",
+            result
+        );
+    }
+
     /// A network error routes through the debounced path. A single failure stays
     /// online (debounce window not yet elapsed).
     #[tokio::test]
@@ -1846,6 +1946,74 @@ mod tests {
         assert_eq!(tags.primary(), None);
     }
 
+    // ===== Video download URL (real impl) =====
+    //
+    // These exercise the PRODUCTION `OnlineRepository::get_video_download_url`,
+    // not a mock. A prior mock in online_integration_test.rs used the correct
+    // `stream.mp4` endpoint while the real impl shipped `/Videos/{id}/download`,
+    // which returns 404 on real servers and silently broke every movie/TV
+    // download. Assert the real builder targets the resumable stream endpoint.
+    //
+    // @req-test: DR-013 - Repository pattern for online/offline data access
+
+    #[test]
+    fn test_video_download_url_uses_stream_not_download_endpoint() {
+        let repo = create_test_repository();
+        let url = repo.get_video_download_url("item123", "original", None);
+
+        // Must NOT use the /download endpoint (404 on real servers).
+        assert!(
+            !url.contains("/download"),
+            "download URL must not use the broken /Videos/{{id}}/download endpoint: {url}"
+        );
+        // Must use the progressive, range-resumable stream endpoint.
+        assert!(
+            url.contains("/Videos/item123/stream.mp4"),
+            "download URL must target /Videos/{{id}}/stream.mp4: {url}"
+        );
+        assert!(url.contains("api_key=test-access-token"), "url: {url}");
+    }
+
+    #[test]
+    fn test_video_download_url_original_is_static_direct_copy() {
+        let repo = create_test_repository();
+        let url = repo.get_video_download_url("item123", "original", None);
+
+        // "original" must request a direct static copy (byte-range resumable),
+        // with no transcode params.
+        assert!(url.contains("Static=true"), "url: {url}");
+        assert!(!url.contains("videoBitrate"), "original must not transcode: {url}");
+        assert!(!url.contains("maxHeight"), "original must not transcode: {url}");
+    }
+
+    #[test]
+    fn test_video_download_url_quality_presets_transcode() {
+        let repo = create_test_repository();
+
+        for (quality, height) in [("high", "1080"), ("medium", "720"), ("low", "480")] {
+            let url = repo.get_video_download_url("item123", quality, None);
+            assert!(
+                url.contains("/Videos/item123/stream.mp4"),
+                "{quality} must use stream.mp4: {url}"
+            );
+            assert!(url.contains("videoBitrate="), "{quality} must set bitrate: {url}");
+            assert!(
+                url.contains(&format!("maxHeight={height}")),
+                "{quality} must cap height at {height}: {url}"
+            );
+            assert!(url.contains("videoCodec=h264"), "{quality}: {url}");
+            // Transcoded presets must not also ask for a static copy.
+            assert!(!url.contains("Static=true"), "{quality} must not be Static: {url}");
+        }
+    }
+
+    #[test]
+    fn test_video_download_url_passes_media_source_id() {
+        let repo = create_test_repository();
+        let url = repo.get_video_download_url("item123", "original", Some("src-42"));
+        assert!(url.contains("mediaSourceId=src-42"), "url: {url}");
+    }
+
     #[test]
     fn test_jellyfin_item_deserialize_with_image_tags() {
         // Test full JellyfinItem deserialization with ImageTags
@@ -1958,4 +2126,34 @@ mod tests {
         assert_eq!(urlencoding::encode("Star Wars"), "Star%20Wars");
         assert_eq!(urlencoding::encode("Tom & Jerry"), "Tom%20%26%20Jerry");
     }
+
+    #[test]
+    fn test_jray_context_deserializes_actors() {
+        // The jray?t= envelope as documented in the JRay truth file format.
+        let json = r#"{
+            "actors": [
+                { "name": "Tom Hanks", "imdb_id": "nm0000158", "tmdb_id": "31", "jellyfin_id": "abc123-guid" }
+            ]
+        }"#;
+        let ctx: JRayContext = serde_json::from_str(json).expect("should parse");
+        assert_eq!(ctx.actors.len(), 1);
+        assert_eq!(ctx.actors[0].name, "Tom Hanks");
+        assert_eq!(ctx.actors[0].jellyfin_id, "abc123-guid");
+    }
+
+    #[test]
+    fn test_jray_context_ignores_unknown_keys_and_missing_ids() {
+        // Future fields (locations/trivia) must be ignored, and absent id keys
+        // must default to "" rather than failing to parse.
+        let json = r#"{
+            "actors": [ { "name": "Extra" } ],
+            "locations": ["Beach"],
+            "trivia": "filmed in 1994"
+        }"#;
+        let ctx: JRayContext = serde_json::from_str(json).expect("should tolerate extra keys");
+        assert_eq!(ctx.actors.len(), 1);
+        assert_eq!(ctx.actors[0].name, "Extra");
+        assert_eq!(ctx.actors[0].imdb_id, "");
+        assert_eq!(ctx.actors[0].jellyfin_id, "");
+    }
 }

src-tauri/src/repository/types.rs

@@ -119,6 +119,10 @@ pub struct MediaItem {
     pub genres: Option<Vec<String>>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub production_year: Option<i32>,
+    /// ISO-8601 release/air date (Jellyfin `PremiereDate`). Used to sort
+    /// podcast episodes by release date.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub premiere_date: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub community_rating: Option<f64>,
     #[serde(skip_serializing_if = "Option::is_none")]
@@ -506,6 +510,7 @@ mod tests {
                 overview: None,
                 genres: None,
                 production_year: None,
+                premiere_date: None,
                 community_rating: None,
                 official_rating: None,
                 runtime_ticks: None,
@@ -646,6 +651,7 @@ mod tests {
                 overview: None,
                 genres: None,
                 production_year: None,
+                premiere_date: None,
                 community_rating: None,
                 official_rating: None,
                 runtime_ticks: None,
@@ -706,6 +712,7 @@ mod tests {
                 overview: None,
                 genres: None,
                 production_year: None,
+                premiere_date: None,
                 community_rating: None,
                 official_rating: None,
                 runtime_ticks: None,

src-tauri/src/session_poller/mod.rs

@@ -32,6 +32,13 @@ pub struct SessionPollerManager {
     jellyfin_client: Arc<Mutex<Option<JellyfinClient>>>,
     playback_mode_manager: Arc<PlaybackModeManager>,
     event_emitter: Arc<Mutex<Option<Arc<dyn PlayerEventEmitter>>>>,
+    /// Optional connectivity reporter. The session poller is the one piece of
+    /// server traffic that runs continuously even when the user is idle (not
+    /// browsing the library), so feeding its poll outcomes into the reporter is
+    /// what lets the app detect going offline — and, crucially, recover when the
+    /// server returns — without any user interaction. Repository traffic alone
+    /// can't do this because it only happens while browsing.
+    connectivity_reporter: Arc<Mutex<Option<crate::connectivity::ConnectivityReporter>>>,
 
     // Polling state
     is_running: Arc<AtomicBool>,
@@ -52,6 +59,7 @@ impl SessionPollerManager {
             jellyfin_client,
             playback_mode_manager,
             event_emitter: Arc::new(Mutex::new(None)),
+            connectivity_reporter: Arc::new(Mutex::new(None)),
             is_running: Arc::new(AtomicBool::new(false)),
             current_hint: Arc::new(RwLock::new(PollingHint::Normal)),
             current_interval_ms: Arc::new(AtomicU64::new(10000)), // Default 10s
@@ -64,6 +72,13 @@ impl SessionPollerManager {
         *self.event_emitter.lock_safe() = Some(emitter);
     }
 
+    /// Wire the connectivity reporter so each poll outcome updates reachability.
+    /// A successful poll recovers the app to online instantly; sustained poll
+    /// failures flip it offline (subject to the reporter's debounce window).
+    pub fn set_connectivity_reporter(&self, reporter: crate::connectivity::ConnectivityReporter) {
+        *self.connectivity_reporter.lock_safe() = Some(reporter);
+    }
+
     /// Start the background polling thread
     pub fn start(&self) {
         if self.is_running.swap(true, Ordering::Relaxed) {
@@ -77,6 +92,7 @@ impl SessionPollerManager {
         let client = self.jellyfin_client.clone();
         let mode_manager = self.playback_mode_manager.clone();
         let emitter = self.event_emitter.clone();
+        let connectivity_reporter = self.connectivity_reporter.clone();
         let is_running = self.is_running.clone();
         let hint = self.current_hint.clone();
         let interval_ms = self.current_interval_ms.clone();
@@ -96,18 +112,35 @@ impl SessionPollerManager {
 
                 debug!("[SessionPoller] Polling with interval: {}ms", new_interval);
 
-                // Fetch sessions
+                // Fetch sessions. `had_client` distinguishes "server didn't
-                let sessions_result = rt.block_on(async {
+                // answer" from "no client configured" so we only feed real
+                // request outcomes into the connectivity reporter.
+                let (sessions_result, had_client) = rt.block_on(async {
                     let client_opt = client.lock_safe().clone();
                     match client_opt {
-                        Some(c) => c.get_sessions().await,
+                        Some(c) => (c.get_sessions().await, true),
                         None => {
                             debug!("[SessionPoller] Jellyfin client not configured, skipping poll");
-                            Ok(Vec::new())
+                            (Ok(Vec::new()), false)
                         }
                     }
                 });
 
+                // Drive the connectivity reporter from this poll's outcome. This
+                // is what recovers the app to online when the server returns
+                // while the user is idle, and detects going offline when no
+                // library browsing is happening. See connectivity/mod.rs.
+                if had_client {
+                    if let Some(reporter) = connectivity_reporter.lock_safe().clone() {
+                        rt.block_on(async {
+                            match &sessions_result {
+                                Ok(_) => reporter.report_success().await,
+                                Err(e) => reporter.report_network_failure(Some(e.clone())).await,
+                            }
+                        });
+                    }
+                }
+
                 // Emit event if successful
                 match sessions_result {
                     Ok(sessions) => {

src-tauri/src/storage/mod.rs

@@ -201,6 +201,7 @@ mod tests {
             "thumbnails",
             "playlists",
             "playlist_items",
+            "genres",
         ];
 
         for table in expected_tables {

src-tauri/src/storage/schema.rs

@@ -23,6 +23,7 @@ pub const MIGRATIONS: &[(&str, &str)] = &[
     ("016_autoplay_max_episodes", MIGRATION_016),
     ("017_downloads_resume_url", MIGRATION_017),
     ("018_items_is_folder", MIGRATION_018),
+    ("019_genres_cache", MIGRATION_019),
 ];
 
 /// Initial schema migration
@@ -693,3 +694,23 @@ ALTER TABLE items ADD COLUMN is_folder INTEGER DEFAULT 0;
 -- Force re-fetch of all cached items so is_folder is populated from the server.
 UPDATE items SET synced_at = NULL;
 "#;
+
+/// Migration to cache the full server genre catalog. Previously genres were
+/// derived on the fly from cached albums, which meant offline (and the hybrid
+/// cache-first race) only ever saw genres for the handful of locally-cached
+/// albums — collapsing the variety on the music/TV/movie landing pages. This
+/// table stores the complete genre list per library so offline has the real
+/// catalog and cache-first routing returns the right thing.
+const MIGRATION_019: &str = r#"
+CREATE TABLE IF NOT EXISTS genres (
+    id TEXT NOT NULL,
+    server_id TEXT NOT NULL,
+    library_id TEXT,
+    name TEXT NOT NULL,
+    album_count INTEGER,
+    synced_at TEXT DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (server_id, library_id, name)
+);
+
+CREATE INDEX IF NOT EXISTS idx_genres_scope ON genres(server_id, library_id);
+"#;

src-tauri/src/thumbnail/cache.rs

@@ -64,7 +64,8 @@ impl ThumbnailCache {
         image_type: &str,
         tag: &str,
     ) -> Option<PathBuf> {
-        let query = Query::with_params(
+        // Primary lookup: exact (item_id, image_type, tag) match.
+        let exact = Query::with_params(
             "SELECT file_path FROM thumbnails
              WHERE item_id = ? AND image_type = ? AND image_tag = ?",
             vec![
@@ -74,12 +75,60 @@ impl ThumbnailCache {
             ],
         );
 
-        let path_str: String = db.query_optional(query, |row| row.get(0)).await.ok()??;
+        if let Ok(Some(path_str)) = db.query_optional(exact, |row| row.get::<_, String>(0)).await {
-        let path = PathBuf::from(&path_str);
+            let path = PathBuf::from(&path_str);
+            if path.exists() {
+                self.touch(&db, item_id, image_type, Some(tag)).await;
+                return Some(path);
+            }
+            // File gone — drop the stale row and fall through to the tag-agnostic
+            // lookup below (another cached image for this item may still exist).
+            let _ = db.execute(Query::with_params(
+                "DELETE FROM thumbnails WHERE item_id = ? AND image_type = ? AND image_tag = ?",
+                vec![
+                    QueryParam::String(item_id.to_string()),
+                    QueryParam::String(image_type.to_string()),
+                    QueryParam::String(tag.to_string()),
+                ],
+            )).await;
+        }
 
+        // Fallback: any cached image for this item + type, newest first. The
+        // `image_tag` is a cache-busting version, and callers don't always pass
+        // the same tag the image was cached under — e.g. the mini player asks for
+        // the album image using the *track's* primary_image_tag. Ignoring the tag
+        // here lets those still resolve offline instead of hitting the server.
+        let any_tag = Query::with_params(
+            "SELECT file_path FROM thumbnails
+             WHERE item_id = ? AND image_type = ?
+             ORDER BY cached_at DESC LIMIT 1",
+            vec![
+                QueryParam::String(item_id.to_string()),
+                QueryParam::String(image_type.to_string()),
+            ],
+        );
+
+        let path_str: String = db.query_optional(any_tag, |row| row.get(0)).await.ok()??;
+        let path = PathBuf::from(&path_str);
         if path.exists() {
-            // Update last_accessed for LRU tracking
+            self.touch(&db, item_id, image_type, None).await;
-            let update_query = Query::with_params(
+            Some(path)
+        } else {
+            None
+        }
+    }
+
+    /// Update `last_accessed` for LRU tracking. When `tag` is `Some`, scope to
+    /// that exact row; when `None`, touch every row for the item + type.
+    async fn touch(
+        &self,
+        db: &Arc<RusqliteService>,
+        item_id: &str,
+        image_type: &str,
+        tag: Option<&str>,
+    ) {
+        let query = match tag {
+            Some(tag) => Query::with_params(
                 "UPDATE thumbnails SET last_accessed = CURRENT_TIMESTAMP
                  WHERE item_id = ? AND image_type = ? AND image_tag = ?",
                 vec![
@@ -87,23 +136,17 @@ impl ThumbnailCache {
                     QueryParam::String(image_type.to_string()),
                     QueryParam::String(tag.to_string()),
                 ],
-            );
+            ),
-            let _ = db.execute(update_query).await;
+            None => Query::with_params(
-            Some(path)
+                "UPDATE thumbnails SET last_accessed = CURRENT_TIMESTAMP
-        } else {
+                 WHERE item_id = ? AND image_type = ?",
-            // Clean up stale database entry
-            let delete_query = Query::with_params(
-                "DELETE FROM thumbnails
-                 WHERE item_id = ? AND image_type = ? AND image_tag = ?",
                 vec![
                     QueryParam::String(item_id.to_string()),
                     QueryParam::String(image_type.to_string()),
-                    QueryParam::String(tag.to_string()),
                 ],
-            );
+            ),
-            let _ = db.execute(delete_query).await;
+        };
-            None
+        let _ = db.execute(query).await;
-        }
     }
 
     /// Save thumbnail to cache

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
@@ -787,6 +806,38 @@ async enqueueDownload(downloadId: number, streamUrl: string, targetDir: string)
 async enqueueVideoDownloads(handle: string, downloadIds: number[], targetDir: string) : Promise<null> {
     return await TAURI_INVOKE("enqueue_video_downloads", { handle, downloadIds, targetDir });
 },
+/**
+ * Walk every library on the server and persist all items to the offline cache
+ * so the full catalog is browsable offline (greyed out when not downloaded).
+ * 
+ * Best-effort: a library that fails to fetch is counted and skipped rather than
+ * aborting the whole sync. Runs libraries sequentially to avoid hammering the
+ * server. Uses `Recursive=true` so a single request per library returns the
+ * containers and their playable children.
+ */
+async syncFullCatalog(handle: string) : Promise<CatalogSyncResult> {
+    return await TAURI_INVOKE("sync_full_catalog", { handle });
+},
+/**
+ * Report the last-synced timestamp so the UI can show a hint / decide whether
+ * to trigger a fresh sync.
+ */
+async catalogSyncStatus() : Promise<CatalogSyncStatus> {
+    return await TAURI_INVOKE("catalog_sync_status");
+},
+/**
+ * Resolve the stream URL for every download row that was queued while offline
+ * (`status = 'pending' AND stream_url IS NULL`), then pump the queue so they
+ * start. Call this on reconnect.
+ * 
+ * Audio rows resolve via `get_audio_stream_url`; video rows (media_type =
+ * 'video') via the pure `get_video_download_url` builder using the row's stored
+ * `quality_preset` — mirroring `enqueue_video_downloads`. Rows whose URL can't
+ * be resolved are left pending (they retry on the next reconnect).
+ */
+async resumeQueuedDownloads(handle: string) : Promise<ResumeQueuedResult> {
+    return await TAURI_INVOKE("resume_queued_downloads", { handle });
+},
 /**
  * Get download manager statistics
  */
@@ -1068,6 +1119,14 @@ async repositoryGetItems(handle: string, parentId: string, options: GetItemsOpti
 async repositoryGetItem(handle: string, itemId: string) : Promise<MediaItem> {
     return await TAURI_INVOKE("repository_get_item", { handle, itemId });
 },
+/**
+ * Query the optional JRay plugin for the actors on screen at time `t`
+ * (seconds) in an item. Returns an empty list when JRay isn't installed or
+ * has no data for the item, so the caller can render nothing without error.
+ */
+async repositoryJrayActorsAt(handle: string, itemId: string, t: number) : Promise<JRayActor[]> {
+    return await TAURI_INVOKE("repository_jray_actors_at", { handle, itemId, t });
+},
 /**
  * Get latest items in a library
  */
@@ -1478,6 +1537,20 @@ export type CachedLibrary = { id: string; serverId: string; name: string; collec
  * Cached person info returned to frontend
  */
 export type CachedPerson = { id: string; serverId: string; name: string; overview: string | null; primaryImageTag: string | null; premiereDate: string | null; endDate: string | null }
+export type CatalogSyncResult = { 
+/**
+ * Total items persisted to the offline cache across all libraries.
+ */
+itemsCached: number; 
+/**
+ * Libraries that failed to sync (e.g. server hiccup); best-effort.
+ */
+librariesFailed: number }
+export type CatalogSyncStatus = { 
+/**
+ * RFC-3339 timestamp of the last successful sync, if any.
+ */
+lastSyncedAt: string | null }
 /**
  * Connectivity status
  */
@@ -1553,6 +1626,14 @@ export type ImageOptions = { maxWidth?: number | null; maxHeight?: number | null
  * Image type
  */
 export type ImageType = "Primary" | "Backdrop" | "Banner" | "Thumb" | "Logo"
+/**
+ * A single actor returned by the JRay plugin's "context at time t" endpoint.
+ * 
+ * Mirrors the `actors[]` objects from `GET /Plugins/JRay/Items/{id}/jray?t=`.
+ * `jellyfin_id` (a Jellyfin Person item GUID) is preferred for navigation;
+ * the IMDb/TMDb ids are informational fallbacks. Unknown ids are `""`.
+ */
+export type JRayActor = { name: string; imdb_id?: string; tmdb_id?: string; jellyfin_id?: string }
 /**
  * Library (media collection)
  */
@@ -1580,7 +1661,12 @@ export type MediaItem = { id: string; name: string; type: string;
  * Whether this item is a folder/container (vs a playable leaf). Used to
  * decide whether a channel item drills into a list or plays directly.
  */
-isFolder?: boolean; serverId: string; parentId?: string | null; libraryId?: string | null; overview?: string | null; genres?: string[] | null; productionYear?: number | null; communityRating?: number | null; officialRating?: string | null; runTimeTicks?: number | null; primaryImageTag?: string | null; backdropImageTags?: string[] | null; parentBackdropImageTags?: string[] | null; albumId?: string | null; albumName?: string | null; albumArtist?: string | null; artists?: string[] | null; artistItems?: ArtistItem[] | null; indexNumber?: number | null; parentIndexNumber?: number | null; seriesId?: string | null; seriesName?: string | null; seasonId?: string | null; seasonName?: string | null; userData?: UserData | null; mediaStreams?: MediaStream[] | null; mediaSources?: MediaSource[] | null; people?: Person[] | null }
+isFolder?: boolean; serverId: string; parentId?: string | null; libraryId?: string | null; overview?: string | null; genres?: string[] | null; productionYear?: number | null; 
+/**
+ * ISO-8601 release/air date (Jellyfin `PremiereDate`). Used to sort
+ * podcast episodes by release date.
+ */
+premiereDate?: string | null; communityRating?: number | null; officialRating?: string | null; runTimeTicks?: number | null; primaryImageTag?: string | null; backdropImageTags?: string[] | null; parentBackdropImageTags?: string[] | null; albumId?: string | null; albumName?: string | null; albumArtist?: string | null; artists?: string[] | null; artistItems?: ArtistItem[] | null; indexNumber?: number | null; parentIndexNumber?: number | null; seriesId?: string | null; seriesName?: string | null; seasonId?: string | null; seasonName?: string | null; userData?: UserData | null; mediaStreams?: MediaStream[] | null; mediaSources?: MediaSource[] | null; people?: Person[] | null }
 /**
  * Media session type tracking the high-level playback context
  */
@@ -1922,6 +2008,13 @@ export type PlayerStatusEvent =
  * Sleep timer state changed
  */
 { type: "sleep_timer_changed"; mode: SleepTimerMode; remaining_seconds: number } | 
+/**
+ * Time-based sleep timer expired: playback must stop. The backend stops
+ * its own (MPV/ExoPlayer) playback, but HTML5 video on Linux plays in the
+ * webview outside the backend's control — the frontend pauses it on this
+ * event.
+ */
+{ type: "sleep_timer_expired" } | 
 /**
  * Show next episode popup with countdown
  */
@@ -1949,7 +2042,15 @@ export type PlayerStatusEvent =
  * frontend owns the two-step remote->local transfer (it must reload the
  * media item locally), so the native side only signals intent here.
  */
-{ type: "remote_disconnect_requested" }
+{ type: "remote_disconnect_requested" } | 
+/**
+ * Backend-originated control command targeting the active frontend player
+ * adapter (the HTML5 <video> that lives in the webview, which Rust cannot
+ * drive directly). Emitted by control paths like the sleep timer, lockscreen,
+ * or remote so they can pause/play/seek/stop the webview element.
+ * `playerEvents.ts` routes this to the active PlayerAdapter via the facade.
+ */
+{ type: "control_command"; action: string; position: number | null }
 /**
  * Result of creating a playlist
  * 
@@ -1971,7 +2072,12 @@ export type PlaylistEntry =
  * Whether this item is a folder/container (vs a playable leaf). Used to
  * decide whether a channel item drills into a list or plays directly.
  */
-isFolder?: boolean; serverId: string; parentId?: string | null; libraryId?: string | null; overview?: string | null; genres?: string[] | null; productionYear?: number | null; communityRating?: number | null; officialRating?: string | null; runTimeTicks?: number | null; primaryImageTag?: string | null; backdropImageTags?: string[] | null; parentBackdropImageTags?: string[] | null; albumId?: string | null; albumName?: string | null; albumArtist?: string | null; artists?: string[] | null; artistItems?: ArtistItem[] | null; indexNumber?: number | null; parentIndexNumber?: number | null; seriesId?: string | null; seriesName?: string | null; seasonId?: string | null; seasonName?: string | null; userData?: UserData | null; mediaStreams?: MediaStream[] | null; mediaSources?: MediaSource[] | null; people?: Person[] | null }) & { 
+isFolder?: boolean; serverId: string; parentId?: string | null; libraryId?: string | null; overview?: string | null; genres?: string[] | null; productionYear?: number | null; 
+/**
+ * ISO-8601 release/air date (Jellyfin `PremiereDate`). Used to sort
+ * podcast episodes by release date.
+ */
+premiereDate?: string | null; communityRating?: number | null; officialRating?: string | null; runTimeTicks?: number | null; primaryImageTag?: string | null; backdropImageTags?: string[] | null; parentBackdropImageTags?: string[] | null; albumId?: string | null; albumName?: string | null; albumArtist?: string | null; artists?: string[] | null; artistItems?: ArtistItem[] | null; indexNumber?: number | null; parentIndexNumber?: number | null; seriesId?: string | null; seriesName?: string | null; seasonId?: string | null; seasonName?: string | null; userData?: UserData | null; mediaStreams?: MediaStream[] | null; mediaSources?: MediaSource[] | null; people?: Person[] | null }) & { 
 /**
  * The playlist-scoped entry ID (Jellyfin's PlaylistItemId)
  */
@@ -2006,6 +2112,15 @@ export type RemoteSessionStatus = { position: number; duration: number | null; i
  * TRACES: UR-005 | DR-005
  */
 export type RepeatMode = "off" | "all" | "one"
+export type ResumeQueuedResult = { 
+/**
+ * Rows whose stream URL was resolved and are now pump-eligible.
+ */
+resolved: number; 
+/**
+ * Rows that couldn't be resolved (item metadata / URL lookup failed).
+ */
+failed: number }
 /**
  * Options for search queries
  */

src/lib/api/repository-client.ts

@@ -3,6 +3,7 @@
 // NO direct HTTP calls - everything routes through Rust backend
 
 import { commands } from "./bindings";
+import type { JRayActor } from "./bindings";
 import type { QualityPreset } from "./quality-presets";
 import type {
   Library,
@@ -90,6 +91,15 @@ export class RepositoryClient {
     return commands.repositoryGetItem(this.ensureHandle(), itemId);
   }
 
+  /**
+   * Query the optional JRay plugin for the actors on screen at time `t`
+   * (seconds) in an item. Resolves to an empty array when JRay isn't installed
+   * or has no data for the item.
+   */
+  async jrayActorsAt(itemId: string, t: number): Promise<JRayActor[]> {
+    return commands.repositoryJrayActorsAt(this.ensureHandle(), itemId, t);
+  }
+
   async getLatestItems(parentId: string, limit?: number): Promise<MediaItem[]> {
     return commands.repositoryGetLatestItems(this.ensureHandle(), parentId, limit ?? null);
   }

src/lib/components/BottomNav.svelte

@@ -2,6 +2,11 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
+  import { library } from '$lib/stores/library';
+
+  // When a className is supplied the parent positions this bar (e.g. inside a
+  // measured in-flow stack); otherwise it self-positions as a fixed bottom bar.
+  let { className = "fixed bottom-0 left-0 right-0 z-40" }: { className?: string } = $props();
 
   // Determine if a route is active
   function isActive(path: string): boolean {
@@ -15,7 +20,7 @@
 </script>
 
 <!-- Navigation bar visible on all platforms -->
-<nav class="fixed bottom-0 left-0 right-0 bg-[var(--color-surface)] border-t border-gray-800 z-40">
+<nav class="{className} bg-[var(--color-surface)] border-t border-gray-800">
   <div class="flex items-center justify-around px-4 py-2">
     <!-- Home Button -->
     <button
@@ -43,7 +48,7 @@
 
     <!-- Library Button -->
     <button
-      onclick={() => goto('/library')}
+      onclick={() => { library.setCurrentLibrary(null); goto('/library'); }}
       class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/library') ? 'text-[var(--color-jellyfin)]' : 'text-gray-400 hover:text-white'}"
       aria-label="Library"
     >

src/lib/components/downloads/StorageManagement.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { commands } from "$lib/api/bindings";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { auth } from "$lib/stores/auth";
   import { downloads } from "$lib/stores/downloads";
   import { goto } from "$app/navigation";
@@ -152,7 +153,7 @@
                 class="flex-1 min-w-0 text-left"
               >
                 <p class="text-sm font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
-                  {album.album_name}
+                  {truncateMiddle(album.album_name, 40)}
                 </p>
                 <p class="text-xs text-gray-400 truncate">
                   {album.artist_name || "Unknown Artist"} • {album.track_count} {album.track_count === 1 ? "track" : "tracks"}

src/lib/components/library/ArtistDetailView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { auth } from "$lib/stores/auth";
   import type { MediaItem } from "$lib/api/types";
   import LibraryGrid from "./LibraryGrid.svelte";
@@ -171,7 +172,7 @@
               {/if}
             </div>
             <p class="text-sm font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
-              {album.name}
+              {truncateMiddle(album.name, 40)}
             </p>
             {#if album.productionYear}
               <p class="text-xs text-gray-400">{album.productionYear}</p>

src/lib/components/library/EpisodeFocusView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import type { MediaItem } from "$lib/api/types";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
 
@@ -159,7 +160,7 @@
 
         <!-- Episode title -->
         <h1 class="text-4xl font-bold text-white drop-shadow-lg">
-          {episode.name}
+          {truncateMiddle(episode.name, 64)}
         </h1>
 
         <!-- Metadata -->

src/lib/components/library/EpisodeRow.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import type { MediaItem } from "$lib/api/types";
   import { downloads } from "$lib/stores/downloads";
   import { formatDuration } from "$lib/utils/duration";
@@ -134,7 +135,7 @@
             {episodeNumber}.
           </span>
           <h3 class="text-white font-medium truncate group-hover/row:text-[var(--color-jellyfin)] transition-colors">
-            {episode.name}
+            {truncateMiddle(episode.name, 56)}
           </h3>
           <!-- Played indicator -->
           {#if episode.userData?.isPlayed}

src/lib/components/library/GenericGenreBrowser.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { page } from "$app/stores";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { goto } from "$app/navigation";
   import { navigateBack } from "$lib/utils/navigation";
   import { currentLibrary } from "$lib/stores/library";
@@ -52,6 +54,16 @@
 
   onMount(async () => {
     await loadGenres();
+    // Auto-select a genre when linked with ?genre=<name> (e.g. from a genre tag)
+    const requestedGenre = $page.url.searchParams.get("genre");
+    if (requestedGenre) {
+      const match = genres.find(
+        (g) => g.name.toLowerCase() === requestedGenre.toLowerCase(),
+      );
+      if (match) {
+        await loadGenreItems(match);
+      }
+    }
     markLoaded();
   });
 
@@ -229,7 +241,7 @@
                 />
               </div>
               <p class="font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
-                {item.name}
+                {truncateMiddle(item.name, 40)}
               </p>
               {#if item.productionYear}
                 <p class="text-sm text-gray-400">

src/lib/components/library/GenreTags.svelte

@@ -5,14 +5,34 @@
     genres: string[];
     maxShow?: number;  // Default: unlimited
     clickable?: boolean;  // Default: true
+    itemType?: string;  // Determines which genre browse page to open
   }
 
   let {
     genres,
     maxShow,
-    clickable = true
+    clickable = true,
+    itemType
   }: Props = $props();
 
+  // Map the item type to its genre-browse route
+  function genreBasePath(type: string | undefined): string {
+    switch (type) {
+      case "MusicAlbum":
+      case "MusicArtist":
+      case "Audio":
+        return "/library/music/genres";
+      case "Series":
+      case "Season":
+      case "Episode":
+        return "/library/shows/genres";
+      case "Movie":
+        return "/library/movies/genres";
+      default:
+        return "/library/movies/genres";
+    }
+  }
+
   const displayGenres = $derived(
     maxShow ? genres.slice(0, maxShow) : genres
   );
@@ -23,9 +43,7 @@
 
   function handleGenreClick(genre: string) {
     if (clickable) {
-      // Navigate to genre browse page
+      goto(`${genreBasePath(itemType)}?genre=${encodeURIComponent(genre)}`);
-      // For now, we'll use a simple navigation - could be enhanced with a proper genre browse page
-      goto(`/search?genre=${encodeURIComponent(genre)}`);
     }
   }
 </script>

src/lib/components/library/LibraryListView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { MediaItem, Library } from "$lib/api/types";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { downloads } from "$lib/stores/downloads";
   import { formatDuration } from "$lib/utils/duration";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
@@ -106,7 +107,7 @@
       <!-- Title & Subtitle -->
       <div class="flex-1 min-w-0 text-left">
         <p class="text-sm font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
-          {item.name}
+          {truncateMiddle(item.name, 56)}
         </p>
         {#if subtitle}
           <p class="text-xs text-gray-400 truncate">{subtitle}</p>

src/lib/components/library/MediaCard.serverOnly.test.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/svelte";
+
+// Controllable stores for the offline "server only" branch. Declared via
+// vi.hoisted so they exist when the hoisted vi.mock factories run. A tiny
+// writable shim avoids importing svelte inside the hoisted block.
+const h = vi.hoisted(() => {
+  function shim<T>(initial: T) {
+    let value = initial;
+    const subs = new Set<(v: T) => void>();
+    return {
+      set(v: T) {
+        value = v;
+        subs.forEach((fn) => fn(value));
+      },
+      subscribe(fn: (v: T) => void) {
+        subs.add(fn);
+        fn(value);
+        return () => subs.delete(fn);
+      },
+    };
+  }
+  return {
+    isConnectedStore: shim(true),
+    showServerCatalogStore: shim(false),
+    downloadsStore: shim({ downloads: {} as Record<string, any> }),
+    downloadItem: vi.fn(async () => 1),
+    getUserId: vi.fn(() => "user-1"),
+  };
+});
+
+const { isConnectedStore, showServerCatalogStore, downloadsStore, downloadItem, getUserId } = h;
+
+vi.mock("$lib/stores/connectivity", () => ({
+  isConnected: { subscribe: h.isConnectedStore.subscribe },
+}));
+
+vi.mock("$lib/services/offlineCatalog", () => ({
+  showServerCatalog: { subscribe: h.showServerCatalogStore.subscribe },
+}));
+
+vi.mock("$lib/stores/downloads", () => ({
+  downloads: { subscribe: h.downloadsStore.subscribe, downloadItem: h.downloadItem },
+}));
+
+vi.mock("$lib/stores/auth", () => ({
+  auth: { getUserId: h.getUserId },
+}));
+
+// CachedImage does async repo/image work irrelevant to these tests.
+vi.mock("$lib/components/common/CachedImage.svelte", async () => ({
+  default: (await import("./__mocks__/StubImage.svelte")).default,
+}));
+
+import MediaCard from "./MediaCard.svelte";
+
+const track = {
+  id: "track-1",
+  name: "Some Song",
+  type: "Audio" as const,
+  serverId: "server-1",
+  artists: ["Artist A"],
+  albumName: "Album X",
+};
+
+describe("MediaCard server-only (offline browse & queue)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    isConnectedStore.set(true);
+    showServerCatalogStore.set(false);
+    downloadsStore.set({ downloads: {} });
+  });
+
+  it("shows no queue button while online", () => {
+    render(MediaCard, { props: { item: track } });
+    expect(screen.queryByLabelText(/Queue download/i)).toBeNull();
+  });
+
+  it("shows no queue button when offline but the reveal toggle is off", () => {
+    isConnectedStore.set(false);
+    render(MediaCard, { props: { item: track } });
+    expect(screen.queryByLabelText(/Queue download/i)).toBeNull();
+  });
+
+  it("reveals a queue button when offline and the reveal toggle is on", () => {
+    isConnectedStore.set(false);
+    showServerCatalogStore.set(true);
+    render(MediaCard, { props: { item: track } });
+    expect(screen.getByLabelText(/Queue download for Some Song/i)).toBeTruthy();
+  });
+
+  it("queues the item for download with its metadata on click", async () => {
+    isConnectedStore.set(false);
+    showServerCatalogStore.set(true);
+    render(MediaCard, { props: { item: track } });
+
+    await fireEvent.click(screen.getByLabelText(/Queue download for Some Song/i));
+
+    expect(downloadItem).toHaveBeenCalledTimes(1);
+    const args = downloadItem.mock.calls[0] as unknown as any[];
+    expect(args[0]).toBe("track-1"); // itemId
+    expect(args[1]).toBe("user-1"); // userId
+    expect(args[5]).toBe("Some Song"); // itemName
+    expect(args[6]).toBe("Artist A"); // artistName
+    expect(args[7]).toBe("Album X"); // albumName
+  });
+
+  it("shows a Queued badge (not the button) for a pending download", () => {
+    isConnectedStore.set(false);
+    showServerCatalogStore.set(true);
+    downloadsStore.set({
+      downloads: { "track-1": { itemId: "track-1", status: "pending", progress: 0 } },
+    });
+    render(MediaCard, { props: { item: track } });
+
+    expect(screen.getByText(/Queued/i)).toBeTruthy();
+    expect(screen.queryByLabelText(/Queue download/i)).toBeNull();
+  });
+
+  it("does not grey out a completed download", () => {
+    isConnectedStore.set(false);
+    showServerCatalogStore.set(true);
+    downloadsStore.set({
+      downloads: { "track-1": { itemId: "track-1", status: "completed", progress: 1 } },
+    });
+    render(MediaCard, { props: { item: track } });
+
+    expect(screen.queryByLabelText(/Queue download/i)).toBeNull();
+  });
+});

src/lib/components/library/MediaCard.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import type { MediaItem, Library } from "$lib/api/types";
+  import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import { downloads } from "$lib/stores/downloads";
+  import { isConnected } from "$lib/stores/connectivity";
+  import { showServerCatalog } from "$lib/services/offlineCatalog";
+  import { auth } from "$lib/stores/auth";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
 
   interface Props {
@@ -24,6 +28,55 @@
   );
   const downloadProgress = $derived(downloadInfo?.progress || 0);
 
+  // A media item (not a library) is "server only" when it exists in the cache
+  // but isn't downloaded/downloading — and we're offline with the reveal toggle
+  // on. Such cards render greyed out with a "queue for download" button and are
+  // inert to tap (nothing to play offline).
+  const isMediaItem = $derived("type" in item);
+  const isQueued = $derived(downloadInfo?.status === "pending");
+  // Actively transferring (as opposed to merely queued/pending for reconnect).
+  const isActivelyDownloading = $derived(downloadInfo?.status === "downloading");
+  // "Server only" = offline, reveal on, and not already downloaded or actively
+  // transferring. A `pending` (queued-for-reconnect) item stays server-only so
+  // it can show the Queued badge in place of the queue button.
+  const isServerOnly = $derived(
+    isMediaItem && !$isConnected && $showServerCatalog && !isDownloaded && !isActivelyDownloading
+  );
+
+  let queueError = $state<string | null>(null);
+
+  // Queue this item for download on next reconnect. Offline, this just persists
+  // a `pending` downloads row (no stream_url); the reconnect handler resolves
+  // the URL and the pump starts it. See offlineCatalog service.
+  async function queueForDownload(e: Event) {
+    e.stopPropagation();
+    if (!isMediaItem) return;
+    const media = item as MediaItem;
+    const userId = auth.getUserId();
+    if (!userId) {
+      queueError = "Not signed in";
+      return;
+    }
+    try {
+      queueError = null;
+      // Derive a sensible on-disk path; the backend heals stream_url on reconnect.
+      const filePath = `downloads/${media.id}`;
+      await downloads.downloadItem(
+        media.id,
+        userId,
+        filePath,
+        undefined,
+        undefined,
+        media.name,
+        media.artists?.join(", ") ?? undefined,
+        media.albumName ?? undefined
+      );
+    } catch (err) {
+      console.error("[MediaCard] Failed to queue download:", err);
+      queueError = "Failed to queue";
+    }
+  }
+
   const sizeClasses = {
     small: "w-24",
     medium: "w-36",
@@ -75,10 +128,12 @@
   });
 </script>
 
-<button
+<svelte:element
-  type="button"
+  this={isServerOnly ? "div" : "button"}
-  class="group/card flex flex-col text-left {sizeClasses[size]} flex-shrink-0 transition-transform duration-200 hover:scale-105"
+  type={isServerOnly ? undefined : "button"}
-  {onclick}
+  role={isServerOnly ? "group" : undefined}
+  class="group/card flex flex-col text-left {sizeClasses[size]} flex-shrink-0 transition-transform duration-200 {isServerOnly ? '' : 'hover:scale-105'}"
+  onclick={isServerOnly ? undefined : onclick}
 >
   <div class="relative {aspectRatio()} w-full rounded-lg overflow-hidden bg-[var(--color-surface)] shadow-md group-hover/card:shadow-2xl transition-shadow duration-200">
     <CachedImage
@@ -87,11 +142,12 @@
       tag={imageTag}
       maxWidth={maxWidth}
       alt={item.name}
-      class="w-full h-full object-cover transition-transform duration-300 group-hover/card:scale-110"
+      class="w-full h-full object-cover transition-transform duration-300 group-hover/card:scale-110 {isServerOnly ? 'opacity-40 grayscale' : ''}"
     />
 
-    <!-- Hover overlay with smooth gradient -->
+    <!-- Hover overlay with smooth gradient (play affordance; hidden for
-    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+         server-only cards, which can't be played offline) -->
+    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0 opacity-0 {isServerOnly ? '' : 'group-hover/card:opacity-100'} transition-opacity duration-300 flex items-center justify-center">
       <div class="transform scale-90 group-hover/card:scale-100 opacity-0 group-hover/card:opacity-100 transition-all duration-300">
         <div class="w-14 h-14 rounded-full bg-[var(--color-jellyfin)] hover:bg-[var(--color-jellyfin)]/90 flex items-center justify-center shadow-2xl">
           <svg class="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
@@ -162,14 +218,48 @@
         {/if}
       </div>
     {/if}
+
+    <!-- Server-only: queue-for-download control (kept at full opacity over the
+         greyed artwork). Queued items show a "queued" badge instead. -->
+    {#if isServerOnly}
+      <div class="absolute inset-0 flex items-center justify-center">
+        {#if isQueued}
+          <div class="flex flex-col items-center gap-1 text-white" title="Queued — will download on reconnect">
+            <div class="w-11 h-11 rounded-full bg-black/60 flex items-center justify-center shadow-lg">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+            <span class="text-[10px] font-medium bg-black/60 px-1.5 py-0.5 rounded-full">Queued</span>
+          </div>
+        {:else}
+          <button
+            type="button"
+            onclick={queueForDownload}
+            class="w-11 h-11 rounded-full bg-[var(--color-jellyfin)] hover:bg-[var(--color-jellyfin)]/90 flex items-center justify-center shadow-lg transition-colors"
+            title="Queue download for next connection"
+            aria-label="Queue download for {item.name}"
+          >
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16" />
+            </svg>
+          </button>
+        {/if}
+      </div>
+      {#if queueError}
+        <div class="absolute bottom-1 left-1 right-1 text-center text-[10px] text-red-200 bg-black/70 rounded px-1 py-0.5">
+          {queueError}
+        </div>
+      {/if}
+    {/if}
   </div>
 
-  <div class="mt-2 space-y-0.5">
+  <div class="mt-2 space-y-0.5 {isServerOnly ? 'opacity-60' : ''}">
     <p class="text-sm font-medium text-white truncate group-hover/card:text-[var(--color-jellyfin)] transition-colors">
-      {item.name}
+      {truncateMiddle(item.name, 40)}
     </p>
     {#if subtitle()}
       <p class="text-xs text-gray-400 truncate">{subtitle()}</p>
     {/if}
   </div>
-</button>
+</svelte:element>

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,9 +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";
@@ -53,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,
@@ -74,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
@@ -89,7 +81,7 @@
         playContext = { type: "custom", label: null };
       }
 
-      await commands.playerPlayTracks(repositoryHandle, {
+      await playerController.playTracks({
         trackIds,
         startIndex: index,
         shuffle: false,
@@ -242,7 +234,7 @@
             <span
               class="text-white font-medium truncate group-hover:text-[var(--color-jellyfin)] transition-colors {currentlyPlayingId === track.id ? 'text-[var(--color-jellyfin)]' : ''}"
             >
-              {track.name}
+              {truncateMiddle(track.name, 48)}
             </span>
           </div>
 
@@ -356,7 +348,7 @@
               {#if currentlyPlayingId === track.id}
                 <span class="inline-block mr-1">▶</span>
               {/if}
-              {track.name}
+              {truncateMiddle(track.name, 48)}
             </p>
             <p class="text-sm text-gray-400 truncate flex flex-wrap items-center gap-1">
               {#if showArtist && showAlbum}

src/lib/components/library/__mocks__/StubImage.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // Minimal stand-in for CachedImage in unit tests: renders nothing meaningful,
+  // just accepts the same props so MediaCard renders without hitting the repo.
+  let { alt = "" }: { alt?: string; [key: string]: unknown } = $props();
+</script>
+
+<div data-testid="stub-image" aria-label={alt}></div>

src/lib/components/player/AudioPlayer.svelte

@@ -1,9 +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 {
@@ -74,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)
@@ -128,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);
     }
@@ -242,7 +242,7 @@
     <div class="p-6 space-y-6 flex-shrink-0">
       <!-- Title & Artist -->
       <div class="text-center">
-        <h1 class="text-2xl font-bold text-white truncate">{displayMedia?.name}</h1>
+        <h1 class="text-2xl font-bold text-white truncate">{truncateMiddle(displayMedia?.name, 48)}</h1>
         <div class="text-lg text-gray-400 mt-1 flex items-center justify-center gap-1 flex-wrap">
           {#if displayMedia?.artistItems?.length}
             {#each displayMedia?.artistItems as artist, i}

src/lib/components/player/MiniPlayer.svelte

@@ -14,10 +14,12 @@
    * @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";
   import { auth } from "$lib/stores/auth";
+  import { commands } from "$lib/api/bindings";
   import {
     mergedMedia,
     mergedIsPlaying,
@@ -69,6 +71,27 @@
   // In remote mode, this automatically uses the remote session's nowPlayingItem
   const displayMedia = $derived($mergedMedia || $currentQueueItem);
   const displayIsPlaying = $derived($mergedIsPlaying);
+
+  // The player's MediaItem doesn't carry favorite state, so read it from the
+  // local user_data cache (offline-safe — same source the optimistic toggle
+  // writes to). Re-runs whenever the current track changes.
+  let isFavorite = $state(false);
+  let favoriteLoadedFor = "";
+  $effect(() => {
+    const id = displayMedia?.id;
+    if (!id || id === favoriteLoadedFor) return;
+    favoriteLoadedFor = id;
+    isFavorite = false;
+    const userId = auth.getUserId();
+    if (!userId) return;
+    commands
+      .storageGetPlaybackProgress(userId, id)
+      .then((p) => {
+        // Guard against a race if the track changed while awaiting.
+        if (displayMedia?.id === id) isFavorite = p?.isFavorite ?? false;
+      })
+      .catch(() => {});
+  });
   const displayPosition = $derived($mergedPosition);
   const displayDuration = $derived($mergedDuration);
 
@@ -105,23 +128,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
@@ -133,7 +156,7 @@
     const newPosition = percent * displayDuration;
 
     try {
-      await commands.playerSeek(newPosition);
+      await playerController.seek(newPosition);
       haptics.tap();
     } catch (err) {
       console.error("Failed to seek:", err);
@@ -322,7 +345,7 @@
           <div
             class="text-sm font-medium text-white truncate block w-full text-left"
           >
-            {displayMedia?.name}
+            {truncateMiddle(displayMedia?.name, 40)}
           </div>
           <div class="text-xs text-gray-400 truncate flex items-center gap-1">
             {#if displayMedia?.artistItems?.length}
@@ -357,7 +380,7 @@
         {#if displayMedia}
           <FavoriteButton
             itemId={displayMedia?.id ?? ""}
-            isFavorite={displayMedia?.userData?.isFavorite ?? false}
+            bind:isFavorite
             size="sm"
           />
         {/if}

src/lib/components/player/Queue.svelte

@@ -1,5 +1,6 @@
 <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";
   import { auth } from "$lib/stores/auth";
@@ -79,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
@@ -106,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);
     }
@@ -198,7 +199,7 @@
                 <!-- Info -->
                 <div class="flex-1 min-w-0">
                   <p class="text-sm font-medium truncate {currentIndex === index ? 'text-[var(--color-jellyfin)]' : 'text-white'}">
-                    {item.name}
+                    {truncateMiddle(item.name, 48)}
                   </p>
                   {#if item.artists?.length}
                     <p class="text-xs text-gray-400 truncate">

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

@@ -0,0 +1,221 @@
+/**
+ * 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".
+ *
+ * Root cause history:
+ * - Native init called onDestroy() after an await -> lifecycle_outside_component
+ *   -> the catch treated init as failed and silently flipped useHtml5Element to
+ *   true, so seeks went down the HTML5 path while ExoPlayer kept playing.
+ * - 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) --------------------------------
+
+const channelHandlers: Record<string, (event: any) => void> = {};
+vi.mock("@tauri-apps/api/event", () => ({
+  listen: vi.fn(async (channel: string, handler: any) => {
+    channelHandlers[channel] = handler;
+    return () => {
+      delete channelHandlers[channel];
+    };
+  }),
+}));
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: vi.fn(),
+}));
+
+const playerPlayItem = vi.fn(async () => ({
+  // What Android reports: native ExoPlayer backend
+  useHtml5Element: false,
+  backend: "exoplayer",
+  state: { kind: "playing" },
+}));
+const playerSeekVideo = vi.fn(async (_h: string, position: number) => ({
+  strategy: "native",
+  position,
+}));
+const playerStop = vi.fn(async () => ({}));
+const playerToggle = vi.fn(async () => ({ state: "playing" }));
+const playerSetSleepTimer = vi.fn(async (mode: any) => ({ mode, remainingSeconds: 0 }));
+const playerCancelSleepTimer = vi.fn(async () => ({ mode: { kind: "off" }, remainingSeconds: 0 }));
+
+vi.mock("$lib/api/bindings", () => ({
+  commands: {
+    playerPlayItem: (...a: any[]) => playerPlayItem(...(a as [])),
+    playerSeekVideo: (...a: any[]) => playerSeekVideo(...(a as [string, number])),
+    playerStop: (...a: any[]) => playerStop(...(a as [])),
+    playerToggle: (...a: any[]) => playerToggle(...(a as [])),
+    playerSetSleepTimer: (...a: any[]) => playerSetSleepTimer(...(a as [any])),
+    playerCancelSleepTimer: (...a: any[]) => playerCancelSleepTimer(...(a as [])),
+    playerSetSubtitleTrack: vi.fn(async () => ({})),
+    playerSwitchAudioTrack: vi.fn(async () => ({})),
+    storageGetSeriesAudioPreference: vi.fn(async () => null),
+    storageSaveSeriesAudioPreference: vi.fn(async () => ({})),
+  },
+  events: {
+    playerStatusEvent: { listen: vi.fn(async () => () => {}) },
+  },
+}));
+
+vi.mock("$lib/stores/auth", () => ({
+  auth: {
+    getUserId: () => "user-1",
+    getRepository: () => ({
+      getHandle: () => "repo-1",
+      getSubtitleUrl: async () => "",
+      jrayActorsAt: async () => [],
+    }),
+  },
+}));
+
+vi.mock("$app/navigation", () => ({
+  goto: vi.fn(),
+}));
+
+// Use the REAL sleepTimer store module so timer activation flows exactly as
+// in production (playerEvents.ts writes to it on every backend tick).
+
+import { render, fireEvent, waitFor } from "@testing-library/svelte";
+import { tick } from "svelte";
+import VideoPlayer from "./VideoPlayer.svelte";
+import { sleepTimer, sleepTimerExpiredSignal } from "$lib/stores/sleepTimer";
+import type { MediaItem } from "$lib/api/types";
+
+function makeEpisode(): MediaItem {
+  return {
+    id: "ep1",
+    name: "Episode 1",
+    type: "Episode",
+    runTimeTicks: 24 * 60 * 10_000_000, // 24 min
+  } as MediaItem;
+}
+
+/** Simulate one backend sleep-timer tick, exactly as playerEvents.ts does. */
+function sleepTimerTick(remaining = 2) {
+  sleepTimer.set({
+    mode: { kind: "episodes", remaining },
+    remainingSeconds: 0,
+  });
+}
+
+async function mountAndroidPlayer() {
+  const utils = render(VideoPlayer, {
+    props: {
+      media: makeEpisode(),
+      streamUrl: "http://server/videos/ep1/master.m3u8",
+      mediaSourceId: "src-1",
+      needsTranscoding: false,
+      onClose: vi.fn(),
+    },
+  });
+
+  // Init: backend reports native, component overrides to HTML5 and stops it.
+  await waitFor(() => expect(playerPlayItem).toHaveBeenCalled());
+  await waitFor(() => expect(playerStop).toHaveBeenCalled());
+
+  const slider = utils.container.querySelector(
+    'input[type="range"]'
+  ) as HTMLInputElement;
+  const video = utils.container.querySelector("video") as HTMLVideoElement;
+  expect(slider).not.toBeNull();
+  expect(video).not.toBeNull();
+  return { ...utils, slider, video };
+}
+
+/** Scrub the seek bar to `target` seconds like a user drag. */
+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 (Android)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    for (const key of Object.keys(channelHandlers)) delete channelHandlers[key];
+    sleepTimer.set({ mode: { kind: "off" }, remainingSeconds: 0 });
+    sleepTimerExpiredSignal.set(0);
+  });
+
+  it("overrides the native backend response to HTML5 rendering and stops the backend once", async () => {
+    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);
+  });
+
+  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(
+        "repo-1",
+        600,
+        "src-1",
+        null,
+        true // HTML5 path: the webview owns playback after the override
+      )
+    );
+    expect(parseFloat(slider.value)).toBeCloseTo(600);
+  });
+
+  it("scrubbing still works (and holds position) after enabling an episodes sleep timer", async () => {
+    const { slider, video } = await mountAndroidPlayer();
+
+    // Enable "2 more episodes" timer; backend then ticks every second.
+    sleepTimerTick(2);
+    await tick();
+    sleepTimerTick(2);
+    await tick();
+
+    await scrubTo(slider, video, 600);
+    await waitFor(() => expect(playerSeekVideo).toHaveBeenCalledTimes(1));
+    expect(parseFloat(slider.value)).toBeCloseTo(600);
+
+    // Timer ticks after the seek must not snap the bar back.
+    sleepTimerTick(2);
+    await tick();
+    expect(parseFloat(slider.value)).toBeCloseTo(600);
+
+    // A second scrub must also work.
+    await scrubTo(slider, video, 900);
+    await waitFor(() => expect(playerSeekVideo).toHaveBeenCalledTimes(2));
+    expect(parseFloat(slider.value)).toBeCloseTo(900);
+  });
+
+  it("sleep-timer ticks alone never move the seek bar", async () => {
+    const { slider } = await mountAndroidPlayer();
+
+    const before = slider.value;
+    for (let i = 0; i < 5; i++) {
+      sleepTimerTick(2);
+      await tick();
+    }
+
+    expect(slider.value).toBe(before);
+    expect(playerSeekVideo).not.toHaveBeenCalled();
+  });
+});

src/lib/components/player/VideoPlayer.svelte

@@ -1,7 +1,9 @@
 <!-- TRACES: UR-003, UR-005, UR-020, UR-021, UR-026 | DR-010, DR-023, DR-024 -->
 <script lang="ts">
   import { onMount, onDestroy, untrack } from "svelte";
+  import { goto } from "$app/navigation";
   import { commands } from "$lib/api/bindings";
+  import type { JRayActor } from "$lib/api/bindings";
   import { listen } from "@tauri-apps/api/event";
   import Hls from "hls.js";
   import type { MediaItem } from "$lib/api/types";
@@ -10,7 +12,12 @@
   import SleepTimerModal from "./SleepTimerModal.svelte";
   import SleepTimerIndicator from "./SleepTimerIndicator.svelte";
   import CachedImage from "../common/CachedImage.svelte";
-  import { sleepTimerActive } from "$lib/stores/sleepTimer";
+  import { sleepTimerActive, sleepTimerExpiredSignal } from "$lib/stores/sleepTimer";
+  import { playbackPosition } from "$lib/stores/player";
+  import * as html5Adapter from "$lib/player/html5Adapter";
+  import { playerController } from "$lib/player";
+  import { Html5PlayerAdapter, type Html5ElementBridge } from "$lib/player/adapters";
+  import { createRustReportHost } from "$lib/player/adapters/rustReportHost";
 
   interface Props {
     media: MediaItem | null;
@@ -63,7 +70,10 @@
   let controlsTimeout: ReturnType<typeof setTimeout> | null = null;
   let seekOffset = $state(0); // Track offset when seeking in transcoded streams
   let isSeeking = $state(false);
-  let currentStreamUrl = $state(streamUrl);
+  // Capture only the initial streamUrl prop; later prop changes are applied via
+  // the $effect below (untrack keeps this a one-time snapshot, matching
+  // reportMediaId above and silencing state_referenced_locally).
+  let currentStreamUrl = $state(untrack(() => streamUrl));
   let hasReportedStart = $state(false);
   let progressInterval: ReturnType<typeof setInterval> | null = null;
   let isMediaReady = $state(false); // Track if media is ready to play (implements Loading state from DR-001)
@@ -86,12 +96,47 @@
 
   // Backend info from Rust (Rust decides which backend to use based on platform)
   let useHtml5Element = $state(true); // Default to HTML5, Rust will override if using native backend
+  let backendChosen = false; // playerPlayItem succeeded and told us which backend to use
+  let nativeUnlisteners: Array<() => void> = []; // raw-channel listeners for native backend mode
+  // Position updates captured before a native seek can land after it and snap
+  // the bar back; suppress backend position feeds briefly after each seek
+  // (same idea as the MPV backend's last_seek_time suppression).
+  let lastNativeSeekAt = 0;
+  const NATIVE_SEEK_SETTLE_MS = 1500;
+  function nativeSeekSettling(): boolean {
+    return Date.now() - lastNativeSeekAt < NATIVE_SEEK_SETTLE_MS;
+  }
   let didStartNativePlayback = $state(false); // Track if we started playback (to know if we should stop on unmount)
   let didStopBackendEarly = $state(false); // Track if we stopped backend early for non-transcoded content
   let swipeType = $state<"brightness" | null>(null);
   let hls: Hls | null = null; // HLS.js instance for streaming HLS content
   let hlsFatalRecoveryAttempts = 0; // Track recovery attempts to prevent infinite restarts
 
+  // ===== Player adapter (control boundary) =====
+  // The adapter owns the high-level control contract (play/pause/seek/track).
+  // VideoPlayer supplies a narrow bridge for the element/HLS-coupled parts and
+  // registers the adapter with the facade so control intents — from UI OR from a
+  // backend control event (lockscreen/remote/sleep) — reach this element.
+  let playerAdapter: Html5PlayerAdapter | null = null;
+
+  function tearDownHls() {
+    if (hls) {
+      hls.detachMedia();
+      hls.stopLoad();
+      hls.destroy();
+      hls = null;
+    }
+  }
+
+  const adapterBridge: Html5ElementBridge = {
+    getElement: () => videoElement,
+    getSeekOffset: () => seekOffset,
+    setSeekOffset: (o) => { seekOffset = o; },
+    setStreamUrl: (u) => { currentStreamUrl = u; },
+    destroyHls: tearDownHls,
+    getMediaSourceId: () => mediaSourceId ?? null,
+  };
+
   // Audio track selection
   let showAudioTrackMenu = $state(false);
   let selectedAudioTrackIndex = $state<number | null>(null);
@@ -201,11 +246,30 @@
       seekOffset = 0;
       isMediaReady = false; // Reset to loading state when stream URL changes
       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
     }
   });
 
 
+  // Sleep-timer expiry pause is now driven by the backend through the player
+  // adapter: playerEvents.ts routes `sleep_timer_expired` to the active adapter's
+  // pause() (see handleControlCommand / the sleep_timer_expired case). This
+  // removes the component's direct videoElement.pause() reach-in — the backend
+  // has control authority over the webview element via the adapter boundary.
+
+  // Native backend (Android ExoPlayer): drive the seek bar from the player
+  // store, which is fed by the backend's PositionUpdate events. The legacy
+  // "player://position-update" raw channel was never emitted by the backend,
+  // so without this the bar only moves when the user scrubs.
+  $effect(() => {
+    const position = $playbackPosition;
+    if (!useHtml5Element && !isDraggingSeekBar && !isSeeking && !nativeSeekSettling()) {
+      currentTime = position;
+    }
+  });
+
   // Set up HLS.js for HLS streams
   $effect(() => {
     if (!useHtml5Element || !videoElement || !currentStreamUrl) {
@@ -279,6 +343,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;
 
@@ -371,18 +454,36 @@
     }
   });
 
-  // Handle initial position changes (for resuming same video from different position)
+  // Handle initial position changes (for resuming the *same* loaded video from a
+  // different position, e.g. the resume point is re-chosen without a reload).
+  //
+  // This must only react to a genuine change of the `initialPosition` prop to a
+  // value we haven't already applied. The previous version re-fired on the very
+  // first seek (it also depended on, and wrote, `hasPerformedInitialSeek`), and
+  // since seeking a transcoded/HLS stream re-buffers and fires `canplay` again,
+  // the two seek paths ping-ponged forever — the player appeared to pause/resume
+  // in a loop. We now snapshot the last-applied position and only seek when the
+  // prop actually moves to a new value, untracking the writes so this effect
+  // can't re-trigger itself.
+  let lastAppliedInitialPosition = $state<number | undefined>(undefined);
   $effect(() => {
-    // Track initialPosition changes - if it changes and video is ready, seek to new position
     const pos = initialPosition;
-    if (pos && pos > 0 && isMediaReady && videoElement && hasPerformedInitialSeek) {
+    if (!pos || pos <= 0 || !isMediaReady) return;
-      // Position changed after initial seek was done - seek to new position
+    // Only act on a real change to a not-yet-applied position.
-      console.log("[VideoPlayer] Initial position changed, seeking to:", pos);
+    if (pos === untrack(() => lastAppliedInitialPosition)) return;
-      hasPerformedInitialSeek = false; // Reset flag to allow handleCanPlay to seek
+    // Skip the very first application; handleCanPlay owns the initial seek.
-      // Trigger seek directly since canplay won't fire for same video
+    if (!untrack(() => hasPerformedInitialSeek)) {
-      videoElement.currentTime = pos;
+      lastAppliedInitialPosition = pos;
-      currentTime = pos;
+      return;
     }
+    untrack(() => {
+      console.log("[VideoPlayer] Initial position changed, seeking to:", pos);
+      lastAppliedInitialPosition = pos;
+      if (videoElement) {
+        videoElement.currentTime = pos;
+        currentTime = pos;
+      }
+    });
   });
 
   // Set up progress reporting interval
@@ -429,11 +530,30 @@
 
         // Rust tells us which backend it's using
         useHtml5Element = response.useHtml5Element;
+        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();
@@ -447,41 +567,63 @@
           didStartNativePlayback = true; // Track that we need to stop backend on unmount
         }
 
+        // Register the HTML5 player adapter with the facade so control intents
+        // (UI or backend lockscreen/remote/sleep events) route to this element.
+        if (useHtml5Element) {
+          const host = createRustReportHost(media.id, {
+            onEnded: () => notifyEnded(),
+            onStreamUrlChanged: (u) => { currentStreamUrl = u; },
+          });
+          playerAdapter = new Html5PlayerAdapter(host, adapterBridge);
+          playerAdapter.attach(videoElement);
+          playerController.setActiveAdapter(playerAdapter);
+        }
+
         if (!useHtml5Element) {
           // Using native backend, subscribe to player events
           didStartNativePlayback = true; // Track that we started native playback
-          const unlisten1 = await listen("player://position-update", (event: any) => {
+          isPlaying = (response.state?.kind ?? response.state) === "playing";
-            if (!isDraggingSeekBar) {
+          // Cleanup happens in the component's top-level onDestroy. Calling
-              currentTime = event.payload.position;
+          // onDestroy() here — after an await — throws lifecycle_outside_component,
-            }
+          // which the catch below used to misread as an init failure: it flipped
-          });
+          // useHtml5Element to true, so every seek went down the HTML5 path and
-
+          // never reached ExoPlayer (the video "seeked" then snapped back).
-          const unlisten2 = await listen("player://state-changed", (event: any) => {
+          nativeUnlisteners.push(
-            isPlaying = event.payload.state === "playing";
+            await listen("player://position-update", (event: any) => {
-          });
+              if (!isDraggingSeekBar && !isSeeking && !nativeSeekSettling()) {
-
+                currentTime = event.payload.position;
-          // Clean up listeners on destroy
+              }
-          onDestroy(() => {
+            })
-            unlisten1();
+          );
-            unlisten2();
+          nativeUnlisteners.push(
-          });
+            await listen("player://state-changed", (event: any) => {
+              isPlaying = event.payload.state === "playing";
+            })
+          );
         }
       } catch (err) {
         console.error("[VideoPlayer] Failed to initialize player:", err);
-        // Fallback to HTML5 on error
+        if (backendChosen) {
-        useHtml5Element = true;
+          // The backend already accepted the item; a later error (e.g. event
-
+          // subscription) must not silently switch the seek/controls path to
-        // For non-transcoded content, try to stop any backend player that might have started
+          // HTML5 while the native backend keeps playing.
-        if (!needsTranscoding) {
+          console.warn("[VideoPlayer] Backend already initialized - keeping native mode despite error");
-          try {
-            await commands.playerStop();
-            didStopBackendEarly = true;
-          } catch (stopErr) {
-            // Ignore errors when stopping
-          }
         } else {
-          // For transcoded content, keep backend for seeking
+          // Fallback to HTML5 on error
-          didStartNativePlayback = true;
+          useHtml5Element = true;
+
+          // For non-transcoded content, try to stop any backend player that might have started
+          if (!needsTranscoding) {
+            try {
+              await commands.playerStop();
+              didStopBackendEarly = true;
+            } catch (stopErr) {
+              // Ignore errors when stopping
+            }
+          } else {
+            // For transcoded content, keep backend for seeking
+            didStartNativePlayback = true;
+          }
         }
       }
     }
@@ -525,6 +667,12 @@
     // Stop RAF loop
     stopTimeUpdates();
 
+    // Unregister the adapter from the facade (guarded so we only clear our own).
+    if (playerAdapter) {
+      playerController.clearActiveAdapter(playerAdapter);
+      playerAdapter = null;
+    }
+
     if (progressInterval) {
       clearInterval(progressInterval);
     }
@@ -532,6 +680,12 @@
       clearInterval(debugLogInterval);
     }
 
+    // Remove native backend event listeners
+    for (const unlisten of nativeUnlisteners) {
+      unlisten();
+    }
+    nativeUnlisteners = [];
+
     // Clean up HLS.js instance - prevent dual audio on unmount
     if (hls) {
       console.log("[VideoPlayer] Destroying HLS.js instance on unmount");
@@ -571,6 +725,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);
       }
     }
 
@@ -620,6 +777,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);
@@ -627,6 +788,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");
@@ -643,6 +818,7 @@
     if (initialPosition && initialPosition > 0 && !hasPerformedInitialSeek && videoElement) {
       console.log("[VideoPlayer] Seeking to initial position:", initialPosition);
       hasPerformedInitialSeek = true;
+      lastAppliedInitialPosition = initialPosition; // mark this value as applied so the change-effect ignores it
 
       // Pause video to prevent autoplay from starting at position 0
       const wasPlaying = !videoElement.paused;
@@ -723,6 +899,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() {
@@ -750,9 +929,65 @@
     }, 5000);
   }
 
+  // ===== JRay "who's on screen" pause overlay (optional plugin) =====
+  // On pause, ask the JRay Jellyfin plugin which actors are on screen at the
+  // current timestamp and show them as a tappable overlay. If the plugin isn't
+  // installed (or has no data for this item), the call resolves to [] and the
+  // overlay simply doesn't render. Tapping an actor with a resolved Jellyfin
+  // Person id navigates to that person's library page.
+  let jrayActors = $state<JRayActor[]>([]);
+  // Monotonic token so a slow in-flight request can't overwrite a newer pause
+  // (or a resume that cleared the list).
+  let jrayRequestId = 0;
+
+  async function fetchJrayActors() {
+    const itemId = media?.id;
+    if (!itemId) return;
+    const token = ++jrayRequestId;
+    const t = currentTime;
+    try {
+      const actors = await auth.getRepository().jrayActorsAt(itemId, t);
+      // Discard if a newer pause/resume happened while we were waiting.
+      if (token === jrayRequestId) {
+        jrayActors = actors;
+      }
+    } catch (err) {
+      console.warn("[VideoPlayer] JRay lookup failed:", err);
+      if (token === jrayRequestId) jrayActors = [];
+    }
+  }
+
+  function clearJrayActors() {
+    jrayRequestId++; // invalidate any in-flight request
+    jrayActors = [];
+  }
+
+  function openJrayActor(actor: JRayActor) {
+    if (actor.jellyfin_id) {
+      goto(`/library/${actor.jellyfin_id}`);
+    }
+  }
+
+  // Drive the JRay overlay off the single `isPlaying` flag so it works for both
+  // the HTML5 <video> (desktop) and the native ExoPlayer path (Android, which
+  // updates isPlaying via the player://state-changed event). Fetch when we go
+  // paused, clear when we resume. untrack() keeps this from re-running on every
+  // currentTime tick — only isPlaying transitions matter.
+  $effect(() => {
+    if (isPlaying) {
+      untrack(clearJrayActors);
+    } else if (isMediaReady) {
+      untrack(fetchJrayActors);
+    }
+  });
+
   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);
@@ -763,6 +998,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);
@@ -772,7 +1009,13 @@
   function handleEnded() {
     isPlaying = false;
     stopTimeUpdates(); // Stop RAF loop when ended
-    // Report stop when video ends (skip for live - no resume tracking)
+    // NOTE: do NOT report a "stopped" player state here. Natural end-of-video is
+    // an autoplay handoff, not a stop: the backend's on_video_playback_ended
+    // decides whether to advance to the next episode (incl. sleep-timer episode
+    // counting). Emitting StateChanged{stopped} would flip the player/mode to
+    // idle mid-handoff and suppress the next-episode auto-advance (pauses at the
+    // end of an episode instead of continuing). onReportStop below still reports
+    // progress to Jellyfin; notifyEnded() drives the autoplay decision.
     if (!isLive && onReportStop) {
       onReportStop(currentTime, reportMediaId);
     }
@@ -781,19 +1024,13 @@
   }
 
   async function togglePlayPause() {
-    if (!useHtml5Element) {
+    // Route through the facade → active adapter so the toggle goes through the
-      try {
+    // one control boundary (and the adapter reports the resulting element state
-        const response = (await commands.playerToggle()) as any;
+    // back into Rust). The element's own play/pause handlers update isPlaying.
-        isPlaying = response.state === "playing";
+    try {
-      } catch (err) {
+      await playerController.toggle();
-        console.error("[VideoPlayer] Failed to toggle native player:", err);
+    } catch (err) {
-      }
+      console.error("[VideoPlayer] Failed to toggle playback:", err);
-    } else if (videoElement) {
-      if (videoElement.paused) {
-        videoElement.play();
-      } else {
-        videoElement.pause();
-      }
     }
   }
 
@@ -813,130 +1050,29 @@
     isDraggingSeekBar = false;
 
     try {
-      console.log("[VideoPlayer] Seeking to:", targetTime.toFixed(2), "useHtml5Element:", useHtml5Element);
+      console.log("[VideoPlayer] Seeking to:", targetTime.toFixed(2));
 
-      const repo = auth.getRepository();
+      // Optimistic display; the primitive updates currentTime/seekOffset as it
-      if (!repo) {
+      // completes (reloadSource drives the stream URL via the adapter bridge).
-        console.error("[VideoPlayer] No repository available");
+      currentTime = targetTime;
-        return;
+      stopTimeUpdates(); // pause RAF while the seek settles
-      }
 
-      // Backend smart seeking handles both native and HTML5
+      // The BACKEND decides the strategy (in-place vs transcode reload); the
-      const response = (await commands.playerSeekVideo(
+      // facade dispatches the matching adapter PRIMITIVE. This is the shared
-        repo.getHandle(),
+      // decision-in-Rust design — no strategy branch lives here anymore.
+      lastNativeSeekAt = Date.now();
+      await playerController.seekVideo(
         targetTime,
         mediaSourceId ?? null,
-        selectedAudioTrackIndex ?? null,
+        selectedAudioTrackIndex ?? null
-        useHtml5Element
+      );
-      )) as any;
 
-      console.log("[VideoPlayer] Backend seek response:", response);
+      // Resume smooth updates if still playing after the seek settled.
-
+      if (videoElement && !videoElement.paused) {
-      // For native backend, the backend handles everything internally
+        startTimeUpdates();
-      if (!useHtml5Element) {
-        // Backend already stopped, reloaded, and seeked if needed
-        currentTime = response.position ?? targetTime;
-        if (response.strategy === "reloadStream") {
-          seekOffset = response.seekOffset ?? targetTime;
-          currentStreamUrl = response.newUrl ?? currentStreamUrl;
-        } else {
-          seekOffset = 0;
-        }
-        console.log("[VideoPlayer] Native backend seek completed at position:", currentTime);
-        return;
       }
 
-      // HTML5 backend - handle video element management
+      console.log("[VideoPlayer] Seek completed at:", currentTime.toFixed(2), "offset:", seekOffset);
-      if (!videoElement) {
-        console.warn("[VideoPlayer] Cannot seek - video element not available");
-        return;
-      }
-
-      if (response.strategy === "reloadStream") {
-        // Transcoded stream - reload with new URL
-        console.log("[VideoPlayer] Reloading HTML5 stream from position:", targetTime);
-        const wasPlaying = !videoElement.paused;
-
-        // CRITICAL: Stop playback completely to prevent dual audio
-        videoElement.pause();
-        stopTimeUpdates(); // Stop RAF updates
-
-        // CRITICAL: Destroy old HLS instance completely to prevent dual audio
-        if (hls) {
-          console.log("[VideoPlayer] Destroying old HLS instance for seek");
-          hls.detachMedia(); // Detach from video element
-          hls.stopLoad(); // Stop loading fragments
-          hls.destroy(); // Completely destroy the instance
-          hls = null; // Clear reference
-        }
-
-        // CRITICAL: Clear video element buffers completely
-        if (videoElement.src) {
-          videoElement.removeAttribute('src');
-          videoElement.load(); // Reset and flush all buffers
-        }
-
-        // Small delay to ensure cleanup completes before creating new HLS instance
-        await new Promise(resolve => setTimeout(resolve, 100));
-
-        // Update stream URL (this will trigger $effect to create new HLS instance)
-        seekOffset = response.seekOffset ?? targetTime;
-        currentStreamUrl = response.newUrl ?? currentStreamUrl;
-        currentTime = targetTime;
-
-        // Wait for video to be ready
-        await new Promise<void>((resolve) => {
-          const onCanPlay = () => {
-            console.log("[VideoPlayer] Transcoded video loaded after seek");
-            videoElement?.removeEventListener("canplay", onCanPlay);
-            resolve();
-          };
-          if (videoElement) {
-            videoElement.addEventListener("canplay", onCanPlay);
-          }
-
-          setTimeout(() => {
-            console.warn("[VideoPlayer] Transcoded seek timeout");
-            videoElement?.removeEventListener("canplay", onCanPlay);
-            resolve();
-          }, 10000);
-        });
-
-        if (wasPlaying && videoElement) {
-          await videoElement.play();
-          startTimeUpdates(); // Restart RAF updates
-        }
-      } else {
-        // Native browser seeking
-        console.log("[VideoPlayer] Using native HTML5 seek to:", targetTime.toFixed(2));
-        videoElement.currentTime = targetTime;
-        currentTime = targetTime;
-        seekOffset = 0;
-
-        // Wait for seek to complete
-        await new Promise<void>((resolve) => {
-          const onSeeked = () => {
-            console.log("[VideoPlayer] Native seek completed");
-            videoElement?.removeEventListener("seeked", onSeeked);
-            resolve();
-          };
-          if (videoElement) {
-            videoElement.addEventListener("seeked", onSeeked);
-          }
-
-          setTimeout(() => {
-            videoElement?.removeEventListener("seeked", onSeeked);
-            resolve();
-          }, 2000);
-        });
-      }
-
-      console.log("[VideoPlayer] HTML5 seek completed:", {
-        strategy: response.strategy,
-        targetTime: targetTime.toFixed(2),
-        actualTime: videoElement.currentTime.toFixed(2),
-        seekOffset,
-      });
     } catch (err) {
       console.error("[VideoPlayer] Seek failed:", err);
     } finally {
@@ -1106,73 +1242,19 @@
     showAudioTrackMenu = false;
 
     try {
-      const repo = auth.getRepository();
+      // The BACKEND decides whether the audio-track switch needs a transcode
-      if (!repo) throw new Error("Not authenticated");
+      // reload; the facade dispatches the resulting adapter PRIMITIVE
-
+      // (reloadSource) which runs the invariant dual-audio teardown sequence.
-      // Call unified backend command
+      // No strategy branch lives here anymore.
-      const response = (await commands.playerSwitchAudioTrack(
+      stopTimeUpdates();
-        repo.getHandle(),
+      await playerController.switchAudioTrack(
         streamIndex,
         arrayIndex,
-        useHtml5Element,
+        videoElement ? videoElement.currentTime + seekOffset : null,
-        useHtml5Element && videoElement ? videoElement.currentTime + seekOffset : null,
         mediaSourceId ?? null
-      )) as any;
+      );
-
+      if (videoElement && !videoElement.paused) {
-      // Handle response based on strategy
+        startTimeUpdates();
-      if (response.strategy === "reloadStream" && useHtml5Element && videoElement) {
-        console.log("[VideoPlayer] Switching audio track - reloading stream");
-
-        // Save state before reload
-        const wasPlaying = !videoElement.paused;
-
-        // CRITICAL: Stop playback completely to prevent dual audio
-        videoElement.pause();
-        stopTimeUpdates(); // Stop RAF updates
-
-        // CRITICAL: Destroy old HLS instance completely to prevent dual audio
-        if (hls) {
-          console.log("[VideoPlayer] Destroying old HLS instance for audio track switch");
-          hls.detachMedia(); // Detach from video element
-          hls.stopLoad(); // Stop loading fragments
-          hls.destroy(); // Completely destroy the instance
-          hls = null; // Clear reference
-        }
-
-        // CRITICAL: Clear video element buffers completely
-        if (videoElement.src) {
-          videoElement.removeAttribute('src');
-          videoElement.load(); // Reset and flush all buffers
-        }
-
-        // Small delay to ensure cleanup completes before creating new HLS instance
-        await new Promise(resolve => setTimeout(resolve, 100));
-
-        // Update stream URL (this will trigger $effect to create new HLS instance)
-        currentStreamUrl = response.newUrl!;
-        seekOffset = response.position!;
-
-        // Wait for video to be ready
-        await new Promise<void>((resolve) => {
-          const onCanPlay = () => {
-            console.log("[VideoPlayer] Video reloaded with new audio track");
-            videoElement?.removeEventListener("canplay", onCanPlay);
-            resolve();
-          };
-          videoElement!.addEventListener("canplay", onCanPlay);
-
-          // Timeout fallback
-          setTimeout(() => {
-            videoElement?.removeEventListener("canplay", onCanPlay);
-            resolve();
-          }, 5000);
-        });
-
-        // Resume playback if it was playing
-        if (wasPlaying) {
-          await videoElement.play();
-          startTimeUpdates(); // Restart RAF updates
-        }
       }
 
       console.log("[VideoPlayer] Successfully changed audio track");
@@ -1404,6 +1486,44 @@
         </svg>
       </button>
     {/if}
+
+    <!-- JRay "who's on screen" overlay: shown while paused when the JRay plugin
+         returned actors for the current timestamp. Tapping an actor with a
+         resolved Jellyfin Person id opens their library page. -->
+    {#if !isPlaying && !isSeeking && jrayActors.length > 0}
+      <div class="absolute top-4 right-4 max-w-xs bg-black/70 rounded-lg p-3 backdrop-blur-sm pointer-events-auto">
+        <div class="text-white/60 text-xs font-medium uppercase tracking-wide mb-2">On screen</div>
+        <div class="flex flex-col gap-2">
+          {#each jrayActors as actor (actor.name + actor.jellyfin_id)}
+            {#if actor.jellyfin_id}
+              <button
+                class="flex items-center gap-2 text-left text-white text-sm hover:text-blue-300 transition-colors group"
+                onclick={() => openJrayActor(actor)}
+              >
+                <!-- Headshot from the actor's Jellyfin Person item. Falls back to
+                     a placeholder inside CachedImage when no image exists. -->
+                <CachedImage
+                  itemId={actor.jellyfin_id}
+                  imageType="Primary"
+                  maxWidth={80}
+                  alt={actor.name}
+                  class="w-8 h-8 rounded-full object-cover flex-shrink-0 ring-1 ring-white/20 group-hover:ring-blue-300/60"
+                />
+                <span>{actor.name}</span>
+              </button>
+            {:else}
+              <span class="flex items-center gap-2 text-white/80 text-sm">
+                <!-- No resolved Jellyfin id → no headshot available. -->
+                <span class="w-8 h-8 rounded-full bg-gray-700 flex-shrink-0 flex items-center justify-center text-xs text-gray-400">
+                  {actor.name.slice(0, 1)}
+                </span>
+                <span>{actor.name}</span>
+              </span>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    {/if}
   </div>
 
   <!-- Controls -->

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/adapters/html5Adapter.test.ts

@@ -0,0 +1,194 @@
+/**
+ * Unit tests for Html5PlayerAdapter.
+ *
+ * The Option-1 primitive design makes the adapter pure, decision-free mechanics
+ * — it takes a mock <video> element + bridge + host, so we can assert each
+ * primitive drives the element correctly without any real DOM or backend.
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { Html5PlayerAdapter, type Html5ElementBridge } from "./html5Adapter";
+import type { AdapterHost } from "./types";
+
+/** A minimal fake <video> element that records mutations and fires events. */
+function makeFakeVideo() {
+  const listeners: Record<string, Array<() => void>> = {};
+  const el: any = {
+    paused: true,
+    currentTime: 0,
+    volume: 1,
+    muted: false,
+    src: "blob:existing",
+    play: vi.fn(async () => {
+      el.paused = false;
+    }),
+    pause: vi.fn(() => {
+      el.paused = true;
+    }),
+    load: vi.fn(),
+    removeAttribute: vi.fn((attr: string) => {
+      if (attr === "src") el.src = "";
+    }),
+    addEventListener: (event: string, cb: () => void) => {
+      (listeners[event] ??= []).push(cb);
+    },
+    removeEventListener: (event: string, cb: () => void) => {
+      listeners[event] = (listeners[event] ?? []).filter((f) => f !== cb);
+    },
+    // Test helper: fire an event so waitForEvent resolves immediately.
+    _fire: (event: string) => {
+      (listeners[event] ?? []).slice().forEach((f) => f());
+    },
+    querySelectorAll: () => [] as any,
+    textTracks: [] as any,
+  };
+  return el;
+}
+type FakeVideo = ReturnType<typeof makeFakeVideo>;
+
+function makeBridge(overrides: Partial<Html5ElementBridge> = {}): Html5ElementBridge {
+  let offset = 0;
+  return {
+    getElement: () => null,
+    getSeekOffset: () => offset,
+    setSeekOffset: vi.fn((o: number) => { offset = o; }),
+    setStreamUrl: vi.fn(),
+    destroyHls: vi.fn(),
+    getMediaSourceId: () => "msid-1",
+    ...overrides,
+  };
+}
+
+function makeHost(): AdapterHost {
+  return {
+    onState: vi.fn(),
+    onPosition: vi.fn(),
+    onMediaLoaded: vi.fn(),
+    onEnded: vi.fn(),
+    onError: vi.fn(),
+    onStreamUrlChanged: vi.fn(),
+    onBuffering: vi.fn(),
+    onReady: vi.fn(),
+  };
+}
+
+describe("Html5PlayerAdapter", () => {
+  let host: AdapterHost;
+  let bridge: Html5ElementBridge;
+  let adapter: Html5PlayerAdapter;
+  let video: ReturnType<typeof makeFakeVideo>;
+
+  beforeEach(() => {
+    host = makeHost();
+    bridge = makeBridge();
+    adapter = new Html5PlayerAdapter(host, bridge);
+    video = makeFakeVideo();
+    adapter.attach(video);
+  });
+
+  it("is an html5-kind adapter", () => {
+    expect(adapter.kind).toBe("html5");
+  });
+
+  it("play() calls element.play()", async () => {
+    await adapter.play();
+    expect(video.play).toHaveBeenCalledTimes(1);
+  });
+
+  it("pause() calls element.pause()", async () => {
+    video.paused = false;
+    await adapter.pause();
+    expect(video.pause).toHaveBeenCalledTimes(1);
+  });
+
+  it("toggle() plays when paused and reports the resulting state", async () => {
+    video.paused = true;
+    const playing = await adapter.toggle();
+    expect(video.play).toHaveBeenCalled();
+    expect(playing).toBe(true);
+  });
+
+  it("toggle() pauses when playing", async () => {
+    video.paused = false;
+    const playing = await adapter.toggle();
+    expect(video.pause).toHaveBeenCalled();
+    expect(playing).toBe(false);
+  });
+
+  it("seekElement() sets currentTime, offset, and waits for 'seeked'", async () => {
+    const p = adapter.seekElement(42, 0);
+    expect(video.currentTime).toBe(42);
+    expect(bridge.setSeekOffset).toHaveBeenCalledWith(0);
+    video._fire("seeked"); // resolve the wait
+    await p;
+  });
+
+  it("reloadSource() runs the invariant teardown->swap->resume sequence", async () => {
+    video.paused = false; // was playing → should resume
+    const p = adapter.reloadSource("http://new/master.m3u8", 120);
+
+    // Teardown happened synchronously before the awaited canplay wait.
+    expect(video.pause).toHaveBeenCalled();
+    expect(bridge.destroyHls).toHaveBeenCalledTimes(1);
+    expect(video.removeAttribute).toHaveBeenCalledWith("src");
+    expect(video.load).toHaveBeenCalled();
+
+    // Allow the internal 100ms settle delay, then fire canplay to resume.
+    await new Promise((r) => setTimeout(r, 110));
+    expect(bridge.setSeekOffset).toHaveBeenCalledWith(120);
+    expect(bridge.setStreamUrl).toHaveBeenCalledWith("http://new/master.m3u8");
+    video._fire("canplay");
+    await p;
+    expect(video.play).toHaveBeenCalled(); // resumed because it was playing
+  });
+
+  it("reloadSource() does not resume when it was paused", async () => {
+    video.paused = true;
+    const p = adapter.reloadSource("http://new/master.m3u8", 30);
+    await new Promise((r) => setTimeout(r, 110));
+    video._fire("canplay");
+    await p;
+    expect(video.play).not.toHaveBeenCalled();
+  });
+
+  it("setVolume() clamps to 0..1", () => {
+    adapter.setVolume(1.5);
+    expect(video.volume).toBe(1);
+    adapter.setVolume(-0.5);
+    expect(video.volume).toBe(0);
+    adapter.setVolume(0.4);
+    expect(video.volume).toBeCloseTo(0.4);
+  });
+
+  it("setMuted() sets the element muted flag", () => {
+    adapter.setMuted(true);
+    expect(video.muted).toBe(true);
+  });
+
+  it("getPosition() returns element time plus the transcode offset", () => {
+    video.currentTime = 10;
+    (bridge.getSeekOffset as any) = () => 100;
+    // Rebuild adapter with the offset-returning bridge.
+    const a = new Html5PlayerAdapter(host, bridge);
+    a.attach(video);
+    expect(a.getPosition()).toBe(110);
+  });
+
+  it("dispose() tears down hls and clears the element", async () => {
+    await adapter.dispose();
+    expect(bridge.destroyHls).toHaveBeenCalled();
+    expect(video.pause).toHaveBeenCalled();
+    // After dispose, primitives are no-ops (element detached).
+    await adapter.play();
+    // play was called once during dispose teardown? no — play only on reload/resume.
+    expect(video.play).not.toHaveBeenCalled();
+  });
+
+  it("primitives are safe no-ops before an element is attached", async () => {
+    const bare = new Html5PlayerAdapter(host, bridge);
+    await expect(bare.play()).resolves.toBeUndefined();
+    await expect(bare.pause()).resolves.toBeUndefined();
+    await expect(bare.seekElement(5, 0)).resolves.toBeUndefined();
+    expect(await bare.toggle()).toBe(false);
+  });
+});

src/lib/player/adapters/html5Adapter.ts

@@ -0,0 +1,201 @@
+/**
+ * Html5PlayerAdapter — the Linux/desktop (and interim Android) PlayerAdapter
+ * implementation. It owns the high-level control surface for an HTML5 `<video>`
+ * element and reports the element's lifecycle back into Rust via its
+ * {@link AdapterHost}.
+ *
+ * Design note on the split with VideoPlayer.svelte:
+ * The delicate, timing-sensitive parts (hls.js instance lifecycle, the transcode
+ * "reload stream" seek/audio-track dance with its dual-audio teardown and
+ * canplay waits) are inherently coupled to Svelte reactive state and the DOM
+ * element. Rather than relocate that reactive machinery wholesale (high
+ * regression risk), the adapter receives an {@link Html5ElementBridge} of narrow
+ * callbacks the owning component supplies. The adapter is the single OWNER of the
+ * control contract (play/pause/seek/track/volume) and of reporting; the bridge is
+ * the seam to the component's element/HLS/reactive state. This keeps all control
+ * intents flowing through the PlayerAdapter interface while preserving the
+ * hard-won element behavior verbatim.
+ *
+ * TRACES: UR-003, UR-005, UR-020, UR-021 | DR-001, DR-023, DR-024, DR-028
+ */
+
+import type { AdapterHost, PlayerAdapter, PlayerLoadOptions } from "./types";
+
+/**
+ * Narrow seam the owning component provides so the adapter can execute the
+ * element/HLS-coupled parts of a control action without re-implementing the
+ * component's reactive HLS lifecycle. Every function here is a thin wrapper over
+ * work the component already does.
+ */
+export interface Html5ElementBridge {
+  /** The bound <video> element, or null before mount / after teardown. */
+  getElement(): HTMLVideoElement | null;
+  /** Current seek offset (seconds) for transcoded streams. */
+  getSeekOffset(): number;
+  setSeekOffset(offset: number): void;
+  /** Update the stream URL the component renders (triggers its HLS $effect). */
+  setStreamUrl(url: string): void;
+  /** Tear down the component-owned hls.js instance (dual-audio prevention). */
+  destroyHls(): void;
+  /** Media source id for seek/audio-track URLs. */
+  getMediaSourceId(): string | null;
+}
+
+export class Html5PlayerAdapter implements PlayerAdapter {
+  readonly kind = "html5" as const;
+
+  private attachedElement: HTMLVideoElement | null = null;
+  private host: AdapterHost;
+  private bridge: Html5ElementBridge;
+
+  constructor(host: AdapterHost, bridge: Html5ElementBridge) {
+    this.host = host;
+    this.bridge = bridge;
+  }
+
+  /**
+   * Resolve the LIVE <video> element. The bridge's `getElement()` returns the
+   * component's current reactive `videoElement`, which is authoritative: the
+   * element can be re-bound when the {#if} block re-renders, so a value captured
+   * once in `attach()` may go stale (this caused play/pause to silently no-op).
+   * Falls back to the attach()-captured element for unit tests whose bridge
+   * returns null.
+   */
+  private get element(): HTMLVideoElement | null {
+    return this.bridge.getElement() ?? this.attachedElement;
+  }
+
+  attach(element: HTMLVideoElement | null): void {
+    this.attachedElement = element;
+  }
+
+  async load(streamUrl: string, _options: PlayerLoadOptions): Promise<void> {
+    // The component's reactive HLS $effect performs the actual attach/load when
+    // the stream URL is set; loading is therefore driven by setStreamUrl. The
+    // component's canplay/frag-buffered path reports readiness through the host.
+    this.bridge.setSeekOffset(0);
+    this.bridge.setStreamUrl(streamUrl);
+    this.host.onState("loading");
+  }
+
+  async play(): Promise<void> {
+    const el = this.element;
+    if (!el) return;
+    try {
+      await el.play();
+      // handlePlay on the element reports "playing"; no double-report here.
+    } catch (err) {
+      this.host.onError(`play() failed: ${err}`);
+    }
+  }
+
+  async pause(): Promise<void> {
+    this.element?.pause();
+  }
+
+  async toggle(): Promise<boolean> {
+    const el = this.element;
+    if (!el) return false;
+    if (el.paused) {
+      await this.play();
+      return true;
+    }
+    await this.pause();
+    return false;
+  }
+
+  /**
+   * PRIMITIVE: in-place element seek (no reload). The backend already decided
+   * this seek does not need a transcode reload.
+   */
+  async seekElement(positionSeconds: number, offset: number): Promise<void> {
+    const el = this.element;
+    if (!el) return;
+    el.currentTime = positionSeconds;
+    this.bridge.setSeekOffset(offset);
+    await this.waitForEvent(el, "seeked", 2000);
+  }
+
+  /**
+   * PRIMITIVE: compound reload — the invariant HTML5 sequence to swap the source
+   * and resume at `offset`. Contains NO strategy decision; the backend already
+   * decided to reload and supplied the url/offset. Preserves the hard-won
+   * dual-audio teardown and canplay wait.
+   */
+  async reloadSource(url: string, offset: number): Promise<void> {
+    const el = this.element;
+    if (!el) {
+      // Still update the stream URL so the component's HLS $effect can pick it up.
+      this.bridge.setSeekOffset(offset);
+      this.bridge.setStreamUrl(url);
+      return;
+    }
+    const wasPlaying = !el.paused;
+    el.pause();
+    this.bridge.destroyHls();
+    if (el.src) {
+      el.removeAttribute("src");
+      el.load();
+    }
+    await new Promise((r) => setTimeout(r, 100));
+    this.bridge.setSeekOffset(offset);
+    this.bridge.setStreamUrl(url);
+    await this.waitForEvent(el, "canplay", 10000);
+    if (wasPlaying) await el.play();
+  }
+
+  setVolume(volume: number): void {
+    if (this.element) this.element.volume = Math.max(0, Math.min(1, volume));
+  }
+
+  setMuted(muted: boolean): void {
+    if (this.element) this.element.muted = muted;
+  }
+
+  /** Subtitle selection: HTML5 toggles textTracks on the element directly. */
+  async selectSubtitle(streamIndex: number | null, _arrayIndex?: number): Promise<void> {
+    const el = this.element;
+    if (!el || !el.textTracks) return;
+    for (let i = 0; i < el.textTracks.length; i++) {
+      el.textTracks[i].mode = "disabled";
+    }
+    if (streamIndex !== null) {
+      const tracks = el.querySelectorAll("track");
+      tracks.forEach((track) => {
+        const idx = parseInt(track.getAttribute("data-stream-index") || "-1");
+        if (idx === streamIndex && track.track) {
+          track.track.mode = "showing";
+        }
+      });
+    }
+  }
+
+  getPosition(): number {
+    const el = this.element;
+    if (!el) return 0;
+    return el.currentTime + this.bridge.getSeekOffset();
+  }
+
+  async dispose(): Promise<void> {
+    this.bridge.destroyHls();
+    const el = this.element;
+    if (el) {
+      el.pause();
+      el.removeAttribute("src");
+      el.load();
+    }
+    this.attachedElement = null;
+  }
+
+  /** Resolve when `event` fires on `el`, or after `timeoutMs` as a fallback. */
+  private waitForEvent(el: HTMLVideoElement, event: string, timeoutMs: number): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const done = () => {
+        el.removeEventListener(event, done);
+        resolve();
+      };
+      el.addEventListener(event, done);
+      setTimeout(done, timeoutMs);
+    });
+  }
+}

src/lib/player/adapters/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Player adapter factory + public exports.
+ *
+ * `createAdapter` selects the concrete PlayerAdapter for the current platform.
+ * It is the single place that encodes the INTERIM Android override: the Rust
+ * backend may report a native ExoPlayer backend, but native Android video
+ * rendering is blocked upstream (tauri#10152 — transparent webview / SurfaceView
+ * compositing), so we render Android video through the HTML5 adapter for now.
+ * When that upstream limitation is resolved, flip this to honor `backendKind`.
+ *
+ * TRACES: UR-003 | DR-004
+ */
+
+import { Html5PlayerAdapter, type Html5ElementBridge } from "./html5Adapter";
+import { NativePlayerAdapter } from "./nativeAdapter";
+import type { AdapterHost, PlayerAdapter } from "./types";
+
+export type { PlayerAdapter, AdapterHost, PlayerLoadOptions, SubtitleTrackInput } from "./types";
+export type { Html5ElementBridge } from "./html5Adapter";
+export { Html5PlayerAdapter } from "./html5Adapter";
+export { NativePlayerAdapter } from "./nativeAdapter";
+
+/** What the Rust `player_play_item` response says it chose. */
+export type BackendKind = "html5" | "native";
+
+export interface CreateAdapterArgs {
+  /** Backend kind reported by `player_play_item` (`useHtml5Element`). */
+  backendKind: BackendKind;
+  host: AdapterHost;
+  /** Required for the HTML5 adapter; ignored by the native adapter. */
+  bridge?: Html5ElementBridge;
+}
+
+/**
+ * Build the adapter for this platform/stream.
+ *
+ * INTERIM: always returns the HTML5 adapter, because the native surface is not
+ * visible through the webview on current Tauri (see module docs). The bridge is
+ * therefore required.
+ */
+export function createAdapter({ backendKind, host, bridge }: CreateAdapterArgs): PlayerAdapter {
+  // INTERIM OVERRIDE: force HTML5 rendering even when the backend reports native.
+  const effectiveKind: BackendKind = "html5";
+
+  if (effectiveKind === "html5") {
+    if (!bridge) {
+      throw new Error("createAdapter: Html5ElementBridge is required for the HTML5 adapter");
+    }
+    return new Html5PlayerAdapter(host, bridge);
+  }
+
+  // Reached only once the interim override is lifted (native Android unblocked).
+  void backendKind;
+  return new NativePlayerAdapter(host);
+}

src/lib/player/adapters/nativeAdapter.test.ts

@@ -0,0 +1,88 @@
+/**
+ * Unit tests for NativePlayerAdapter — thin delegate to backend commands.
+ * Pins the primitive→command mapping so the ExoPlayer path stays correct.
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const playerPlay = vi.fn((..._a: any[]): any => ({}));
+const playerPause = vi.fn((..._a: any[]): any => ({}));
+const playerToggle = vi.fn((..._a: any[]): any => ({ state: "playing" }));
+const playerSetVolume = vi.fn((..._a: any[]): any => ({}));
+const playerToggleMute = vi.fn((..._a: any[]): any => ({}));
+const playerSetSubtitleTrack = vi.fn((..._a: any[]): any => ({}));
+
+vi.mock("$lib/api/bindings", () => ({
+  commands: {
+    playerPlay: (...a: any[]) => playerPlay(...a),
+    playerPause: (...a: any[]) => playerPause(...a),
+    playerToggle: (...a: any[]) => playerToggle(...a),
+    playerSetVolume: (...a: any[]) => playerSetVolume(...a),
+    playerToggleMute: (...a: any[]) => playerToggleMute(...a),
+    playerSetSubtitleTrack: (...a: any[]) => playerSetSubtitleTrack(...a),
+  },
+}));
+
+import { NativePlayerAdapter } from "./nativeAdapter";
+import type { AdapterHost } from "./types";
+
+function makeHost(): AdapterHost {
+  return {
+    onState: vi.fn(), onPosition: vi.fn(), onMediaLoaded: vi.fn(), onEnded: vi.fn(),
+    onError: vi.fn(), onStreamUrlChanged: vi.fn(), onBuffering: vi.fn(), onReady: vi.fn(),
+  };
+}
+
+describe("NativePlayerAdapter", () => {
+  let adapter: NativePlayerAdapter;
+  beforeEach(() => {
+    vi.clearAllMocks();
+    adapter = new NativePlayerAdapter(makeHost());
+  });
+
+  it("is a native-kind adapter", () => {
+    expect(adapter.kind).toBe("native");
+  });
+
+  it("delegates play/pause to backend commands", async () => {
+    await adapter.play();
+    await adapter.pause();
+    expect(playerPlay).toHaveBeenCalledTimes(1);
+    expect(playerPause).toHaveBeenCalledTimes(1);
+  });
+
+  it("toggle() reflects the backend's resulting playing state", async () => {
+    expect(await adapter.toggle()).toBe(true);
+    expect(playerToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it("records position on seek/reload primitives (backend does the real work)", async () => {
+    await adapter.seekElement(55, 0);
+    expect(adapter.getPosition()).toBe(55);
+    await adapter.reloadSource("ignored", 200);
+    expect(adapter.getPosition()).toBe(200);
+  });
+
+  it("load() seeds a resume position", async () => {
+    await adapter.load("url", {
+      mediaId: "m", mediaSourceId: null, needsTranscoding: false,
+      initialPosition: 90, isLive: false, audioTrackIndex: null,
+      knownDuration: 0, subtitleTracks: [],
+    });
+    expect(adapter.getPosition()).toBe(90);
+  });
+
+  it("setVolume clamps and delegates; setMuted toggles mute", () => {
+    adapter.setVolume(2);
+    expect(playerSetVolume).toHaveBeenCalledWith(1);
+    adapter.setMuted(true);
+    expect(playerToggleMute).toHaveBeenCalledTimes(1);
+  });
+
+  it("selectSubtitle maps null to disable and uses arrayIndex when given", async () => {
+    await adapter.selectSubtitle(null);
+    expect(playerSetSubtitleTrack).toHaveBeenCalledWith(null);
+    await adapter.selectSubtitle(5, 2);
+    expect(playerSetSubtitleTrack).toHaveBeenCalledWith(2);
+  });
+});

src/lib/player/adapters/nativeAdapter.ts

@@ -0,0 +1,96 @@
+/**
+ * NativePlayerAdapter — the Android/ExoPlayer PlayerAdapter implementation.
+ *
+ * ExoPlayer is driven entirely by the Rust backend (JNI), which already emits
+ * PlayerStatusEvents and handles seek/audio-track internally. So this adapter is
+ * a thin delegate to backend commands; there is no DOM element to touch and no
+ * hls.js. State reporting is unnecessary here because the native backend emits
+ * events directly — the adapter's job is only to forward control intents.
+ *
+ * NOTE: On current Tauri, native Android video rendering is blocked upstream
+ * (transparent webview / SurfaceView compositing — tauri#10152), so video on
+ * Android currently runs through the HTML5 adapter via the interim override in
+ * the factory. This adapter exists for the audio/native path and for when that
+ * upstream limitation is resolved.
+ *
+ * TRACES: UR-003, UR-005 | DR-004, DR-028
+ */
+
+import { commands } from "$lib/api/bindings";
+import type { AdapterHost, PlayerAdapter, PlayerLoadOptions } from "./types";
+
+export class NativePlayerAdapter implements PlayerAdapter {
+  readonly kind = "native" as const;
+
+  // Kept for symmetry / future reporting needs; the native backend emits events.
+  private host: AdapterHost;
+  private position = 0;
+
+  constructor(host: AdapterHost) {
+    this.host = host;
+  }
+
+  // The native surface is owned by the backend; nothing to attach in the DOM.
+  attach(_element: HTMLVideoElement | null): void {}
+
+  async load(_streamUrl: string, options: PlayerLoadOptions): Promise<void> {
+    // player_play_item already initiated native playback before this adapter is
+    // created; nothing further to do. Seed a resume position if requested (the
+    // native backend performs the actual seek internally).
+    if (options.initialPosition > 0) {
+      this.position = options.initialPosition;
+    }
+  }
+
+  async play(): Promise<void> {
+    await commands.playerPlay();
+  }
+
+  async pause(): Promise<void> {
+    await commands.playerPause();
+  }
+
+  async toggle(): Promise<boolean> {
+    const response = (await commands.playerToggle()) as any;
+    return response?.state === "playing";
+  }
+
+  /**
+   * PRIMITIVE: in-place seek. For the native backend, the backend drives
+   * ExoPlayer's seek internally, so this simply records the target position.
+   * (The decision to seek-in-place vs reload was already made by the backend.)
+   */
+  async seekElement(positionSeconds: number, _offset: number): Promise<void> {
+    this.position = positionSeconds;
+  }
+
+  /**
+   * PRIMITIVE: reload source. For the native backend the backend already
+   * performed the reload+seek internally as part of the seek decision; nothing
+   * to do on the frontend beyond recording position.
+   */
+  async reloadSource(_url: string, offset: number): Promise<void> {
+    this.position = offset;
+  }
+
+  setVolume(volume: number): void {
+    void commands.playerSetVolume(Math.max(0, Math.min(1, volume)));
+  }
+
+  setMuted(_muted: boolean): void {
+    void commands.playerToggleMute();
+  }
+
+  async selectSubtitle(streamIndex: number | null, arrayIndex?: number): Promise<void> {
+    const indexToUse = streamIndex === null ? null : arrayIndex ?? streamIndex;
+    await commands.playerSetSubtitleTrack(indexToUse);
+  }
+
+  getPosition(): number {
+    return this.position;
+  }
+
+  async dispose(): Promise<void> {
+    // The backend is stopped via player_stop by the owning view; nothing to free.
+  }
+}

src/lib/player/adapters/rustReportHost.ts

@@ -0,0 +1,93 @@
+/**
+ * An {@link AdapterHost} implementation that forwards a player adapter's outward
+ * lifecycle events into the Rust `PlayerController` via the `player_report_*`
+ * commands. The controller re-emits the same `PlayerStatusEvent`s the native
+ * backends emit, so the frontend `player` store is fed from ONE pipeline
+ * (playerEvents.ts) in both native and HTML5 modes — keeping Rust the single
+ * source of truth.
+ *
+ * This is the sole place that talks to the report commands; adapters depend only
+ * on the {@link AdapterHost} interface, never on `commands` directly, which keeps
+ * them unit-testable with a mock host.
+ *
+ * TRACES: UR-003, UR-005 | DR-001, DR-028
+ */
+
+import { commands } from "$lib/api/bindings";
+import type { AdapterHost } from "./types";
+
+const POSITION_REPORT_INTERVAL_MS = 250;
+
+/** Report options that let a caller bypass throttling for discrete events. */
+export interface ReportPositionOptions {
+  force?: boolean;
+}
+
+/**
+ * Low-level report helpers, exported so the legacy `$lib/player/html5Adapter`
+ * shim can keep its function-style API while there are still direct callers.
+ * Prefer {@link createRustReportHost} for new adapter code.
+ */
+let lastPositionReport = 0;
+
+export async function reportState(
+  state: "playing" | "paused" | "loading" | "stopped" | "idle",
+  mediaId: string | null
+): Promise<void> {
+  try {
+    await commands.playerReportState(state, mediaId);
+  } catch (err) {
+    console.warn("[rustReportHost] Failed to report state:", err);
+  }
+}
+
+export async function reportPosition(
+  position: number,
+  duration: number,
+  { force = false }: ReportPositionOptions = {}
+): 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("[rustReportHost] Failed to report position:", err);
+  }
+}
+
+export async function reportMediaLoaded(duration: number): Promise<void> {
+  try {
+    await commands.playerReportMediaLoaded(Number.isFinite(duration) ? duration : 0);
+  } catch (err) {
+    console.warn("[rustReportHost] Failed to report media loaded:", err);
+  }
+}
+
+export function resetReporting(): void {
+  lastPositionReport = 0;
+}
+
+/**
+ * Build an {@link AdapterHost} bound to a specific media id that forwards adapter
+ * events to Rust. `onStreamUrlChanged`, `onBuffering`, and `onReady` are wired by
+ * the owning view (they affect the `<video src>` / spinner), so this host accepts
+ * optional view callbacks and defaults them to no-ops.
+ */
+export function createRustReportHost(
+  mediaId: string,
+  view: Partial<Pick<AdapterHost, "onStreamUrlChanged" | "onBuffering" | "onReady" | "onEnded" | "onError">> = {}
+): AdapterHost {
+  return {
+    onState: (state) => void reportState(state, mediaId),
+    onPosition: (position, duration) => void reportPosition(position, duration),
+    onMediaLoaded: (duration) => void reportMediaLoaded(duration),
+    onEnded: view.onEnded ?? (() => {}),
+    onError: view.onError ?? ((message) => console.warn("[rustReportHost] adapter error:", message)),
+    onStreamUrlChanged: view.onStreamUrlChanged ?? (() => {}),
+    onBuffering: view.onBuffering ?? (() => {}),
+    onReady: view.onReady ?? (() => {}),
+  };
+}

src/lib/player/adapters/types.ts

@@ -0,0 +1,127 @@
+/**
+ * PlayerAdapter contract — the decoupled boundary between the UI/backend and a
+ * concrete video player implementation (Linux HTML5+hls.js, or Android native).
+ *
+ * The whole point: UI components and the Rust backend interact with video ONLY
+ * through this interface. All element / hls.js / ExoPlayer / textTracks detail —
+ * and the backend seek/audio-track *strategy* round-trip — is internal to an
+ * implementation. A control intent (from UI or a backend lockscreen/remote/sleep
+ * event) reaches the element by the facade dispatching to the active adapter.
+ *
+ * State flows OUTWARD through the {@link AdapterHost} callback bag rather than the
+ * adapter importing stores/commands directly — this keeps adapters unit-testable
+ * with a mock host and keeps the reporting-to-Rust wiring in one place.
+ *
+ * TRACES: UR-003, UR-005, UR-020, UR-021 | DR-001, DR-023, DR-024, DR-028
+ */
+
+/** A subtitle track handed to the adapter at load time (WebVTT for HTML5). */
+export interface SubtitleTrackInput {
+  index: number;
+  url: string;
+  language: string | null;
+  label: string;
+  mimeType: string;
+}
+
+/** Everything an adapter needs to load and begin a stream. */
+export interface PlayerLoadOptions {
+  /** Jellyfin item id — used as the media_id when reporting state to Rust. */
+  mediaId: string;
+  /** Media source id for subtitle/seek URLs (null for local/direct). */
+  mediaSourceId: string | null;
+  /** HEVC/10-bit content that needs server transcoding (affects seek strategy). */
+  needsTranscoding: boolean;
+  /** Resume position in seconds (0 = start from beginning). */
+  initialPosition: number;
+  /** Live stream — no seek bar, no resume, no progress reporting. */
+  isLive: boolean;
+  /** Preselected audio track stream index, or null for the default. */
+  audioTrackIndex: number | null;
+  /** Known total duration in seconds (from runTimeTicks), or 0 if unknown. */
+  knownDuration: number;
+  /** Subtitle tracks available for this media. */
+  subtitleTracks: SubtitleTrackInput[];
+}
+
+/**
+ * Callback bag the adapter uses to report the element's lifecycle outward. The
+ * facade supplies an implementation that forwards to Rust (via the
+ * `player_report_*` commands) and, where needed, to the UI.
+ */
+export interface AdapterHost {
+  /** Playback state changed (playing/paused/loading/stopped/idle). */
+  onState(state: "playing" | "paused" | "loading" | "stopped" | "idle"): void;
+  /** Position/duration tick (adapter throttles; host forwards to Rust). */
+  onPosition(position: number, duration: number): void;
+  /** Media finished loading and knows its duration. */
+  onMediaLoaded(duration: number): void;
+  /** Playback reached the natural end of the stream (fires at most once). */
+  onEnded(): void;
+  /** A non-fatal or fatal playback error occurred. */
+  onError(message: string): void;
+  /**
+   * The stream URL the adapter is now playing changed (e.g. transcode reload on
+   * seek/audio-track switch). Lets the owning view keep its `<video src>` in sync.
+   */
+  onStreamUrlChanged(url: string): void;
+  /** Buffering/ready transitions, so the view can show/hide its spinner. */
+  onBuffering(isBuffering: boolean): void;
+  onReady(): void;
+}
+
+/**
+ * One concrete player implementation per platform. Methods are high-level
+ * intents; strategy objects, hls instances, and textTracks never cross this line.
+ */
+export interface PlayerAdapter {
+  /** Which platform backend this adapter represents. */
+  readonly kind: "html5" | "native";
+
+  /**
+   * Bind the output target. For the HTML5 adapter this is the `<video>` element
+   * (pass null on teardown); the native adapter ignores it (ExoPlayer renders to
+   * its own surface).
+   */
+  attach(element: HTMLVideoElement | null): void;
+
+  /** Load a stream and begin playback at `options.initialPosition`. */
+  load(streamUrl: string, options: PlayerLoadOptions): Promise<void>;
+
+  play(): Promise<void>;
+  pause(): Promise<void>;
+  /** Toggle play/pause; resolves to the resulting playing state. */
+  toggle(): Promise<boolean>;
+
+  // --- Seek/reload PRIMITIVES (decision-free) ---------------------------------
+  // The backend DECIDES whether a seek is an in-place element seek or a full
+  // source reload (transcode). The adapter only executes the chosen primitive;
+  // it contains no strategy branch. This is what keeps the decision logic shared
+  // in Rust (Option 1).
+
+  /**
+   * In-place seek of the already-loaded source (no reload). `offset` is the
+   * transcode seek offset the element position is relative to (0 for direct).
+   */
+  seekElement(positionSeconds: number, offset: number): Promise<void>;
+
+  /**
+   * Compound reload: swap to `url` and resume at `offset` seconds. Runs the
+   * invariant mechanical sequence for this platform (html5: pause → hls teardown
+   * → clear src → set new url → wait ready → resume; native: ExoPlayer setMediaItem
+   * + seekTo). No decision is made here — the backend already decided to reload.
+   */
+  reloadSource(url: string, offset: number): Promise<void>;
+
+  setVolume(volume: number): void; // 0..1
+  setMuted(muted: boolean): void;
+
+  /** Enable a subtitle track (null disables) — DOM textTracks is a webview primitive. */
+  selectSubtitle(streamIndex: number | null, arrayIndex?: number): Promise<void>;
+
+  /** Current position in seconds (adapter's own truth, e.g. element.currentTime + offset). */
+  getPosition(): number;
+
+  /** Tear down: destroy hls, detach element, stop reporting. Idempotent. */
+  dispose(): Promise<void>;
+}

src/lib/player/html5Adapter.ts

@@ -0,0 +1,19 @@
+/**
+ * Compatibility shim.
+ *
+ * The HTML5 → Rust reporting functions moved to `adapters/rustReportHost.ts` as
+ * part of the PlayerAdapter refactor. Existing callers import the reporter as
+ * `import * as html5Adapter from "$lib/player/html5Adapter"`; this shim keeps
+ * that working while the migration proceeds. New adapter code should depend on
+ * the `AdapterHost` interface (see `adapters/types.ts`) instead.
+ */
+
+export {
+  reportState,
+  reportPosition,
+  reportMediaLoaded,
+  resetReporting,
+} from "./adapters/rustReportHost";
+
+/** @deprecated states are defined on the AdapterHost interface now. */
+export type Html5PlayerState = "playing" | "paused" | "loading" | "stopped" | "idle";

src/lib/player/index.ts

@@ -0,0 +1,334 @@
+/**
+ * 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";
+import type { PlayerAdapter } from "./adapters/types";
+
+// ---------------------------------------------------------------------------
+// Active player adapter registry
+//
+// When a video is playing, VideoPlayer registers its PlayerAdapter here so that
+// control intents — whether from UI or routed from a backend control event
+// (lockscreen/remote/sleep-timer) — reach the actual player element/surface.
+// When no adapter is registered (audio-only playback), control falls through to
+// the queue-level backend commands, which is the correct behavior there.
+// ---------------------------------------------------------------------------
+let activeAdapter: PlayerAdapter | null = null;
+
+function setActiveAdapter(adapter: PlayerAdapter): void {
+  activeAdapter = adapter;
+}
+
+function clearActiveAdapter(adapter?: PlayerAdapter): void {
+  // Only clear if it's still the one we think is active (guards against a newly
+  // mounted player's adapter being cleared by the outgoing player's teardown).
+  if (!adapter || activeAdapter === adapter) {
+    activeAdapter = null;
+  }
+}
+
+function getActiveAdapter(): PlayerAdapter | null {
+  return activeAdapter;
+}
+
+/**
+ * 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 {
+  // The repository is the source of truth for the handle. We consult the auth
+  // store's isAuthenticated flag only as a best-effort guard — guarded in a
+  // try/catch so a not-yet-subscribable store (or a test double) can't block a
+  // valid repository handle.
+  try {
+    const authState = get(auth);
+    if (authState && authState.isAuthenticated === false) {
+      throw new Error("User not authenticated");
+    }
+  } catch (err) {
+    // get(auth) failed (e.g. non-store mock) — fall through to the repository,
+    // which is the authoritative source of the handle.
+    if (err instanceof Error && err.message === "User not authenticated") throw err;
+  }
+  const repo = auth.getRepository();
+  if (!repo) {
+    throw new Error("No repository available");
+  }
+  return repo.getHandle();
+}
+
+// ---------------------------------------------------------------------------
+// Transport controls (no repository handle required)
+// ---------------------------------------------------------------------------
+
+async function play() {
+  if (activeAdapter) return void (await activeAdapter.play());
+  await commands.playerPlay();
+}
+
+async function pause() {
+  if (activeAdapter) return void (await activeAdapter.pause());
+  await commands.playerPause();
+}
+
+async function toggle() {
+  if (activeAdapter) return void (await activeAdapter.toggle());
+  await commands.playerToggle();
+}
+
+async function stop() {
+  // Stop is a queue/session-level action (clears playback); always go to backend.
+  // The adapter is disposed by VideoPlayer's own teardown.
+  await commands.playerStop();
+}
+
+async function seek(positionSeconds: number) {
+  // Audio path: backend seeks the native backend directly.
+  if (!activeAdapter) {
+    await commands.playerSeek(positionSeconds);
+    return;
+  }
+  // Video path: ask the backend to DECIDE the strategy (in-place vs reload), then
+  // execute the matching adapter primitive. The decision logic stays in Rust
+  // (player_seek_video); the adapter only runs the chosen mechanical primitive.
+  await seekVideo(positionSeconds, null, null);
+}
+
+/**
+ * Video seek: backend decides strategy, facade dispatches the chosen adapter
+ * primitive. `mediaSourceId`/`audioTrackIndex` come from the video view (they are
+ * needed for the transcode reload URL). Requires an active video adapter.
+ */
+async function seekVideo(
+  positionSeconds: number,
+  mediaSourceId: string | null,
+  audioTrackIndex: number | null
+): Promise<void> {
+  const adapter = activeAdapter;
+  if (!adapter) {
+    await commands.playerSeek(positionSeconds);
+    return;
+  }
+  const response = (await commands.playerSeekVideo(
+    requireHandle(),
+    positionSeconds,
+    mediaSourceId,
+    audioTrackIndex,
+    adapter.kind === "html5"
+  )) as any;
+  // Serde keeps these snake_case (only the "strategy" tag is camelCase).
+  if (response.strategy === "reloadStream") {
+    await adapter.reloadSource(response.new_url ?? "", response.seek_offset ?? positionSeconds);
+  } else {
+    await adapter.seekElement(response.position ?? positionSeconds, 0);
+  }
+}
+
+/**
+ * Switch audio track: backend decides (may reload the stream), facade dispatches
+ * the resulting primitive. Requires an active video adapter.
+ */
+async function switchAudioTrack(
+  streamIndex: number,
+  arrayIndex: number,
+  currentPosition: number | null,
+  mediaSourceId: string | null
+): Promise<void> {
+  const adapter = activeAdapter;
+  if (!adapter) return;
+  const response = (await commands.playerSwitchAudioTrack(
+    requireHandle(),
+    streamIndex,
+    arrayIndex,
+    adapter.kind === "html5",
+    currentPosition,
+    mediaSourceId
+  )) as any;
+  if (response.strategy === "reloadStream") {
+    await adapter.reloadSource(response.new_url!, response.position!);
+  }
+}
+
+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) {
+  if (activeAdapter) activeAdapter.setVolume(volume);
+  await commands.playerSetVolume(volume);
+}
+
+async function toggleMute() {
+  await commands.playerToggleMute();
+}
+
+// ---------------------------------------------------------------------------
+// Track selection (video) — dispatch to the active video adapter when present
+// ---------------------------------------------------------------------------
+
+async function setSubtitleTrack(streamIndex: number | null) {
+  if (activeAdapter) return void (await activeAdapter.selectSubtitle(streamIndex));
+  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,
+  seekVideo,
+  switchAudioTrack,
+  playTracks,
+  playAlbumTrack,
+  playItem,
+  addTrackById,
+  addTracksByIds,
+  // Active-adapter registry (used by VideoPlayer to register its element adapter
+  // and by playerEvents.ts to route backend control commands to it).
+  setActiveAdapter,
+  clearActiveAdapter,
+  getActiveAdapter,
+};
+
+// ---------------------------------------------------------------------------
+// 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/lib/services/favorites.ts

@@ -1,8 +1,10 @@
 // Favorites service - Handles toggling favorite status with optimistic updates
 // TRACES: UR-017 | DR-021
 
+import { get } from "svelte/store";
 import { commands } from "$lib/api/bindings";
 import { auth } from "$lib/stores/auth";
+import { isConnected } from "$lib/stores/connectivity";
 
 /**
  * Toggle the favorite status of an item.
@@ -31,21 +33,31 @@ export async function toggleFavorite(
   // 1. Update local database first (optimistic update)
   await commands.storageToggleFavorite(userId, itemId, newIsFavorite);
 
-  // 2. Sync to Jellyfin server
+  // 2. Sync to Jellyfin server.
-  try {
+  //
-    const repo = auth.getRepository();
+  // Only attempt this when we're actually connected. When offline, the server
-    if (newIsFavorite) {
+  // call can hang on a long network timeout rather than failing fast — which
-      await repo.markFavorite(itemId);
+  // blocks the caller (and leaves the favorite button greyed out with a wait
-    } else {
+  // cursor) until the request finally gives up, effectively only recovering
-      await repo.unmarkFavorite(itemId);
+  // once we're back online. The local DB write above keeps the pending_sync
-    }
+  // flag set, so the change still syncs later; we just don't block the UI on
+  // an unreachable server here.
+  if (get(isConnected)) {
+    try {
+      const repo = auth.getRepository();
+      if (newIsFavorite) {
+        await repo.markFavorite(itemId);
+      } else {
+        await repo.unmarkFavorite(itemId);
+      }
 
-    // 3. Mark as synced
+      // 3. Mark as synced
-    await commands.storageMarkSynced(userId, itemId);
+      await commands.storageMarkSynced(userId, itemId);
-  } catch (error) {
+    } catch (error) {
-    console.error("Failed to sync favorite to server:", error);
+      console.error("Failed to sync favorite to server:", error);
-    // Favorite is stored locally and will be synced later
+      // Favorite is stored locally and will be synced later
-    // via sync queue (when implemented)
+      // via sync queue (when implemented)
+    }
   }
 
   return newIsFavorite;

src/lib/services/offlineCatalog.ts

@@ -0,0 +1,102 @@
+// Offline catalog service - "browse & queue" for offline mode.
+//
+// Two responsibilities:
+//  1. Full-catalog pre-sync: while online, walk every library and persist all
+//     items to the offline cache so the whole catalog is browsable (greyed out)
+//     offline. Backed by the `syncFullCatalog` Rust command.
+//  2. Resume-on-reconnect: when the server becomes reachable again, resolve the
+//     stream URLs of downloads that were queued while offline and let the pump
+//     start them. Backed by `resumeQueuedDownloads`.
+//
+// It also owns the `showServerCatalog` UI flag (the offline banner toggle that
+// reveals greyed-out, non-downloaded server media).
+//
+// TRACES: UR-002
+
+import { writable, type Writable } from "svelte/store";
+import { commands } from "$lib/api/bindings";
+import { auth } from "$lib/stores/auth";
+
+/**
+ * When true (and offline), library grids reveal greyed-out versions of media
+ * that exists on the server but isn't downloaded, each with a button to queue
+ * a download for the next reconnect. Toggled from the offline banner.
+ */
+export const showServerCatalog: Writable<boolean> = writable(false);
+
+/** Last time a full catalog sync completed, for a UI hint. */
+export const lastCatalogSync: Writable<string | null> = writable(null);
+
+// Guard against overlapping syncs (they can be slow on large libraries).
+let syncInProgress = false;
+
+function currentHandle(): string | null {
+  try {
+    return auth.getRepository().getHandle();
+  } catch {
+    return null; // not connected yet
+  }
+}
+
+/**
+ * Walk every library and cache the full catalog. Best-effort and non-blocking:
+ * safe to call on startup (while online) and on reconnect. No-ops if not
+ * connected or a sync is already running.
+ */
+export async function syncCatalog(): Promise<void> {
+  if (syncInProgress) return;
+  const handle = currentHandle();
+  if (!handle) return;
+
+  syncInProgress = true;
+  try {
+    const result = await commands.syncFullCatalog(handle);
+    console.info(
+      `[OfflineCatalog] Synced ${result.itemsCached} items (${result.librariesFailed} libraries failed)`
+    );
+    await refreshSyncStatus();
+  } catch (err) {
+    console.warn("[OfflineCatalog] Full catalog sync failed:", err);
+  } finally {
+    syncInProgress = false;
+  }
+}
+
+/**
+ * Resolve URLs for downloads queued while offline and pump them. Call on
+ * reconnect. No-ops if not connected.
+ */
+export async function resumeQueued(): Promise<void> {
+  const handle = currentHandle();
+  if (!handle) return;
+  try {
+    const result = await commands.resumeQueuedDownloads(handle);
+    if (result.resolved > 0 || result.failed > 0) {
+      console.info(
+        `[OfflineCatalog] Resumed queued downloads: ${result.resolved} resolved, ${result.failed} failed`
+      );
+    }
+  } catch (err) {
+    console.warn("[OfflineCatalog] Failed to resume queued downloads:", err);
+  }
+}
+
+/** Refresh the last-synced timestamp from the backend. */
+export async function refreshSyncStatus(): Promise<void> {
+  try {
+    const status = await commands.catalogSyncStatus();
+    lastCatalogSync.set(status.lastSyncedAt ?? null);
+  } catch (err) {
+    console.debug("[OfflineCatalog] Failed to fetch sync status:", err);
+  }
+}
+
+/**
+ * Called when the server becomes reachable again: resume queued downloads first
+ * (fast, user-visible), then refresh the catalog in the background.
+ */
+export async function onReconnected(): Promise<void> {
+  await resumeQueued();
+  // Fire-and-forget: don't block reconnection handling on a potentially long walk.
+  void syncCatalog();
+}

src/lib/services/playerEvents.regression.test.ts

@@ -0,0 +1,147 @@
+/**
+ * Player Events Service — regression tests
+ *
+ * These tests intentionally use the REAL player store (and its real derived
+ * stores), unlike playerEvents.test.ts which mocks the store away. The bugs
+ * covered here live in the interaction between the event handler and the
+ * store's position/duration fields, so a mocked store cannot catch them.
+ *
+ * TRACES: UR-005 | DR-001
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { get, writable } from "svelte/store";
+import type { MediaItem } from "$lib/api/types";
+import type { PlayerStatusEvent } from "$lib/api/bindings";
+
+// Capture the handler that initPlayerEvents registers so we can drive events
+// directly, exactly as the Tauri event bridge would.
+let registeredHandler: ((event: { payload: PlayerStatusEvent }) => void) | null = null;
+
+vi.mock("@tauri-apps/api/event", () => ({
+  listen: vi.fn(async (_event: string, handler: any) => {
+    registeredHandler = handler;
+    return () => {};
+  }),
+}));
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: vi.fn(),
+}));
+
+// The current queue item is what handleStateChanged seeds playing/paused state
+// from. Back it with a writable so each test can install its own item.
+const currentQueueItemStore = writable<MediaItem | null>(null);
+vi.mock("$lib/stores/queue", () => ({
+  queue: { subscribe: vi.fn() },
+  currentQueueItem: { subscribe: (run: any) => currentQueueItemStore.subscribe(run) },
+}));
+
+// Keep the player in local mode so events aren't skipped as remote.
+// playerEvents.ts reads `get(playbackMode)` (.mode/.isTransferring) and player.ts
+// imports `isRemoteMode` from the same module — provide both.
+vi.mock("$lib/stores/playbackMode", () => ({
+  playbackMode: {
+    setMode: vi.fn(),
+    initializeSessionMonitoring: vi.fn(),
+    subscribe: (run: any) => {
+      run({ mode: "local", isTransferring: false });
+      return () => {};
+    },
+  },
+  isRemoteMode: { subscribe: (run: any) => (run(false), () => {}) },
+}));
+
+// Remote-mode merged stores in player.ts read this; stub as no remote session.
+vi.mock("$lib/stores/sessions", () => ({
+  selectedSession: { subscribe: (run: any) => (run(null), () => {}) },
+}));
+
+vi.mock("$lib/stores/sleepTimer", () => ({
+  sleepTimer: { set: vi.fn() },
+}));
+
+vi.mock("$lib/stores/nextEpisode", () => ({
+  nextEpisode: { showPopup: vi.fn(), updateCountdown: vi.fn() },
+}));
+
+vi.mock("$lib/services/preload", () => ({
+  preloadUpcomingTracks: vi.fn().mockResolvedValue(undefined),
+}));
+
+function makeItem(overrides: Partial<MediaItem> = {}): MediaItem {
+  return {
+    id: "track-1",
+    name: "Test Track",
+    type: "Audio",
+    runTimeTicks: null,
+    ...overrides,
+  } as MediaItem;
+}
+
+async function fire(event: PlayerStatusEvent): Promise<void> {
+  if (!registeredHandler) throw new Error("handler not registered");
+  await registeredHandler({ payload: event });
+  // Let any async work inside the handler settle.
+  await Promise.resolve();
+}
+
+describe("Player Events — pause must not zero the slider duration", () => {
+  beforeEach(async () => {
+    // initPlayerEvents is a singleton; reset it so each test re-registers its
+    // own handler and starts from idle player state.
+    const { cleanupPlayerEvents } = await import("./playerEvents");
+    const { player } = await import("$lib/stores/player");
+    cleanupPlayerEvents();
+    player.setIdle();
+    vi.clearAllMocks();
+    registeredHandler = null;
+    currentQueueItemStore.set(null);
+  });
+
+  it("preserves the live duration across pause when runTimeTicks is missing", async () => {
+    // runTimeTicks is null — the previous code recomputed duration as 0 here,
+    // which collapsed the slider's max and snapped the thumb to the start.
+    const item = makeItem({ runTimeTicks: null });
+    currentQueueItemStore.set(item);
+
+    const { initPlayerEvents } = await import("./playerEvents");
+    const { player, playbackDuration, playbackPosition } = await import("$lib/stores/player");
+
+    await initPlayerEvents();
+
+    // 1. Track starts playing.
+    await fire({ type: "state_changed", state: "playing", media_id: item.id });
+    // 2. Backend reports the real duration once media is loaded / position ticks.
+    await fire({ type: "position_update", position: 42, duration: 180 });
+
+    expect(get(playbackPosition)).toBe(42);
+    expect(get(playbackDuration)).toBe(180);
+
+    // 3. User pauses. Position AND duration must survive — duration is what
+    //    drives the slider's max, so a 0 here is what caused the regression.
+    await fire({ type: "state_changed", state: "paused", media_id: item.id });
+
+    expect(get(playbackPosition)).toBe(42);
+    expect(get(playbackDuration)).toBe(180);
+
+    // Sanity: the store is genuinely paused, not reset to idle/loading.
+    expect(get(player).state.kind).toBe("paused");
+  });
+
+  it("falls back to the runTimeTicks estimate when no live duration is known yet", async () => {
+    // 70s in ticks (1 tick = 100ns) → 700_000_000.
+    const item = makeItem({ runTimeTicks: 700_000_000 });
+    currentQueueItemStore.set(item);
+
+    const { initPlayerEvents } = await import("./playerEvents");
+    const { playbackDuration } = await import("$lib/stores/player");
+
+    await initPlayerEvents();
+
+    // No position_update yet, so there is no live duration to prefer.
+    await fire({ type: "state_changed", state: "paused", media_id: item.id });
+
+    expect(get(playbackDuration)).toBe(70);
+  });
+});

src/lib/services/playerEvents.ts

@@ -10,13 +10,14 @@
 
 import { type UnlistenFn } from "@tauri-apps/api/event";
 import { commands, events, type PlayerStatusEvent, type SleepTimerMode } from "$lib/api/bindings";
-import { player, playbackPosition, currentMedia } from "$lib/stores/player";
+import { player, playbackPosition, playbackDuration, currentMedia } from "$lib/stores/player";
 import { queue, currentQueueItem } from "$lib/stores/queue";
 import { playbackMode } from "$lib/stores/playbackMode";
-import { sleepTimer } from "$lib/stores/sleepTimer";
+import { sleepTimer, sleepTimerExpiredSignal } from "$lib/stores/sleepTimer";
 import { nextEpisode, nextEpisodeItem as nextEpisodeItemStore } from "$lib/stores/nextEpisode";
 import { autoPlayNext } from "$lib/services/nextEpisodeService";
 import { preloadUpcomingTracks } from "$lib/services/preload";
+import { playerController } from "$lib/player";
 import type { MediaItem } from "$lib/api/types";
 import { get } from "svelte/store";
 
@@ -113,6 +114,23 @@ function handlePlayerEvent(event: PlayerStatusEvent): void {
       handleSleepTimerChanged(event.mode, event.remaining_seconds);
       break;
 
+    case "sleep_timer_expired":
+      // Backend stops its own playback; this signal lets HTML5 video (which
+      // plays outside the backend on Linux) pause itself too.
+      // Preferred path: drive the active video adapter directly so the backend
+      // has real control authority over the webview element. The legacy
+      // sleepTimerExpiredSignal is kept for any remaining subscribers.
+      playerController.getActiveAdapter()?.pause();
+      sleepTimerExpiredSignal.update((n) => n + 1);
+      break;
+
+    case "control_command":
+      // Backend-originated control targeting the active frontend player adapter
+      // (lockscreen/remote/sleep). Route it to the adapter so a backend intent
+      // reaches the webview <video> element.
+      handleControlCommand(event.action, event.position);
+      break;
+
     case "show_next_episode_popup":
       handleShowNextEpisodePopup(
         event.current_episode,
@@ -142,6 +160,26 @@ function handlePositionUpdate(position: number, duration: number): void {
   // Note: Sleep timer logic is now handled entirely in the Rust backend
 }
 
+/**
+ * Resolve the duration to seed playing/paused state with.
+ *
+ * For the same track that is already loaded, the live store duration (kept
+ * fresh by media_loaded / position_update events) is authoritative and is
+ * preferred — falling back to the runTimeTicks estimate only when the store
+ * has no usable duration yet. This avoids clobbering a known-good duration
+ * with 0 when runTimeTicks is missing (which would zero the slider's max).
+ */
+function resolveDuration(currentItem: MediaItem, isSameTrack: boolean): number {
+  const estimate = currentItem.runTimeTicks ? currentItem.runTimeTicks / 10000000 : 0;
+  if (isSameTrack) {
+    const live = get(playbackDuration);
+    if (live > 0) {
+      return live;
+    }
+  }
+  return estimate;
+}
+
 /**
  * Handle state change events.
  *
@@ -171,7 +209,7 @@ async function handleStateChanged(state: string, _mediaId: string | null): Promi
         const previous = get(currentMedia);
         const isSameTrack = previous?.id === currentItem.id;
         const startPosition = isSameTrack ? get(playbackPosition) : 0;
-        const initialDuration = currentItem.runTimeTicks ? currentItem.runTimeTicks / 10000000 : 0;
+        const initialDuration = resolveDuration(currentItem, isSameTrack);
         player.setPlaying(currentItem, startPosition, initialDuration);
 
         // Trigger preloading of upcoming tracks in the background
@@ -180,9 +218,15 @@ async function handleStateChanged(state: string, _mediaId: string | null): Promi
           console.debug("[playerEvents] Preload failed (non-critical):", e);
         });
       } else if (state === "paused" && currentItem) {
-        // Keep current position from store
+        // Keep current position and duration from store. The same track is
+        // already loaded on pause, so its live duration (from media_loaded /
+        // position_update) is authoritative — recomputing from runTimeTicks
+        // would clobber it with 0 when runTimeTicks is missing, forcing the
+        // slider's max to 0 and flashing the thumb to the start.
+        const previous = get(currentMedia);
+        const isSameTrack = previous?.id === currentItem.id;
         const currentPosition = get(playbackPosition);
-        const initialDuration = currentItem.runTimeTicks ? currentItem.runTimeTicks / 10000000 : 0;
+        const initialDuration = resolveDuration(currentItem, isSameTrack);
         player.setPaused(currentItem, currentPosition, initialDuration);
       } else if (state === "loading" && currentItem) {
         player.setLoading(currentItem);
@@ -260,6 +304,36 @@ function handleSleepTimerChanged(mode: SleepTimerMode, remainingSeconds: number)
   sleepTimer.set({ mode, remainingSeconds });
 }
 
+/**
+ * Route a backend-originated control command to the active player adapter, so a
+ * backend intent (lockscreen/remote/sleep) can drive the webview <video> element
+ * that Rust cannot reach directly. No-op when no video adapter is active (audio
+ * playback is already fully backend-driven).
+ */
+function handleControlCommand(action: string, position: number | null): void {
+  const adapter = playerController.getActiveAdapter();
+  if (!adapter) return;
+  switch (action) {
+    case "play":
+      void adapter.play();
+      break;
+    case "pause":
+      void adapter.pause();
+      break;
+    case "seek":
+      // Backend-driven in-place seek (e.g. lockscreen scrub). The backend has
+      // already decided this is a simple position change, so use the element
+      // seek primitive with no transcode offset.
+      if (position != null) void adapter.seekElement(position, 0);
+      break;
+    case "stop":
+      void adapter.pause();
+      break;
+    default:
+      console.warn("[playerEvents] Unknown control command:", action);
+  }
+}
+
 /**
  * Handle show next episode popup event.
  *

src/lib/stores/appState.ts

@@ -9,6 +9,10 @@ export const isAndroid = writable(false);
 // Shuffle/repeat/next/previous state now lives in the event-driven queue store
 // ($lib/stores/queue), the single source of truth.
 export const showSleepTimerModal = writable(false);
+// Measured height (px) of the fixed bottom UI on Android: BottomNav stacked with
+// the global mini player. Published by the root layout via ResizeObserver so the
+// library list can reserve exactly that much bottom padding (no magic rem guesses).
+export const bottomUiHeight = writable(0);
 
 // Library-specific state
 export const librarySearchQuery = writable("");

src/lib/stores/auth.ts

@@ -201,6 +201,11 @@ function createAuthStore() {
           onServerReconnected: () => {
             // Retry session verification when server becomes reachable
             retryVerification();
+            // Resume downloads queued while offline, then refresh the catalog.
+            // Lazy import to avoid an auth <-> offlineCatalog import cycle.
+            import("$lib/services/offlineCatalog")
+              .then((m) => m.onReconnected())
+              .catch((err) => console.warn("[Auth] Catalog reconnect failed:", err));
           },
         }).catch((error) => {
           console.error("[Auth] Failed to start connectivity monitoring:", error);

src/lib/stores/home.ts

@@ -36,7 +36,10 @@ function createHomeStore() {
     try {
       const repo = auth.getRepository();
 
-      const [resume, nextUp, latest, recentAudio, resumeMovies] = await Promise.all([
+      // Use allSettled so one failing section (e.g. Next Up is online-only and
+      // rejects offline) doesn't wipe out the whole homepage. Each section falls
+      // back to an empty list; cached sections (resume/latest/recent) still show.
+      const settled = await Promise.allSettled([
         repo.getResumeItems(undefined, 12),
         repo.getNextUpEpisodes(undefined, 12),
         repo.getLatestItems("", 16),
@@ -44,6 +47,15 @@ function createHomeStore() {
         repo.getResumeMovies(12),
       ]);
 
+      const valueOr = <T>(i: number, fallback: T): T =>
+        settled[i].status === "fulfilled" ? (settled[i] as PromiseFulfilledResult<T>).value : fallback;
+
+      const resume = valueOr(0, [] as typeof initialState.resumeItems);
+      const nextUp = valueOr(1, [] as typeof initialState.nextUpItems);
+      const latest = valueOr(2, [] as typeof initialState.latestItems);
+      const recentAudio = valueOr(3, [] as typeof initialState.recentlyPlayedAudio);
+      const resumeMovies = valueOr(4, [] as typeof initialState.resumeMovies);
+
       // Use resume items or latest as hero items
       const hero = resume.length >= 3 ? resume.slice(0, 5) : latest.slice(0, 5);
 

src/lib/stores/movies.ts

@@ -4,6 +4,7 @@
 import { writable, derived } from "svelte/store";
 import type { MediaItem } from "$lib/api/types";
 import { auth } from "./auth";
+import { buildHeroMix } from "$lib/utils/heroMix";
 
 /** A single "by genre" row: the genre name plus the movies in it. */
 export interface GenreRow {
@@ -42,30 +43,9 @@ function createMoviesStore() {
 
   const { subscribe, set, update } = writable<MoviesState>(initialState);
 
-  /**
+  /** Artwork check for hero candidates: needs a backdrop or a primary image. */
-   * Build the hero rotation. Prefer in-progress movies (most personal), then
+  const hasArt = (i: MediaItem) =>
-   * fall back to recently added. De-duplicates by id and prefers items that
+    !!(i.backdropImageTags && i.backdropImageTags.length > 0) || !!i.primaryImageTag;
-   * carry backdrop/primary artwork for a good banner.
-   */
-  function buildHero(continueWatching: MediaItem[], recentlyAdded: MediaItem[]): MediaItem[] {
-    const hasArt = (i: MediaItem) =>
-      !!(i.backdropImageTags && i.backdropImageTags.length > 0) || !!i.primaryImageTag;
-
-    const result: MediaItem[] = [];
-    const seen = new Set<string>();
-
-    for (const pool of [continueWatching, recentlyAdded]) {
-      for (const item of pool) {
-        if (result.length >= 6) break;
-        if (hasArt(item) && !seen.has(item.id)) {
-          seen.add(item.id);
-          result.push(item);
-        }
-      }
-    }
-
-    return result.slice(0, 6);
-  }
 
   async function loadSections(libraryId: string) {
     update(s => ({
@@ -77,12 +57,25 @@ function createMoviesStore() {
     try {
       const repo = auth.getRepository();
 
-      const [resume, latest] = await Promise.all([
+      const [resume, latest, surprise] = await Promise.all([
         repo.getResumeMovies(SECTION_LIMIT),
         repo.getLatestItems(libraryId, SECTION_LIMIT),
+        // Random pool so the hero rotation changes between visits (SortBy=Random
+        // shuffles server-side online, and via SQLite RANDOM() offline).
+        repo
+          .getItems(libraryId, {
+            includeItemTypes: ["Movie"],
+            sortBy: "Random",
+            recursive: true,
+            limit: SECTION_LIMIT,
+          })
+          .then(r => r.items)
+          .catch(() => [] as MediaItem[]),
       ]);
 
-      const heroItems = buildHero(resume, latest);
+      // Mix the hero: in-progress movies first (most personal), then recent
+      // additions, then random picks from across the library.
+      const heroItems = buildHeroMix([resume, latest, surprise], hasArt);
 
       update(s => ({
         ...s,

src/lib/stores/music.ts

@@ -6,6 +6,7 @@ import type { MediaItem, Genre } from "$lib/api/types";
 import { auth } from "./auth";
 import { excludePodcasts } from "$lib/utils/podcastFilter";
 import { selectDiverseGenres, sampleAcross } from "$lib/utils/genreDiversity";
+import { buildHeroMix } from "$lib/utils/heroMix";
 
 /** A single "by genre" row: the genre name plus the albums in it. */
 export interface GenreRow {
@@ -52,33 +53,9 @@ function createMusicStore() {
 
   const { subscribe, set, update } = writable<MusicState>(initialState);
 
-  /**
+  /** Artwork check for hero candidates: needs a primary image or backdrop. */
-   * Build the hero rotation from a mix of recently played and rediscover
+  const hasArt = (i: MediaItem) =>
-   * albums, interleaved so the banner alternates "fresh in your ears" with
+    !!i.primaryImageTag || !!(i.backdropImageTags && i.backdropImageTags.length > 0);
-   * "remember this?". De-duplicates by id and prefers items that have artwork.
-   */
-  function buildHero(recent: MediaItem[], rediscover: MediaItem[]): MediaItem[] {
-    const hasArt = (i: MediaItem) =>
-      !!i.primaryImageTag || !!(i.backdropImageTags && i.backdropImageTags.length > 0);
-
-    const recentPool = recent.filter(hasArt);
-    const rediscoverPool = rediscover.filter(hasArt);
-
-    const result: MediaItem[] = [];
-    const seen = new Set<string>();
-    const maxLen = Math.max(recentPool.length, rediscoverPool.length);
-
-    for (let i = 0; i < maxLen && result.length < 6; i++) {
-      for (const candidate of [recentPool[i], rediscoverPool[i]]) {
-        if (candidate && !seen.has(candidate.id)) {
-          seen.add(candidate.id);
-          result.push(candidate);
-        }
-      }
-    }
-
-    return result.slice(0, 6);
-  }
 
   async function loadSections(libraryId: string) {
     update(s => ({
@@ -90,7 +67,7 @@ function createMusicStore() {
     try {
       const repo = auth.getRepository();
 
-      const [recentlyPlayed, newlyAdded, playlistsResult, rediscover] = await Promise.all([
+      const [recentlyPlayed, newlyAdded, playlistsResult, rediscover, surprise] = await Promise.all([
         repo.getRecentlyPlayedAudio(SECTION_LIMIT),
         repo.getItems(libraryId, {
           includeItemTypes: ["MusicAlbum"],
@@ -107,6 +84,17 @@ function createMusicStore() {
           limit: SECTION_LIMIT,
         }),
         repo.getRediscoverAlbums(libraryId, SECTION_LIMIT),
+        // Random pool so the hero rotation changes between visits (SortBy=Random
+        // shuffles server-side online, and via SQLite RANDOM() offline).
+        repo
+          .getItems(libraryId, {
+            includeItemTypes: ["MusicAlbum"],
+            sortBy: "Random",
+            recursive: true,
+            limit: SECTION_LIMIT,
+          })
+          .then(r => r.items)
+          .catch(() => [] as MediaItem[]),
       ]);
 
       // HACK: drop the "Podcasts" folder that lives inside the music library.
@@ -114,8 +102,11 @@ function createMusicStore() {
       const newlyAddedAlbums = excludePodcasts(newlyAdded.items);
       const playlistItems = excludePodcasts(playlistsResult.items);
       const rediscoverAlbums = excludePodcasts(rediscover);
+      const surpriseAlbums = excludePodcasts(surprise);
 
-      const heroItems = buildHero(recentlyPlayedAlbums, rediscoverAlbums);
+      // Mix the hero: fresh-in-your-ears first, then "remember this?", then
+      // random albums from across the library.
+      const heroItems = buildHeroMix([recentlyPlayedAlbums, rediscoverAlbums, surpriseAlbums], hasArt);
 
       update(s => ({
         ...s,

src/lib/stores/player.ts

@@ -250,12 +250,36 @@ export const mergedVolume = derived(
   }
 );
 
+/**
+ * Whether an item is video content and therefore must NOT appear in the audio
+ * mini player. Checks the Jellyfin item type (Movie/Episode/live TV) AND the
+ * backend queue item's `mediaType` discriminator.
+ *
+ * The `mediaType` check is essential: a video started via `player_play_item`
+ * (every Movie/Episode goes through VideoPlayer) is pushed onto the backend
+ * queue as a PlayerMediaItem with NO `type` field but `mediaType: "video"`.
+ * Without this, that queue item's absent `type` slips past the Movie/Episode
+ * check and the video surfaces in the audio mini player after leaving /player.
+ */
+function isVideoItem(item: MediaItem | null): boolean {
+  if (!item) return false;
+  const type = item.type;
+  if (type === "Movie" || type === "Episode" || type === "TvChannel") {
+    return true;
+  }
+  // Backend PlayerMediaItem carries a lowercase mediaType discriminator that is
+  // present even when the Jellyfin `type` is absent (video-only play requests).
+  const mediaType = (item as { mediaType?: string }).mediaType;
+  return mediaType === "video";
+}
+
 /**
  * Should show audio miniplayer - state machine gated
  * Only true when:
  * 1. In remote mode with an active session playing media, OR
- * 2. Player is in playing or paused state (not idle, loading, error)
+ * 2. There is an audio item loaded/queued and we are not in a genuine
- *    AND current media is audio (not video: Movie or Episode)
+ *    stopped state. The bar stays visible through transient idle/loading/
+ *    seeking blips so it never flickers while advancing between tracks.
  */
 export const shouldShowAudioMiniPlayer = derived(
   [player, currentMedia, currentQueueItem, isRemoteMode, selectedSession],
@@ -265,22 +289,25 @@ export const shouldShowAudioMiniPlayer = derived(
       return true;
     }
 
-    // Local mode: hide only when there is genuinely nothing loaded
-    // (idle/stopped/error). Keep showing through loading/seeking transitions
-    // so the mini player doesn't blink out when advancing between tracks.
-    const state = $player.state;
-    if (state.kind === "idle" || state.kind === "error") {
-      return false;
-    }
-
     // Determine media type from the player state, falling back to the queue
     // item (the player store can momentarily lack media during transitions).
-    const mediaType = $media?.type ?? $queueItem?.type;
+    const item = $media ?? $queueItem;
-    if (mediaType === "Movie" || mediaType === "Episode") {
+    if (isVideoItem(item)) {
       return false;
     }
 
-    // Show for audio content
+    const state = $player.state;
+
+    // A genuine stop clears the queue too, so when the player reports
+    // idle/error we only hide if there is also no queue item to fall back to.
+    // This keeps the bar visible through a transient idle/stopped blip emitted
+    // mid-transition (e.g. sleep-timer churn or a stop-then-load track change),
+    // while still hiding once playback has truly ended and the queue is empty.
+    if (state.kind === "idle" || state.kind === "error") {
+      return $queueItem != null;
+    }
+
+    // playing / paused / loading / seeking — audio is active, show the bar.
     return true;
   }
 );

src/lib/stores/playerVisibility.test.ts

@@ -0,0 +1,103 @@
+/**
+ * Tests for `shouldShowAudioMiniPlayer` visibility invariant.
+ *
+ * The mini player must NOT flicker out while advancing between tracks. The
+ * backend can momentarily report an idle/stopped state mid-transition, so the
+ * bar stays visible as long as a queue item still exists, and only hides once
+ * playback has genuinely ended and the queue has been cleared.
+ *
+ * TRACES: UR-005 | DR-009
+ */
+
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { writable } from "svelte/store";
+import { get } from "svelte/store";
+import type { MediaItem } from "$lib/api/types";
+
+// Mock the dependency stores so we can drive remote mode and the current queue
+// item independently of the real backend listeners.
+const isRemoteMode = writable(false);
+const selectedSession = writable<any>(null);
+const currentQueueItem = writable<MediaItem | null>(null);
+
+vi.mock("./playbackMode", () => ({ isRemoteMode }));
+vi.mock("./sessions", () => ({ selectedSession }));
+vi.mock("./queue", () => ({ currentQueueItem }));
+
+// Imported after the mocks so player.ts picks up the mocked stores.
+const { player, shouldShowAudioMiniPlayer } = await import("./player");
+
+const audioItem = { id: "a1", type: "Audio" } as unknown as MediaItem;
+const videoItem = { id: "v1", type: "Movie" } as unknown as MediaItem;
+
+describe("shouldShowAudioMiniPlayer", () => {
+  beforeEach(() => {
+    isRemoteMode.set(false);
+    selectedSession.set(null);
+    currentQueueItem.set(null);
+    player.setIdle();
+  });
+
+  it("shows while an audio track is playing", () => {
+    player.setPlaying(audioItem, 0, 100);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+
+  it("stays visible through a transient idle blip while still queued", () => {
+    // A track is queued (e.g. mid-transition the backend emits idle but the
+    // next track is already in the queue).
+    currentQueueItem.set(audioItem);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+
+  it("stays visible through loading/seeking transitions", () => {
+    currentQueueItem.set(audioItem);
+    player.setLoading(audioItem);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+    player.setSeeking(audioItem, 10);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+
+  it("hides once playback ends and the queue is cleared", () => {
+    currentQueueItem.set(null);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("hides for video content even while playing", () => {
+    player.setPlaying(videoItem, 0, 100);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("hides for video content reported only via the queue item", () => {
+    currentQueueItem.set(videoItem);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("hides a video queue item that has no Jellyfin `type` but mediaType 'video'", () => {
+    // Regression: player_play_item (every Movie/Episode via VideoPlayer) pushes
+    // a backend PlayerMediaItem onto the queue with item_type: None but
+    // media_type: Video → serialized with no `type` and mediaType: "video".
+    // Without the mediaType check this slipped past the Movie/Episode guard and
+    // surfaced the last-played video in the audio mini player after leaving
+    // /player.
+    const videoQueueItem = { id: "v2", mediaType: "video" } as unknown as MediaItem;
+    currentQueueItem.set(videoQueueItem);
+    player.setIdle();
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("hides for a live TV channel", () => {
+    const channelItem = { id: "c1", type: "TvChannel" } as unknown as MediaItem;
+    player.setPlaying(channelItem, 0, 0);
+    expect(get(shouldShowAudioMiniPlayer)).toBe(false);
+  });
+
+  it("shows in remote mode when the session has a now-playing item", () => {
+    isRemoteMode.set(true);
+    selectedSession.set({ nowPlayingItem: { id: "r1" } });
+    expect(get(shouldShowAudioMiniPlayer)).toBe(true);
+  });
+});

src/lib/stores/sleepTimer.ts

@@ -58,6 +58,14 @@ function createSleepTimerStore() {
 
 export const sleepTimer = createSleepTimerStore();
 
+/**
+ * Incremented each time the backend reports the time-based sleep timer
+ * expired. The backend stops its own (MPV/ExoPlayer) playback itself, but
+ * HTML5 video on Linux plays in the webview outside the backend's control —
+ * VideoPlayer watches this signal and pauses the <video> element.
+ */
+export const sleepTimerExpiredSignal = writable(0);
+
 // Derived stores for convenient access
 export const sleepTimerMode = derived(sleepTimer, ($s) => $s.mode);
 

src/lib/stores/tv.ts

@@ -4,6 +4,7 @@
 import { writable, derived } from "svelte/store";
 import type { MediaItem } from "$lib/api/types";
 import { auth } from "./auth";
+import { buildHeroMix } from "$lib/utils/heroMix";
 
 /** A single "by genre" row: the genre name plus the series in it. */
 export interface GenreRow {
@@ -45,36 +46,11 @@ function createTvStore() {
 
   const { subscribe, set, update } = writable<TvState>(initialState);
 
-  /**
+  /** Artwork check for hero candidates: own/parent backdrop or primary image. */
-   * Build the hero rotation. Prefer in-progress episodes (most personal),
+  const hasArt = (i: MediaItem) =>
-   * then fall back to next-up, then recently added. De-duplicates by id and
+    !!(i.backdropImageTags && i.backdropImageTags.length > 0) ||
-   * prefers items that carry backdrop/primary artwork for a good banner.
+    !!(i.parentBackdropImageTags && i.parentBackdropImageTags.length > 0) ||
-   */
+    !!i.primaryImageTag;
-  function buildHero(
-    continueWatching: MediaItem[],
-    nextUp: MediaItem[],
-    recentlyAdded: MediaItem[]
-  ): MediaItem[] {
-    const hasArt = (i: MediaItem) =>
-      !!(i.backdropImageTags && i.backdropImageTags.length > 0) ||
-      !!(i.parentBackdropImageTags && i.parentBackdropImageTags.length > 0) ||
-      !!i.primaryImageTag;
-
-    const result: MediaItem[] = [];
-    const seen = new Set<string>();
-
-    for (const pool of [continueWatching, nextUp, recentlyAdded]) {
-      for (const item of pool) {
-        if (result.length >= 6) break;
-        if (hasArt(item) && !seen.has(item.id)) {
-          seen.add(item.id);
-          result.push(item);
-        }
-      }
-    }
-
-    return result.slice(0, 6);
-  }
 
   async function loadSections(libraryId: string) {
     update(s => ({
@@ -86,17 +62,30 @@ function createTvStore() {
     try {
       const repo = auth.getRepository();
 
-      const [resume, nextUp, latest] = await Promise.all([
+      const [resume, nextUp, latest, surprise] = await Promise.all([
         repo.getResumeItems(libraryId, SECTION_LIMIT),
         repo.getNextUpEpisodes(undefined, SECTION_LIMIT),
         repo.getLatestItems(libraryId, SECTION_LIMIT),
+        // Random pool so the hero rotation changes between visits (SortBy=Random
+        // shuffles server-side online, and via SQLite RANDOM() offline).
+        repo
+          .getItems(libraryId, {
+            includeItemTypes: ["Series"],
+            sortBy: "Random",
+            recursive: true,
+            limit: SECTION_LIMIT,
+          })
+          .then(r => r.items)
+          .catch(() => [] as MediaItem[]),
       ]);
 
       // Resume items are already video-only from the server, but keep episodes
       // (and the occasional movie that lives in a mixed library) defensively.
       const continueWatching = resume.filter(i => i.type === "Episode" || i.type === "Movie");
 
-      const heroItems = buildHero(continueWatching, nextUp, latest);
+      // Mix the hero: in-progress episodes first (most personal), then next-up,
+      // recent additions, and random series from across the library.
+      const heroItems = buildHeroMix([continueWatching, nextUp, latest, surprise], hasArt);
 
       update(s => ({
         ...s,

src/lib/utils/heroMix.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import type { MediaItem } from "$lib/api/types";
+import { buildHeroMix, shuffle } from "./heroMix";
+
+/** Minimal MediaItem for hero tests; `art: false` strips the image tags. */
+function item(id: string, art = true): MediaItem {
+  return {
+    id,
+    name: `Item ${id}`,
+    type: "Movie",
+    primaryImageTag: art ? `tag-${id}` : undefined,
+  } as MediaItem;
+}
+
+const hasArt = (i: MediaItem) => !!i.primaryImageTag;
+
+describe("shuffle", () => {
+  it("returns a permutation without mutating the input", () => {
+    const input = [1, 2, 3, 4, 5];
+    const copy = [...input];
+    const result = shuffle(input);
+    expect(input).toEqual(copy);
+    expect([...result].sort()).toEqual([...input].sort());
+  });
+});
+
+describe("buildHeroMix", () => {
+  it("returns empty for empty pools", () => {
+    expect(buildHeroMix([[], []], hasArt)).toEqual([]);
+  });
+
+  it("caps the rotation at count", () => {
+    const pool = Array.from({ length: 20 }, (_, i) => item(`a${i}`));
+    expect(buildHeroMix([pool], hasArt, 6)).toHaveLength(6);
+  });
+
+  it("filters items without artwork", () => {
+    const result = buildHeroMix([[item("a", false), item("b")]], hasArt);
+    expect(result.map(i => i.id)).toEqual(["b"]);
+  });
+
+  it("de-duplicates across pools", () => {
+    const a = item("a");
+    const result = buildHeroMix([[a], [a, item("b")]], hasArt);
+    const ids = result.map(i => i.id);
+    expect(ids).toHaveLength(new Set(ids).size);
+    expect(ids).toContain("a");
+    expect(ids).toContain("b");
+  });
+
+  it("leads with an item from the first non-empty pool", () => {
+    const personal = [item("p1"), item("p2"), item("p3")];
+    const rest = [item("r1"), item("r2"), item("r3")];
+    for (let run = 0; run < 20; run++) {
+      const result = buildHeroMix([personal, rest], hasArt);
+      expect(["p1", "p2", "p3"]).toContain(result[0].id);
+    }
+  });
+
+  it("takes at most perPool items per pool before backfilling", () => {
+    const a = [item("a1"), item("a2"), item("a3"), item("a4")];
+    const b = [item("b1"), item("b2"), item("b3"), item("b4")];
+    // count 4 with perPool 2: exactly 2 from each pool, no backfill needed.
+    for (let run = 0; run < 20; run++) {
+      const result = buildHeroMix([a, b], hasArt, 4, 2);
+      const fromA = result.filter(i => i.id.startsWith("a")).length;
+      const fromB = result.filter(i => i.id.startsWith("b")).length;
+      expect(fromA).toBe(2);
+      expect(fromB).toBe(2);
+    }
+  });
+
+  it("backfills from leftovers when samples fall short of count", () => {
+    const a = [item("a1"), item("a2"), item("a3"), item("a4"), item("a5"), item("a6")];
+    const result = buildHeroMix([a], hasArt, 6, 2);
+    expect(result).toHaveLength(6);
+  });
+});

src/lib/utils/heroMix.ts

@@ -0,0 +1,59 @@
+// Hero banner mix builder, shared by the movies/TV/music landing stores.
+//
+// The hero used to show the first N items of fixed pools (continue watching,
+// recently played, latest), which made it identical on every visit. Instead we
+// sample a couple of items at random from each pool — pools are ordered most
+// personal first — and shuffle the rotation, so the banner is a fresh mix each
+// time while still leading with something personal.
+// TRACES: UR-034 | DR-038
+import type { MediaItem } from "$lib/api/types";
+
+/** Fisher-Yates shuffle; returns a new array, input is untouched. */
+export function shuffle<T>(items: T[]): T[] {
+  const result = [...items];
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+}
+
+/**
+ * Build a varied hero rotation from ordered pools (most personal first).
+ *
+ * Takes up to `perPool` random items from each pool, de-duplicated by id and
+ * filtered to items with usable artwork. The first pick from the first
+ * non-empty pool leads the rotation (so a resumable/recent item greets the
+ * user), the rest are shuffled. If that yields fewer than `count` items, the
+ * remainder is backfilled from whatever is left across all pools.
+ */
+export function buildHeroMix(
+  pools: MediaItem[][],
+  hasArt: (item: MediaItem) => boolean,
+  count = 6,
+  perPool = 2
+): MediaItem[] {
+  const seen = new Set<string>();
+  const usable = pools.map(pool =>
+    pool.filter(item => {
+      if (!hasArt(item) || seen.has(item.id)) return false;
+      seen.add(item.id);
+      return true;
+    })
+  );
+
+  const picked = new Set<string>();
+  const picks: MediaItem[] = [];
+  for (const pool of usable) {
+    for (const item of shuffle(pool).slice(0, perPool)) {
+      picked.add(item.id);
+      picks.push(item);
+    }
+  }
+
+  if (picks.length === 0) return [];
+
+  const [leader, ...rest] = picks;
+  const leftovers = shuffle(usable.flat().filter(item => !picked.has(item.id)));
+  return [leader, ...shuffle(rest), ...leftovers].slice(0, count);
+}

src/lib/utils/truncateMiddle.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { truncateMiddle } from "./truncateMiddle";
+
+describe("truncateMiddle", () => {
+  it("returns short strings unchanged", () => {
+    expect(truncateMiddle("short", 32)).toBe("short");
+    expect(truncateMiddle("exactly-len", 11)).toBe("exactly-len");
+  });
+
+  it("abbreviates in the middle keeping head and tail", () => {
+    const result = truncateMiddle("long_media_name_like_this", 16);
+    expect(result).toContain("…");
+    expect(result.length).toBe(16);
+    expect(result.startsWith("long")).toBe(true);
+    expect(result.endsWith("this")).toBe(true);
+  });
+
+  it("never exceeds maxLength", () => {
+    for (const len of [1, 2, 3, 5, 10, 25]) {
+      expect(truncateMiddle("a".repeat(100), len).length).toBeLessThanOrEqual(len);
+    }
+  });
+
+  it("handles null and undefined", () => {
+    expect(truncateMiddle(null)).toBe("");
+    expect(truncateMiddle(undefined)).toBe("");
+  });
+
+  it("falls back to head-truncation when there is no room for content", () => {
+    expect(truncateMiddle("abcdef", 1)).toBe("a");
+    expect(truncateMiddle("abcdef", 0)).toBe("");
+  });
+
+  it("supports a custom ellipsis", () => {
+    const result = truncateMiddle("long_media_name_like_this", 16, "...");
+    expect(result).toContain("...");
+    expect(result.length).toBe(16);
+  });
+});

src/lib/utils/truncateMiddle.ts

@@ -0,0 +1,33 @@
+/**
+ * Abbreviate a long string in the middle so both the start and the end stay
+ * visible, e.g. `long_media_name_like_this` -> `long_med…ike_this`.
+ *
+ * Unlike CSS `text-overflow: ellipsis` (which only clips the end), this keeps
+ * the tail of a media name — often the most distinguishing part (episode
+ * number, disambiguating suffix, etc.).
+ *
+ * @param value    The string to abbreviate.
+ * @param maxLength Maximum length of the returned string, including the ellipsis.
+ * @param ellipsis The separator inserted in the middle (default `…`).
+ */
+export function truncateMiddle(
+  value: string | null | undefined,
+  maxLength = 32,
+  ellipsis = "…",
+): string {
+  if (value == null) return "";
+  if (maxLength <= 0) return "";
+  if (value.length <= maxLength) return value;
+
+  // Not enough room for any real content around the ellipsis: fall back to a
+  // plain head-truncation so we never return more than maxLength characters.
+  if (maxLength <= ellipsis.length) {
+    return value.slice(0, maxLength);
+  }
+
+  const keep = maxLength - ellipsis.length;
+  const head = Math.ceil(keep / 2);
+  const tail = Math.floor(keep / 2);
+
+  return value.slice(0, head) + ellipsis + (tail > 0 ? value.slice(value.length - tail) : "");
+}

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
+  import { get } from "svelte/store";
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
   import { platform } from "@tauri-apps/plugin-os";
@@ -7,8 +8,9 @@
   import { auth, needsReauth, isAuthenticated } from "$lib/stores/auth";
   import { connectivity, isConnected } from "$lib/stores/connectivity";
   import { initPlayerEvents, cleanupPlayerEvents } from "$lib/services/playerEvents";
-  import { initDownloadEvents, cleanupDownloadEvents } from "$lib/stores/downloads";
+  import { downloads, initDownloadEvents, cleanupDownloadEvents } from "$lib/stores/downloads";
   import { syncService } from "$lib/services/syncService";
+  import { onReconnected as onCatalogReconnected, syncCatalog, refreshSyncStatus, showServerCatalog, lastCatalogSync } from "$lib/services/offlineCatalog";
   import { playbackMode } from "$lib/stores/playbackMode";
   import { sessions } from "$lib/stores/sessions";
   import { currentMedia, isPlaying, playbackPosition, playbackDuration } from "$lib/stores/player";
@@ -17,13 +19,63 @@
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
   import BottomNav from "$lib/components/BottomNav.svelte";
-  import { isInitialized, pendingSyncCount, isAndroid, showSleepTimerModal } from "$lib/stores/appState";
+  import { isInitialized, pendingSyncCount, isAndroid, showSleepTimerModal, bottomUiHeight } from "$lib/stores/appState";
   // Shuffle/repeat/next/previous come from the event-driven queue store, the
   // single source of truth (updated instantly on queue_changed).
   import { isShuffle as shuffle, repeatMode as repeat, hasNext, hasPrevious } from "$lib/stores/queue";
 
   let { children } = $props();
 
+  // The fixed bottom UI (mini player stacked over the bottom nav) is measured in
+  // real time and its height published to `bottomUiHeight`, so pages can reserve
+  // exactly that much space instead of guessing fixed rem values.
+  let bottomUiEl = $state<HTMLElement | null>(null);
+
+  // Route-level visibility for the fixed bottom UI (the mini player itself also
+  // self-gates on playback state; when it renders nothing the in-flow slot
+  // collapses to 0 and the ResizeObserver shrinks the reserved padding).
+  const pathname = $derived($page.url.pathname);
+  const showBottomNav = $derived(
+    $isAuthenticated && !pathname.startsWith('/player/') && !pathname.startsWith('/login')
+  );
+  const showGlobalMiniPlayer = $derived(
+    !pathname.startsWith('/player/') &&
+      !pathname.startsWith('/login') &&
+      !pathname.startsWith('/settings') &&
+      ($isAndroid || !pathname.startsWith('/library'))
+  );
+
+  // The library and settings routes own their own full-height layout (their own
+  // scroll container + bottom-space reservation), so the root must leave their
+  // wrapper as a plain non-scrolling box. Every other top-level page (search,
+  // downloads, sessions, home) renders straight into the root, so the root
+  // wrapper has to scroll AND reserve the fixed bottom UI's height — otherwise
+  // the mini player / bottom nav overlay the last rows of content.
+  const routeOwnsLayout = $derived(
+    pathname.startsWith('/library') ||
+      pathname.startsWith('/settings') ||
+      pathname.startsWith('/player/') ||
+      pathname.startsWith('/login')
+  );
+  const showBottomUi = $derived(showBottomNav || showGlobalMiniPlayer);
+
+  $effect(() => {
+    const el = bottomUiEl;
+    if (!el) {
+      bottomUiHeight.set(0);
+      return;
+    }
+    const ro = new ResizeObserver((entries) => {
+      bottomUiHeight.set(entries[0]?.contentRect.height ?? el.offsetHeight);
+    });
+    ro.observe(el);
+    bottomUiHeight.set(el.offsetHeight);
+    return () => {
+      ro.disconnect();
+      bottomUiHeight.set(0);
+    };
+  });
+
   onMount(async () => {
     // Detect platform first (synchronously, before any await) so the global
     // mini player's Android visibility gate is correct from the first render.
@@ -47,9 +99,26 @@
     // Initialize download event listener
     await initDownloadEvents();
 
+    // Prime the downloads store from the DB. The store starts empty each launch,
+    // and download badges (e.g. AlbumDownloadButton) derive purely from it, so
+    // without an initial refresh a previously-downloaded album shows as
+    // not-downloaded until the user opens the Downloads page.
+    const userId = get(auth).user?.id;
+    if (userId) {
+      downloads.refresh(userId).catch((err) =>
+        console.error("Initial downloads refresh failed:", err)
+      );
+    }
+
     // Start sync service for offline mutation queue
     syncService.start();
 
+    // Kick off a best-effort full-catalog pre-sync so the whole server catalog
+    // is browsable (greyed out) offline, and load the last-sync hint for the
+    // offline banner. Non-blocking — no-ops when not connected.
+    void syncCatalog();
+    void refreshSyncStatus();
+
     // Initialize playback mode and session monitoring
     playbackMode.initializeSessionMonitoring();
     await playbackMode.refresh();
@@ -78,6 +147,8 @@
               onServerReconnected: () => {
                 // Retry session verification when server becomes reachable
                 auth.retryVerification();
+                // Resume offline-queued downloads and refresh the catalog.
+                void onCatalogReconnected();
               },
             }).catch((monitorError) => {
               console.error("[Layout] Failed to start connectivity monitoring:", monitorError);
@@ -117,13 +188,35 @@
             {$pendingSyncCount} pending sync{$pendingSyncCount !== 1 ? 's' : ''}
           </span>
         {/if}
+        <button
+          type="button"
+          onclick={() => showServerCatalog.update((v) => !v)}
+          class="ml-1 bg-white/20 hover:bg-white/30 px-2 py-0.5 rounded-full text-xs transition-colors"
+          aria-pressed={$showServerCatalog}
+          title={$lastCatalogSync ? `Catalog last synced ${new Date($lastCatalogSync).toLocaleString()}` : 'Catalog not yet synced'}
+        >
+          {$showServerCatalog ? 'Hide server media' : 'Show all server media'}
+        </button>
       </div>
     {/if}
 
-    <!-- Main content -->
+    <!-- Main content. Routes that own their full-height layout (library,
-    <div class="flex-1 overflow-hidden">
+         settings, player, login) get a plain clipped box and manage their own
-      {@render children()}
+         scrolling internally. All other top-level pages render directly here, so
-    </div>
+         this wrapper must scroll and reserve the fixed bottom UI's measured
+         height so the mini player / bottom nav never overlap the last rows. -->
+    {#if routeOwnsLayout}
+      <div class="flex-1 overflow-hidden">
+        {@render children()}
+      </div>
+    {:else}
+      <div
+        class="flex-1 overflow-y-auto min-h-0"
+        style="padding-bottom: {showBottomUi ? `${$bottomUiHeight}px` : '0'}; overscroll-behavior: contain"
+      >
+        {@render children()}
+      </div>
+    {/if}
 
     <!-- Re-authentication modal -->
     <ReauthModal isOpen={$needsReauth} />
@@ -131,40 +224,43 @@
     <!-- Toast notifications (global) -->
     <Toast />
 
-    <!-- Bottom Navigation (mobile only - show everywhere except player and login) -->
+    <!-- Fixed bottom UI: mini player stacked over the bottom nav, both in normal
-    {#if $isAuthenticated && !$page.url.pathname.startsWith('/player/') && !$page.url.pathname.startsWith('/login')}
+         flow inside one measured wrapper. The wrapper's height is observed and
-      <BottomNav />
+         published to `bottomUiHeight` so pages reserve exactly this much space.
-    {/if}
+         Mini player is first (visually on top, above the nav). -->
+    {#if showBottomNav || showGlobalMiniPlayer}
+      <div bind:this={bottomUiEl} class="fixed bottom-0 left-0 right-0 z-40 flex flex-col">
+        {#if showGlobalMiniPlayer}
+          <MiniPlayer
+            media={$currentMedia}
+            isPlaying={$isPlaying}
+            position={$playbackPosition}
+            duration={$playbackDuration}
+            shuffle={$shuffle}
+            repeat={$repeat}
+            hasNext={$hasNext}
+            hasPrevious={$hasPrevious}
+            className="flex-shrink-0"
+            onExpand={() => {
+              // Navigate to player page when mini player is expanded
+              if ($currentMedia) {
+                goto(`/player/${$currentMedia.id}`);
+              }
+            }}
+            onSleepTimerClick={() => showSleepTimerModal.set(true)}
+          />
+        {/if}
 
-    <!-- Mini Player - show everywhere except on full player page, login and settings -->
+        {#if showBottomNav}
-    <!-- Android: Show on all routes (except player/login/settings) -->
+          <BottomNav className="flex-shrink-0" />
-    <!-- Desktop: Show on non-library routes (library layout has its own MiniPlayer) -->
+        {/if}
-    {#if !$page.url.pathname.startsWith('/player/') && !$page.url.pathname.startsWith('/login') && !$page.url.pathname.startsWith('/settings')}
+      </div>
-      {#if $isAndroid || !$page.url.pathname.startsWith('/library')}
-        <MiniPlayer
-          media={$currentMedia}
-          isPlaying={$isPlaying}
-          position={$playbackPosition}
-          duration={$playbackDuration}
-          shuffle={$shuffle}
-          repeat={$repeat}
-          hasNext={$hasNext}
-          hasPrevious={$hasPrevious}
-          onExpand={() => {
-            // Navigate to player page when mini player is expanded
-            if ($currentMedia) {
-              goto(`/player/${$currentMedia.id}`);
-            }
-          }}
-          onSleepTimerClick={() => showSleepTimerModal.set(true)}
-        />
 
-        <!-- Sleep Timer Modal -->
+      <!-- Sleep Timer Modal -->
-        <SleepTimerModal
+      <SleepTimerModal
-          isOpen={$showSleepTimerModal}
+        isOpen={$showSleepTimerModal}
-          onClose={() => showSleepTimerModal.set(false)}
+        onClose={() => showSleepTimerModal.set(false)}
-        />
+      />
-      {/if}
     {/if}
   {:else}
     <div class="flex items-center justify-center h-screen">

src/routes/library/+layout.svelte

@@ -5,9 +5,9 @@
   import { commands } from "$lib/api/bindings";
   import { auth, isAuthenticated, isLoading as isAuthLoading, currentUser } from "$lib/stores/auth";
   import { library } from "$lib/stores/library";
-  import { currentMedia, isPlaying, playbackPosition, playbackDuration, shouldShowAudioMiniPlayer } from "$lib/stores/player";
+  import { currentMedia, isPlaying, playbackPosition, playbackDuration } from "$lib/stores/player";
   import { isShuffle, repeatMode, hasNext as hasNextStore, hasPrevious as hasPreviousStore } from "$lib/stores/queue";
-  import { isAndroid } from "$lib/stores/appState";
+  import { isAndroid, bottomUiHeight } from "$lib/stores/appState";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
   import Search from "$lib/components/Search.svelte";
   import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
@@ -204,17 +204,23 @@
       </div>
     </header>
 
-    <!-- Main content (with padding for bottom nav bar and mini player) -->
+    <!-- Main content. The mini player is an in-flow flex sibling below this
+         scroller (not a fixed overlay), so the list can never render behind it.
+         Android keeps the global fixed bottom UI (nav + mini player), so there we
+         reserve its real measured height (`bottomUiHeight`, observed live in the
+         root layout) plus a little breathing room. Non-Android reserves none —
+         the in-flow bar below owns that space. -->
     <main
-      class="flex-1 overflow-y-auto p-4"
+      class="flex-1 overflow-y-auto p-4 min-h-0"
-      style="padding-bottom: {$shouldShowAudioMiniPlayer ? ($isAndroid ? '11rem' : '7rem') : '5rem'}; overscroll-behavior: contain"
+      style="padding-bottom: {$isAndroid ? `calc(${$bottomUiHeight}px + 1rem)` : '1rem'}; overscroll-behavior: contain"
       onscroll={scrollGuard.onScroll}
     >
       {@render children()}
     </main>
 
     <!-- Mini Player (only show on non-Android platforms - Android uses global mini player) -->
-    <!-- Hide on player page since full player is already there -->
+    <!-- Hide on player page since full player is already there. Rendered in
+         normal flex flow so it sits above the list rather than overlapping it. -->
     {#if !$isAndroid && !$page.url.pathname.startsWith('/player/')}
       <MiniPlayer
         media={$currentMedia}
@@ -225,6 +231,7 @@
         {repeat}
         {hasNext}
         {hasPrevious}
+        className="flex-shrink-0"
         onExpand={() => showFullPlayer = true}
         onSleepTimerClick={() => showSleepTimerModal = true}
       />

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

@@ -511,7 +511,7 @@
       <!-- Genre Tags -->
       {#if item.genres?.length}
         <div>
-          <GenreTags genres={item.genres ?? undefined} maxShow={6} />
+          <GenreTags genres={item.genres ?? undefined} maxShow={6} itemType={item.type} />
         </div>
       {/if}