many changes

src/lib/components/home/HeroBanner.svelte

@@ -13,6 +13,7 @@
 
   let currentIndex = $state(0);
   let intervalId: number | null = null;
+  let heroImageUrl = $state<string>("");
 
   // Touch/swipe state
   let touchStartX = $state(0);
@@ -21,65 +22,81 @@
 
   const currentItem = $derived(items[currentIndex] ?? null);
 
-  function getHeroImageUrl(): string {
-    if (!currentItem) return "";
-    const repo = auth.getRepository();
-
-    // 1. Try backdrop image first (best for hero display)
-    if (currentItem.backdropImageTags?.[0]) {
-      return repo.getImageUrl(currentItem.id, "Backdrop", {
-        maxWidth: 1920,
-        tag: currentItem.backdropImageTags[0],
-      });
+  // Load hero image URL asynchronously based on item priority
+  async function loadHeroImageUrl(): Promise<void> {
+    if (!currentItem) {
+      heroImageUrl = "";
+      return;
     }
 
-    // 2. For episodes, try to use series backdrop from parent
-    if (currentItem.type === "Episode") {
-      // First try parent backdrop tags (includes image tag for caching)
-      if (currentItem.seriesId && currentItem.parentBackdropImageTags?.[0]) {
-        return repo.getImageUrl(currentItem.seriesId, "Backdrop", {
+    try {
+      const repo = auth.getRepository();
+
+      // 1. Try backdrop image first (best for hero display)
+      if (currentItem.backdropImageTags?.[0]) {
+        heroImageUrl = await repo.getImageUrl(currentItem.id, "Backdrop", {
           maxWidth: 1920,
-          tag: currentItem.parentBackdropImageTags[0],
+          tag: currentItem.backdropImageTags[0],
         });
+        return;
       }
-      // Fallback: try series backdrop without tag (may not be cached optimally)
-      if (currentItem.seriesId) {
-        return repo.getImageUrl(currentItem.seriesId, "Backdrop", {
+
+      // 2. For episodes, try to use series backdrop from parent
+      if (currentItem.type === "Episode") {
+        // First try parent backdrop tags (includes image tag for caching)
+        if (currentItem.seriesId && currentItem.parentBackdropImageTags?.[0]) {
+          heroImageUrl = await repo.getImageUrl(currentItem.seriesId, "Backdrop", {
+            maxWidth: 1920,
+            tag: currentItem.parentBackdropImageTags[0],
+          });
+          return;
+        }
+        // Fallback: try series backdrop without tag (may not be cached optimally)
+        if (currentItem.seriesId) {
+          heroImageUrl = await repo.getImageUrl(currentItem.seriesId, "Backdrop", {
+            maxWidth: 1920,
+          });
+          return;
+        }
+        // Last resort for episodes: try season backdrop
+        if (currentItem.seasonId) {
+          heroImageUrl = await repo.getImageUrl(currentItem.seasonId, "Backdrop", {
+            maxWidth: 1920,
+          });
+          return;
+        }
+      }
+
+      // 3. For music tracks, try album backdrop first, then primary
+      if (currentItem.type === "Audio" && currentItem.albumId) {
+        // Try album backdrop first (more cinematic for hero)
+        heroImageUrl = await repo.getImageUrl(currentItem.albumId, "Backdrop", {
           maxWidth: 1920,
         });
+        return;
       }
-      // Last resort for episodes: try season backdrop
-      if (currentItem.seasonId) {
-        return repo.getImageUrl(currentItem.seasonId, "Backdrop", {
+
+      // 4. Fall back to primary image (poster, album art, episode thumbnail)
+      if (currentItem.primaryImageTag) {
+        heroImageUrl = await repo.getImageUrl(currentItem.id, "Primary", {
+          maxWidth: 1920,
+          tag: currentItem.primaryImageTag,
+        });
+        return;
+      }
+
+      // 5. Last resort for audio: try album primary image
+      if (currentItem.type === "Audio" && currentItem.albumId) {
+        heroImageUrl = await repo.getImageUrl(currentItem.albumId, "Primary", {
           maxWidth: 1920,
         });
+        return;
       }
-    }
 
-    // 3. For music tracks, try album backdrop first, then primary
-    if (currentItem.type === "Audio" && currentItem.albumId) {
-      // Try album backdrop first (more cinematic for hero)
-      return repo.getImageUrl(currentItem.albumId, "Backdrop", {
-        maxWidth: 1920,
-      });
+      heroImageUrl = "";
+    } catch {
+      heroImageUrl = "";
     }
-
-    // 4. Fall back to primary image (poster, album art, episode thumbnail)
-    if (currentItem.primaryImageTag) {
-      return repo.getImageUrl(currentItem.id, "Primary", {
-        maxWidth: 1920,
-        tag: currentItem.primaryImageTag,
-      });
-    }
-
-    // 5. Last resort for audio: try album primary image
-    if (currentItem.type === "Audio" && currentItem.albumId) {
-      return repo.getImageUrl(currentItem.albumId, "Primary", {
-        maxWidth: 1920,
-      });
-    }
-
-    return "";
   }
 
   function next() {
@@ -126,6 +143,11 @@
     touchEndX = 0;
   }
 
+  // Load hero image whenever current item changes
+  $effect(() => {
+    loadHeroImageUrl();
+  });
+
   // Auto-rotate logic
   $effect(() => {
     if (autoRotate && items.length > 1) {
@@ -135,8 +157,6 @@
       };
     }
   });
-
-  const heroImageUrl = $derived(getHeroImageUrl());
 </script>
 
 <div