put player logic into service

src/store/player.js

@@ -28,7 +28,7 @@ export default ({
 		isPlaying: false,
 		isBuffering: false,
 		isMute: false,
-		isPaused: false,
+		isPausing: false,
 		volume: localStorage.getItem('radio.volume') || 0.5,
 		oldVolume: localStorage.getItem('radio.volume') || 0.5,
 		title: '',
@@ -37,6 +37,9 @@ export default ({
 		setPlaying(state, playerState) {
 			state.isPlaying = playerState
 		},
+		setPausing(state, pauseState) {
+			state.isPausing = pauseState
+		},
 		setBuffering(state, bufferingState) {
 			state.isBuffering = bufferingState
 		},
@@ -87,16 +90,10 @@ export default ({
 			context.commit('setTitle', title)
 		},
 		playStation(context, station) {
-			if (context.state.isPaused) {
-				context.commit('setPausing', false)
-				context.commit('setBuffering', true)
-				player.doResume()
-			} else {
-				context.commit('setBuffering', true)
-				context.commit('setTitle', station.name)
-				context.commit('setPausing', false)
-				player.doPlay(station.enclosure)
-			}
+			context.commit('setBuffering', true)
+			context.commit('setTitle', station.name)
+			context.commit('setPausing', false)
+			player.doPlay(station.url_resolved)
 		},
 
 	},

src/views/Main.vue

@@ -59,17 +59,12 @@ import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import Navigation from './../components/Navigation'
 import Table from './../components/Table'
 import Sidebar from './../components/Sidebar'
-import { Howl, Howler } from 'howler'
-
-import { showError } from '@nextcloud/dialogs'
 
 import Vuex from 'vuex'
+
 import { RadioBrowserApi } from './../services/RadioBrowserApi'
-
 const apiClient = new RadioBrowserApi()
 
-let audioPlayer = null
-
 export default {
 	name: 'Main',
 	components: {
@@ -138,18 +133,6 @@ export default {
 	},
 	watch: {
 		$route: 'onRoute',
-		'player.volume'(newVolume, oldVolume) {
-			if (audioPlayer !== null) {
-				audioPlayer.volume(newVolume)
-			}
-		},
-		'player.isPaused'(newState, oldState) {
-			if (newState === true && audioPlayer !== null) {
-				audioPlayer.pause()
-			} else if (newState === false && audioPlayer !== null) {
-				audioPlayer.play()
-			}
-		},
 	},
 	mounted() {
 		this.onRoute()
@@ -193,44 +176,10 @@ export default {
 			 * Start playing a radio station and counting the playback
 			 * @param {Object} station Station object
 			 */
-		async doPlay(station) {
-			const vm = this
+		doPlay(station) {
 
-			vm.$store.dispatch('isBuffering', true)
-
-			if (audioPlayer !== null) {
-				audioPlayer.fade(vm.player.volume, 0, 500)
-			}
-			vm.$store.dispatch('setTitle', station.name)
-
-			let stationSrc = ''
-			if (!station.url_resolved) {
-				stationSrc = station.urlresolved
-			} else {
-				stationSrc = station.url_resolved
-			}
-			Howler.unload()
-			audioPlayer = new Howl({
-				src: stationSrc,
-				html5: true,
-				volume: vm.player.volume,
-				onplay() {
-					vm.$store.dispatch('isPlaying', true)
-					vm.$store.dispatch('isBuffering', false)
-				},
-				onpause() {
-					vm.$store.dispatch('isPlaying', false)
-					vm.$store.dispatch('isBuffering', false)
-				},
-				onend() {
-					showError(t('radio', 'Lost connection to radio station, retrying ...'))
-					vm.$store.dispatch('isPlaying', false)
-					vm.$store.dispatch('isBuffering', true)
-				},
-			})
-			audioPlayer.unload()
-			audioPlayer.play()
-			audioPlayer.fade(0, vm.player.volume, 500)
+			/* Start streaming station */
+			this.$store.dispatch('playStation', station)
 
 			/* Count click */
 			apiClient.countClick(station)