aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Tools/Likes.svelte
blob: 25da23d07d0a6d4f4621b3e4b9c9973a199835fb (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
<script lang="ts">
	import { activityLikes } from '$lib/Data/AniList/activity';
	import { threadLikes } from '$lib/Data/AniList/forum';
	import RateLimited from '$lib/Error/RateLimited.svelte';
	import Skeleton from '$lib/Loading/Skeleton.svelte';
	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
	import {
		onMouseEnter,
		type HoverCoverResponse,
		onMouseLeave,
		onMouseMove
	} from '$lib/Media/Cover/hoverCover';
	import InputTemplate from './InputTemplate.svelte';

	let submission = '';
	let hoverCoverState: HoverCoverResponse = {};

	$: normalisedSubmission = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2');
	$: submissionType = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1');
	$: likesPromise =
		submissionType === 'activity'
			? activityLikes(Number(normalisedSubmission))
			: submissionType === 'thread'
			? threadLikes(Number(normalisedSubmission))
			: Promise.resolve(null);
</script>

<InputTemplate
	field="Activity or Thread URL"
	bind:submission
	event="Get All Likes"
	submitText="Get All Likes"
>
	{#if submission.length > 5 && submission.match(/https:\/\/anilist.co\/(activity|forum\/thread)\/\d+/)}
		{#await likesPromise}
			<Skeleton card={false} count={5} height="0.9rem" list />
		{:then likes}
			{#if likes && likes.length > 0}
				<ul>
					{#each likes as like}
						<li>
							<a
								href={`https://anilist.co/user/${like.name}`}
								target="_blank"
								on:mouseenter={() => {
									const response = onMouseEnter({
										coverImage: {
											extraLarge:
												like?.avatar?.large ??
												'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
										}
									});

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

									hoverCoverState.hovering = response.hovering;
									hoverCoverState.item = response.item;
									hoverCoverState.media = response.media;
								}}
								on:mousemove={(e) => {
									const response = onMouseMove(e, 300);

									hoverCoverState.style = response.style;
								}}
							>
								{like.name}
							</a>
						</li>
					{/each}
				</ul>
			{:else}
				No likes were found for that {submissionType}.
			{/if}
		{:catch}
			<RateLimited type="Likes" list={false} />
		{/await}
	{:else}
		Please enter a valid Activity or Thread URL.
	{/if}
</InputTemplate>

<HoverCover options={hoverCoverState} width={300} />