From 48b0892454f981b5b3e964b85e30daa087c44814 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 28 Dec 2023 20:04:27 -0800
Subject: refactor(schedule): move hover cover to component

---
 src/lib/Media/HoverCover.svelte  | 33 +++++++++++++++++++++
 src/lib/Media/hoverCover.ts      | 45 ++++++++++++++++++++++++++++
 src/routes/schedule/+page.svelte | 63 ++++++++++------------------------------
 3 files changed, 94 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/Media/HoverCover.svelte
 create mode 100644 src/lib/Media/hoverCover.ts

diff --git a/src/lib/Media/HoverCover.svelte b/src/lib/Media/HoverCover.svelte
new file mode 100644
index 00000000..a3aea9d6
--- /dev/null
+++ b/src/lib/Media/HoverCover.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease';
+
+	export let hoveredItem: SubsPleaseEpisode | null = null;
+	export let hoveredMedia: Media | null = null;
+	export let imageStyle = '';
+</script>
+
+{#if hoveredItem}
+	<img
+		class="hover-image show"
+		src={hoveredMedia
+			? hoveredMedia.coverImage.extraLarge
+			: `https://subsplease.org${hoveredItem.image_url}`}
+		alt="Media Cover"
+		style={imageStyle}
+	/>
+{/if}
+
+<style>
+	.hover-image {
+		position: fixed;
+		z-index: 1000;
+		width: 300px;
+		height: auto;
+		display: none;
+	}
+
+	.show {
+		display: block;
+	}
+</style>
diff --git a/src/lib/Media/hoverCover.ts b/src/lib/Media/hoverCover.ts
new file mode 100644
index 00000000..5fc98f33
--- /dev/null
+++ b/src/lib/Media/hoverCover.ts
@@ -0,0 +1,45 @@
+import type { Media } from '$lib/AniList/media';
+import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease';
+
+interface OnMouseEnterLeave {
+	item: SubsPleaseEpisode | null;
+	media: Media | null;
+}
+
+export const onMouseEnter = (item: SubsPleaseEpisode, media: Media | null) => {
+	return { item, media } as OnMouseEnterLeave;
+};
+
+export const onMouseLeave = () => {
+	return { item: null, media: null } as OnMouseEnterLeave;
+};
+
+interface OnMouseMove {
+	height: number;
+	style: string;
+}
+
+export const onMouseMove = (event: MouseEvent) => {
+	const imageWidth = 300;
+	const offset = 10;
+	let imageLeft = 0;
+	let imageTop = 0;
+	const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement;
+	const response: OnMouseMove = {
+		height: 0,
+		style: ''
+	};
+
+	image.onload = () => (response.height = image.height);
+	imageLeft =
+		event.pageX + imageWidth + offset > window.innerWidth
+			? event.pageX - imageWidth - offset
+			: event.pageX + offset;
+	imageTop =
+		event.pageY + response.height + offset > window.innerHeight
+			? event.pageY - response.height
+			: event.pageY + offset;
+	response.style = `top: ${imageTop}px; left: ${imageLeft}px;`;
+
+	return response;
+};
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 362b6a39..f1d4d92a 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -12,6 +12,8 @@
 	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
 	import { outboundLink } from '$lib/Media/links';
 	import HeadTitle from '$lib/HeadTitle.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
+	import HoverCover from '$lib/Media/HoverCover.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -31,26 +33,6 @@
 	let hoveredItem: SubsPleaseEpisode | null = null;
 	let hoveredMedia: Media | null = null;
 	let imageStyle = '';
-	let imageHeight = 0;
-
-	const onMouseMove = (event: MouseEvent) => {
-		const imageWidth = 300;
-		const offset = 10;
-		let imageLeft = 0;
-		let imageTop = 0;
-		const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement;
-
-		image.onload = () => (imageHeight = image.height);
-		imageLeft =
-			event.pageX + imageWidth + offset > window.innerWidth
-				? event.pageX - imageWidth - offset
-				: event.pageX + offset;
-		imageTop =
-			event.pageY + imageHeight + offset > window.innerHeight
-				? event.pageY - imageHeight
-				: event.pageY + offset;
-		imageStyle = `top: ${imageTop}px; left: ${imageLeft}px;`;
-	};
 
 	const shiftSubsPleaseSchedule = (schedule: SubsPlease['schedule']) => {
 		const shiftedSchedule: { [key: string]: SubsPleaseEpisode[] } = {};
@@ -126,14 +108,22 @@
 									<li
 										class="entry"
 										on:mouseenter={() => {
-											hoveredItem = entry;
-											hoveredMedia = media;
+											const response = onMouseEnter(entry, media);
+
+											hoveredItem = response.item;
+											hoveredMedia = response.media;
 										}}
 										on:mouseleave={() => {
-											hoveredItem = null;
-											hoveredMedia = null;
+											const response = onMouseLeave();
+
+											hoveredItem = response.item;
+											hoveredMedia = response.media;
+										}}
+										on:mousemove={(e) => {
+											const response = onMouseMove(e);
+
+											imageStyle = response.style;
 										}}
-										on:mousemove={onMouseMove}
 									>
 										<a
 											href={media
@@ -186,16 +176,7 @@
 	<Error type="Schedule" loginSessionError={false} />
 {/await}
 
-{#if hoveredItem}
-	<img
-		class="hover-image show"
-		src={hoveredMedia
-			? hoveredMedia.coverImage.extraLarge
-			: `https://subsplease.org${hoveredItem.image_url}`}
-		alt="Media Cover"
-		style={imageStyle}
-	/>
-{/if}
+<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} />
 
 <style>
 	#list-container {
@@ -224,16 +205,4 @@
 	.today {
 		font-weight: bold;
 	}
-
-	.hover-image {
-		position: fixed;
-		z-index: 1000;
-		width: 300px;
-		height: auto;
-		display: none;
-	}
-
-	.show {
-		display: block;
-	}
 </style>
-- 
cgit v1.2.3