From 752ed6a56716dc66d75d5e9c9fab8827c64c3d11 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 18 Feb 2024 05:56:20 -0800
Subject: feat(stream): avatars

---
 src/lib/Hololive/Stream.svelte | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

(limited to 'src/lib/Hololive/Stream.svelte')

diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
index 3d59fd72..22a3edb4 100644
--- a/src/lib/Hololive/Stream.svelte
+++ b/src/lib/Hololive/Stream.svelte
@@ -6,6 +6,7 @@
 	export let live: any;
 	export let pinStream: (streamer: string) => void;
 	export let pinnedStreams: string[];
+	export let icon: string;
 </script>
 
 <div class="stream card">
@@ -32,6 +33,7 @@
 			>{:else if new Date(live.time).getTime() < Date.now()}
 			<span class="ended">{$locale().hololive.ended}</span>{:else}
 			<span class="upcoming">{$locale().hololive.upcoming}</span>{/if}]
+		<img src={icon} alt="Profile" class="stream-icon" />
 		<b>{live.streamer}</b> <span class="opaque">|</span>
 		{$locale().hololive.dateFormatter(new Date(live.time))}
 		{#if live.guests.length > 0}
@@ -53,6 +55,8 @@
 </div>
 
 <style lang="scss">
+	$transition: transform 0.3s ease;
+
 	.preview {
 		// margin: 0.15rem;
 
@@ -60,14 +64,14 @@
 			border-radius: 8px;
 			height: 20vh;
 			object-fit: cover;
-			transition: transform 0.3s ease;
+			transition: $transition;
 		}
 
 		&:hover {
 			img {
 				position: relative;
 				z-index: 2;
-				transition: transform 0.3s ease;
+				transition: $transition;
 				transform: scale(1.05);
 			}
 		}
@@ -102,5 +106,26 @@
 
 	.stream-heading {
 		padding-right: 2em;
+		padding-left: 2.5em;
+	}
+
+	.stream-icon {
+		$size: 2em;
+
+		position: absolute;
+		top: 0;
+		left: 0;
+		border-radius: 8px;
+		width: $size;
+		height: $size;
+		margin: 0.75rem;
+		object-fit: cover;
+		transition: $transition;
+
+		&:hover {
+			z-index: 2;
+			transition: $transition;
+			transform: scale(1.1);
+		}
 	}
 </style>
-- 
cgit v1.2.3