diff --git a/src/components/Main.vue b/src/components/Main.vue index c862409..3c96c56 100644 --- a/src/components/Main.vue +++ b/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) { diff --git a/src/components/Player.vue b/src/components/Player.vue index 20509ea..8f1e528 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -24,8 +24,6 @@ @change="saveVolume($event)">
{{ player.title }} - {{ player.isPlaying }} - {{ player.isBuffering }}