src/lib/List/Manga/CleanMangaList.svelte


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
122
123
124
125

<script lang="ts">
	import type { Media } from '$lib/AniList/media';
	import Error from '$lib/Error/RateLimited.svelte';
	import { volumeCount } from '$lib/Media/Manga/volumes';
	import { outboundLink } from '$lib/Media/links';
	import settings from '../../../stores/settings';
	import ListTitle from '../ListTitle.svelte';
	import MediaTitle from '../MediaTitleDisplay.svelte';
	import HoverCover from '$lib/Media/HoverCover.svelte';
	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';

	export let media: Media[];
	export let cleanCache: () => void;
	export let endTime: number;
	export let lastUpdatedMedia: number;
	export let updateMedia: (
		id: number,
		progress: number | undefined,
		media: Media[]
	) => Promise<void>;
	export let pendingUpdate: number | null;
	export let due: boolean;
	export let rateLimited: boolean;
	export let authorised: boolean;

	let hovering = false;
	let hoveredMedia: Media | null = null;
	let imageStyle = '';
</script>

{#if authorised}
	<ListTitle count={media.length} time={endTime / 1000}>
		<a
			href={'#'}
			title="Force a full refresh"
			on:click={cleanCache}
			data-umami-event="Force Refresh Manga">Refresh</a
		>
	</ListTitle>
{/if}

{#if rateLimited}
	<Error />
{/if}

{#if media.length === 0}
	<ul>
		<li>
			No manga to display. <a
				href={'#'}
				on:click={cleanCache}
				data-umami-event="Force Refresh No Manga">Force refresh</a
			>
		</li>
	</ul>
{/if}

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

		{#if progress !== manga.episodes}
			<li
				class="entry"
				on:mouseenter={() => {
					const response = onMouseEnter(manga);

					hovering = response.hovering;
					hoveredMedia = response.media;
				}}
				on:mouseleave={() => {
					const response = onMouseLeave();

					hovering = response.hovering;
					hoveredMedia = response.media;
				}}
				on:mousemove={(e) => {
					const response = onMouseMove(e);

					imageStyle = response.style;
				}}
			>
				<a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank">
					<span
						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
							? 'color: lightcoral'
							: ''}
					>
						<MediaTitle title={manga.title} />
					</span>
				</a>
				{#if $settings.displaySocialButton}
					[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
				{/if}
				<span style="opacity: 50%;">|</span>
				{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
					<span style="opacity: 50%;">/{manga.chapters || '?'}</span>
				{/if}
				<a
					href={'#'}
					style={pendingUpdate === manga.id ? 'pointer-events: none; opacity: 50%;' : ''}
					on:click={() =>
						pendingUpdate === manga.id
							? null
							: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
				>
					+
				</a>
				{#if due || manga.episodes !== manga.chapters}
					[{manga.episodes || '?'}]
					{#await volumeCount(manga) then volumes}
						{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
						{#if volumes !== null && (volumeProgress || 0) < volumes}
							<span style="color: lightcoral;">
								Vol. {volumeProgress} &#8594; {volumes}
							</span>
						{/if}
					{/await}
				{/if}
			</li>
		{/if}
	{/each}
</ul>

<HoverCover {hovering} {hoveredMedia} {imageStyle} />