static/pyrite.css

@@ -48,6 +48,22 @@ 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;
@@ -68,30 +84,6 @@ input[type="radio"]:checked+div {
 	font-size: 80%;
 }
 
-#player_container {
-	grid-area: f;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-#player_container > div {
-	display: flex;
-}
-
-#cover_art {
-	padding-right: 1em;
-	padding-top: 0.5em;
-}
-
-img {
-	height: 100%;
-	max-height: 30vh;
-}
-
-#title {
-}
-
 input[type='range'] {
 	accent-color: green;
 }
@@ -107,16 +99,3 @@ button img {
 #next-track-btn img {
 	transform: rotate(180deg);
 }
-
-#seek_controls {
-	width: 50%;
-}
-
-#seek_controls output {
-	margin-left: 0.125em;
-	margin-right: 0.125em;
-}
-
-#seek-slider {
-	width: 90%;
-}

static/pyrite.js

@@ -1,10 +1,8 @@
 var player;
 var pos_int;
-var analyser;
-var audio_data;
 
 function init() {
-	player = document.querySelector('#player');
+	player = document.getElementById('player');
 
 	player.addEventListener("ended", nextTrack);
 
@@ -15,8 +13,6 @@ function init() {
 	navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
 
 	pos_int = setInterval(update_position, 300);
-
-	init_analyzer();
 }
 
 async function get_rand_track() {
@@ -81,17 +77,4 @@ function update_position() {
 		playbackRate: player.playbackRate,
 		position: parseInt(player.currentTime)
 	});
-
-	analyser.getByteTimeDomainData(audio_data);
-}
-
-function init_analyzer() {
-	let audioCtx = new AudioContext();
-	analyser = audioCtx.createAnalyser();
-	let source = audioCtx.createMediaElementSource(player);
-
-	source.connect(analyser);
-	source.connect(audioCtx.destination);
-
-	audio_data = new Uint8Array(analyser.frequencyBinCount);
 }

templates/index.html

@@ -27,38 +27,32 @@
 			<div id="track_list" class="list">
 			</div>
 			<div id="player_container">
-				<div>
+				<span id="playlist_container">
-					<div id="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
+					<select id="playlist" onchange="select_playlist(event)">
-					<div>
+						{% for playlist in playlists %}
-						<div id="title">
+						<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
-							<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
+						{% endfor %}
-							<h3 id="now_playing_title">Title</h3>
+					</select>
-						</div>
+				</span>
-						<div id="player_controls">
+				<span id="cover_art"><img alt="Album cover art" src=""></span>
-							<audio id="player" style="display:none"></audio>
+				<span id="player_controls">
-							<button id="prev-track-btn" class="btn" onclick="prevTrack()">
+					<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
-								<img id="prev" src="./static/prev.svg"></img>
+					<h3 id="now_playing_title"></h3>
-							</button>
+					<audio id="player" controls></audio>
-							<button id="play-btn" class="btn" onclick="playTrack()">
+					<button id="prev-track-btn" class="btn" onclick="prevTrack()">
-								<img id="prev" src="./static/play.svg"></img>
+						<img id="prev" src="./static/prev.svg"></img>
-							</button>
+					</button>
-							<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
+					<button id="play-btn" class="btn" onclick="playTrack()">
-								<img id="prev" src="./static/pause.svg"></img>
+						<img id="prev" src="./static/play.svg"></img>
-							</button>
+					</button>
-							<button id="next-track-btn" class="btn" onclick="nextTrack()">
+					<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
-								<img id="prev" src="./static/prev.svg"></img>
+						<img id="prev" src="./static/pause.svg"></img>
-							</button>
+					</button>
-							<button id="mute-btn" class="btn">
+					<button id="next-track-btn" class="btn" onclick="nextTrack()">
-								<img id="mute" src="./static/volume-max.svg"</img>
+						<img id="prev" src="./static/prev.svg"></img>
-							</button>
+					</button>
-							<input id="volume-slider" type="range" max="100" value="0">
+					<input type="range" id="seek-slider" max="100" value="0">
-						</div>
+				</span>
-					</div>
-				</div>
-				<div id="seek_controls">
-					<input id="seek-slider" type="range" max="100" value="0">
-					<output id="current-time">0:00</output>/<output id="duration">0:00</output>
-				</div>
 			</div>
 		</main>
 		<template id="artist_template">