feat(discussions: hover cover

1 files changed, 35 insertions, 1 deletions

diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index e1ffa8dd..33f63c0e 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -2,9 +2,17 @@
 	import { threads } from '$lib/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';
 
 	let searchInput = '';
 	let searchInputFinal = '';
+	let hoverCoverState: HoverCoverResponse = {};
 
 	onMount(clearAllParameters);
 </script>
@@ -51,7 +59,31 @@
 								year: 'numeric'
 							})}
 						</span>
-						<a href={`https://anilist.co/forum/thread/${thread.id}`} target="_blank">
+						<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;
+							}}
+						>
 							{thread.title.replace('[Spoilers]', '')}
 						</a>
 					</li>
@@ -77,3 +109,5 @@
 		Enter a username to search for to continue.
 	{/if}
 </div>
+
+<HoverCover options={hoverCoverState} width={300} />