feat: replace hover cover with image tooltip

3 files changed, 9 insertions, 95 deletions

diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 4e38161e..d213949f 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -2,17 +2,10 @@
 	import { threads } from '$lib/Data/AniList/forum';
 	import { onMount } from 'svelte';
 	import { clearAllParameters } from '../Utility/parameters';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import {
-		onMouseEnter,
-		onMouseLeave,
-		onMouseMove,
-		type HoverCoverResponse
-	} from '$lib/Media/Cover/hoverCover';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import InputTemplate from './InputTemplate.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
 
-	let hoverCoverState: HoverCoverResponse = {};
 	let submission = '';
 
 	onMount(clearAllParameters);
@@ -43,27 +36,8 @@
 						<a
 							href={`https://anilist.co/forum/thread/${thread.id}`}
 							target="_blank"
-							on:mouseenter={() => {
-								if (thread.mediaCategories.length === 0) return;
-
-								const response = onMouseEnter(thread.mediaCategories[0]);
-
-								hoverCoverState.hovering = response.hovering;
-								hoverCoverState.item = response.item;
-								hoverCoverState.media = response.media;
-							}}
-							on:mouseleave={() => {
-								const response = onMouseLeave();
-
-								hoverCoverState.hovering = response.hovering;
-								hoverCoverState.item = response.item;
-								hoverCoverState.media = response.media;
-							}}
-							on:mousemove={(e) => {
-								const response = onMouseMove(e, 300);
-
-								hoverCoverState.style = response.style;
-							}}
+							title={`<img src="${thread.mediaCategories[0].coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+							use:tooltip
 						>
 							{thread.title.replace('[Spoilers]', '')}
 						</a>
@@ -85,5 +59,3 @@
 		Enter a username to search for to continue.
 	{/if}
 </InputTemplate>
-
-<HoverCover options={hoverCoverState} width={300} />
diff --git a/src/lib/Tools/Likes.svelte b/src/lib/Tools/Likes.svelte
index 25da23d0..d4f62cb9 100644
--- a/src/lib/Tools/Likes.svelte
+++ b/src/lib/Tools/Likes.svelte
@@ -3,17 +3,10 @@
 	import { threadLikes } from '$lib/Data/AniList/forum';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import {
-		onMouseEnter,
-		type HoverCoverResponse,
-		onMouseLeave,
-		onMouseMove
-	} from '$lib/Media/Cover/hoverCover';
+	import tooltip from '$lib/Tooltip/tooltip';
 	import InputTemplate from './InputTemplate.svelte';
 
 	let submission = '';
-	let hoverCoverState: HoverCoverResponse = {};
 
 	$: normalisedSubmission = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2');
 	$: submissionType = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1');
@@ -42,31 +35,8 @@
 							<a
 								href={`https://anilist.co/user/${like.name}`}
 								target="_blank"
-								on:mouseenter={() => {
-									const response = onMouseEnter({
-										coverImage: {
-											extraLarge:
-												like?.avatar?.large ??
-												'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-										}
-									});
-
-									hoverCoverState.hovering = response.hovering;
-									hoverCoverState.item = response.item;
-									hoverCoverState.media = response.media;
-								}}
-								on:mouseleave={() => {
-									const response = onMouseLeave();
-
-									hoverCoverState.hovering = response.hovering;
-									hoverCoverState.item = response.item;
-									hoverCoverState.media = response.media;
-								}}
-								on:mousemove={(e) => {
-									const response = onMouseMove(e, 300);
-
-									hoverCoverState.style = response.style;
-								}}
+								title={`<img src="${like.avatar?.large}" style="width: 150px; object-fit: cover; border-radius: 8px;" />`}
+								use:tooltip
 							>
 								{like.name}
 							</a>
@@ -83,5 +53,3 @@
 		Please enter a valid Activity or Thread URL.
 	{/if}
 </InputTemplate>
-
-<HoverCover options={hoverCoverState} width={300} />
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index 94a7be62..2aaa5f60 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -9,16 +9,10 @@
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { season as getSeason } from '$lib/Media/Anime/season';
-	import {
-		onMouseEnter,
-		onMouseLeave,
-		onMouseMove,
-		type HoverCoverResponse
-	} from '$lib/Media/Cover/hoverCover';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import identity from '$stores/identity';
 	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
 
 	export let user: AniListAuthorisation;
 
@@ -26,7 +20,6 @@
 	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
 	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
 	let season = parseOrDefault(urlParameters, 'season', getSeason());
-	let hoverCoverState: HoverCoverResponse = {};
 
 	$: {
 		if (year.toString().length === 4 && $identity.id !== -2 && user)
@@ -70,25 +63,8 @@
 						<a
 							href={`https://anilist.co/anime/${prequel.id}`}
 							target="_blank"
-							on:mouseenter={() => {
-								const response = onMouseEnter(prequel);
-
-								hoverCoverState.hovering = response.hovering;
-								hoverCoverState.item = response.item;
-								hoverCoverState.media = response.media;
-							}}
-							on:mouseleave={() => {
-								const response = onMouseLeave();
-
-								hoverCoverState.hovering = response.hovering;
-								hoverCoverState.item = response.item;
-								hoverCoverState.media = response.media;
-							}}
-							on:mousemove={(e) => {
-								const response = onMouseMove(e, 300);
-
-								hoverCoverState.style = response.style;
-							}}
+							title={`<img src="${prequel.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+							use:tooltip
 						>
 							<MediaTitle title={prequel.title} />
 						</a>
@@ -105,6 +81,4 @@
 		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.
 	</div>
-
-	<HoverCover options={hoverCoverState} width={300} />
 {/if}