add vuex store for player state

package-lock.json

@@ -11410,6 +11410,11 @@
 				"date-format-parse": "^0.2.5"
 			}
 		},
+		"vuex": {
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+			"integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+		},
 		"watchpack": {
 			"version": "1.7.4",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

package.json

@@ -39,7 +39,8 @@
 		"jquery": "^3.5.1",
 		"music-metadata": "^7.4.1",
 		"vue": "^2.6.12",
-		"vue-router": "^3.4.7"
+		"vue-router": "^3.4.7",
+		"vuex": "^3.5.1"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"

src/components/Main.vue

@@ -1,7 +1,6 @@
 <template>
 	<Content app-name="radio">
-		<Navigation
-			@changeVolume="changeVolume" />
+		<Navigation @changeVolume="changeVolume" />
 		<AppContent>
 			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" href="/" />
@@ -10,12 +9,12 @@
 					href="/Top" />
 			</Breadcrumbs>
 			<Table
-				v-if="!loading"
+				v-if="!pageLoading"
 				:station-data="tableData"
 				@doPlay="doPlay"
 				@doFavor="doFavor" />
 			<EmptyContent
-				v-if="loading"
+				v-if="pageLoading"
 				icon="icon-loading" />
 		</AppContent>
 	</Content>
@@ -34,6 +33,7 @@ import { Howl } from 'howler'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import store from '../store'
 
 let audioPlayer = null
 
@@ -51,8 +51,15 @@ export default {
 	data: () => ({
 		tableData: [],
 		offset: 0,
-		loading: false,
+		pageLoading: false,
 	}),
+	provide: {
+		player: {
+			isPlaying: false,
+			isBuffering: false,
+			volume: 0,
+		},
+	},
 	watch: {
 		$route: 'onRoute',
 	},
@@ -102,6 +109,8 @@ export default {
 			 * @param {Object} station Station object
 			 */
 		doPlay(station) {
+			this.player.isPlaying = true
+
 			if (audioPlayer !== null) {
 				audioPlayer.fade(1, 0, 500) // FIXME persistent volume state
 				// FIXME fade out
@@ -118,12 +127,23 @@ export default {
 						this.unload()
 					}
 				},
+				onplay() {
+					store.player.isPlaying = true
+					store.player.isBuffering = false
+				},
+				onpause() {
+					store.player.isPlaying = false
+					store.player.isBuffering = false
+				},
+				onload() {
+					store.player.isBuffering = true
+				},
 			})
 			audioPlayer.play()
 			audioPlayer.fade(0.1, 1, 500) // FIXME persistent volume state
 
-			const stationMetadata = document.getElementById('stationMetadata')
-			stationMetadata.textContent = station.name
+			/* const stationMetadata = document.getElementById('stationMetadata')
+			stationMetadata.textContent = station.name */
 		},
 		/**
 		 * Fetching radio stations using Radio-Browser.info API
@@ -132,7 +152,7 @@ export default {
 			// FIXME https://de1.api.radio-browser.info/json/stations/lastchange?limit=10
 			const vm = this
 			if (vm.offset === 0) {
-				vm.loading = true
+				vm.pageLoading = true
 			}
 			this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations',
 				{
@@ -143,7 +163,7 @@ export default {
 					'User-Agent': 'Nextcloud Radio/1.0.0', // FIXME global version, doesnt seem to work
 				})
 				.done(function(data) {
-					vm.loading = false
+					vm.pageLoading = false
 					vm.tableData = vm.tableData.concat(data)
 					vm.offset += 20
 				})

src/components/Player.vue

@@ -2,10 +2,10 @@
 	<div id="app-settings">
 		<div
 			class="wrap"
-			:class="{ buffering: isBuffering }">
+			:class="{ buffering: player.isBuffering }">
 			<button
 				class="player"
-				:class="isPlaying ? 'pause' : 'play'" />
+				:class="player.isPlaying ? 'pause' : 'play'" />
 		</div>
 		<div id="volumeicon" class="full" />
 		<input
@@ -16,17 +16,19 @@
 			min="0"
 			max="1"
 			step=".05"
+			value="this.volume"
 			@input="changeVolume">
 		<span class="stationMetadata" />
+		{{ player.isPlaying }}
 	</div>
 </template>
 
 <script>
 export default {
 	data: () => ({
-		isPlaying: true,
-		isBuffering: true,
+		sliderVal: 0,
 	}),
+	inject: ['player'],
 	methods: {
 		changeVolume() {
 			this.$emit('changeVolume', this.sliderVal)

src/main.js

@@ -21,6 +21,7 @@
  */
 import Vue from 'vue'
 import router from './router'
+import store from './store'
 
 import { translate, translatePlural } from '@nextcloud/l10n'
 
@@ -34,6 +35,7 @@ Vue.prototype.$jquery = jquery
 
 export default new Vue({
 	el: '#content',
+	store,
 	router,
 	render: h => h(App),
 })

src/store.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	player: {
+		isPlaying: false,
+		isBuffering: false,
+		volume: 0,
+		count: 0,
+	},
+	mutations: {
+		increment(player) {
+			player.count++
+		},
+	},
+	strict: true,
+})