index.html

@@ -25,9 +25,8 @@
 						<button title='Play' class='play' onclick='play()'><img src='play.png'></button>
 						<button title='Stop' onclick='stop()'><img src='stop.png'></button>
 						<button style='flex-grow:1;pointer-events:none;'></button>
-						<button title='Mute/Unmute' class='volume' onclick='mute()'><img src='vol.png'></button>
+						<slider title='100%'><img src='vol.png'><input type=range min=0 max=100 value=100 step=5 oninput="volChange(this)"></slider>
-						<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='favoriteCurrentTrack()'><img src='heart.png'></button>
-						<button class='fav-button' title='Favorite' onclick='updateFavStatus(favoriteTrack(station.listen_url, station.title));'><img src='heart.png'></button>
 					</controls>
 				</player>
 			</div>

radio.css

@@ -1,4 +1,6 @@
 :root {
+	--background: #b3a99e;
+
 	--primary: #0079b5;
 	--primary-border: #009ae6;
 
@@ -24,7 +26,7 @@ html {
 }
 
 body {
-	background: var(--background-image) var(--main-background);
+	background: var(--background);
 	background-repeat: repeat;
 	height: 100%;
 	margin: 0;
@@ -93,18 +95,18 @@ slider input {
 	background: lightgray;
 	-webkit-appearance: none;
 	appearance: none;
-	height: 50%;
+	height: 4px;
-	margin: auto 4px;
+	margin: 6 2;
 	width: 96px;
 }
 
-slider input::-webkit-slider-thumb,
+slider input::-moz-range-thumb,
-slider input::-moz-range-thumb {
+slider input::-webkit-slider-thumb {
 	background: gray;
 	-webkit-appearance: none;
 	appearance: none;
 	width: 8px;
-	height: 100%;
+	height: 16px;
 	border: none;
 	border-radius: 0;
 }
@@ -280,15 +282,13 @@ history .track a {
 	favorites, history {
 		height: 240px;
 	}
-
-	body.old panel#favorites, body.old panel#history { display: none; }
 }
 
 @media only screen and (orientation: landscape) {
 	.container, .footer {
 		width: calc(100% - 64px);
+		height: calc(100% - 212px);
 	}
-	body:not(.old) .container { height: calc(100% - 212px); }
 
 	.banner {
 		margin: auto;
@@ -301,23 +301,4 @@ history .track a {
 	.player-container {
 		margin-top: 48px;
 	}
-
-	/* OLD */
-	body.old .container, body.old .footer {
-		flex-direction: column;
-		width: 320px;
-	}
-
-	body.old .banner { flex-direction: column-reverse; }
-	body.old .banner img, body.old .player-container {
-		margin: auto;
-	}
-	body.old .banner > img { flex-shrink: 0; }
-	body.old .player-container { margin-bottom: -2px; }
-
-	body.old panel {
-		max-height: 480px;
-	}
-
-	body.old panel#favorites, body.old panel#history { display: none; }
 }

radio.js

@@ -34,7 +34,6 @@ var tuner = {
 	player: null,
 	playing: true,
 	volume: 100,
-	isMuted: false,
 	canvas: {
 		element: null,
 		drawRequest: 0
@@ -120,25 +119,6 @@ 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 = [
 		{
@@ -401,6 +381,12 @@ 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;