change volume with slider

src/components/Main.vue

@@ -1,6 +1,7 @@
 <template>
 	<Content app-name="radio">
-		<Navigation />
+		<Navigation
+			@changeVolume="changeVolume" />
 		<AppContent>
 			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" href="/" />
@@ -102,8 +103,8 @@ export default {
 			 */
 		doPlay(station) {
 			if (audioPlayer !== null) {
-				audioPlayer.fade(100, 0, 500) // FIXME persistent volume state
-				audioPlayer.unload() // FIXME do unload after fadeout
+				audioPlayer.fade(1, 0, 500) // FIXME persistent volume state
+				// FIXME fade out
 			}
 			this.$jquery.get('http://de1.api.radio-browser.info/json/url/' + station.stationuuid,
 				{
@@ -112,9 +113,14 @@ export default {
 			audioPlayer = new Howl({
 				src: [station.url_resolved],
 				volume: 0,
+				onfade() {
+					if (this.volume() === 0) {
+						this.unload()
+					}
+				},
 			})
 			audioPlayer.play()
-			audioPlayer.fade(0, 100, 500) // FIXME persistent volume state
+			audioPlayer.fade(0.1, 1, 500) // FIXME persistent volume state
 
 			const stationMetadata = document.getElementById('stationMetadata')
 			stationMetadata.textContent = station.name
@@ -138,11 +144,13 @@ export default {
 				})
 				.done(function(data) {
 					vm.loading = false
-					console.log(vm.loading)
 					vm.tableData = vm.tableData.concat(data)
 					vm.offset += 20
 				})
 		},
+		/**
+		 * On scroll event, load more stations if bottom reached
+		 */
 		scroll() {
 			window.onscroll = () => {
 				if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
@@ -150,6 +158,11 @@ export default {
 		    }
 			}
 		},
+		changeVolume(volume) {
+			if (audioPlayer !== null) {
+				audioPlayer.volume(volume)
+			}
+		},
 	},
 }
 </script>

src/components/Navigation.vue

@@ -19,7 +19,9 @@
 				:title="t('radio', 'Categories')" />
 		</template>
 		<template #footer>
-			<Player :pinned="true" />
+			<Player
+				:pinned="true"
+				@changeVolume="changeVolume" />
 		</template>
 	</AppNavigation>
 </template>
@@ -36,6 +38,11 @@ export default {
 		AppNavigationItem,
 		Player,
 	},
+	methods: {
+		changeVolume(volume) {
+			this.$emit('changeVolume', volume)
+		},
+	},
 }
 
 </script>

src/components/Player.vue

@@ -3,11 +3,14 @@
 		<button id="playbutton" class="play" :style="playerIcon" />
 		<div id="volumeicon" class="full" />
 		<input
+			v-model="sliderVal"
 			class="volume"
 			type="range"
 			name="volume"
 			min="0"
-			max="50">
+			max="1"
+			step=".05"
+			@input="changeVolume">
 		<span id="stationMetadata" />
 	</div>
 </template>
@@ -21,6 +24,11 @@ export default {
 			},
 		}
 	},
+	methods: {
+		changeVolume() {
+			this.$emit('changeVolume', this.sliderVal)
+		},
+	},
 }
 </script>
 
@@ -71,14 +79,17 @@ export default {
 	}
 
 	#volumeicon.full {
+		background: red;
 		/* background-image: url('../img/sound_full.png'); */
 	}
 
 	#volumeicon.mid {
+		background: yellow;
 		/* background-image: url('../img/sound_mid.png'); */
 	}
 
 	#volumeicon.silent {
+		background: green;
 		/* background-image: url('../img/sound_silent.png'); */
 	}