added native volume slider

src/components/Main.vue

@@ -125,7 +125,9 @@ export default {
 		loadStations() {
 			// FIXME https://de1.api.radio-browser.info/json/stations/lastchange?limit=10
 			const vm = this
+			if (vm.offset === 0) {
 				vm.loading = true
+			}
 			this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations',
 				{
 					limit: 20,

src/components/Player.vue

@@ -2,7 +2,12 @@
 	<div id="app-settings">
 		<button id="playbutton" class="play" :style="playerIcon" />
 		<div id="volumeicon" class="full" />
-		<div id="volumeslider" />
+		<input
+			class="volume"
+			type="range"
+			name="volume"
+			min="0"
+			max="50">
 		<span id="stationMetadata" />
 	</div>
 </template>
@@ -21,7 +26,7 @@ export default {
 
 <style>
 
-#playbutton{
+	#playbutton{
 		height:50px;
 		width: 50px;
 		margin: 10px;
@@ -30,32 +35,32 @@ export default {
 		background-position: center;
 		float: left;
 		transition: background-image 0.4s ease-in-out;
-}
+	}
 
-.buffering {
+	.buffering {
 		animation:spin 4s linear infinite;
 		/* background: url('../img/wheel.png') no-repeat; */
 		transition: background-image 0.4s ease-in-out;
-}
+	}
 
-@keyframes spin { 100% { transform:rotate(360deg); } }
+	@keyframes spin { 100% { transform:rotate(360deg); } }
 
-#station_metadata{
+	#station_metadata{
 		margin: 2px 20px 5px 20px;
 		padding-left: 5px;
 		white-space:nowrap;
 		overflow:hidden;
-}
+	}
 
-.play{
+	.play{
 		/* background: url('../img/play.png') no-repeat; */
-}
+	}
 
-.pause{
+	.pause{
 		/* background: url('../img/pause.png') no-repeat; */
-}
+	}
 
-#volumeicon {
+	#volumeicon {
 		width: 20px;
 		height: 20px;
 		background-size: contain;
@@ -63,26 +68,26 @@ export default {
 		position: relative;
 		left: 75px;
 		top: 14px;
-}
+	}
 
-#volumeicon.full {
+	#volumeicon.full {
 		/* background-image: url('../img/sound_full.png'); */
-}
+	}
 
-#volumeicon.mid {
+	#volumeicon.mid {
 		/* background-image: url('../img/sound_mid.png'); */
-}
+	}
 
-#volumeicon.silent {
+	#volumeicon.silent {
 		/* background-image: url('../img/sound_silent.png'); */
-}
+	}
 
-#volumeslider{
+	.volume{
 		width: 170px;
 		display: inline-block;
 		position: relative;
 		left: 40px;
 		top: -7px;
-}
+	}
 
 </style>