aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List/UpcomingAnimeList.svelte
blob: 9ae6b1bbfde468f0de367dc106660eeb778f8ecd (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script lang="ts">
	/* eslint svelte/no-at-html-tags: "off" */

	import { mediaListCollection, Type, 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';
	import { airingTime, cleanCache } from '$lib/Media/anime';
	import ListTitle from './ListTitle.svelte';
	import Error from '$lib/Error.svelte';

	export let user: AniListAuthorisation;
	export let identity: UserIdentity;
	export let displayUnresolved: boolean;

	let animeLists: Promise<Media[]>;
	let startTime: number;
	let endTime: number;

	onMount(async () => {
		startTime = performance.now();
		animeLists = mediaListCollection(user, identity, Type.Anime, $anime, $lastPruneTimes.anime);
	});

	const cleanMedia = (media: Media[], displayUnresolved: boolean) => {
		if (media === undefined) {
			return [];
		}

		const releasingMedia = media.filter(
			(media: Media) => media.status == 'RELEASING' && media.nextAiringEpisode !== null
			/* &&
				(media['mediaListEntry'] || { progress: 0 })['progress'] >=
					($displayNotStarted === 'true' ? 0 : 1) */
		);
		const outdatedMedia = releasingMedia.filter((media: Media) => {
			return (
				(media.nextAiringEpisode || { episode: 0 }).episode - 1 <=
				(media.mediaListEntry || { progress: 0 }).progress
			);
		});
		let finalMedia = outdatedMedia.map((media: Media) => {
			if ((media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0) {
				media.nextAiringEpisode = { episode: -1 };
			}

			return media;
		});

		if (!displayUnresolved) {
			finalMedia = finalMedia.filter((media: Media) => media.nextAiringEpisode?.episode !== -1);
		}

		finalMedia.sort((a: Media, b: Media) => {
			return (
				(a.nextAiringEpisode?.timeUntilAiring || 9999) -
				(b.nextAiringEpisode?.timeUntilAiring || 9999)
			);
		});

		finalMedia = finalMedia.filter((item, index, array) => {
			return (
				array.findIndex((i) => {
					return i.id === item.id;
				}) === index
			);
		});

		if (!endTime) {
			endTime = performance.now() - startTime;
		}

		return finalMedia;
	};
</script>

{#await animeLists}
	<ListTitle custom="Upcoming Episodes" />

	<ul><li>Loading ...</li></ul>
{:then media}
	{@const cleanedMedia = cleanMedia(media, displayUnresolved)}

	<ListTitle count={cleanedMedia.length} time={endTime / 1000} custom="Upcoming Episodes" />

	{#if cleanedMedia.length === 0}
		<ul>
			<li>
				No anime to display. <a
					href={'#'}
					on:click={() => (animeLists = cleanCache(user, identity))}>Force refresh</a
				>
			</li>
		</ul>
	{/if}

	<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>
				{@html airingTime(anime, true)}
			</li>
		{/each}
	</ul>
{:catch}
	<ListTitle count="?" time="0" custom="Upcoming Episodes" />

	<Error />
{/await}