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/routes/schedule/+page.svelte | 63 ++++++++++------------------------------
 1 file changed, 16 insertions(+), 47 deletions(-)

(limited to 'src/routes')

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