catch more errors, fix errors

src/components/Main.vue

@@ -71,7 +71,7 @@ export default {
 		tableData: [],
 		pageLoading: false,
 		blurHashes: require('../assets/blurHashes.json'),
-		favorites: null,
+		favorites: [],
 		showSidebar: false,
 		sidebarStation: [],
 	}),
@@ -164,8 +164,10 @@ export default {
 			 * @param {Object} station Station object
 			 */
 		async doPlay(station) {
-
 			const vm = this
+
+			vm.$store.dispatch('isBuffering', true)
+
 			if (audioPlayer !== null) {
 				audioPlayer.fade(vm.player.volume, 0, 500)
 			}
@@ -180,6 +182,7 @@ export default {
 			Howler.unload()
 			audioPlayer = new Howl({
 				src: stationSrc,
+				html5: true,
 				volume: vm.player.volume,
 				/* onfade() { // FIXME
 					if (this.volume() === 0) {
@@ -187,6 +190,7 @@ export default {
 					}
 				}, */
 				onplay() {
+					console.log('onplay')
 					vm.$store.dispatch('isPlaying', true)
 					vm.$store.dispatch('isBuffering', false)
 				},
@@ -194,12 +198,13 @@ export default {
 					vm.$store.dispatch('isPlaying', false)
 					vm.$store.dispatch('isBuffering', false)
 				},
-				onload() {
-					vm.$store.dispatch('isPlaying', true)
+				onend() {
+					showError(t('radio', 'Lost connection to radio station, retrying ...'))
+					vm.$store.dispatch('isPlaying', false)
 					vm.$store.dispatch('isBuffering', true)
 				},
-				onstop() {
-					vm.$store.dispatch('isPlaying', false)
+				onloaderror() {
+					showError(t('radio', 'Unable to reach and play radio station'))
 					vm.$store.dispatch('isBuffering', false)
 				},
 			})
@@ -207,7 +212,11 @@ export default {
 			audioPlayer.fade(0, vm.player.volume, 500)
 
 			/* Count click */
-			axios.get(this.$apiUrl + '/json/url/' + station.stationuuid)
+			try {
+				axios.get(this.$apiUrl + '/json/url/' + station.stationuuid)
+			} catch (error) {
+				showError(t('radio', 'Unable to count play on remote API'))
+			}
 
 			/* Put into recent stations */
 			try {
@@ -232,10 +241,6 @@ export default {
 
 		},
 
-		/**
-		 * Fetching radio stations using Radio-Browser.info API
-			 * @param {String} menuState Entries to load
-		 */
 		async loadStations(menuState = 'TOP') {
 
 			const vm = this
@@ -290,26 +295,30 @@ export default {
 				queryURI = generateUrl('/apps/radio/api/recent')
 			}
 
-			await axios.get(queryURI, {
-				params: {
-					limit: 20,
-					order: sortBy,
-					reverse: true,
-					offset: vm.tableData.length,
-				},
-			})
-				.then(function(response) {
-					for (let i = 0; i < response.data.length; i++) {
-						const obj = response.data[i]
-						let blurHash = vm.blurHashes[obj.stationuuid]
-						if (!blurHash) {
-							blurHash = 'L1TSUA?bj[?b~qfQfQj[ayfQfQfQ'
-						}
-						response.data[i].blurHash = blurHash
-					}
-					vm.tableData = vm.tableData.concat(response.data)
-					vm.pageLoading = false
+			try {
+				await axios.get(queryURI, {
+					params: {
+						limit: 20,
+						order: sortBy,
+						reverse: true,
+						offset: vm.tableData.length,
+					},
 				})
+					.then(function(response) {
+						for (let i = 0; i < response.data.length; i++) {
+							const obj = response.data[i]
+							let blurHash = vm.blurHashes[obj.stationuuid]
+							if (!blurHash) {
+								blurHash = 'L1TSUA?bj[?b~qfQfQj[ayfQfQfQ'
+							}
+							response.data[i].blurHash = blurHash
+						}
+						vm.tableData = vm.tableData.concat(response.data)
+						vm.pageLoading = false
+					})
+			} catch (error) {
+				showError(t('radio', 'Could not fetch stations from remote API'))
+			}
 		},
 
 		/**
@@ -335,14 +344,18 @@ export default {
 
 		async loadFavorites() {
 			const vm = this
-			await axios.get(generateUrl('/apps/radio/api/favorites'))
-				.then(function(response) {
-					const favorites = []
-					for (let i = 0, len = response.data.length; i < len; i++) {
-						favorites.push([response.data[i].id, response.data[i].stationuuid])
-					}
-					vm.favorites = favorites
-				})
+			try {
+				await axios.get(generateUrl('/apps/radio/api/favorites'))
+					.then(function(response) {
+						const favorites = []
+						for (let i = 0, len = response.data.length; i < len; i++) {
+							favorites.push([response.data[i].id, response.data[i].stationuuid])
+						}
+						vm.favorites = favorites
+					})
+			} catch (error) {
+				showError(t('radio', 'Unable to load favorites'))
+			}
 		},
 
 		toggleSidebar(station = null) {

src/components/Player.vue

@@ -24,8 +24,6 @@
 			@change="saveVolume($event)">
 		<div class="playerMetadata">
 			{{ player.title }}
-			{{ player.isPlaying }}
-			{{ player.isBuffering }}
 		</div>
 	</div>
 </template>