blob: 384d4940f257726da2221996073fcf97977df743 (
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
|
<script lang="ts">
import type { Media } from "$lib/Data/AniList/media";
import ParallaxImage from "$lib/Image/ParallaxImage.svelte";
import { shouldRenderAnimeCover } from "$lib/List/Anime/rendering";
import { outboundLink } from "$lib/Media/links";
import LinkedTooltip from "$lib/Tooltip/LinkedTooltip.svelte";
import settings from "$stores/settings";
import { mediaTitle } from "./mediaTitle";
import "./covers.css";
export let media: Media[];
export let dummy = false;
export let type: "anime" | "manga";
export let upcoming = false;
export let notYetReleased = false;
export let reverseSort = false;
export let limit: number | undefined = undefined;
let uniqueID = new Date().getTime();
$: sortedMedia = reverseSort ? [...media].reverse() : media;
$: processedMedia =
limit !== undefined ? sortedMedia.slice(0, limit) : sortedMedia;
</script>
<div
class="covers"
style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
>
{#each processedMedia as title, index (title.id)}
{@const progress = (title.mediaListEntry || { progress: 0 }).progress}
{@const isAboveFold = index < 6}
{#if type === 'anime'
? shouldRenderAnimeCover(title, { upcoming, notYetReleased })
: progress != title.episodes}
<div class="cover-card" id={`${type}-${title.id}-${uniqueID}`}>
<LinkedTooltip
pin={`${type}-${title.id}-${uniqueID}`}
content={title ? mediaTitle(title) : ''}
relative={dummy}
>
<div class="cover-card-image">
<a
href={$settings.displayCopyMediaTitleNotLink
? '#'
: outboundLink(title, type, $settings.displayOutboundLinksTo)}
onclick={(e) => {
if ($settings.displayCopyMediaTitleNotLink) {
e.preventDefault();
navigator.clipboard.writeText(title.title.romaji);
}
}}
target="_blank"
>
<span class="cover-container">
<ParallaxImage
source={$settings.displayDataSaver
? title.coverImage.medium
: title.coverImage.extraLarge}
alternativeText="Cover"
limit={12.5}
classList={`cover${
title.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
}`}
loading={isAboveFold ? 'eager' : 'lazy'}
fetchpriority={isAboveFold ? 'high' : undefined}
width={$settings.displayDataSaver ? 230 : 460}
height={$settings.displayDataSaver ? 325 : 650}
/>
</span>
</a>
</div>
</LinkedTooltip>
<div class="cover-title">
<slot name="title" {progress} {title} />
</div>
</div>
{/if}
{/each}
</div>
|