From c6d8dfa34a57973242a99fbd1e920575eb6d019a Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 15 Apr 2024 19:48:58 -0700
Subject: feat(anime): image tooltip

---
 src/lib/List/Anime/CleanAnimeList.svelte | 34 ++++----------------------------
 1 file changed, 4 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index d0c96b8a..af895090 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -11,13 +11,6 @@
 	import { outboundLink } from '$lib/Media/links';
 	import { onDestroy, onMount } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
-	import {
-		onMouseEnter,
-		onMouseLeave,
-		onMouseMove,
-		type HoverCoverResponse
-	} from '$lib/Media/Cover/hoverCover';
 	import { mediaTitle } from '../mediaTitle';
 	import tooltip from '$lib/Tooltip/tooltip';
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
@@ -37,8 +30,6 @@
 	export let upcoming = false;
 	export let notYetReleased = false;
 
-	let hoverCoverState: HoverCoverResponse = {};
-
 	let keyCacher: NodeJS.Timeout;
 
 	onMount(() => {
@@ -158,25 +149,10 @@
 						<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
+							id={`anime-${anime.id}`}
+							data-tooltipPin={`anime-${anime.id}`}
 						>
 							<span
 								style={lastUpdatedMedia === anime.id && anime.episodes !== progress
@@ -239,8 +215,6 @@
 	</ul>
 {/if}
 
-<HoverCover options={hoverCoverState} width={300} />
-
 <style>
 	.covers {
 		display: grid;
-- 
cgit v1.2.3