many changes

src/lib/components/library/EpisodeRow.svelte

@@ -3,6 +3,7 @@
   import type { MediaItem } from "$lib/api/types";
   import { auth } from "$lib/stores/auth";
   import { downloads } from "$lib/stores/downloads";
+  import { formatDuration } from "$lib/utils/duration";
   import VideoDownloadButton from "./VideoDownloadButton.svelte";
 
   interface Props {
@@ -14,6 +15,7 @@
   let { episode, focused = false, onclick }: Props = $props();
 
   let buttonRef: HTMLButtonElement | null = null;
+  let imageUrl = $state<string>("");
 
   onMount(() => {
     if (focused && buttonRef) {
@@ -35,39 +37,31 @@
   );
   const downloadProgress = $derived(downloadInfo?.progress || 0);
 
-  function getImageUrl(): string {
+  // Load image URL asynchronously
+  async function loadImageUrl(): Promise<void> {
     try {
       const repo = auth.getRepository();
-      return repo.getImageUrl(episode.id, "Primary", {
+      imageUrl = await repo.getImageUrl(episode.id, "Primary", {
         maxWidth: 320,
         tag: episode.primaryImageTag,
       });
     } catch {
-      return "";
+      imageUrl = "";
     }
   }
 
-  function getProgress(): number {
+  // Load image when episode changes
+  $effect(() => {
+    loadImageUrl();
+  });
+
+  const progress = $derived(() => {
     if (!episode.userData || !episode.runTimeTicks) {
       return 0;
     }
     return (episode.userData.playbackPositionTicks / episode.runTimeTicks) * 100;
-  }
+  });
 
-  function formatDuration(ticks?: number): string {
-    if (!ticks) return "";
-    const seconds = Math.floor(ticks / 10000000);
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`;
-    }
-    return `${minutes}m`;
-  }
-
-  const imageUrl = $derived(getImageUrl());
-  const progress = $derived(getProgress());
   const duration = $derived(formatDuration(episode.runTimeTicks));
   const episodeNumber = $derived(episode.indexNumber || 0);
 </script>
@@ -107,11 +101,11 @@
     </div>
 
     <!-- Progress bar -->
-    {#if progress > 0}
+    {#if progress() > 0}
       <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-800">
         <div
           class="h-full bg-[var(--color-jellyfin)]"
-          style="width: {progress}%"
+          style="width: {progress()}%"
         ></div>
       </div>
     {/if}