2 files changed, 78 insertions, 0 deletions
diff --git a/src/lib/Media/HoverCover.svelte b/src/lib/Media/HoverCover.svelte
new file mode 100644
index 00000000..a3aea9d6
--- /dev/null
+++ b/src/lib/Media/HoverCover.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease';
+
+	export let hoveredItem: SubsPleaseEpisode | null = null;
+	export let hoveredMedia: Media | null = null;
+	export let imageStyle = '';
+</script>
+
+{#if hoveredItem}
+	<img
+		class="hover-image show"
+		src={hoveredMedia
+			? hoveredMedia.coverImage.extraLarge
+			: `https://subsplease.org${hoveredItem.image_url}`}
+		alt="Media Cover"
+		style={imageStyle}
+	/>
+{/if}
+
+<style>
+	.hover-image {
+		position: fixed;
+		z-index: 1000;
+		width: 300px;
+		height: auto;
+		display: none;
+	}
+
+	.show {
+		display: block;
+	}
+</style>
diff --git a/src/lib/Media/hoverCover.ts b/src/lib/Media/hoverCover.ts
new file mode 100644
index 00000000..5fc98f33
--- /dev/null
+++ b/src/lib/Media/hoverCover.ts
@@ -0,0 +1,45 @@
+import type { Media } from '$lib/AniList/media';
+import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease';
+
+interface OnMouseEnterLeave {
+	item: SubsPleaseEpisode | null;
+	media: Media | null;
+}
+
+export const onMouseEnter = (item: SubsPleaseEpisode, media: Media | null) => {
+	return { item, media } as OnMouseEnterLeave;
+};
+
+export const onMouseLeave = () => {
+	return { item: null, media: null } as OnMouseEnterLeave;
+};
+
+interface OnMouseMove {
+	height: number;
+	style: string;
+}
+
+export const onMouseMove = (event: MouseEvent) => {
+	const 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: ''
+	};
+
+	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;
+};