feat(anime): subtitle countdown

1 files changed, 36 insertions, 31 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 0b130d15..fd31963c 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -8,7 +8,8 @@
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
 	import { outboundLink } from '$lib/Media/media';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import type { SubsPlease } from '$lib/subsPlease';
 
 	export let media: Media[];
 	export let title: string;
@@ -73,42 +74,46 @@
 					{#if title !== 'Upcoming Episodes' || !$settings.displayCountdownRightAligned}
 						<span style="opacity: 50%;">|</span>
 					{/if}
-					{#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;
+					{#await fetch(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`).then( (r) => r.json() )}
+						Loading ...
+					{: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;
 
-									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}]
+											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}
 							<span class:countdown={$settings.displayCountdownRightAligned}>
-								{@html airingTime(anime)}
+								{@html airingTime(anime, subsPlease, true)}
 							</span>
 						{/if}
-					{:else}
-						<span class:countdown={$settings.displayCountdownRightAligned}>
-							{@html airingTime(anime, true)}
-						</span>
-					{/if}
+					{/await}
 				</span>
 			</li>
 		{/if}