blob: 33f63c0e06fd4d026378588edb5ea51901df063f (
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
|
<script lang="ts">
import { threads } from '$lib/AniList/forum';
import { onMount } from 'svelte';
import { clearAllParameters } from '../Utility/parameters';
import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
import {
onMouseEnter,
onMouseLeave,
onMouseMove,
type HoverCoverResponse
} from '$lib/Media/Cover/hoverCover';
let searchInput = '';
let searchInputFinal = '';
let hoverCoverState: HoverCoverResponse = {};
onMount(clearAllParameters);
</script>
<div class="card">
<p>
<!-- svelte-ignore missing-declaration -->
<input
type="text"
placeholder="Username"
bind:value={searchInput}
on:keypress={(e) => {
if (e.key === 'Enter') {
searchInputFinal = searchInput;
// eslint-disable-next-line no-undef
umami.track('Collect Episode Discussions');
}
}}
/>
<button
class="button-lined"
on:click={() => (searchInputFinal = searchInput)}
title="Or click your Enter key"
data-umami-event="Collect Episode Discussions"
>
Search
</button>
</p>
{#if searchInputFinal !== ''}
{#await threads(searchInputFinal)}
Loading forum threads ... 50%
{:then threads}
<ul>
{#each threads
.filter((thread) => thread.title.includes('[Spoilers]') && thread.title.includes('Episode'))
.sort((a, b) => b.createdAt - a.createdAt) as thread}
<li>
<span style="opacity: 50%; white-space: pre;">
{new Date(thread.createdAt * 1000).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})}
</span>
<a
href={`https://anilist.co/forum/thread/${thread.id}`}
target="_blank"
on:mouseenter={() => {
if (thread.mediaCategories.length === 0) return;
const response = onMouseEnter(thread.mediaCategories[0]);
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;
}}
>
{thread.title.replace('[Spoilers]', '')}
</a>
</li>
{/each}
</ul>
{:catch}
<p>
Threads 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>
{/await}
{:else}
<p />
Enter a username to search for to continue.
{/if}
</div>
<HoverCover options={hoverCoverState} width={300} />
|