many changes

src/lib/components/library/EpisodeFocusView.svelte

@@ -12,6 +12,9 @@
 
   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;
@@ -70,52 +73,74 @@
     return allEpisodes.slice(start, end);
   });
 
-  function getBackdropUrl(): string {
+  // Load backdrop URL asynchronously
+  async function loadBackdropUrl(): Promise<void> {
     try {
       const repo = auth.getRepository();
 
       // Try episode backdrop first
       if (episode.backdropImageTags?.[0]) {
-        return repo.getImageUrl(episode.id, "Backdrop", {
+        backdropUrl = await repo.getImageUrl(episode.id, "Backdrop", {
           maxWidth: 1920,
           tag: episode.backdropImageTags[0],
         });
+        return;
       }
 
       // Try episode primary (thumbnail)
       if (episode.primaryImageTag) {
-        return repo.getImageUrl(episode.id, "Primary", {
+        backdropUrl = await repo.getImageUrl(episode.id, "Primary", {
           maxWidth: 1920,
           tag: episode.primaryImageTag,
         });
+        return;
       }
 
       // Fall back to series backdrop
       if (series.backdropImageTags?.[0]) {
-        return repo.getImageUrl(series.id, "Backdrop", {
+        backdropUrl = await repo.getImageUrl(series.id, "Backdrop", {
           maxWidth: 1920,
           tag: series.backdropImageTags[0],
         });
+        return;
       }
 
-      return "";
+      backdropUrl = "";
     } catch {
-      return "";
+      backdropUrl = "";
     }
   }
 
-  function getEpisodeThumbnail(ep: MediaItem): string {
+  // 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();
-      return repo.getImageUrl(ep.id, "Primary", {
+      const url = await repo.getImageUrl(ep.id, "Primary", {
         maxWidth: 400,
         tag: ep.primaryImageTag,
       });
+      episodeThumbnailUrls.set(ep.id, url);
     } catch {
-      return "";
+      episodeThumbnailUrls.set(ep.id, "");
     }
   }
 
+  // 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);
+      }
+    });
+  });
+
   function formatDuration(ticks?: number): string {
     if (!ticks) return "";
     const seconds = Math.floor(ticks / 10000000);
@@ -143,7 +168,6 @@
     goto(`/library/${series.id}?episode=${ep.id}`);
   }
 
-  const backdropUrl = $derived(getBackdropUrl());
   const episodeLabel = $derived(
     `S${episode.parentIndexNumber || 1}E${episode.indexNumber || 1}`
   );
@@ -264,7 +288,7 @@
       {#each adjacentEpisodes() as ep (ep.id)}
         {@const isCurrent = isCurrentEpisode(ep)}
         {@const epProgress = getProgress(ep)}
-        {@const thumbUrl = getEpisodeThumbnail(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' : ''}"