fix(anime): call subsplease once

1 files changed, 32 insertions, 40 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 64af9ddd..67d6797e 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -11,6 +11,7 @@
 	import MediaTitle from '../MediaTitleDisplay.svelte';
 	import { outboundLink } from '$lib/Media/links';
 	import { onDestroy } from 'svelte';
+	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 
 	export let media: Media[];
 	export let title: string;
@@ -22,6 +23,7 @@
 	export let completed = false;
 	export let previousAnimeList: Media[];
 	export let pendingUpdate: number | null;
+	export let subsPlease: SubsPlease | null = null;
 
 	const keyCacher = setInterval(
 		() => (media = media),
@@ -75,52 +77,42 @@
 					{#if title !== 'Upcoming Episodes' || !$settings.displayCountdownRightAligned}
 						<span style="opacity: 50%;">|</span>
 					{/if}
-					{#await fetch(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`).then( (r) => r.json() )}
-						<span
-							style={`opacity: 50%; ${
-								$settings.displayCountdownRightAligned ? 'float: right;' : ''
-							}`}
-						>
-							...
-						</span>
-					{:then subsPlease}
-						{#if title !== 'Upcoming Episodes'}
-							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-							<a
-								href={'#'}
-								style={pendingUpdate === anime.id ? 'pointer-events: none; opacity: 50%;' : ''}
-								on:click={() => {
-									if (pendingUpdate !== anime.id) {
-										lastUpdatedMedia = anime.id;
-										pendingUpdate = anime.id;
+					{#if title !== 'Upcoming Episodes'}
+						<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+						{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+						<a
+							href={'#'}
+							style={pendingUpdate === anime.id ? 'pointer-events: none; opacity: 50%;' : ''}
+							on:click={() => {
+								if (pendingUpdate !== anime.id) {
+									lastUpdatedMedia = anime.id;
+									pendingUpdate = anime.id;
 
-										updateMedia(anime.id, anime.mediaListEntry?.progress, () => {
-											const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+									updateMedia(anime.id, anime.mediaListEntry?.progress, () => {
+										const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
 
-											if (mediaListEntry) mediaListEntry.progress = progress + 1;
+										if (mediaListEntry) mediaListEntry.progress = progress + 1;
 
-											previousAnimeList = media;
-											animeLists = cleanCache(user, identity);
-											pendingUpdate = null;
-										});
-									}
-								}}>+</a
-							>
-							{#if !completed}
-								[{anime.nextAiringEpisode?.episode === -1
-									? '?'
-									: (anime.nextAiringEpisode?.episode || 1) - 1}]
-								<span class:countdown={$settings.displayCountdownRightAligned}>
-									{@html airingTime(anime, subsPlease)}
-								</span>
-							{/if}
-						{:else}
+										previousAnimeList = media;
+										animeLists = cleanCache(user, identity);
+										pendingUpdate = null;
+									});
+								}
+							}}>+</a
+						>
+						{#if !completed}
+							[{anime.nextAiringEpisode?.episode === -1
+								? '?'
+								: (anime.nextAiringEpisode?.episode || 1) - 1}]
 							<span class:countdown={$settings.displayCountdownRightAligned}>
-								{@html airingTime(anime, subsPlease, true)}
+								{@html airingTime(anime, subsPlease)}
 							</span>
 						{/if}
-					{/await}
+					{:else}
+						<span class:countdown={$settings.displayCountdownRightAligned}>
+							{@html airingTime(anime, subsPlease, true)}
+						</span>
+					{/if}
 				</span>
 			</li>
 		{/if}