feat(schedule): match media to anilist

4 files changed, 204 insertions, 59 deletions

diff --git a/src/lib/AniList/schedule.ts b/src/lib/AniList/schedule.ts
new file mode 100644
index 00000000..33351a09
--- /dev/null
+++ b/src/lib/AniList/schedule.ts
@@ -0,0 +1,75 @@
+import type { Media, MediaTitle } from './media';
+
+interface SchedulePage {
+	data: {
+		Page: {
+			media: {
+				title: MediaTitle;
+				synonyms: string[];
+				id: number;
+				idMal: number;
+				episodes: number;
+				nextAiringEpisode?: {
+					episode: number;
+					airingAt?: number;
+				};
+				coverImage: {
+					extraLarge: string;
+				};
+			}[];
+			pageInfo: {
+				hasNextPage: boolean;
+			};
+		};
+	};
+}
+
+const schedulePage = async (
+	page: number,
+	year: number,
+	season: 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL'
+): Promise<SchedulePage> =>
+	await (
+		await fetch('https://graphql.anilist.co', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Accept: 'application/json'
+			},
+			body: JSON.stringify({
+				query: `{
+  Page(page: ${page}) {
+    pageInfo {
+      hasNextPage
+    }
+    media(season: ${season}, seasonYear: ${year}) {
+      id idMal episodes synonyms
+      title { english romaji native }
+			nextAiringEpisode { episode airingAt }
+      coverImage { extraLarge }
+    }
+  }
+}`
+			})
+		})
+	).json();
+
+export const scheduleMediaListCollection = async (
+	year: number,
+	season: 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL'
+) => {
+	const scheduledMedia = [];
+	let page = 1;
+	let currentPage = await schedulePage(page, year, season);
+
+	for (const candidate of currentPage.data.Page.media) scheduledMedia.push(candidate);
+
+	while (currentPage['data']['Page']['pageInfo']['hasNextPage']) {
+		for (const candidate of currentPage.data.Page.media) scheduledMedia.push(candidate);
+
+		page += 1;
+		currentPage = await schedulePage(page, year, season);
+	}
+
+	return scheduledMedia as Partial<Media[]>;
+};
diff --git a/src/lib/Media/Anime/airing.ts b/src/lib/Media/Anime/airing.ts
index 15abbf2a..9c13fb5d 100644
--- a/src/lib/Media/Anime/airing.ts
+++ b/src/lib/Media/Anime/airing.ts
@@ -6,7 +6,7 @@ import type { SubsPlease } from '$lib/subsPlease';
 import levenshtein from 'fast-levenshtein';
 import { totalEpisodes } from './episodes';
 
-interface Time {
+export interface Time {
 	title: string;
 	time: string;
 	day: string;
@@ -66,6 +66,28 @@ const findClosestMatch = (times: Time[], titles: string[]) => {
 	return closestMatch as Time | null;
 };
 
+export const findClosestMedia = (media: Media[], matchFor: string) => {
+	if (!matchFor) return null;
+
+	let bestFitMedia: Media | null = null;
+	let smallestDistance = Infinity;
+
+	const normalizedSingleTitle = normalizeTitle(matchFor);
+
+	media.forEach((m) => {
+		[m.title.romaji, m.title.english, ...m.synonyms].filter(Boolean).forEach((title) => {
+			const distance = levenshtein.get(normalizedSingleTitle, normalizeTitle(title));
+
+			if (distance < smallestDistance && distance < normalizedSingleTitle.length / 2) {
+				smallestDistance = distance;
+				bestFitMedia = m;
+			}
+		});
+	});
+
+	return bestFitMedia as Media | null;
+};
+
 export const injectAiringTime = (anime: Media, subsPlease: SubsPlease | null) => {
 	const airingAt = anime.nextAiringEpisode?.airingAt;
 	// const nativeUntilAiring = airingAt
diff --git a/src/lib/Media/Anime/season.ts b/src/lib/Media/Anime/season.ts
new file mode 100644
index 00000000..d7922e2b
--- /dev/null
+++ b/src/lib/Media/Anime/season.ts
@@ -0,0 +1,11 @@
+export const season = () => {
+	if (new Date().getMonth() >= 0 && new Date().getMonth() <= 2)
+		return 'WINTER' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
+	else if (new Date().getMonth() >= 3 && new Date().getMonth() <= 5)
+		return 'SPRING' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
+	else if (new Date().getMonth() >= 6 && new Date().getMonth() <= 8)
+		return 'SUMMER' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
+	else if (new Date().getMonth() >= 9 && new Date().getMonth() <= 11)
+		return 'FALL' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
+	else return 'WINTER' as 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL';
+};
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index c629f820..2a975c46 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -5,8 +5,14 @@
 	import settings from '../../stores/settings';
 	import { parseOrDefault } from '$lib/Tools/tool';
 	import { browser } from '$app/environment';
+	import type { Media } from '$lib/AniList/media';
+	import { scheduleMediaListCollection } from '$lib/AniList/schedule';
+	import { season } from '$lib/Media/Anime/season';
+	import { findClosestMedia } from '$lib/Media/Anime/airing';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
+	let scheduledMediaPromise: Promise<Partial<Media[]>>;
 	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
 	let timeZone = parseOrDefault(
 		urlParameters,
@@ -14,11 +20,13 @@
 		Intl.DateTimeFormat().resolvedOptions().timeZone
 	);
 
-	onMount(
-		async () => (subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json()))
-	);
+	onMount(async () => {
+		subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json());
+		scheduledMediaPromise = scheduleMediaListCollection(new Date().getFullYear(), season());
+	});
 
 	let hoveredItem: SubsPleaseEpisode | null = null;
+	let hoveredMedia: Media | null = null;
 	let imageStyle = '';
 	let imageHeight = 0;
 
@@ -58,67 +66,94 @@
 
 		return shiftedSchedule;
 	};
