feat: replace hover cover with image tooltip

1 files changed, 4 insertions, 48 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;