blob: 18ee51f69f6b16015b7ce845e83f6d69dad23d57 (
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
|
<script lang="ts">
import type { Media } from '$lib/Data/AniList/media';
import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
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;
let uniqueID = new Date().getTime();
</script>
<div
class="covers"
style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
>
{#each media as title}
{@const progress = (title.mediaListEntry || { progress: 0 }).progress}
{#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : 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)}
on:click={(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' : ''
}`}
/>
</span>
</a>
</div>
</LinkedTooltip>
<div class="cover-title">
<slot name="title" {progress} {title} />
</div>
</div>
{/if}
{/each}
</div>
|