blob: ab1c4ac59366775b201cf9d78037d72fa52b26d7 (
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
|
<script lang="ts">
import type { MediaPrequel } from '$lib/Data/AniList/prequels';
import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
import { airingTime } from '$lib/Media/Anime/Airing/time';
import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
import settings from '$stores/settings';
import type { Media } from '$lib/Data/AniList/media';
export let currentPrequels: MediaPrequel[];
const prequelAiringTime = (prequel: MediaPrequel) =>
airingTime(prequel as unknown as Media, null, false, true);
</script>
<ul>
{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
<li id={`${prequel.id}`}>
<LinkedTooltip
content={`<img src="${
$settings.displayDataSaver ? prequel.coverImage.medium : prequel.coverImage.extraLarge
}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
pin={`${prequel.id}`}
pinPosition="top"
disable={!$settings.displayHoverCover}
>
<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
<MediaTitleDisplay title={prequel.title} />
</a>
<span class="opaque">|</span>
{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
{@html prequelAiringTime(prequel)}
</LinkedTooltip>
</li>
{/each}
</ul>
|