blob: 11df399bab5da62a60f776bd2120369fb2219e4c (
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
|
<script lang="ts" ts>
import type { Media } from '$lib/Data/AniList/media';
import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
import { outboundLink } from '$lib/Media/links';
import tooltip from '$lib/Tooltip/tooltip';
import { abbreviate } from '$lib/Utility/string';
import settings from '$stores/settings';
export let media: Media | null;
export let entry: SubsPleaseEpisode;
export let cover = true;
export let showTooltip = true;
const abbreviateTo = 40;
const titleSelect = (media: Media | null) =>
media ? media.title.english || media.title.romaji || media.title.native : null;
</script>
<a
href={media
? outboundLink(media, 'anime', $settings.displayOutboundLinksTo)
: outboundLink(
null,
'anime',
$settings.displayOutboundLinksTo,
true,
titleSelect(media) || entry.title
)}
target="_blank"
title={`<img src="${media?.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
use:tooltip
data-tooltip-disable={media && cover ? false : true}
>
{#if media}
<MediaTitleDisplay
title={media.title}
abbreviate
{abbreviateTo}
tooltip={showTooltip
? media.title.english?.length > abbreviateTo ||
media.title.romaji?.length > abbreviateTo ||
media.title.native?.length > abbreviateTo
: false}
/>
{:else}
<span title={entry.title} use:tooltip>
{abbreviate(entry.title, abbreviateTo)}
</span>
{/if}
</a>
|