+
+	const associateMedia = (media: (Media | undefined)[], title: string) =>
+		findClosestMedia(media as Media[], title);
 </script>
 
 {#await subsPleasePromise}
 	Loading ...
 {:then subsPlease}
 	{#if subsPlease}
-		<blockquote>
-			{timeZone.split('/').reverse().join(', ').replace(/_/g, ' ')}
-		</blockquote>
-
-		<p>
-			<select
-				bind:value={timeZone}
-				on:change={() =>
-					(subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json()))}
-			>
-				{#each Intl.supportedValuesOf('timeZone') as zone}
-					<option value={zone}>
-						{zone.split('/').reverse().join(', ').replace(/_/g, ' ')}
-					</option>
-				{/each}
-			</select>
-		</p>
-
-		<div id="list-container">
-			{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry]}
-				<details
-					open
-					class="list"
-					class:today={day === new Date().toLocaleString('en-us', { weekday: 'long' })}
-				>
-					<summary>{day}</summary>
-
-					<ul>
-						{#each Object.values(scheduleEntry) as entry}
-							<li
-								class="entry"
-								on:mouseenter={() => (hoveredItem = entry)}
-								on:mouseleave={() => (hoveredItem = null)}
-								on:mousemove={onMouseMove}
-							>
-								<a
-									href={`https://anilist.co/search?search=${encodeURIComponent(entry.title)}`}
-									target="_blank"
-								>
-									{entry.title}
-								</a>
-								{#if !$settings.displayCountdownRightAligned}
-									<span style="opacity: 50%;">|</span>
-								{/if}
-								<span class:countdown={$settings.displayCountdownRightAligned}>
-									{entry.time}
-								</span>
-							</li>
+		{#await scheduledMediaPromise}
+			Loading ...
+		{:then scheduledMedia}
+			{#if scheduledMedia}
+				<blockquote>
+					{timeZone.split('/').reverse().join(', ').replace(/_/g, ' ')}
+				</blockquote>
+
+				<p>
+					<select
+						bind:value={timeZone}
+						on:change={() =>
+							(subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json()))}
+					>
+						{#each Intl.supportedValuesOf('timeZone') as zone}
+							<option value={zone}>
+								{zone.split('/').reverse().join(', ').replace(/_/g, ' ')}
+							</option>
 						{/each}
-					</ul>
-
-					<p />
-				</details>
-			{/each}
-		</div>
+					</select>
+				</p>
+
+				<div id="list-container">
+					{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry]}
+						<details
+							open
+							class="list"
+							class:today={day === new Date().toLocaleString('en-us', { weekday: 'long' })}
+						>
+							<summary>{day}</summary>
+
+							<ul>
+								{#each Object.values(scheduleEntry) as entry}
+									{@const media = associateMedia(scheduledMedia, entry.title)}
+
+									<li
+										class="entry"
+										on:mouseenter={() => {
+											hoveredItem = entry;
+											hoveredMedia = media;
+										}}
+										on:mouseleave={() => {
+											hoveredItem = null;
+											hoveredMedia = null;
+										}}
+										on:mousemove={onMouseMove}
+									>
+										<a
+											href={media
+												? `https://anilist.co/anime/${media.id}`
+												: `https://anilist.co/search?search=${encodeURIComponent(entry.title)}`}
+											target="_blank"
+										>
+											{#if media}
+												<MediaTitleDisplay title={media.title} />
+											{:else}
+												{entry.title}
+											{/if}
+										</a>
+										{#if !$settings.displayCountdownRightAligned}
+											<span style="opacity: 50%;">|</span>
+										{/if}
+										<span class:countdown={$settings.displayCountdownRightAligned}>
+											{entry.time}
+										</span>
+									</li>
+								{/each}
+							</ul>
+
+							<p />
+						</details>
+					{/each}
+				</div>
+			{:else}
+				Loading ...
+			{/if}
+		{:catch}
+			<Error type="Media" loginSessionError={false} />
+		{/await}
 	{:else}
 		Loading ...
 	{/if}
@@ -129,7 +164,9 @@
 {#if hoveredItem}
 	<img
 		class="hover-image show"
-		src={`https://subsplease.org${hoveredItem.image_url}`}
+		src={hoveredMedia
+			? hoveredMedia.coverImage.extraLarge
+			: `https://subsplease.org${hoveredItem.image_url}`}
 		alt="Media Cover"
 		style={imageStyle}
 	/>