feat(sequelspy): media cover hover

3 files changed, 43 insertions, 3 deletions

diff --git a/src/lib/AniList/prequels.ts b/src/lib/AniList/prequels.ts
index 5b7b4dab..f3351d81 100644
--- a/src/lib/AniList/prequels.ts
+++ b/src/lib/AniList/prequels.ts
@@ -15,6 +15,9 @@ export interface MediaPrequel {
 		month: number;
 		day: number;
 	};
+	coverImage: {
+		extraLarge: string;
+	};
 }
 
 interface PrequelRelations {
@@ -27,6 +30,9 @@ interface PrequelRelations {
 				status: string;
 				progress: number;
 			};
+			coverImage: {
+				extraLarge: string;
+			};
 		};
 	}[];
 }
@@ -47,6 +53,9 @@ interface PrequelsPage {
 					month: number;
 					day: number;
 				};
+				coverImage: {
+					extraLarge: string;
+				};
 			}[];
 			pageInfo: {
 				hasNextPage: boolean;
@@ -80,6 +89,7 @@ const prequelsPage = async (
         english
         romaji
       }
+			coverImage { extraLarge }
       id
 			nextAiringEpisode { episode airingAt }
 			startDate { year month day }
@@ -96,6 +106,7 @@ const prequelsPage = async (
               status
               progress
             }
+						coverImage { extraLarge }
           }
         }
       }
@@ -157,7 +168,8 @@ export const prequels = async (
 				episodes,
 				seen,
 				nextAiringEpisode: candidate.nextAiringEpisode,
-				startDate: candidate.startDate
+				startDate: candidate.startDate,
+				coverImage: candidate.coverImage
 			});
 	}
 
diff --git a/src/lib/Media/Cover/hoverCover.ts b/src/lib/Media/Cover/hoverCover.ts
index 85e4db7c..18b04420 100644
--- a/src/lib/Media/Cover/hoverCover.ts
+++ b/src/lib/Media/Cover/hoverCover.ts
@@ -9,7 +9,10 @@ interface OnMouseEnterLeave {
 	media: Media | null;
 }
 
-export const onMouseEnter = (media: Media | null, item: SubsPleaseEpisode | null = null) => {
+export const onMouseEnter = (
+	media: Media | Partial<Media> | null,
+	item: SubsPleaseEpisode | null = null
+) => {
 	if (!get(settings).displayHoverCover && !item)
 		return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
 
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index bedbf84e..5684463f 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -9,6 +9,8 @@
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { season as getSeason } from '$lib/Media/Anime/season';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
+	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -16,6 +18,9 @@
 	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
 	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
 	let season = parseOrDefault(urlParameters, 'season', getSeason());
+	let hovering = false;
+	let hoveredMedia: Media | null = null;
+	let imageStyle = '';
 
 	$: {
 		if (year.toString().length === 4) currentPrequels = prequels(user, year, season);
@@ -50,7 +55,25 @@
 {:then currentPrequels}
 	<ul>
 		{#each currentPrequels as prequel}
-			<li>
+			<li
+				on:mouseenter={() => {
+					const response = onMouseEnter(prequel);
+
+					hovering = response.hovering;
+					hoveredMedia = response.media;
+				}}
+				on:mouseleave={() => {
+					const response = onMouseLeave();
+
+					hovering = response.hovering;
+					hoveredMedia = response.media;
+				}}
+				on:mousemove={(e) => {
+					const response = onMouseMove(e);
+
+					imageStyle = response.style;
+				}}
+			>
 				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
 					<MediaTitle title={prequel.title} />
 				</a>
@@ -66,3 +89,5 @@
 	The count ratio is the number of episodes you've seen of any direct prequels, and the total number
 	of episodes of all direct prequels.
 </p>
+
+<HoverCover {hovering} {hoveredMedia} {imageStyle} />