fix(schedule): bypass forced refresh on move

2 files changed, 65 insertions, 53 deletions

diff --git a/src/lib/Tools/Schedule/CoverBypass.svelte b/src/lib/Tools/Schedule/CoverBypass.svelte
new file mode 100644
index 00000000..0467c68e
--- /dev/null
+++ b/src/lib/Tools/Schedule/CoverBypass.svelte
@@ -0,0 +1,63 @@
+<script lang="ts" ts>
+	import type { Media } from '$lib/AniList/media';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
+	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
+	import {
+		onMouseEnter,
+		type HoverCoverResponse,
+		onMouseLeave,
+		onMouseMove
+	} from '$lib/Media/Cover/hoverCover';
+
+	import { outboundLink } from '$lib/Media/links';
+	import settings from '$stores/settings';
+
+	export let media: Media | null;
+	export let entry: SubsPleaseEpisode;
+
+	let hoverCoverState: HoverCoverResponse = {};
+
+	const titleSelect = (media: Media | null) =>
+		media ? media.title.english || media.title.romaji || media.title.native : null;
+</script>
+
+<a
+	href={media
+		? outboundLink(media, 'anime', $settings.displayOutboundLinksTo)
+		: outboundLink(
+				null,
+				'anime',
+				$settings.displayOutboundLinksTo,
+				true,
+				titleSelect(media) || entry.title
+		  )}
+	target="_blank"
+	on:mouseenter={() => {
+		const response = onMouseEnter(media, entry);
+
+		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;
+	}}
+>
+	{#if media}
+		<MediaTitleDisplay title={media.title} />
+	{:else}
+		{entry.title}
+	{/if}
+</a>
+
+<HoverCover options={hoverCoverState} width={300} />
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 5fdbb526..68d1c2f1 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -9,19 +9,11 @@
 	import { scheduleMediaListCollection } from '$lib/AniList/schedule';
 	import { season } from '$lib/Media/Anime/season';
 	import { findClosestMedia } from '$lib/Media/Anime/Airing/Subtitled/match';
-	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
-	import { outboundLink } from '$lib/Media/links';
 	import HeadTitle from '$lib/HeadTitle.svelte';
-	import {
-		onMouseEnter,
-		onMouseLeave,
-		onMouseMove,
-		type HoverCoverResponse
-	} from '$lib/Media/Cover/hoverCover';
-	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte';
 	import Loading from '$lib/Loading.svelte';
 	import './container.css';
+	import CoverBypass from './CoverBypass.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -39,8 +31,6 @@
 		scheduledMediaPromise = scheduleMediaListCollection(new Date().getFullYear(), season());
 	});
 
-	let hoverCoverState: HoverCoverResponse = {};
-
 	const shiftSubsPleaseSchedule = (schedule: SubsPlease['schedule']) => {
 		const shiftedSchedule: { [key: string]: SubsPleaseEpisode[] } = {};
 
@@ -78,9 +68,6 @@
 	const associateMedia = (media: (Media | undefined)[], title: string) =>
 		findClosestMedia(media as Media[], title);
 
-	const titleSelect = (media: Media | null) =>
-		media ? media.title.english || media.title.romaji || media.title.native : null;
-
 	const episode = (media: Media, weekday: string) => {
 		if (media.nextAiringEpisode?.episode === 1) return 1;
 
@@ -147,43 +134,7 @@
 									{@const media = associateMedia(scheduledMedia, entry.title)}
 
 									<li class="entry">
-										<a
-											href={media
-												? outboundLink(media, 'anime', $settings.displayOutboundLinksTo)
-												: outboundLink(
-														null,
-														'anime',
-														$settings.displayOutboundLinksTo,
-														true,
-														titleSelect(media) || entry.title
-												  )}
-											target="_blank"
-											on:mouseenter={() => {
-												const response = onMouseEnter(media, entry);
-
-												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;
-											}}
-										>
-											{#if media}
-												<MediaTitleDisplay title={media.title} />
-											{:else}
-												{entry.title}
-											{/if}
-										</a>
+										<CoverBypass {media} {entry} />
 										{#if !$settings.displayCountdownRightAligned}
 											<span style="opacity: 50%;">|</span>
 										{/if}
@@ -216,8 +167,6 @@
 	<Error type="Schedule" loginSessionError={false} card />
 {/await}
 
-<HoverCover options={hoverCoverState} width={300} />
-
 <style>
 	.entry::after {
 		content: '';