From 1d190da6e3b97ce338d185880375382b2f4bd5f7 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 28 Dec 2023 20:28:03 -0800
Subject: feat(list): hover cover

---
 src/lib/List/Anime/CleanAnimeList.svelte | 35 +++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

(limited to 'src/lib/List/Anime/CleanAnimeList.svelte')

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 67d6797e..425b588a 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -12,6 +12,8 @@
 	import { outboundLink } from '$lib/Media/links';
 	import { onDestroy } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
+	import HoverCover from '$lib/Media/HoverCover.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
 
 	export let media: Media[];
 	export let title: string;
@@ -25,6 +27,10 @@
 	export let pendingUpdate: number | null;
 	export let subsPlease: SubsPlease | null = null;
 
+	let hovering = false;
+	let hoveredMedia: Media | null = null;
+	let imageStyle = '';
+
 	const keyCacher = setInterval(
 		() => (media = media),
 		(() => {
@@ -60,7 +66,32 @@
 		{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
 		{#if title.includes('Upcoming Episodes') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-			<li class="entry">
+			<li
+				class="entry"
+				on:mouseenter={() => {
+					if ($settings.displayHoverCover === false) return;
+
+					const response = onMouseEnter(anime);
+
+					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;
+				}}
+			>
 				<span class="content">
 					<a href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} target="_blank">
 						<span
@@ -119,6 +150,8 @@
 	{/each}
 </ul>
 
+<HoverCover {hovering} {hoveredMedia} {imageStyle} />
+
 <style>
 	.entry::after {
 		content: '';
-- 
cgit v1.2.3

