diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue index 5b85b28807dd91a54ac6afffa8524e07175b0b18..623d944608a095089a049300364cce05c6e9e027 100644 --- a/front/src/components/Queue.vue +++ b/front/src/components/Queue.vue @@ -96,7 +96,7 @@ v-if="!playing" :title="labels.play" :aria-label="labels.play" - @click.prevent.stop="togglePlay" + @click.prevent.stop="resumePlayback" class="control"> <i :class="['ui', 'play', {'disabled': !currentTrack}, 'icon']"></i> </span> @@ -105,7 +105,7 @@ v-else :title="labels.pause" :aria-label="labels.pause" - @click.prevent.stop="togglePlay" + @click.prevent.stop="pausePlayback" class="control"> <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'icon']"></i> </span> @@ -308,7 +308,8 @@ export default { unmute: "player/unmute", clean: "queue/clean", toggleMute: "player/toggleMute", - togglePlay: "player/togglePlay", + resumePlayback: "player/resumePlayback", + pausePlayback: "player/pausePlayback", }), reorder: function(event) { this.$store.commit("queue/reorder", { diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index e8bbb8dd812f35d45c4d4949aa0a93f27c6ddcc6..27a7657e8f438a5e37f0d1076f723b063603d5e1 100644 --- a/front/src/components/audio/Player.vue +++ b/front/src/components/audio/Player.vue @@ -74,7 +74,7 @@ v-if="!playing" :title="labels.play" :aria-label="labels.play" - @click.prevent.stop="togglePlay" + @click.prevent.stop="resumePlayback" class="circular button control"> <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']"></i> </button> @@ -82,7 +82,7 @@ v-else :title="labels.pause" :aria-label="labels.pause" - @click.prevent.stop="togglePlay" + @click.prevent.stop="pausePlayback" class="circular button control"> <i :class="['ui', 'big', 'pause', {'disabled': !currentTrack}, 'icon']"></i> </button> @@ -203,7 +203,7 @@ </div> </div> <GlobalEvents - @keydown.p.prevent.exact="togglePlay" + @keydown.p.prevent.exact="togglePlayback" @keydown.esc.prevent.exact="$store.commit('ui/queueFocused', null)" @keydown.ctrl.shift.left.prevent.exact="previous" @keydown.ctrl.shift.right.prevent.exact="next" @@ -281,8 +281,8 @@ export default { } // Add controls for notification drawer if ('mediaSession' in navigator) { - navigator.mediaSession.setActionHandler('play', this.togglePlay); - navigator.mediaSession.setActionHandler('pause', this.togglePlay); + navigator.mediaSession.setActionHandler('play', this.resumePlayback); + navigator.mediaSession.setActionHandler('pause', this.pausePlayback); navigator.mediaSession.setActionHandler('seekforward', this.seekForward); navigator.mediaSession.setActionHandler('seekbackward', this.seekBackward); navigator.mediaSession.setActionHandler('nexttrack', this.next); @@ -297,7 +297,9 @@ export default { }, methods: { ...mapActions({ - togglePlay: "player/togglePlay", + resumePlayback: "player/resumePlayback", + pausePlayback: "player/pausePlayback", + togglePlayback: "player/togglePlayback", mute: "player/mute", unmute: "player/unmute", clean: "queue/clean", diff --git a/front/src/store/player.js b/front/src/store/player.js index f3dbbb8b79307aeb5a36918ba4f0e9345f93cd11..e4d34b02af8aafa4964d6abd4271d461dd05141e 100644 --- a/front/src/store/player.js +++ b/front/src/store/player.js @@ -99,7 +99,7 @@ export default { commit('errored', false) commit('resetErrorCount') }, - togglePlay ({commit, state, dispatch}) { + togglePlayback ({commit, state, dispatch}) { commit('playing', !state.playing) if (state.errored && state.errorCount < state.maxConsecutiveErrors) { setTimeout(() => { @@ -109,6 +109,19 @@ export default { }, 3000) } }, + resumePlayback ({commit, state, dispatch}) { + commit('playing', true) + if (state.errored && state.errorCount < state.maxConsecutiveErrors) { + setTimeout(() => { + if (state.playing) { + dispatch('queue/next', null, {root: true}) + } + }, 3000) + } + }, + pausePlayback ({commit}) { + commit('playing', false) + }, toggleMute({commit, state}) { if (state.volume > 0) { commit('tempVolume', state.volume) diff --git a/front/tests/unit/specs/store/player.spec.js b/front/tests/unit/specs/store/player.spec.js index ac995ab1a805fed9d0120ba5f929fbcdf8f4488d..b40642842612976bde41bc55b4676d97bc82e816 100644 --- a/front/tests/unit/specs/store/player.spec.js +++ b/front/tests/unit/specs/store/player.spec.js @@ -112,24 +112,41 @@ describe('store/player', () => { ] }) }) - it('toggle play false', () => { + it('toggle playback false', () => { testAction({ - action: store.actions.togglePlay, + action: store.actions.togglePlayback, params: {state: {playing: false}}, expectedMutations: [ { type: 'playing', payload: true } ] }) }) - it('toggle play true', () => { + it('toggle playback true', () => { testAction({ - action: store.actions.togglePlay, + action: store.actions.togglePlayback, params: {state: {playing: true}}, expectedMutations: [ { type: 'playing', payload: false } ] }) }) + it('resume playback', () => { + testAction({ + action: store.actions.resumePlayback, + params: {state: {}}, + expectedMutations: [ + { type: 'playing', payload: true } + ] + }) + }) + it('pause playback', () => { + testAction({ + action: store.actions.pausePlayback, + expectedMutations: [ + { type: 'playing', payload: false } + ] + }) + }) it('trackEnded', () => { testAction({ action: store.actions.trackEnded,