add Play next & Add to queue to album page

src/library/TrackContextMenu.vue

@@ -36,10 +36,10 @@
         return this.$api.star('track', this.track.id)
       },
       setNextInQueue() {
-        return this.$store.dispatch('player/setNextInQueue', this.track)
+        return this.$store.dispatch('player/setNextInQueue', [this.track])
       },
       addToQueue() {
-        return this.$store.dispatch('player/addToQueue', this.track)
+        return this.$store.dispatch('player/addToQueue', [this.track])
       },
     }
   })

src/library/album/AlbumDetails.vue

@@ -22,6 +22,17 @@
           <b-button variant="secondary" class="mr-2" @click="toggleStar">
             <Icon :icon="album.starred ? 'star-fill' : 'star'" />
           </b-button>
+          <b-dropdown variant="secondary" boundary="window" no-caret toggle-class="px-1">
+            <template #button-content>
+              <Icon icon="three-dots-vertical" />
+            </template>
+            <b-dropdown-item-btn @click="setNextInQueue">
+              Play next
+            </b-dropdown-item-btn>
+            <b-dropdown-item-btn @click="addToQueue">
+              Add to queue
+            </b-dropdown-item-btn>
+          </b-dropdown>
         </div>
       </div>
     </div>
@@ -59,13 +70,23 @@
     },
     methods: {
       play() {
-        if (this.album?.tracks) {
+        if (this.album) {
           return this.$store.dispatch('player/playTrackList', {
             index: 0,
             tracks: this.album.tracks,
           })
         }
       },
+      setNextInQueue() {
+        if (this.album) {
+          return this.$store.dispatch('player/setNextInQueue', this.album.tracks)
+        }
+      },
+      addToQueue() {
+        if (this.album) {
+          return this.$store.dispatch('player/addToQueue', this.album.tracks)
+        }
+      },
       toggleStar() {
         if (this.album) {
           const value = !this.album.starred
@@ -74,7 +95,7 @@
             ? this.$api.starAlbum(this.album.id)
             : this.$api.unstarAlbum(this.album.id)
         }
-      }
+      },
     }
   })
 </script>

src/player/store.ts

@@ -92,8 +92,8 @@ export const playerModule: Module<State, any> = {
         })
       }
     },
-    addToQueue(state, track) {
-      state.queue.push(track)
+    addToQueue(state, tracks) {
+      state.queue.push(...tracks)
     },
     removeFromQueue(state, index) {
       state.queue.splice(index, 1)
@@ -101,8 +101,8 @@ export const playerModule: Module<State, any> = {
         state.queueIndex--
       }
     },
-    setNextInQueue(state, track) {
-      state.queue.splice(state.queueIndex + 1, 0, track)
+    setNextInQueue(state, tracks) {
+      state.queue.splice(state.queueIndex + 1, 0, ...tracks)
     },
     setCurrentTime(state, value: any) {
       state.currentTime = value
@@ -190,11 +190,11 @@ export const playerModule: Module<State, any> = {
       commit('setMute', !state.mute)
       audio.volume = state.mute ? 0.0 : state.volume
     },
-    addToQueue({ commit }, track) {
-      commit('addToQueue', track)
+    addToQueue({ state, commit }, tracks) {
+      commit('addToQueue', state.shuffle ? shuffle([...tracks]) : tracks)
     },
-    setNextInQueue({ commit }, track) {
-      commit('setNextInQueue', track)
+    setNextInQueue({ state, commit }, tracks) {
+      commit('setNextInQueue', state.shuffle ? shuffle([...tracks]) : tracks)
     },
     setVolume({ commit }, value) {
       audio.volume = value