feat(list): hover cover

1 files changed, 34 insertions, 1 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 3ccdbf49..918db3f9 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -6,6 +6,8 @@
 	import settings from '../../../stores/settings';
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
+	import HoverCover from '$lib/Media/HoverCover.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -20,6 +22,10 @@
 	export let due: boolean;
 	export let rateLimited: boolean;
 	export let authorised: boolean;
+
+	let hovering = false;
+	let hoveredMedia: Media | null = null;
+	let imageStyle = '';
 </script>
 
 {#if authorised}
@@ -54,7 +60,32 @@
 		{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
 
 		{#if progress !== manga.episodes}
-			<li>
+			<li
+				class="entry"
+				on:mouseenter={() => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseEnter(manga);
+
+					hovering = response.hovering;
+					hoveredMedia = response.media;
+				}}
+				on:mouseleave={() => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseLeave();
+
+					hovering = response.hovering;
+					hoveredMedia = response.media;
+				}}
+				on:mousemove={(e) => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseMove(e);
+
+					imageStyle = response.style;
+				}}
+			>
 				<a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank">
 					<span
 						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
@@ -96,3 +127,5 @@
 		{/if}
 	{/each}
 </ul>
+
+<HoverCover {hovering} {hoveredMedia} {imageStyle} />