aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Schedule/CoverBypass.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-01-21 17:53:00 -0800
committerFuwn <[email protected]>2024-01-21 17:53:00 -0800
commiteb11e54a4b8a9bf3d648659521906d4cacdd8ae2 (patch)
treed50c146930a51fecd4d8253bc86906a5baf180a1 /src/lib/Schedule/CoverBypass.svelte
parentrefactor(schedule): move top-level tool to route (diff)
downloaddue.moe-eb11e54a4b8a9bf3d648659521906d4cacdd8ae2.tar.xz
due.moe-eb11e54a4b8a9bf3d648659521906d4cacdd8ae2.zip
refactor(schedule): move module out of tools
Diffstat (limited to 'src/lib/Schedule/CoverBypass.svelte')
-rw-r--r--src/lib/Schedule/CoverBypass.svelte66
1 files changed, 66 insertions, 0 deletions
diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte
new file mode 100644
index 00000000..235979c1
--- /dev/null
+++ b/src/lib/Schedule/CoverBypass.svelte
@@ -0,0 +1,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}