Many improvemtns and fixes related to decoupling of svelte and rust on android.

src/lib/components/library/EpisodeFocusView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import type { MediaItem } from "$lib/api/types";
-  import { auth } from "$lib/stores/auth";
+  import CachedImage from "$lib/components/common/CachedImage.svelte";
 
   interface Props {
     episode: MediaItem;
@@ -12,9 +12,6 @@
 
   let { episode, series, allEpisodes, onBack }: Props = $props();
 
-  let backdropUrl = $state<string>("");
-  let episodeThumbnailUrls = $state<Map<string, string>>(new Map());
-
   // Check if an episode matches the focused episode (by ID or season/episode number)
   function isCurrentEpisode(ep: MediaItem): boolean {
     if (ep.id === episode.id) return true;
@@ -73,72 +70,18 @@
     return allEpisodes.slice(start, end);
   });
 
-  // Load backdrop URL asynchronously
-  async function loadBackdropUrl(): Promise<void> {
-    try {
-      const repo = auth.getRepository();
-
-      // Try episode backdrop first
-      if (episode.backdropImageTags?.[0]) {
-        backdropUrl = await repo.getImageUrl(episode.id, "Backdrop", {
-          maxWidth: 1920,
-          tag: episode.backdropImageTags[0],
-        });
-        return;
-      }
-
-      // Try episode primary (thumbnail)
-      if (episode.primaryImageTag) {
-        backdropUrl = await repo.getImageUrl(episode.id, "Primary", {
-          maxWidth: 1920,
-          tag: episode.primaryImageTag,
-        });
-        return;
-      }
-
-      // Fall back to series backdrop
-      if (series.backdropImageTags?.[0]) {
-        backdropUrl = await repo.getImageUrl(series.id, "Backdrop", {
-          maxWidth: 1920,
-          tag: series.backdropImageTags[0],
-        });
-        return;
-      }
-
-      backdropUrl = "";
-    } catch {
-      backdropUrl = "";
+  // Compute best backdrop source (no fetch, pure derivation)
+  const backdropSource = $derived.by(() => {
+    if (episode.backdropImageTags?.[0]) {
+      return { itemId: episode.id, imageType: "Backdrop" as const, tag: episode.backdropImageTags[0] };
     }
-  }
-
-  // Load episode thumbnail URL for a single episode
-  async function loadEpisodeThumbnailUrl(ep: MediaItem): Promise<void> {
-    if (!ep.primaryImageTag || episodeThumbnailUrls.has(ep.id)) return;
-
-    try {
-      const repo = auth.getRepository();
-      const url = await repo.getImageUrl(ep.id, "Primary", {
-        maxWidth: 400,
-        tag: ep.primaryImageTag,
-      });
-      episodeThumbnailUrls.set(ep.id, url);
-    } catch {
-      episodeThumbnailUrls.set(ep.id, "");
+    if (episode.primaryImageTag) {
+      return { itemId: episode.id, imageType: "Primary" as const, tag: episode.primaryImageTag };
     }
-  }
-
-  // Load backdrop when episode changes
-  $effect(() => {
-    loadBackdropUrl();
-  });
-
-  // Load episode thumbnail URLs when adjacent episodes change
-  $effect(() => {
-    adjacentEpisodes().forEach((ep) => {
-      if (ep.primaryImageTag && !episodeThumbnailUrls.has(ep.id)) {
-        loadEpisodeThumbnailUrl(ep);
-      }
-    });
+    if (series.backdropImageTags?.[0]) {
+      return { itemId: series.id, imageType: "Backdrop" as const, tag: series.backdropImageTags[0] };
+    }
+    return null;
   });
 
   function formatDuration(ticks?: number): string {
@@ -178,9 +121,12 @@
 <div class="space-y-8">
   <!-- Hero section -->
   <div class="relative h-[450px] rounded-xl overflow-hidden">
-    {#if backdropUrl}
-      <img
-        src={backdropUrl}
+    {#if backdropSource}
+      <CachedImage
+        itemId={backdropSource.itemId}
+        imageType={backdropSource.imageType}
+        tag={backdropSource.tag}
+        maxWidth={1920}
         alt={episode.name}
         class="absolute inset-0 w-full h-full object-cover"
       />
@@ -288,7 +234,6 @@
       {#each adjacentEpisodes() as ep (ep.id)}
         {@const isCurrent = isCurrentEpisode(ep)}
         {@const epProgress = getProgress(ep)}
-        {@const thumbUrl = episodeThumbnailUrls.get(ep.id) ?? ""}
         <button
           onclick={() => !isCurrent && handleEpisodeClick(ep)}
           class="flex-shrink-0 w-64 text-left group/card {isCurrent ? 'ring-2 ring-yellow-400 rounded-lg' : ''}"
@@ -296,20 +241,14 @@
         >
           <!-- Thumbnail -->
           <div class="relative aspect-video rounded-lg overflow-hidden bg-[var(--color-surface)]">
-            {#if thumbUrl}
-              <img
-                src={thumbUrl}
-                alt={ep.name}
-                class="w-full h-full object-cover transition-transform {isCurrent ? '' : 'group-hover/card:scale-105'}"
-                loading="lazy"
-              />
-            {:else}
-              <div class="w-full h-full flex items-center justify-center text-gray-600">
-                <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"/>
-                </svg>
-              </div>
-            {/if}
+            <CachedImage
+              itemId={ep.id}
+              imageType="Primary"
+              tag={ep.primaryImageTag}
+              maxWidth={400}
+              alt={ep.name}
+              class="w-full h-full object-cover transition-transform {isCurrent ? '' : 'group-hover/card:scale-105'}"
+            />
 
             <!-- Hover overlay -->
             {#if !isCurrent}