feat(locale): localise media lists

5 files changed, 50 insertions, 15 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index cee87891..e6f942f8 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -21,9 +21,11 @@
 	export let animeLists: Promise<Media[]>;
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
-	export let title: string;
+	export let title: any;
 	export let completed = false;
 	export let plannedOnly = false;
+	export let upcoming = false;
+	export let notYetReleased = false;
 
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
@@ -31,7 +33,7 @@
 </script>
 
 {#await fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)).then( (r) => r.json() )}
-	<ListTitle custom={title} />
+	<ListTitle {title} />
 
 	<!-- <ul><li>Loading subtitle release data ... 33%</li></ul> -->
 
@@ -56,11 +58,13 @@
 				{endTime}
 				bind:lastUpdatedMedia
 				{completed}
+				{notYetReleased}
+				{upcoming}
 				bind:previousAnimeList
 				bind:pendingUpdate
 			/>
 		{:else}
-			<ListTitle custom={title} />
+			<ListTitle {title} />
 
 			<!-- <ul><li>Loading anime lists ... 66%</li></ul> -->
 
@@ -84,12 +88,14 @@
 			{endTime}
 			bind:lastUpdatedMedia
 			{completed}
+			{notYetReleased}
+			{upcoming}
 			{subsPlease}
 			bind:previousAnimeList
 			bind:pendingUpdate
 		/>
 	{:catch}
-		<ListTitle time={0} count={-1337} custom={title} />
+		<ListTitle time={0} count={-1337} {title} />
 
 		<Error />
 	{/await}
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index fb0aa5fc..de33178a 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -23,7 +23,7 @@
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
 
 	export let media: Media[];
-	export let title: string;
+	export let title: any;
 	export let animeLists: Promise<Media[]>;
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -33,6 +33,8 @@
 	export let previousAnimeList: Media[];
 	export let pendingUpdate: number | null;
 	export let subsPlease: SubsPlease | null = null;
+	export let upcoming = false;
+	export let notYetReleased = false;
 
 	let hoverCoverState: HoverCoverResponse = {};
 
@@ -54,7 +56,7 @@
 	onDestroy(() => clearInterval(keyCacher));
 </script>
 
-<ListTitle time={endTime / 1000} count={media.length} custom={title} />
+<ListTitle time={endTime / 1000} count={media.length} {title} />
 
 {#if media.length === 0}
 	No anime to display. <button on:click={() => (animeLists = cleanCache(user, identity))}>
@@ -70,7 +72,7 @@
 		{#each media as anime}
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
-			{#if title.includes('Upcoming Episodes') || title.includes('Not Yet Released') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
+			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
 				<div class="cover-card">
 					<a
 						href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
@@ -82,7 +84,7 @@
 					</a>
 
 					<div class="cover-title">
-						{#if title !== 'Upcoming Episodes' || title.includes('Not Yet Released')}
+						{#if !upcoming || notYetReleased}
 							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
 							<button
 								class="button-square button-action"
@@ -128,7 +130,7 @@
 		{#each media as anime}
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
-			{#if title.includes('Upcoming Episodes') || title.includes('Not Yet Released') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
+			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
 				<li class="entry">
 					<span class="content">
 						<a
@@ -165,10 +167,10 @@
 						{#if $settings.displaySocialButton}
 							[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
 						{/if}
-						{#if title !== 'Upcoming Episodes' || title.includes('Not Yet Released') || !$settings.displayCountdownRightAligned}
+						{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
 							<span style="opacity: 50%;">|</span>
 						{/if}
-						{#if title !== 'Upcoming Episodes' || title.includes('Not Yet Released')}
+						{#if !upcoming || notYetReleased}
 							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
 							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
 							<button
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index bd9df8d7..2d317aeb 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -7,6 +7,7 @@
 	import settings from '$stores/settings';
 	import AnimeList from './AnimeListTemplate.svelte';
 	import { getNotificationsContext } from 'svelte-notifications';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -48,4 +49,12 @@
 	};
 </script>
 
-<AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Anime" completed />
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	bind:animeLists
+	{user}
+	{identity}
+	title={$locale().lists.completed.anime}
+	completed
+/>
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index f4439c8b..83b2890b 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -9,6 +9,7 @@
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
 	import { getNotificationsContext } from 'svelte-notifications';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -90,4 +91,11 @@
 	};
 </script>
 
-<AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Anime" />
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	bind:animeLists
+	{user}
+	{identity}
+	title={$locale().lists.due.episodes}
+/>
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index cdcf23c0..755f1b40 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -8,6 +8,7 @@
 	import settings from '$stores/settings';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import { getNotificationsContext } from 'svelte-notifications';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -75,7 +76,15 @@
 	};
 </script>
 
-<AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Upcoming Episodes" />
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	bind:animeLists
+	{user}
+	{identity}
+	title={$locale().lists.upcoming.episodes}
+	upcoming
+/>
 
 {#if $settings.displayPlannedAnime}
 	<p />
@@ -86,7 +95,8 @@
 		bind:animeLists
 		{user}
 		{identity}
-		title="Not Yet Released"
+		title={$locale().lists.upcoming.notYetReleased}
+		notYetReleased
 		plannedOnly
 	/>
 {/if}