feat(schedule): hoverable cover

1 files changed, 46 insertions, 12 deletions

diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 71ee8249..b86221b2 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -1,17 +1,28 @@
 <script lang="ts">
 	import Error from '$lib/Error.svelte';
-	import type { SubsPlease } from '$lib/subsPlease';
+	import type { SubsPlease, SubsPleaseEpisode } from '$lib/subsPlease';
 	import { onMount } from 'svelte';
 	import settings from '../../stores/settings';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-	onMount(async () => {
-		subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json());
-	});
+	onMount(
+		async () => (subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json()))
+	);
 
-	const entryKey = (entry: unknown, key: string) => (entry as any)[key];
+	let hoveredItem: SubsPleaseEpisode | null = null;
+	let imageStyle = '';
+
+	const onMouseMove = (event: MouseEvent) => {
+		const imageWidth = 300;
+		const offset = 10;
+
+		imageStyle =
+			event.pageX + imageWidth + offset > window.innerWidth
+				? `top: ${event.pageY + offset}px; left: ${event.pageX - imageWidth - offset}px;`
+				: `top: ${event.pageY + offset}px; left: ${event.pageX + offset}px;`;
+	};
 </script>
 
 {#await subsPleasePromise}
@@ -33,18 +44,20 @@
 
 					<ul>
 						{#each Object.values(scheduleEntry) as entry}
-							<li class="entry">
-								<a
-									href={`https://anilist.co/search?search=${entryKey(entry, 'title')}`}
-									target="_blank"
-								>
-									{entryKey(entry, 'title')}
+							<li
+								class="entry"
+								on:mouseenter={() => (hoveredItem = entry)}
+								on:mouseleave={() => (hoveredItem = null)}
+								on:mousemove={onMouseMove}
+							>
+								<a href={`https://anilist.co/search?search=${entry.title}`} target="_blank">
+									{entry.title}
 								</a>
 								{#if !$settings.displayCountdownRightAligned}
 									<span style="opacity: 50%;">|</span>
 								{/if}
 								<span class:countdown={$settings.displayCountdownRightAligned}>
-									{entryKey(entry, 'time')}
+									{entry.time}
 								</span>
 							</li>
 						{/each}
@@ -61,6 +74,15 @@
 	<Error type="Schedule" loginSessionError={false} />
 {/await}
 
+{#if hoveredItem}
+	<img
+		class="hover-image show"
+		src={`https://subsplease.org${hoveredItem.image_url}`}
+		alt="Media Cover"
+		style={imageStyle}
+	/>
+{/if}
+
 <style>
 	#list-container {
 		display: flex;
@@ -88,4 +110,16 @@
 	.today {
 		font-weight: bold;
 	}
+
+	.hover-image {
+		position: fixed;
+		z-index: 1000;
+		width: 300px;
+		height: auto;
+		display: none;
+	}
+
+	.show {
+		display: block;
+	}
 </style>