fix global player volume from store

src/components/Main.vue

@@ -53,11 +53,9 @@ export default {
 		pageLoading: false,
 		blurHashes: require('../assets/blurHashes.json'),
 	}),
-	provide: {
-		player: {
-			isPlaying: false,
-			isBuffering: false,
-			volume: 0,
+	computed: {
+		player() {
+			return this.$store.state.player
 		},
 	},
 	watch: {
@@ -109,23 +107,22 @@ export default {
 			 * @param {Object} station Station object
 			 */
 		doPlay(station) {
+			const vm = this
 			if (audioPlayer !== null) {
-				audioPlayer.fade(1, 0, 500) // FIXME persistent volume state
-				// FIXME fade out
+				audioPlayer.fade(vm.player.volume, 0, 500)
 			}
 			this.$jquery.get('http://de1.api.radio-browser.info/json/url/' + station.stationuuid,
 				{
 					'User-Agent': 'Nextcloud Radio/1.0.0', // FIXME global version, doesnt seem to work
 				})
-			const vm = this
 			audioPlayer = new Howl({
 				src: [station.url_resolved],
-				volume: 0,
-				onfade() {
+				volume: vm.player.volume,
+				/* onfade() { // FIXME
 					if (this.volume() === 0) {
 						this.unload()
 					}
-				},
+				}, */
 				onplay() {
 					vm.$store.dispatch('isPlaying', true)
 					vm.$store.dispatch('isBuffering', false)
@@ -138,9 +135,13 @@ export default {
 					vm.$store.dispatch('isPlaying', true)
 					vm.$store.dispatch('isBuffering', true)
 				},
+				onstop() {
+					vm.$store.dispatch('isPlaying', false)
+					vm.$store.dispatch('isBuffering', false)
+				},
 			})
 			audioPlayer.play()
-			audioPlayer.fade(0.1, 1, 500) // FIXME persistent volume state
+			audioPlayer.fade(0, vm.player.volume, 500)
 
 			/* const stationMetadata = document.getElementById('stationMetadata')
 			stationMetadata.textContent = station.name */

src/components/Player.vue

@@ -9,16 +9,16 @@
 		</div>
 		<div id="volumeicon" class="full" />
 		<input
-			v-model="sliderVal"
 			class="volume"
 			type="range"
 			name="volume"
 			min="0"
 			max="1"
 			step=".05"
-			value="this.volume"
+			:value="player.volume"
 			@input="changeVolume">
 		<span class="stationMetadata" />
+		{{ player.volume }}
 	</div>
 </template>