blob: 235979c11a3b991a492c58fb8985a1fc76a04522 (
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
|
<script lang="ts" ts>
import type { Media } from '$lib/AniList/media';
import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
import {
onMouseEnter,
type HoverCoverResponse,
onMouseLeave,
onMouseMove
} from '$lib/Media/Cover/hoverCover';
import { outboundLink } from '$lib/Media/links';
import settings from '$stores/settings';
export let media: Media | null;
export let entry: SubsPleaseEpisode;
export let cover = true;
let hoverCoverState: HoverCoverResponse = {};
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"
on:mouseenter={() => {
const response = onMouseEnter(media, entry);
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;
}}
>
{#if media}
<MediaTitleDisplay title={media.title} />
{:else}
{entry.title}
{/if}
</a>
{#if cover}
<HoverCover options={hoverCoverState} width={300} />
{/if}
|