From 07388e56be67697fe5a03804e9d5a7f30b13e603 Mon Sep 17 00:00:00 2001
From: apt-get <me@apt-get.xyz>
Date: Fri, 5 Jan 2024 12:03:26 +0100
Subject: [PATCH] highlight current playing stream

---
 src/routes/streams/Sidebar.svelte | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/routes/streams/Sidebar.svelte b/src/routes/streams/Sidebar.svelte
index da86587..0229821 100644
--- a/src/routes/streams/Sidebar.svelte
+++ b/src/routes/streams/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { favoritedStreams } from '$lib/stores.js';
+	import { currentStream, favoritedStreams } from '$lib/stores.js';
 	import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
 	import TagSelect from './TagSelect.svelte';
 
@@ -59,9 +59,10 @@
 <ul class="stream-list">
 	{#each streams as stream}
 		{@const favorited = $favoritedStreams.has(stream['id'])}
+		{@const current = $currentStream['id'] === stream['id']}
 		<li
 			hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
-			class="stream-item"
+			class="stream-item {current ? 'current-stream' : ''}"
 			id="stream-{stream['id']}"
 		>
 			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
@@ -135,6 +136,18 @@
 		padding: 5px;
 	}
 
+	.current-stream > .stream-item-button {
+		background-color: #add8e6;
+	}
+
+	.current-stream > .stream-item-button:hover {
+		background-color: #87c5d9;
+	}
+
+	.current-stream > .stream-item-button:active {
+		background-color: #7aa8b8;
+	}
+
 	#tag-select {
 		text-align: left;
 		color: black;