From 1bf5e3fe55defe95114c9df69b62cc1b40761a0b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 2 Jan 2024 02:14:22 -0800
Subject: refactor(media): move hover cover

---
 src/lib/List/Anime/CleanAnimeList.svelte |  4 +--
 src/lib/List/Manga/CleanMangaList.svelte |  4 +--
 src/lib/Media/Cover/HoverCover.svelte    | 34 +++++++++++++++++++++
 src/lib/Media/Cover/hoverCover.ts        | 52 ++++++++++++++++++++++++++++++++
 src/lib/Media/HoverCover.svelte          | 34 ---------------------
 src/lib/Media/hoverCover.ts              | 52 --------------------------------
 src/lib/Tools/Schedule/Tool.svelte       |  4 +--
 7 files changed, 92 insertions(+), 92 deletions(-)
 create mode 100644 src/lib/Media/Cover/HoverCover.svelte
 create mode 100644 src/lib/Media/Cover/hoverCover.ts
 delete mode 100644 src/lib/Media/HoverCover.svelte
 delete mode 100644 src/lib/Media/hoverCover.ts

(limited to 'src')

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index beebf67f..c0a737dc 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -12,8 +12,8 @@
 	import { outboundLink } from '$lib/Media/links';
 	import { onDestroy } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
-	import HoverCover from '$lib/Media/HoverCover.svelte';
-	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
+	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
 
 	export let media: Media[];
 	export let title: string;
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 4fb5057a..9757f748 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -6,8 +6,8 @@
 	import settings from '$stores/settings';
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
-	import HoverCover from '$lib/Media/HoverCover.svelte';
-	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
+	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte
new file mode 100644
index 00000000..b0c15fc5
--- /dev/null
+++ b/src/lib/Media/Cover/HoverCover.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import type { SubsPleaseEpisode } from '../Anime/Airing/Subtitled/subsPlease';
+
+	export let hovering = false;
+	export let hoveredItem: SubsPleaseEpisode | null = null;
+	export let hoveredMedia: Media | null = null;
+	export let imageStyle = '';
+</script>
+
+{#if hovering}
+	<img
+		class="hover-image show"
+		src={hoveredMedia
+			? hoveredMedia.coverImage.extraLarge
+			: `https://subsplease.org${hoveredItem?.image_url}`}
+		alt="Media Cover"
+		style={imageStyle}
+	/>
+{/if}
+
+<style>
+	.hover-image {
+		position: fixed;
+		z-index: 1000;
+		width: 300px;
+		height: auto;
+		display: none;
+	}
+
+	.show {
+		display: block;
+	}
+</style>
diff --git a/src/lib/Media/Cover/hoverCover.ts b/src/lib/Media/Cover/hoverCover.ts
new file mode 100644
index 00000000..85e4db7c
--- /dev/null
+++ b/src/lib/Media/Cover/hoverCover.ts
@@ -0,0 +1,52 @@
+import type { Media } from '$lib/AniList/media';
+import { get } from 'svelte/store';
+import type { SubsPleaseEpisode } from '../Anime/Airing/Subtitled/subsPlease';
+import settings from '$stores/settings';
+
+interface OnMouseEnterLeave {
+	hovering: boolean;
+	item: SubsPleaseEpisode | null;
+	media: Media | null;
+}
+
+export const onMouseEnter = (media: Media | null, item: SubsPleaseEpisode | null = null) => {
+	if (!get(settings).displayHoverCover && !item)
+		return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
+
+	return { hovering: true, item, media } as OnMouseEnterLeave;
+};
+
+export const onMouseLeave = () => {
+	return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
+};
+
+interface OnMouseMove {
+	height: number;
+	style: string;
+}
+
+export const onMouseMove = (event: MouseEvent, imageWidth = 300) => {
+	const offset = 10;
+	let imageLeft = 0;
+	let imageTop = 0;
+	const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement;
+	const response: OnMouseMove = {
+		height: 0,
+		style: ''
+	};
+
+	if (image) {
+		image.onload = () => (response.height = image.height);
+		imageLeft =
+			event.pageX + imageWidth + offset > window.innerWidth
+				? event.pageX - imageWidth - offset
+				: event.pageX + offset;
+		imageTop =
+			event.pageY + response.height + offset > window.innerHeight
+				? event.pageY - response.height
+				: event.pageY + offset;
+		response.style = `top: ${imageTop}px; left: ${imageLeft}px;`;
+	}
+
+	return response;
+};
diff --git a/src/lib/Media/HoverCover.svelte b/src/lib/Media/HoverCover.svelte
deleted file mode 100644
index d4009bec..00000000
--- a/src/lib/Media/HoverCover.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import type { Media } from '$lib/AniList/media';
-	import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease';
-
-	export let hovering = false;
-	export let hoveredItem: SubsPleaseEpisode | null = null;
-	export let hoveredMedia: Media | null = null;
-	export let imageStyle = '';
-</script>
-
-{#if hovering}
-	<img
-		class="hover-image show"
-		src={hoveredMedia
-			? hoveredMedia.coverImage.extraLarge
-			: `https://subsplease.org${hoveredItem?.image_url}`}
-		alt="Media Cover"
-		style={imageStyle}
-	/>
-{/if}
-
-<style>
-	.hover-image {
-		position: fixed;
-		z-index: 1000;
-		width: 300px;
-		height: auto;
-		display: none;
-	}
-
-	.show {
-		display: block;
-	}
-</style>
diff --git a/src/lib/Media/hoverCover.ts b/src/lib/Media/hoverCover.ts
deleted file mode 100644
index d5839fa9..00000000
--- a/src/lib/Media/hoverCover.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Media } from '$lib/AniList/media';
-import { get } from 'svelte/store';
-import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease';
-import settings from '$stores/settings';
-
-interface OnMouseEnterLeave {
-	hovering: boolean;
-	item: SubsPleaseEpisode | null;
-	media: Media | null;
-}
-
-export const onMouseEnter = (media: Media | null, item: SubsPleaseEpisode | null = null) => {
-	if (!get(settings).displayHoverCover && !item)
-		return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
-
-	return { hovering: true, item, media } as OnMouseEnterLeave;
-};
-
-export const onMouseLeave = () => {
-	return { hovering: false, item: null, media: null } as OnMouseEnterLeave;
-};
-
-interface OnMouseMove {
-	height: number;
-	style: string;
-}
-
-export const onMouseMove = (event: MouseEvent, imageWidth = 300) => {
-	const offset = 10;
-	let imageLeft = 0;
-	let imageTop = 0;
-	const image = document.getElementsByClassName('hover-image')[0] as HTMLImageElement;
-	const response: OnMouseMove = {
-		height: 0,
-		style: ''
-	};
-
-	if (image) {
-		image.onload = () => (response.height = image.height);
-		imageLeft =
-			event.pageX + imageWidth + offset > window.innerWidth
-				? event.pageX - imageWidth - offset
-				: event.pageX + offset;
-		imageTop =
-			event.pageY + response.height + offset > window.innerHeight
-				? event.pageY - response.height
-				: event.pageY + offset;
-		response.style = `top: ${imageTop}px; left: ${imageLeft}px;`;
-	}
-
-	return response;
-};
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 4d68d85b..0f29a187 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -12,8 +12,8 @@
 	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
 	import { outboundLink } from '$lib/Media/links';
 	import HeadTitle from '$lib/HeadTitle.svelte';
-	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/hoverCover';
-	import HoverCover from '$lib/Media/HoverCover.svelte';
+	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
+	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
-- 
cgit v1.2.3