feat(list): hover cover

4 files changed, 74 insertions, 2 deletions

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: '';
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} />
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c94c5349..3281d7d3 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -117,6 +117,10 @@
 		/>
 		<SettingCheckboxToggle setting="displayMangaCollapsed" text="Collapse manga panel by default" />
 		<SettingCheckboxToggle setting="displayLimitListHeight" text="Limit list area to screen" />
+		<SettingCheckboxToggle
+			setting="displayHoverCover"
+			text="Display cover on hover for media lists"
+		/>
 		<SettingCheckboxToggle setting="displaySocialButton" text="Display social button for anime" />
 		<SettingCheckboxToggle
 			setting="displayCountdownRightAligned"
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 8461abf6..06b8a13f 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -29,6 +29,7 @@ export interface Settings {
 	display24HourTime: boolean;
 	displayCountdownRightAligned: boolean;
 	displayNativeCountdown: boolean;
+	displayHoverCover: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -54,6 +55,7 @@ const defaultSettings: Settings = {
 	display24HourTime: false,
 	displayCountdownRightAligned: false,
 	displayNativeCountdown: false,
+	displayHoverCover: false,
 
 	// Calculation
 	calculateChaptersRoundedDown: true,