add volume and seek slider functionality

static/pyrite.js

@@ -2,11 +2,14 @@ var player;
 var pos_int;
 var analyser;
 var audio_data;
+var vol_prev;
 
 function init() {
 	player = document.querySelector('#player');
 
-	player.addEventListener("ended", nextTrack);
+	player.addEventListener('ended', nextTrack);
+	player.addEventListener('loadedmetadata', display_duration);
+	player.addEventListener('timeupdate', update_position);
 
 	navigator.mediaSession.setActionHandler('play', playTrack);
 	navigator.mediaSession.setActionHandler('pause', pauseTrack);
@@ -14,7 +17,23 @@ function init() {
 	navigator.mediaSession.setActionHandler('previoustrack', prevTrack);
 	navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
 
-	pos_int = setInterval(update_position, 300);
+	let seek = document.querySelector('#seek-slider');
+	seek.addEventListener('input', function(){
+		player.currentTime = seek.value;
+		display_current_time();
+	});
+
+	let vol = document.querySelector('#volume-slider');
+	vol.addEventListener('input', function(){
+		player.volume = vol.value/100;
+		if (vol.value == 0) {
+			document.querySelector('#vol-btn').style.display = 'none';
+			document.querySelector('#vol-off-btn').style.display = 'initial';
+		} else {
+			document.querySelector('#vol-btn').style.display = 'initial';
+			document.querySelector('#vol-off-btn').style.display = 'none';
+		}
+	});
 
 	init_analyzer();
 }
@@ -74,15 +93,54 @@ function setMediaSession(track) {
 }
 
 function update_position() {
-	if (player.paused){return;}
-	if (player.duration > 0 === false){return;}
 	navigator.mediaSession.setPositionState({
-		duration: parseInt(player.duration),
+		duration: Math.floor(player.duration),
 		playbackRate: player.playbackRate,
-		position: parseInt(player.currentTime)
+		position: Math.floor(player.currentTime)
 	});
 
 	analyser.getByteTimeDomainData(audio_data);
+
+	document.querySelector('#seek-slider').value = Math.floor(player.currentTime);
+	display_current_time();
+}
+
+function calculate_time(raw_secs) {
+	let mins = Math.floor(raw_secs / 60);
+	let secs = Math.round(raw_secs % 60);
+	let ret = mins + ':' + String(secs).padStart(2,'0');
+	return ret;
+}
+
+function display_duration() {
+	let dur = document.querySelector('#duration');
+	dur.textContent = calculate_time(player.duration);
+
+	document.querySelector('#seek-slider').max = Math.floor(player.duration);
+}
+
+function display_current_time() {
+	cur = document.querySelector('#current-time');
+	cur.textContent = calculate_time(player.currentTime);
+}
+
+function volume_off() {
+	let vol = document.querySelector('#volume-slider');
+	vol_prev = vol.value;
+	vol.value = 0;
+	player.volume = 0;
+
+	document.querySelector('#vol-btn').style.display = 'none';
+	document.querySelector('#vol-off-btn').style.display = 'initial';
+}
+
+function volume_restore() {
+	let vol = document.querySelector('#volume-slider');
+	vol.value = vol_prev;
+	player.volume = vol_prev / 100;
+
+	document.querySelector('#vol-btn').style.display = 'initial';
+	document.querySelector('#vol-off-btn').style.display = 'none';
 }
 
 function init_analyzer() {

templates/index.html

@@ -46,13 +46,16 @@
 					<button id="next-track-btn" class="btn" onclick="nextTrack()">
 						<img id="prev" src="./static/prev.svg"></img>
 					</button>
-					<button id="mute-btn" class="btn">
+					<button id="vol-btn" class="btn" onclick="volume_off()">
-						<img id="mute" src="./static/volume-max.svg"</img>
+						<img id="vol" src="./static/volume-max.svg"</img>
 					</button>
-					<input id="volume-slider" type="range" max="100" value="0">
+					<button id="vol-off-btn" class="btn" onclick="volume_restore()" style="display:none">
+						<img id="vol-off" src="./static/volume-off.svg"</img>
+					</button>
+					<input id="volume-slider" type="range" max="100" value="100">
 				</div>
 				<div id="seek_controls">
-					<input id="seek-slider" type="range" max="100" value="0">
+					<input id="seek-slider" type="range" max="0" value="0">
 					<output id="current-time">0:00</output>/<output id="duration">0:00</output>
 				</div>
 			</div>