From bee25f2340bb858209fd918066a1abe45de3d3a2 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 07:01:03 -0800
Subject: feat(cover): better defaults

---
 src/lib/Media/Cover/HoverCover.svelte | 5 +++--
 src/lib/Media/Cover/hoverCover.ts     | 2 +-
 src/lib/Tools/Schedule/Tool.svelte    | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte
index b0c15fc5..7e1f0e89 100644
--- a/src/lib/Media/Cover/HoverCover.svelte
+++ b/src/lib/Media/Cover/HoverCover.svelte
@@ -6,6 +6,7 @@
 	export let hoveredItem: SubsPleaseEpisode | null = null;
 	export let hoveredMedia: Media | null = null;
 	export let imageStyle = '';
+	export let width = 250;
 </script>
 
 {#if hovering}
@@ -15,7 +16,7 @@
 			? hoveredMedia.coverImage.extraLarge
 			: `https://subsplease.org${hoveredItem?.image_url}`}
 		alt="Media Cover"
-		style={imageStyle}
+		style={`width: ${width}px; ${imageStyle}`}
 	/>
 {/if}
 
@@ -23,9 +24,9 @@
 	.hover-image {
 		position: fixed;
 		z-index: 1000;
-		width: 300px;
 		height: auto;
 		display: none;
+		border-radius: 3px;
 	}
 
 	.show {
diff --git a/src/lib/Media/Cover/hoverCover.ts b/src/lib/Media/Cover/hoverCover.ts
index 97a41f35..0a162f3e 100644
--- a/src/lib/Media/Cover/hoverCover.ts
+++ b/src/lib/Media/Cover/hoverCover.ts
@@ -28,7 +28,7 @@ interface OnMouseMove {
 	style: string;
 }
 
-export const onMouseMove = (event: MouseEvent, imageWidth = 300) => {
+export const onMouseMove = (event: MouseEvent, imageWidth = 250) => {
 	const offset = 10;
 	let imageLeft = 0;
 	let imageTop = 0;
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index d9bdeb94..6c7ee097 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -136,7 +136,7 @@
 												hoveredMedia = response.media;
 											}}
 											on:mousemove={(e) => {
-												const response = onMouseMove(e);
+												const response = onMouseMove(e, 300);
 
 												imageStyle = response.style;
 											}}
@@ -190,7 +190,7 @@
 	<Crunchyroll />
 </details>
 
-<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} />
+<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} width={300} />
 
 <style>
 	#list-container {
-- 
cgit v1.2.3