refactor(hovercover): simple state

2 files changed, 32 insertions, 22 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 9809b994..32f4b6f4 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -13,7 +13,12 @@
 	import { onDestroy } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
+	import {
+		onMouseEnter,
+		onMouseLeave,
+		onMouseMove,
+		type HoverCoverResponse
+	} from '$lib/Media/Cover/hoverCover';
 
 	export let media: Media[];
 	export let title: string;
@@ -27,9 +32,7 @@
 	export let pendingUpdate: number | null;
 	export let subsPlease: SubsPlease | null = null;
 
-	let hovering = false;
-	let hoveredMedia: Media | null = null;
-	let imageStyle = '';
+	let hoverCoverState: HoverCoverResponse = {};
 
 	const keyCacher = setInterval(
 		() => (media = media),
@@ -74,19 +77,21 @@
 						on:mouseenter={() => {
 							const response = onMouseEnter(anime);
 
-							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;
 						}}
 					>
 						<span
@@ -145,7 +150,7 @@
 	{/each}
 </ul>
 
-<HoverCover {hovering} {hoveredMedia} {imageStyle} />
+<HoverCover options={hoverCoverState} width={300} />
 
 <style>
 	.entry::after {
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index b7f983b2..396ac38c 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -7,7 +7,12 @@
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
+	import {
+		onMouseEnter,
+		onMouseLeave,
+		onMouseMove,
+		type HoverCoverResponse
+	} from '$lib/Media/Cover/hoverCover';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -23,9 +28,7 @@
 	export let rateLimited: boolean;
 	export let authorised: boolean;
 
-	let hovering = false;
-	let hoveredMedia: Media | null = null;
-	let imageStyle = '';
+	let hoverCoverState: HoverCoverResponse = {};
 </script>
 
 {#if authorised}
@@ -75,19 +78,21 @@
 					on:mouseenter={() => {
 						const response = onMouseEnter(manga);
 
-						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;
 					}}
 				>
 					<span
@@ -131,4 +136,4 @@
 	{/each}
 </ul>
 
-<HoverCover {hovering} {hoveredMedia} {imageStyle} />
+<HoverCover options={hoverCoverState} width={300} />