From 75f56decbb83809d1a2950ed8e304f26407ebd29 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Tue, 14 Jun 2022 17:29:23 +0200
Subject: [PATCH] Hue selector

---
 res/template/appearance.html                | 162 ++++++++++++--------
 svelte/src/file_viewer/viewers/Audio.svelte |   4 +-
 2 files changed, 101 insertions(+), 65 deletions(-)

diff --git a/res/template/appearance.html b/res/template/appearance.html
index 2638f71..005978b 100644
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -15,83 +15,117 @@
 				You can change how pixeldrain looks! Your theme choice will
 				be saved in a cookie.
 			</p>
-			<div class="indent">
-				<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
-				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
-				<br/>
-				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
-				<br/>
-				<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
-				<br/>
-				<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
-				<!-- <br/>
-				Hue: <input id="hue" type="number" min="0" max="360" placeholder="0"/><br/> -->
-				<br/>
-				<br/>
-				<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
-				(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
-				<br/>
-				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
-				<br/>
-				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
-				<br/>
-				<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
-				<br/>
-				<!-- <br/> -->
-				<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
-				<br/>
-				<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
-				<br/>
-				Classic 2022 style, with purple gradients
-				<br/>
-				<br/>
-				<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
-				<br/>
-				Classic pre-2020 pixeldrain style, dark gray
-				<br/>
-				<br/>
-				Other (experimental) themes
-				<br/>
-				<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
-				<br/>
-				<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
-				<br/>
-				<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
-				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
-				<br/>
-				<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
-				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
-				<br/>
-				<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
-			</div>
+			<h2>Theme</h2>
+			<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
+			(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
+			<br/>
+			Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+			<br/>
+			<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
+			<br/>
+			<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
+			<br/>
+			Hue:
+			<br/>
+			<br/>
+			<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
+			(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
+			<br/>
+			Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
+			<br/>
+			<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
+			<br/>
+			<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
+			<br/>
+			<!-- <br/> -->
+			<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
+			<br/>
+			<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
+			<br/>
+			Classic 2022 style, with purple gradients
+			<br/>
+			<br/>
+			<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
+			<br/>
+			Classic pre-2020 pixeldrain style, dark gray
+			<br/>
+			<br/>
+			Other (experimental) themes
+			<br/>
+			<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
+			<br/>
+			<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
+			<br/>
+			<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
+			(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
+			<br/>
+			<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
+			(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
+			<br/>
+			<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
+
+			<h2>Hue</h2>
+			<p>
+				Many themes support custom hues. The hue does not change the
+				contrast of the theme, only the color itself.
+			</p>
+			<input type="radio" id="hue_default" name="hue"><label for="hue_default">Default</label><br/>
+			<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
+			<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
+			<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
+			<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
+			<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
 		</section>
 
 		<script>
-		let style = "nord"
-		let hue = -1
+		function get_cookie(cname) {
+			let name = cname + "=";
+			let decodedCookie = decodeURIComponent(document.cookie);
+			let ca = decodedCookie.split(';');
+			for(let i = 0; i <ca.length; i++) {
+				let c = ca[i];
+				while (c.charAt(0) == ' ') {
+				c = c.substring(1);
+				}
+				if (c.indexOf(name) == 0) {
+				return c.substring(name.length, c.length);
+				}
+			}
+			return "";
+		}
+
+		let style = get_cookie("style")
+		let hue = get_cookie("hue")
 
 		// Style selector
 		document.getElementsByName("style").forEach(function(elem) {
 			elem.addEventListener("change", e => {
 				style = e.target.id.substring(6)
-				setStyle()
+
+				var date = new Date();
+				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
+				document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
+
+				reload_sheet()
 			})
 		});
-		document.getElementById("hue").addEventListener("change", e => {
-			hue = e.target.value
-			setStyle()
-		})
+		document.getElementsByName("hue").forEach(function(elem) {
+			elem.addEventListener("change", e => {
+				hue = e.target.id.substring(4)
+				if (hue === "default") {
+					hue = -1
+					document.cookie = "hue=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
+				}
 
-		function setStyle() {
-			var date = new Date();
-			date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
-
-			document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
-
-			if (hue >= 0 && hue <= 360) {
+				var date = new Date();
+				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
 				document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"
-			}
 
+				reload_sheet()
+			})
+		});
+
+		function reload_sheet() {
 			let stylesheet1 = document.getElementById("stylesheet_theme")
 			let stylesheet2 = document.getElementById("stylesheet_theme_2")
 
diff --git a/svelte/src/file_viewer/viewers/Audio.svelte b/svelte/src/file_viewer/viewers/Audio.svelte
index 2186188..2362eb7 100644
--- a/svelte/src/file_viewer/viewers/Audio.svelte
+++ b/svelte/src/file_viewer/viewers/Audio.svelte
@@ -51,6 +51,8 @@ const toggle_play = () => playing ? player.pause() : player.play()
 </script>
 
 <div class="container">
+	<h1>{file.name}</h1>
+
 	<button on:click={() => dispatch("prev") }>
 		<i class="icon">skip_previous</i>
 	</button>
@@ -98,7 +100,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
 <style>
 .container {
 	width: 100%;
-	margin: 50px 0 0 0;
+	margin: 30px 0 0 0;
 	padding: 0;
 	text-align: center;
 }