From 6efb9effde646dc9658c887e5848b33482bcab90 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 27 May 2024 05:41:37 -0700
Subject: feat(hololive): parallax image for thumbnails

---
 src/lib/Hololive/Stream.svelte      | 19 +++++++++++++++----
 src/routes/settings/+page.svelte    |  1 -
 src/routes/user/[user]/+page.svelte |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
index e9057352..1f0a5b62 100644
--- a/src/lib/Hololive/Stream.svelte
+++ b/src/lib/Hololive/Stream.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 	import root from '$lib/Utility/root';
 	import identity from '$stores/identity';
 	import locale from '$stores/locale';
@@ -55,7 +56,14 @@
 	</p>
 
 	<a href={live.link} class="preview" target="_blank">
-		<img src={live.livePreviewImage} alt="Stream Thumbnail" />
+		<span class="preview-image">
+			<ParallaxImage
+				source={live.livePreviewImage}
+				alternativeText="Stream Thumbnail"
+				limit={12.5}
+				duration={2750}
+			/>
+		</span>
 	</a>
 </div>
 
@@ -65,19 +73,22 @@
 	.preview {
 		// margin: 0.15rem;
 
-		img {
+		:global(img) {
 			border-radius: 8px;
 			height: 20vh;
 			object-fit: cover;
+		}
+
+		.preview-image {
 			transition: $transition;
 		}
 
 		&:hover {
-			img {
+			.preview-image {
 				position: relative;
 				z-index: 2;
 				transition: $transition;
-				transform: scale(1.05);
+				transform: scale(1.025) !important;
 			}
 		}
 
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 7d892a31..b507eeca 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -14,7 +14,6 @@
 	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
 	import SettingSync from '$lib/Settings/Categories/SettingSync.svelte';
 	import RssFeeds from '$lib/Settings/Categories/RSSFeeds.svelte';
-	import Skeleton from '$lib/Loading/Skeleton.svelte';
 
 	export let data;
 
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 186b53c3..4152c9f4 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -70,7 +70,7 @@
 
 			const categories = preferences.pinned_badge_wall_categories;
 			const draggedIndex = categories.indexOf(draggedCategory);
-			const targetIndex = categories.indexOf(category);
+			const targetIndex = categories.indexOf(category || '');
 
 			categories.splice(draggedIndex, 1);
 			categories.splice(targetIndex, 0, draggedCategory);
-- 
cgit v1.2.3