feat(offline): play downloaded video, and drain the offline sync queue (0.4.6)

Bundles this session's work plus the concurrent search/offline/player changes.
Every gate passes on the combined tree: 885 frontend tests, 610 Rust tests,
clippy clean, boundary clean, trace coverage 86%.

Offline video playback — four separate defects, each of which alone stopped it:

  DR-133  A completed download's file_path is already absolute (the worker
          rewrites it on completion), but the player rooted it a second time and
          handed the webview /data/user/0/app//data/user/0/app/videos/x.mp4.
  DR-134  The asset protocol was never enabled: no protocol-asset feature and no
          assetProtocol config, so convertFileSrc produced URLs nothing answered.
          Also silently defeated the cached-thumbnail path, which fails soft to
          the server copy and hid it whenever the server was reachable.
  DR-137  Tauri's asset protocol answers a range-less request by reading the
          whole file into memory, and only advertises Accept-Ranges from inside
          its range branch, so the first request never learns ranges exist.
          Chromium gave up with PIPELINE_ERROR_READ after ~31s. Local media is
          now served by a loopback HTTP server: bounded 4 MiB chunks streamed
          from the file handle, every response length-delimited, and a range-less
          request answered with one chunk rather than the file. Confined by a
          per-session token and to the app data directory, because loopback is
          shared between apps on Android.
  DR-138  Release builds set usesCleartextTraffic=false, so Android rejected the
          request to that server before any I/O. A network-security-config
          exempts 127.0.0.1 only; a remote server must still be HTTPS.

Downloads:

  DR-135  download_item never records media_type and the reconnect resolver read
          that NULL as 'audio', so a movie queued from a media card had its URL
          resolved by get_audio_stream_url and completed as an audio-only
          transcode. The item's own type now decides.
  DR-136  Rows already downloaded that way are requeued on reconnect, since
          prevention alone leaves them reading "downloaded" and still unplayable.

Known limitation: a download taken at `original` quality is a byte copy of the
source, so it can be any container. One such file is an AVI holding XVID, which
the webview cannot play in any case — the media server serves it correctly and
Chromium refuses it. That needs either a transcoded download preset or the
native ExoPlayer surface work, and is not addressed here.

Also fixes two ID collisions between concurrent work: DR-143 defined twice
(search vs offline gate) and UT-131 defined twice (Episode Focus hero vs channel
cap). The search requirement is now DR-147 and the channel-cap test UT-141, with
their code references and matrix rows updated.

src/lib/components/library/EpisodeFocusView.svelte

@@ -1,11 +1,23 @@
-<!-- TRACES: UR-048 | DR-061, DR-062 -->
+<!--
+  The one and only episode surface (ux-flows §5B.1) — so it carries everything
+  an episode can do, not just Play. A bare Episode page used to exist alongside
+  it with a *different* set of affordances (download, breadcrumbs, cast), which
+  meant opening an episode from Continue Watching silently lost them.
+
+  TRACES: UR-048, UR-058 | DR-061, DR-062, DR-142
+-->
 <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";
   import FavoriteButton from "$lib/components/FavoriteButton.svelte";
+  import VideoDownloadButton from "./VideoDownloadButton.svelte";
+  import CastSection from "./CastSection.svelte";
+  import GenreTags from "./GenreTags.svelte";
+  import RelatedItemsSection from "./RelatedItemsSection.svelte";
   import { favoriteOverrides, resolveIsFavorite } from "$lib/stores/favorites";
