refactor(hovercover): simple state

2 files changed, 24 insertions, 27 deletions

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;`;