From 3305e97552c0f292d582495ef0e4de608f89ed21 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Wed, 20 Nov 2024 15:51:51 -0500
Subject: [PATCH] controls

---
 static/pyrite.css    | 45 ++++++++++++++++++++++++++++----------------
 templates/index.html | 30 +++++++++++++++--------------
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/static/pyrite.css b/static/pyrite.css
index e99c8ab..2cf2b6b 100644
--- a/static/pyrite.css
+++ b/static/pyrite.css
@@ -48,22 +48,6 @@ input[type="radio"]:checked+div {
 	grid-area: c;
 }
 
-#player_container {
-	grid-area: f;
-	display: flex;
-	justify-content: center;
-}
-
-#cover_art {
-	padding-right: 1em;
-	padding-top: 0.5em;
-}
-
-img {
-	height: 100%;
-	max-height: 30vh;
-}
-
 .list_item {
 	height: 2em;
 	margin: 0.25em;
@@ -84,6 +68,27 @@ img {
 	font-size: 80%;
 }
 
+#player_container {
+	grid-area: f;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+#cover_art {
+	padding-right: 1em;
+	padding-top: 0.5em;
+}
+
+img {
+	height: 100%;
+	max-height: 30vh;
+}
+
+#title {
+	display: flex;
+}
+
 input[type='range'] {
 	accent-color: green;
 }
@@ -99,3 +104,11 @@ button img {
 #next-track-btn img {
 	transform: rotate(180deg);
 }
+
+#seek_controls {
+	width: 50%;
+}
+
+#seek-slider {
+	width: 100%;
+}
diff --git a/templates/index.html b/templates/index.html
index 3b5202f..876af5e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -27,18 +27,17 @@
 			<div id="track_list" class="list">
 			</div>
 			<div id="player_container">
-				<span id="playlist_container">
-					<select id="playlist" onchange="select_playlist(event)">
-						{% for playlist in playlists %}
-						<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
-						{% endfor %}
-					</select>
-				</span>
-				<span id="cover_art"><img alt="Album cover art" src=""></span>
-				<span id="player_controls">
-					<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
-					<h3 id="now_playing_title"></h3>
-					<audio id="player" controls></audio>
+				<div id="title">
+					<span id="cover_art"><img alt="Album cover art" src=""></span>
+					<span>
+						<h4>
+							<span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span>
+						</h4>
+						<h3 id="now_playing_title">Title</h3>
+					</span>
+				</div>
+				<div id="player_controls">
+					<audio id="player" controls style="display:none"></audio>
 					<button id="prev-track-btn" class="btn" onclick="prevTrack()">
 						<img id="prev" src="./static/prev.svg"></img>
 					</button>
@@ -51,8 +50,11 @@
 					<button id="next-track-btn" class="btn" onclick="nextTrack()">
 						<img id="prev" src="./static/prev.svg"></img>
 					</button>
-					<input type="range" id="seek-slider" max="100" value="0">
-				</span>
+					<input id="volume-slider" type="range" max="100" value="0">
+				</div>
+				<div id="seek_controls">
+					<input id="seek-slider" type="range" max="100" value="0">
+				</div>
 			</div>
 		</main>
 		<template id="artist_template">