+  import { seasonAnchorId } from "./seriesNavigation";
   import {
     isCurrentEpisode as isSameEpisode,
     adjacentEpisodes as computeAdjacent,
@@ -14,12 +26,17 @@
 
   interface Props {
     episode: MediaItem;
-    series: MediaItem;
-    allEpisodes: MediaItem[];
+    /**
+     * The parent series. `null` only for an episode that carries no `seriesId`
+     * (a deep link into a stale cache) — the view still renders, minus the
+     * affordances that need series context.
+     */
+    series?: MediaItem | null;
+    allEpisodes?: MediaItem[];
     onBack?: () => void;
   }
 
-  let { episode, series, allEpisodes, onBack }: Props = $props();
+  let { episode, series = null, allEpisodes = [], onBack }: Props = $props();
 
   // Pure logic lives in ./episodeStrip.ts (unit-tested). Wrap for local use.
   function isCurrentEpisode(ep: MediaItem): boolean {
@@ -28,6 +45,10 @@
 
   const adjacentEpisodes = $derived(() => computeAdjacent(episode, allEpisodes));
 
+  // A strip of exactly one card is the current episode talking to itself — the
+  // spec wants the *next* episodes, so with no siblings there is nothing to show.
+  const hasEpisodeStrip = $derived(adjacentEpisodes().length > 1);
+
   // Compute best backdrop source (no fetch, pure derivation)
   const backdropSource = $derived.by(() => {
     if (episode.backdropImageTags?.[0]) {
@@ -36,12 +57,28 @@
     if (episode.imageId) {
       return { itemId: episode.id, imageType: "Primary" as const, tag: episode.imageId };
     }
-    if (series.backdropImageTags?.[0]) {
+    if (series?.backdropImageTags?.[0]) {
       return { itemId: series.id, imageType: "Backdrop" as const, tag: series.backdropImageTags[0] };
     }
     return null;
   });
 
+  // Cast and genres are the episode's own when the server sent them, else the
+  // series' — a list-level episode fetch often carries neither, and an empty
+  // Cast row on an episode of a show with a known cast reads as broken.
+  const people = $derived(episode.people?.length ? episode.people : series?.people ?? []);
+  const genres = $derived(episode.genres?.length ? episode.genres : series?.genres ?? []);
+
+  // "More Like This" on an episode means similar *shows* (UR-048), so it keys
+  // off the series rather than the episode.
+  const seriesName = $derived(series?.name ?? episode.seriesName ?? null);
+  const seriesHref = $derived(series ? `/library/${series.id}` : null);
+  const seasonHref = $derived(
+    series && episode.parentIndexNumber != null
+      ? `/library/${series.id}#${seasonAnchorId(episode.parentIndexNumber)}`
+      : null
+  );
+
   function formatDuration(ms?: number | null): string {
     if (!ms) return "";
     const seconds = Math.floor(ms / 1000);
@@ -66,6 +103,7 @@
   }
 
   function handleEpisodeClick(ep: MediaItem) {
+    if (!series) return;
     goto(`/library/${series.id}?episode=${ep.id}`);
   }
 
@@ -112,8 +150,19 @@
     <!-- Content -->
     <div class="relative h-full flex flex-col justify-end p-8 max-w-3xl">
       <div class="space-y-4">
-        <!-- Series name -->
-        <p class="text-gray-300 text-lg">{series.name}</p>
+        <!-- Series name — a link, so the episode page is a navigable hub
+             rather than a dead end (UR-058). -->
+        {#if seriesName}
+          <p class="text-lg">
+            {#if seriesHref}
+              <a href={seriesHref} class="text-gray-300 hover:text-white hover:underline transition-colors">
+                {seriesName}
+              </a>
+            {:else}
+              <span class="text-gray-300">{seriesName}</span>
+            {/if}
+          </p>
+        {/if}
 
         <!-- Episode title -->
         <h1 class="text-4xl font-bold text-white drop-shadow-lg">
@@ -122,9 +171,20 @@
 
         <!-- Metadata -->
         <div class="flex items-center gap-4 text-sm text-gray-200">
-          <span class="px-2 py-1 bg-[var(--color-jellyfin)] rounded font-semibold">
-            {episodeLabel}
-          </span>
+          <!-- The badge links to the season's place in the series list —
+               seasons have no page of their own (DR-103). -->
+          {#if seasonHref}
+            <a
+              href={seasonHref}
+              class="px-2 py-1 bg-[var(--color-jellyfin)] rounded font-semibold hover:brightness-110 transition-all"
+            >
+              {episodeLabel}
+            </a>
+          {:else}
+            <span class="px-2 py-1 bg-[var(--color-jellyfin)] rounded font-semibold">
+              {episodeLabel}
+            </span>
+          {/if}
           {#if duration}
             <span>{duration}</span>
           {/if}
@@ -168,7 +228,8 @@
           </div>
         {/if}
 
-        <!-- Play button + favourite. TRACES: UR-068 | DR-119 -->
+        <!-- Play / Download / Favourite — the full hero action row of
+             ux-flows §5B.2. TRACES: UR-058, UR-068 | DR-119, DR-142 -->
         <div class="pt-2 flex items-center gap-3">
           <button
             onclick={handlePlay}
@@ -179,6 +240,16 @@
             </svg>
             {progress > 0 && progress < 95 ? "Resume" : "Play"}
           </button>
+          <VideoDownloadButton
+            itemId={episode.id}
+            itemName={episode.name}
+            isMovie={false}
+            seriesName={seriesName ?? undefined}
+            seasonName={episode.seasonName ?? undefined}
+            seasonNumber={episode.parentIndexNumber ?? undefined}
+            episodeNumber={episode.indexNumber ?? undefined}
+            size="lg"
+          />
           <FavoriteButton
             itemId={episode.id}
             isFavorite={resolveIsFavorite(episode, $favoriteOverrides)}
@@ -189,7 +260,10 @@
     </div>
   </div>
 
-  <!-- Adjacent episodes -->
+  <!-- Adjacent episodes. Nothing may be inserted between the hero and this
+       strip — continuation content comes before discovery content
+       (ux-flows §5B.2). TRACES: UR-048 | DR-061, DR-062 -->
+  {#if hasEpisodeStrip}
   <div class="space-y-4">
     <h2 class="text-xl font-semibold text-white">More Episodes</h2>
 
@@ -273,4 +347,27 @@
       {/each}
     </div>
   </div>
+  {/if}
+
+  <!-- Discovery content, strictly below the episode strip (ux-flows §5B.2:
+       hero → strip → cast → similar). TRACES: UR-048 | DR-062, DR-142 -->
+  {#if genres.length}
+    <GenreTags {genres} maxShow={6} itemKind="episode" />
+  {/if}
+
+  {#if people.length}
+    <CastSection {people} />
+  {/if}
+
+  <!-- "More Like This" on an episode means similar shows, so it keys off the
+       series. Skipped for a series-less episode, which has nothing to match on. -->
+  {#if series && (series.genres?.length || series.people?.length)}
+    <RelatedItemsSection
+      currentItemId={series.id}
+      itemKind="series"
+      genres={series.genres ?? undefined}
+      people={series.people ?? undefined}
+      limit={12}
+    />
+  {/if}
 </div>

src/lib/components/library/EpisodeFocusView.test.ts

@@ -0,0 +1,175 @@
+// The Episode Focus View is the *only* episode surface (ux-flows §5B.1), so it
+// has to carry everything the bare Episode page used to: download, breadcrumbs
+// back to the series/season, cast and similar shows. It shipped with only Play
+// and Favourite, which is why "open an episode from Continue Watching" lost the
+// download affordance.
+//
+// TRACES: UR-048, UR-058 | DR-062, DR-142 | UT-131, UT-132, UT-133, UT-134, UT-135
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/svelte";
+import type { MediaItem } from "$lib/api/types";
+
+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 {
+    downloadsStore: shim({ downloads: {} as Record<string, unknown> }),
+    favoriteOverridesStore: shim(new Map<string, boolean>()),
+    getSimilarItems: vi.fn(async () => ({ items: [] as MediaItem[] })),
+    search: vi.fn(async () => ({ items: [] as MediaItem[] })),
+  };
+});
+
+vi.mock("$lib/stores/downloads", () => ({
+  downloads: {
+    subscribe: h.downloadsStore.subscribe,
+    downloadVideo: vi.fn(),
+    pinItem: vi.fn(),
+    unpinItem: vi.fn(),
+    delete: vi.fn(),
+    cancel: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/stores/favorites", async () => {
+  const actual = await vi.importActual<typeof import("$lib/stores/favorites")>(
+    "$lib/stores/favorites"
+  );
+  return { ...actual, favoriteOverrides: { subscribe: h.favoriteOverridesStore.subscribe } };
+});
+
+vi.mock("$lib/stores/auth", () => ({
+  auth: {
+    getRepository: () => ({ getSimilarItems: h.getSimilarItems, search: h.search }),
+    getUserId: () => "user-1",
+  },
+  user: { subscribe: (fn: (v: unknown) => void) => (fn({ id: "user-1" }), () => {}) },
+}));
+
+// 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 EpisodeFocusView from "./EpisodeFocusView.svelte";
+
+const SERIES: MediaItem = {
+  id: "series-1",
+  name: "The Show",
+  kind: "series",
+  genres: ["Drama"],
+  people: [{ id: "p-1", name: "Lead Actor", type: "Actor" }],
+} as unknown as MediaItem;
+
+function episode(overrides: Partial<MediaItem> = {}): MediaItem {
+  return {
+    id: "ep-4",
+    name: "The Fourth One",
+    kind: "episode",
+    seriesId: "series-1",
+    seriesName: "The Show",
+    parentIndexNumber: 2,
+    indexNumber: 4,
+    durationMs: 2_880_000,
+    overview: "Something happens.",
+    genres: ["Drama"],
+    people: [{ id: "p-1", name: "Lead Actor", type: "Actor" }],
+    ...overrides,
+  } as unknown as MediaItem;
+}
+
+function sibling(id: string, number: number): MediaItem {
+  return {
+    id,
+    name: `Episode ${number}`,
+    kind: "episode",
+    seriesId: "series-1",
+    parentIndexNumber: 2,
+    indexNumber: number,
+  } as unknown as MediaItem;
+}
+
+const allEpisodes = [sibling("ep-3", 3), episode(), sibling("ep-5", 5)];
+
+describe("EpisodeFocusView — full episode functionality (DR-142)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    h.downloadsStore.set({ downloads: {} });
+    h.favoriteOverridesStore.set(new Map());
+  });
+
+  it("offers a download control in the hero", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    expect(screen.getByLabelText(/Download for offline playback/i)).toBeTruthy();
+  });
+
+  it("links the series name back to the series page", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    const link = screen.getByRole("link", { name: "The Show" });
+    expect(link.getAttribute("href")).toBe("/library/series-1");
+  });
+
+  it("links the season badge to the season's place in the series list", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    const link = screen.getByRole("link", { name: "S2E4" });
+    expect(link.getAttribute("href")).toBe("/library/series-1#season-2");
+  });
+
+  it("renders cast below the episode strip, never above it (DR-062)", () => {
+    const { container } = render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    const headings = [...container.querySelectorAll("h2")].map((h2) => h2.textContent?.trim());
+    const strip = headings.indexOf("More Episodes");
+    const cast = headings.findIndex((t) => t?.startsWith("Cast"));
+
+    expect(strip).toBeGreaterThanOrEqual(0);
+    expect(cast).toBeGreaterThan(strip);
+  });
+
+  it("hides the episode strip when the episode has no siblings", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes: [] },
+    });
+
+    expect(screen.queryByText("More Episodes")).toBeNull();
+  });
+
+  it("renders without a series for an episode that carries no seriesId", () => {
+    render(EpisodeFocusView, {
+      props: {
+        episode: episode({ seriesId: null, seriesName: null }),
+        series: null,
+        allEpisodes: [],
+      },
+    });
+
+    // Still a complete surface: title, play and download all present.
+    expect(screen.getByText("The Fourth One")).toBeTruthy();
+    expect(screen.getByLabelText(/Download for offline playback/i)).toBeTruthy();
+    expect(screen.queryByRole("link", { name: "The Show" })).toBeNull();
+  });
+});

src/lib/components/library/GenericGenreBrowser.svelte

@@ -11,6 +11,7 @@
   import ResultsCounter from "$lib/components/common/ResultsCounter.svelte";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import type { Genre, MediaItem, ItemType } from "$lib/api/types";
 
   /**
@@ -52,12 +53,16 @@
   let selectedGenre = $state<Genre | null>(null);
   let genreItems = $state<MediaItem[]>([]);
   let loadingItems = $state(false);
-  const { markLoaded } = useServerReachabilityReload(async () => {
+  async function reloadGenreBrowse() {
     await loadGenres();
     if (selectedGenre) {
       await loadGenreItems(selectedGenre);
     }
-  });
+  }
+
+  const { markLoaded } = useServerReachabilityReload(reloadGenreBrowse);
+  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(reloadGenreBrowse);
 
   onMount(async () => {
     await loadGenres();

src/lib/components/library/GenericMediaListPage.svelte

@@ -14,6 +14,7 @@
   import BackButton from "$lib/components/common/BackButton.svelte";
   import ResultsCounter from "$lib/components/common/ResultsCounter.svelte";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import type { MediaItem, Library, ItemType, SearchResult } from "$lib/api/types";
   import LibraryGrid from "./LibraryGrid.svelte";
   import TrackList from "./TrackList.svelte";
@@ -95,6 +96,11 @@
     await loadItems();
   });
 
+  // Re-query when the offline downloaded-only gate changes — going offline, or
+  // toggling "Show all server media". Without this the listing kept whatever it
+  // was first loaded with and the toggle only greyed cards. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(() => loadItems());
+
   onMount(async () => {
     await loadItems();
     markLoaded();

src/lib/components/library/seriesNavigation.test.ts

@@ -1,9 +1,11 @@
+// TRACES: UR-062 | DR-102, DR-103, DR-142 | UT-136
 import { describe, it, expect } from "vitest";
 import type { MediaItem } from "$lib/api/types";
 import {
   seasonAnchorId,
   seasonRedirectTarget,
   episodeFocusHref,
+  episodeRedirectTarget,
   seriesPlayHref,
   seriesPlayLabel,
   groupEpisodesBySeason,
@@ -103,6 +105,17 @@ describe("episodeFocusHref", () => {
   });
 });
 
+describe("episodeRedirectTarget", () => {
+  it("sends a bare episode page to the episode inside its series", () => {
+    expect(episodeRedirectTarget(ep("s1e2", 1, 2))).toBe("/library/series-1?episode=s1e2");
+  });
+
+  it("does not redirect an episode that has no series to fall back on", () => {
+    const orphan = { ...ep("lone", 1, 2), seriesId: undefined } as MediaItem;
+    expect(episodeRedirectTarget(orphan)).toBeNull();
+  });
+});
+
 describe("groupEpisodesBySeason", () => {
   it("groups episodes under their season headers, in season order", () => {
     const seasons = [seasonHeader(2), seasonHeader(1)];

src/lib/components/library/seriesNavigation.ts

@@ -10,7 +10,7 @@
 // lives in Rust (`repository_get_series_current_episode`); this module only
 // renders and routes around the answer.
 //
-// TRACES: UR-062 | DR-102, DR-103
+// TRACES: UR-062 | DR-102, DR-103, DR-142
 import type { MediaItem } from "$lib/api/types";
 
 export interface SeasonData {
@@ -57,6 +57,21 @@ export function episodeFocusHref(episode: MediaItem): string {
   return `/library/${episode.seriesId}?episode=${episode.id}`;
 }
 
+/**
+ * Where a bare `/library/<episodeId>` should actually land — the same rule
+ * seasons follow (DR-103). An episode is never a page of its own, so a deep
+ * link, a stale bookmark, or any caller that missed `episodeFocusHref` is
+ * redirected into the series' Episode Focus View.
+ *
+ * Returns `null` for an episode with no `seriesId` (a deep link into a stale
+ * cache): there is nothing to redirect *to*, so the caller renders the Focus
+ * View series-less rather than stranding the user (ux-flows §5B.1).
+ */
+export function episodeRedirectTarget(episode: MediaItem): string | null {
+  if (!episode.seriesId) return null;
+  return episodeFocusHref(episode);
+}
+
 /**
  * Where the series hero button goes.
  *