refactor(hovercover): simple state

2 files changed, 31 insertions, 24 deletions

diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 4944ad2c..479d5b4a 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -12,7 +12,12 @@
 	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/Cover/hoverCover';
+	import {
+		onMouseEnter,
+		onMouseLeave,
+		onMouseMove,
+		type HoverCoverResponse
+	} from '$lib/Media/Cover/hoverCover';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte';
 	import Loading from '$lib/Loading.svelte';
@@ -32,10 +37,7 @@
 		scheduledMediaPromise = scheduleMediaListCollection(new Date().getFullYear(), season());
 	});
 
-	let hovering = false;
-	let hoveredItem: SubsPleaseEpisode | null = null;
-	let hoveredMedia: Media | null = null;
-	let imageStyle = '';
+	let hoverCoverState: HoverCoverResponse = {};
 
 	const shiftSubsPleaseSchedule = (schedule: SubsPlease['schedule']) => {
 		const shiftedSchedule: { [key: string]: SubsPleaseEpisode[] } = {};
@@ -145,21 +147,21 @@
 											on:mouseenter={() => {
 												const response = onMouseEnter(media, entry);
 
-												hovering = response.hovering;
-												hoveredItem = response.item;
-												hoveredMedia = response.media;
+												hoverCoverState.hovering = response.hovering;
+												hoverCoverState.item = response.item;
+												hoverCoverState.media = response.media;
 											}}
 											on:mouseleave={() => {
 												const response = onMouseLeave();
 
-												hovering = response.hovering;
-												hoveredItem = response.item;
-												hoveredMedia = response.media;
+												hoverCoverState.hovering = response.hovering;
+												hoverCoverState.item = response.item;
+												hoverCoverState.media = response.media;
 											}}
 											on:mousemove={(e) => {
 												const response = onMouseMove(e, 300);
 
-												imageStyle = response.style;
+												hoverCoverState.style = response.style;
 											}}
 										>
 											{#if media}
@@ -204,7 +206,7 @@
 
 <Crunchyroll />
 
-<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} width={300} />
+<HoverCover options={hoverCoverState} width={300} />
 
 <style>
 	#list-container {
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index ea6f74d8..acaf9cdf 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -9,7 +9,12 @@
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { season as getSeason } from '$lib/Media/Anime/season';
-	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
+	import {
+		onMouseEnter,
+		onMouseLeave,
+		onMouseMove,
+		type HoverCoverResponse
+	} from '$lib/Media/Cover/hoverCover';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 
 	export let user: AniListAuthorisation;
@@ -18,9 +23,7 @@
 	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
 	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
 	let season = parseOrDefault(urlParameters, 'season', getSeason());
-	let hovering = false;
-	let hoveredMedia: Media | null = null;
-	let imageStyle = '';
+	let hoverCoverState: HoverCoverResponse = {};
 
 	$: {
 		if (year.toString().length === 4) currentPrequels = prequels(user, year, season);
@@ -60,19 +63,21 @@
 					on:mouseenter={() => {
 						const response = onMouseEnter(prequel);
 
-						hovering = response.hovering;
-						hoveredMedia = response.media;
+						hoverCoverState.hovering = response.hovering;
+						hoverCoverState.item = response.item;
+						hoverCoverState.media = response.media;
 					}}
 					on:mouseleave={() => {
 						const response = onMouseLeave();
 
-						hovering = response.hovering;
-						hoveredMedia = response.media;
+						hoverCoverState.hovering = response.hovering;
+						hoverCoverState.item = response.item;
+						hoverCoverState.media = response.media;
 					}}
 					on:mousemove={(e) => {
-						const response = onMouseMove(e);
+						const response = onMouseMove(e, 300);
 
-						imageStyle = response.style;
+						hoverCoverState.style = response.style;
 					}}
 				>
 					<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
@@ -92,4 +97,4 @@
 	of episodes of all direct prequels.
 </div>
 
-<HoverCover {hovering} {hoveredMedia} {imageStyle} />
+<HoverCover options={hoverCoverState} width={300} />