aboutsummaryrefslogtreecommitdiff
path: root/src/lib/List/Anime/CleanAnimeList.svelte
blob: a17ad67c0ce4c2586761911bbef98d4cf459167c (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
<script lang="ts">
	/* eslint svelte/no-at-html-tags: "off" */

	import settings from '../../../stores/settings';
	import type { Media } from '$lib/AniList/media';
	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
	import ListTitle from '../ListTitle.svelte';
	import MediaTitle from '../MediaTitleDisplay.svelte';

	export let media: Media[];
	export let title: string;
	export let animeLists: Promise<Media[]>;
	export let user: AniListAuthorisation;
	export let identity: UserIdentity;
	export let endTime: number;
	export let lastUpdatedMedia: number;
	export let completed = false;
	export let previousAnimeList: Media[];
	export let pendingUpdate: number | null;
</script>

<ListTitle time={endTime / 1000} count={media.length} custom={title} />

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

<ul>
	{#each media as anime}
		{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}

		{#if title === 'Upcoming Episodes' || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
			<li>
				<a
					href={$settings.linkToLiveChart
						? `https://www.livechart.me/search?q=${
								anime.title.native || anime.title.english || anime.title.romaji
						  }`
						: `https://anilist.co/anime/${anime.id}`}
					target="_blank"
				>
					<span
						style={lastUpdatedMedia === anime.id && anime.episodes !== progress
							? 'color: lightcoral'
							: ''}
					>
						<MediaTitle title={anime.title} />
					</span>
				</a>
				{#if $settings.displaySocialButton}
					[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
				{/if}
				<span style="opacity: 50%;">|</span>
				{#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;

									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}]
						{@html airingTime(anime)}
					{/if}
				{:else}
					{@html airingTime(anime, true)}
				{/if}
			</li>
		{/if}
	{/each}
</ul>