refactor vuex actions

src/library/TrackContextMenu.vue

@@ -3,7 +3,7 @@
     <template #button-content>
       <Icon icon="three-dots-vertical" />
     </template>
-    <b-dropdown-item-button @click="playNext()">
+    <b-dropdown-item-button @click="setNextInQueue()">
       Play next
     </b-dropdown-item-button>
     <b-dropdown-item-button @click="addToQueue()">
@@ -36,8 +36,8 @@
         }
         this.starred = !this.starred
       },
-      playNext() {
-        return this.$store.dispatch('player/playNext', this.track)
+      setNextInQueue() {
+        return this.$store.dispatch('player/setNextInQueue', this.track)
       },
       addToQueue() {
         return this.$store.dispatch('player/addToQueue', this.track)

src/library/TrackList.vue

@@ -120,9 +120,9 @@
         if ((this.tracks as any)[index].id === this.playingTrackId) {
           return this.$store.dispatch('player/playPause')
         }
-        return this.$store.dispatch('player/playQueue', {
+        return this.$store.dispatch('player/playTrackList', {
           index,
-          queue: this.tracks,
+          tracks: this.tracks,
         })
       },
       dragstart(id: string, event: any) {

src/library/album/AlbumDetails.vue

@@ -60,9 +60,9 @@
     methods: {
       play() {
         if (this.album?.tracks) {
-          return this.$store.dispatch('player/playQueue', {
+          return this.$store.dispatch('player/playTrackList', {
             index: 0,
-            queue: this.album.tracks,
+            tracks: this.album.tracks,
           })
         }
       },

src/library/radio/RadioStations.vue

@@ -59,7 +59,10 @@
         if (this.items[index].id === this.playingTrackId) {
           return this.$store.dispatch('player/playPause')
         }
-        return this.$store.dispatch('player/playQueue', { index, queue: this.items })
+        return this.$store.dispatch('player/playTrackList', {
+          index,
+          tracks: this.items
+        })
       },
     }
   })

src/player/store.ts

@@ -87,20 +87,26 @@ export const playerModule: Module<State, any> = {
   },
 
   actions: {
-    async playQueue({ commit }, { queue, index }) {
+    async playTrackList({ commit }, { queue, index }) {
       commit('setQueue', [...queue])
       commit('setQueueIndex', index)
       commit('setPlaying')
       await audio.play()
     },
-    async play({ commit }) {
+    async resume({ commit }) {
       commit('setPlaying')
       await audio.play()
     },
-    pause({ commit }) {
+    async pause({ commit }) {
       audio.pause()
       commit('setPaused')
     },
+    async playPause({ state, dispatch }) {
+      if (state.isPlaying) {
+        return dispatch('pause')
+      }
+      return dispatch('resume')
+    },
     async next({ commit, state }) {
       commit('setQueueIndex', state.queueIndex + 1)
       commit('setPlaying')
@@ -111,23 +117,18 @@ export const playerModule: Module<State, any> = {
       commit('setPlaying')
       await audio.play()
     },
-    playPause({ state, dispatch }) {
-      if (state.isPlaying) {
-        return dispatch('pause')
-      }
-      return dispatch('play')
-    },
     seek({ commit, state }, value) {
       if (isFinite(state.duration)) {
         commit('setPosition', state.duration * value)
       }
     },
-    playNext({ commit }, track) {
-      commit('setNextInQueue', track)
     },
     addToQueue({ commit }, track) {
       commit('addToQueue', track)
     },
+    setNextInQueue({ commit }, track) {
+      commit('setNextInQueue', track)
+    },
   },
 
   getters: {
@@ -172,7 +173,7 @@ export function setupAudio(store: Store<any>) {
 
   if (mediaSession) {
     mediaSession.setActionHandler('play', () => {
-      store.dispatch('player/play')
+      store.dispatch('player/resume')
     })
     mediaSession.setActionHandler('pause', () => {
       store.dispatch('player/pause')