fix(up-next): derive computed properties and properly update

trakt · Nov 16, 2024 · 22dc32a · 22dc32a
1 parent 290d648
commit 22dc32a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/projects/client/src/lib/components/episode/tags/ShowProgressTag.svelte b/projects/client/src/lib/components/episode/tags/ShowProgressTag.svelte
@@ -7,7 +7,7 @@
   } & ChildrenProps;
 
   const { children, total, progress }: ShowProgressTagProps = $props();
-  const percentage = (progress / total) * 100;
+  const percentage = $derived((progress / total) * 100);
 </script>
 
 <div class="show-progress-tag" style:--progress-width={`${percentage}%`}>

diff --git a/projects/client/src/lib/components/episode/up-next/UpNextEpisode.svelte b/projects/client/src/lib/components/episode/up-next/UpNextEpisode.svelte
@@ -36,6 +36,8 @@
     onMarkAsWatched,
     type,
   }: EpisodeProps = $props();
+
+  const duration = $derived(remaining * runtime);
 </script>
 
 <EpisodeCard>
@@ -48,9 +50,7 @@
     {#snippet tags()}
       <ShowProgressTag {total} progress={completed}>
         <span class="show-progress-text">
-          {i18n.remainingText(remaining)} ({i18n.durationText(
-            remaining * runtime,
-          )})
+          {i18n.remainingText(remaining)} ({i18n.durationText(duration)})
         </span>
       </ShowProgressTag>
     {/snippet}