feat(manga): image tooltip

1 files changed, 5 insertions, 29 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 774a5232..9e83e2a7 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -6,19 +6,13 @@
 	import settings from '$stores/settings';
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import {
-		onMouseEnter,
-		onMouseLeave,
-		onMouseMove,
-		type HoverCoverResponse
-	} from '$lib/Media/Cover/hoverCover';
 	import { onMount } from 'svelte';
 	import root from '$lib/Utility/root';
 	import locale from '$stores/locale';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import { browser } from '$app/environment';
 	import proxy from '$lib/Utility/proxy';
+	import tooltip from '$lib/Tooltip/tooltip';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -34,7 +28,6 @@
 	export let rateLimited: boolean;
 	export let authorised: boolean;
 
-	let hoverCoverState: HoverCoverResponse = {};
 	let serviceStatusResponse: Promise<Response>;
 
 	onMount(() => {
@@ -114,25 +107,10 @@
 				<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
+					id={`manga-${manga.id}`}
+					data-tooltipPin={`manga-${manga.id}`}
 				>
 					<span
 						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
@@ -175,5 +153,3 @@
 		{/if}
 	{/each}
 </ul>
-
-<HoverCover options={hoverCoverState} width={300} />