refactor(hovercover): simple state

6 files changed, 87 insertions, 73 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} />
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte
index c2ce5f49..92c0e6fd 100644
--- a/src/lib/Media/Cover/HoverCover.svelte
+++ b/src/lib/Media/Cover/HoverCover.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
-	import type { Media } from '$lib/AniList/media';
-	import type { SubsPleaseEpisode } from '../Anime/Airing/Subtitled/subsPlease';
+	import type { HoverCoverResponse } from './hoverCover';
 
-	export let hovering = false;
-	export let hoveredItem: SubsPleaseEpisode | null = null;
-	export let hoveredMedia: Media | null = null;
-	export let imageStyle = '';
+	export let options: HoverCoverResponse;
 	export let width = 250;
 </script>
 
-{#if hovering}
+{#if options.hovering}
 	<img
 		class="hover-image show card card-small"
-		src={hoveredMedia
-			? hoveredMedia.coverImage.extraLarge
-			: `https://subsplease.org${hoveredItem?.image_url}`}
+		src={options.media
+			? options.media.coverImage.extraLarge
+			: `https://subsplease.org${options.item?.image_url}`}
 		alt="Media Cover"
-		style={`width: ${width}px; ${imageStyle}`}
+		style={`width: ${width}px; ${options.style}`}
 	/>
 {/if}
 
diff --git a/src/lib/Media/Cover/hoverCover.ts b/src/lib/Media/Cover/hoverCover.ts
index 0a162f3e..c93cd682 100644
--- a/src/lib/Media/Cover/hoverCover.ts
+++ b/src/lib/Media/Cover/hoverCover.ts
@@ -3,10 +3,15 @@ import { get } from 'svelte/store';
 import type { SubsPleaseEpisode } from '../Anime/Airing/Subtitled/subsPlease';
 import settings from '$stores/settings';
 
-interface OnMouseEnterLeave {
-	hovering: boolean;
-	item: SubsPleaseEpisode | null;
-	media: Media | null;
+export interface HoverCoverResponse {
+	// OnMouseEnterLeave
+	hovering?: boolean;
+	item?: SubsPleaseEpisode | null;
+	media?: Media | null;
+
+	// OnMouseMove
+	height?: number;
+	style?: string;
 }
 
 export const onMouseEnter = (
@@ -14,36 +19,32 @@ export const onMouseEnter = (
 	item: SubsPleaseEpisode | null = null
 ) => {
 	if (!get(settings).displayHoverCover && !item)
-		return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
+		return { hovering: false, item: null, media: null } as HoverCoverResponse;
 
-	return { hovering: true, item, media } as OnMouseEnterLeave;
+	return { hovering: true, item, media } as HoverCoverResponse;
 };
 
 export const onMouseLeave = () => {
-	return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
+	return { hovering: false, item: null, media: null } as HoverCoverResponse;
 };
 
-interface OnMouseMove {
-	height: number;
-	style: string;
-}
-
 export const onMouseMove = (event: MouseEvent, imageWidth = 250) => {
 	const offset = 10;
 	let imageLeft = 0;
 	let imageTop = 0;
-	const response: OnMouseMove = {
+	const response: HoverCoverResponse = {
 		height: (document.getElementsByClassName('hover-image')[0] as HTMLImageElement).height,
 		style: ''
 	};
+	const height = response.height || 0;
 
 	imageLeft =
-		event.pageX + response.height + offset > window.innerWidth
+		event.pageX + height + offset > window.innerWidth
 			? event.pageX - imageWidth - offset
 			: event.pageX + offset;
 	imageTop =
-		event.pageY + response.height + offset > window.innerHeight
-			? event.pageY - response.height
+		event.pageY + height + offset > window.innerHeight
+			? event.pageY - height
 			: event.pageY + offset;
 	response.style = `top: ${imageTop}px; left: ${imageLeft}px;`;
 
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} />