From 85ae86ddd3257c1c7a2284f7402d4f093f6702b1 Mon Sep 17 00:00:00 2001
From: Wirlaburla <vencorr@zoho.com>
Date: Sun, 8 Jan 2023 23:46:58 -0600
Subject: [PATCH] add mute for volume icon

---
 index.html |  9 +++++----
 radio.js   | 26 ++++++++++++++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 8b9dc5b..7cb7e42 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,12 @@
 						<song></song>
 					</metadata></canvas>
 					<controls>
-						<button title='Play' class='play' onclick='play()'><img src='play.png'></button>
-						<button title='Stop' onclick='stop()'><img src='stop.png'></button>
+						<button title='Play' class='play' onclick='play()'><img src='//assets.worlio.com/style/radio/play.png'></button>
+						<button title='Stop' onclick='stop()'><img src='//assets.worlio.com/style/radio/stop.png'></button>
 						<button style='flex-grow:1;pointer-events:none;'></button>
-						<slider title='100%'><img src='vol.png'><input type=range min=0 max=100 value=100 step=5 oninput="volChange(this)"></slider>
-						<button class='fav-button' title='Favorite' onclick='favoriteCurrentTrack()'><img src='heart.png'></button>
+						<button title='Mute/Unmute' class='volume' onclick='mute()'><img src='//assets.worlio.com/style/radio/vol.png'></button>
+						<slider title='100%' class='volslider'><input type=range min=0 max=100 value=100 step=5 oninput="volChange(this)"></slider>
+						<button class='fav-button' title='Favorite' onclick='updateFavStatus(favoriteTrack(station.listen_url, station.title));'><img src='//assets.worlio.com/style/radio/heart.png'></button>
 					</controls>
 				</player>
 			</div>
diff --git a/radio.js b/radio.js
index 98aa995..e450ec5 100644
--- a/radio.js
+++ b/radio.js
@@ -34,6 +34,7 @@ var tuner = {
 	player: null,
 	playing: true,
 	volume: 100,
+	isMuted: false,
 	canvas: {
 		element: null,
 		drawRequest: 0
@@ -119,6 +120,25 @@ function stop() {
 	updateMetadata('');
 }
 
+function mute() {
+	if (tuner.isMuted) {
+		document.querySelector('.volume').classList.remove('active');
+		document.querySelector('.volslider').title = tuner.volume+'%';
+		tuner.player.audioElement.volume=tuner.volume/100;
+	} else {
+		document.querySelector('.volume').classList.add('active');
+		document.querySelector('.volslider').title = "Muted";
+		tuner.player.audioElement.volume=0;
+	}
+	tuner.isMuted = !tuner.isMuted;
+}
+
+function volChange(e) {
+	tuner.player.audioElement.volume=e.value/100;
+	e.parentNode.title = e.value+'%';
+	tuner.volume = e.value;
+}
+
 function updateMetadata(track) {
 	var line_data = [
 		{
@@ -381,12 +401,6 @@ function searchFavorites(query) {
 	}
 }
 
-function volChange(e) {
-	tuner.player.audioElement.volume=e.value/100;
-	e.parentNode.title = e.value+'%';
-	tuner.volume = e.value;
-}
-
 function setVisMode(i) {
 	if (i > vis_modes.length) visualizer.mode = 1;
 	else visualizer.mode = i;