refactor(media): move hover cover

1 files changed, 52 insertions, 0 deletions

diff --git a/src/lib/Media/Cover/hoverCover.ts b/src/lib/Media/Cover/hoverCover.ts
new file mode 100644
index 00000000..85e4db7c
--- /dev/null
+++ b/src/lib/Media/Cover/hoverCover.ts
@@ -0,0 +1,52 @@
+import type { Media } from '$lib/AniList/media';
+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 const onMouseEnter = (media: Media | null, item: SubsPleaseEpisode | null = null) => {
+	if (!get(settings).displayHoverCover && !item)
+		return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
+
+	return { hovering: true, item, media } as OnMouseEnterLeave;
+};
+
+export const onMouseLeave = () => {
+	return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
+};
+
+interface OnMouseMove {
+	height: number;
+	style: string;
+}
+
+export const onMouseMove = (event: MouseEvent, imageWidth = 300) => {
+	const offset = 10;
+	let imageLeft = 0;
+	let imageTop = 0;
+	const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement;
+	const response: OnMouseMove = {
+		height: 0,
+		style: ''
+	};
+
+	if (image) {
+		image.onload = () => (response.height = image.height);
+		imageLeft =
+			event.pageX + imageWidth + offset > window.innerWidth
+				? event.pageX - imageWidth - offset
+				: event.pageX + offset;
+		imageTop =
+			event.pageY + response.height + offset > window.innerHeight
+				? event.pageY - response.height
+				: event.pageY + offset;
+		response.style = `top: ${imageTop}px; left: ${imageLeft}px;`;
+	}
+
+	return response;
+};