feat: show completed anime section

1 files changed, 132 insertions, 0 deletions

diff --git a/src/lib/List/WatchingAnimeList.svelte b/src/lib/List/WatchingAnimeList.svelte
new file mode 100644
index 00000000..19ef81ce
--- /dev/null
+++ b/src/lib/List/WatchingAnimeList.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	/* eslint svelte/no-at-html-tags: "off" */
+
+	import { mediaListCollection, Type, flattenLists, type Media } from '$lib/AniList/media';
+	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
+	import { onMount } from 'svelte';
+	import anime from '../../stores/anime';
+	import lastPruneTimes from '../../stores/lastPruneTimes';
+	import settings from '../../stores/settings';
+
+	export let user: AniListAuthorisation;
+	export let identity: UserIdentity;
+
+	let animeLists: Promise<{ entries: { media: Media }[] }[]>;
+	let startTime: number;
+	let endTime: number;
+
+	onMount(async () => {
+		startTime = performance.now();
+		animeLists = mediaListCollection(user, identity, Type.Anime, $anime, $lastPruneTimes.anime);
+	});
+
+	const cleanMedia = (media: { entries: { media: Media }[] }[]) => {
+		if (media === undefined) {
+			return [];
+		}
+
+		const flattenedLists = flattenLists(media);
+		const releasingMedia = flattenedLists.filter(
+			(media: Media) =>
+				media.status !== 'RELEASING' &&
+				media.status !== 'NOT_YET_RELEASED' &&
+				(media.mediaListEntry || { progress: 0 }).progress >=
+					($settings.displayNotStarted === true ? 0 : 1)
+		);
+		let finalMedia = releasingMedia;
+
+		finalMedia.sort((a: Media, b: Media) => {
+			const difference = (anime: Media) => {
+				return (
+					(anime.nextAiringEpisode?.episode === -1
+						? 99999
+						: anime.nextAiringEpisode?.episode || -1) -
+					(anime.mediaListEntry || { progress: 0 }).progress
+				);
+			};
+
+			return difference(a) - difference(b);
+		});
+
+		finalMedia = finalMedia.filter((item, index, array) => {
+			return (
+				array.findIndex((i) => {
+					return i.id === item.id;
+				}) === index
+			);
+		});
+
+		if (!endTime) {
+			endTime = performance.now() - startTime;
+		}
+
+		return finalMedia;
+	};
+
+	const totalEpisodes = (anime: Media) => {
+		return anime.episodes === null ? '' : `<span style="opacity: 50%">/${anime.episodes}</span>`;
+	};
+
+	const updateMedia = async (id: number, progress: number | undefined) => {
+		fetch(`/anilist/increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
+			animeLists = mediaListCollection(
+				user,
+				identity,
+				Type.Anime,
+				$anime,
+				$lastPruneTimes.anime,
+				true
+			);
+		});
+	};
+</script>
+
+{#await animeLists}
+	<summary>Completed Anime [...] <small style="opacity: 50%">...s</small></summary>
+
+	<ul><li>Loading ...</li></ul>
+{:then media}
+	{@const cleanedMedia = cleanMedia(media)}
+
+	<summary
+		>Completed Anime [{cleanedMedia.length}]
+		<small style="opacity: 50%">{endTime / 1000}s</small></summary
+	>
+
+	<ul>
+		{#each cleanedMedia as anime}
+			<li>
+				<a
+					href={$settings.linkToAniList
+						? `https://anilist.co/anime/${anime.id}`
+						: `https://www.livechart.me/search?q=${
+								anime.title.native || anime.title.english || anime.title.romaji
+						  }`}
+					target="_blank"
+				>
+					{anime.title.english || anime.title.romaji || anime.title.native}
+				</a>
+				<span style="opacity: 50%;">|</span>
+				{anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)}
+				<a href={'#'} on:click={() => updateMedia(anime.id, anime.mediaListEntry?.progress)}>+</a>
+			</li>
+		{/each}
+	</ul>
+{:catch}
+	<summary>Upcoming Episodes [?] <small style="opacity: 50%">0s</small></summary>
+
+	<ul>
+		<li>
+			<p>
+				Media could not be loaded. You might have been <a
+					href="https://en.wikipedia.org/wiki/Rate_limiting"
+					target="_blank">rate limited</a
+				>.
+			</p>
+			<p>
+				Try again in a few minutes. If the problem persists, please contact
+				<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
+			</p>
+		</li>
+	</ul>
+{/await}