feat: replace hover cover with image tooltip

7 files changed, 16 insertions, 178 deletions

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 2dfc09cd..ae8dcca0 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -6,13 +6,6 @@
 	import MediaTitleDisplay from './List/MediaTitleDisplay.svelte';
 	import { outboundLink } from './Media/links';
 	import settings from '$stores/settings';
-	import {
-		onMouseEnter,
-		onMouseLeave,
-		onMouseMove,
-		type HoverCoverResponse
-	} from './Media/Cover/hoverCover';
-	import HoverCover from './Media/Cover/HoverCover.svelte';
 	import root from './Utility/root';
 	import type { Media } from './Data/AniList/media';
 	import { env } from '$env/dynamic/public';
@@ -47,7 +40,6 @@
 		)
 		.sort(() => 0.5 - Math.random())
 		.slice(0, animeCount) as unknown as Media[];
-	let hoverCoverState: HoverCoverResponse = {};
 </script>
 
 <div class="example-item card">
@@ -63,25 +55,8 @@
 						<a
 							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
 							target="_blank"
-							on:mouseenter={() => {
-								const response = onMouseEnter(manga);
-
-								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="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+							use:tooltip
 						>
 							<MediaTitleDisplay title={manga.title} />
 						</a>
@@ -154,25 +129,8 @@
 						<a
 							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
 							target="_blank"
-							on:mouseenter={() => {
-								const response = onMouseEnter(anime);
-
-								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="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+							use:tooltip
 						>
 							<MediaTitleDisplay title={anime.title} />
 						</a>
@@ -266,8 +224,6 @@
 	</div>
 </div>
 
-<HoverCover options={hoverCoverState} width={300} />
-
 <style>
 	.example-item {
 		display: flex;
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index af895090..86e2c9c1 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -151,8 +151,6 @@
 							target="_blank"
 							title={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 							use:tooltip
-							id={`anime-${anime.id}`}
-							data-tooltipPin={`anime-${anime.id}`}
 						>
 							<span
 								style={lastUpdatedMedia === anime.id && anime.episodes !== progress
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 9e83e2a7..42bdb369 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -109,8 +109,6 @@
 					target="_blank"
 					title={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 					use:tooltip
-					id={`manga-${manga.id}`}
-					data-tooltipPin={`manga-${manga.id}`}
 				>
 					<span
 						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte
index 925f7cc6..3b0b1f41 100644
--- a/src/lib/Schedule/CoverBypass.svelte
+++ b/src/lib/Schedule/CoverBypass.svelte
@@ -2,13 +2,6 @@
 	import type { Media } from '$lib/Data/AniList/media';
 	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
 	import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import {
-		onMouseEnter,
-		type HoverCoverResponse,
-		onMouseLeave,
-		onMouseMove
-	} from '$lib/Media/Cover/hoverCover';
 
 	import { outboundLink } from '$lib/Media/links';
 	import tooltip from '$lib/Tooltip/tooltip';
@@ -19,7 +12,6 @@
 	export let entry: SubsPleaseEpisode;
 	export let cover = true;
 
-	let hoverCoverState: HoverCoverResponse = {};
 	const abbreviateTo = 40;
 
 	const titleSelect = (media: Media | null) =>
@@ -37,25 +29,9 @@
 				titleSelect(media) || entry.title
 		  )}
 	target="_blank"
-	on:mouseenter={() => {
-		const response = onMouseEnter(media, entry);
-
-		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="${media?.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+	use:tooltip
+	data-tooltip-disable={media && cover ? false : true}
 >
 	{#if media}
 		<MediaTitleDisplay
@@ -72,7 +48,3 @@
 		</span>
 	{/if}
 </a>
-
-{#if cover}
-	<HoverCover options={hoverCoverState} width={300} />
-{/if}
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}