add play next

src/library/TrackContextMenu.vue

@@ -3,6 +3,9 @@
     <template #button-content>
       <Icon icon="three-dots-vertical"/>
     </template>
+    <b-dropdown-item-button @click="playNext()">
+      Play next
+    </b-dropdown-item-button>
     <b-dropdown-item-button @click="toggleStarred()">
       {{ starred ? 'Unstar' : 'Star' }}
     </b-dropdown-item-button>
@@ -30,6 +33,9 @@
         }
         this.starred = !this.starred;
       },
+      playNext() {
+        return this.$store.dispatch("player/playNext", this.track);
+      },
     }
   });
 </script>

src/player/Player.vue

@@ -25,13 +25,13 @@
 
         <!-- Controls--->
         <div class="col-auto p-0">
-          <b-button variant="link" class="m-2" @click="playPrevious">
+          <b-button variant="link" class="m-2" @click="previous">
             <Icon icon="skip-start-fill"/>
           </b-button>
           <b-button variant="link" size="lg" class="m-2" @click="playPause">
             <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
           </b-button>
-          <b-button variant="link" class="m-2" @click="playNext">
+          <b-button variant="link" class="m-2" @click="next">
             <Icon icon="skip-end-fill"/>
           </b-button>
         </div>
@@ -73,8 +73,8 @@ export default Vue.extend({
   methods: {
     ...mapActions("player", [
       "playPause",
-      "playNext",
-      "playPrevious",
+      "next",
+      "previous",
     ]),
     seek(event: any) {
       if (event.target) {

src/player/store.ts

@@ -72,6 +72,9 @@ export const playerModule: Module<State, any> = {
         state.queueIndex--;
       }
     },
+    setNextInQueue(state, track) {
+      state.queue.splice(state.queueIndex + 1, 0, track);
+    },
     setProgress(state, value: any) {
       state.currentTime = value;
     },
@@ -95,12 +98,12 @@ export const playerModule: Module<State, any> = {
       audio.pause();
       commit("setPaused");
     },
-    async playNext({ commit, state }) {
+    async next({ commit, state }) {
       commit("setQueueIndex", state.queueIndex + 1);
       commit("setPlaying");
       await audio.play();
     },
-    async playPrevious({ commit, state }) {
+    async previous({ commit, state }) {
       commit("setQueueIndex", state.queueIndex - 1);
       commit("setPlaying");
       await audio.play();
@@ -114,6 +117,9 @@ export const playerModule: Module<State, any> = {
     seek({ commit, state }, value) {
       commit("setPosition", state.duration * value);
     },
+    playNext({ commit }, track) {
+      commit("setNextInQueue", track);
+    },
   },
   
   getters: {
@@ -150,7 +156,7 @@ export function setupAudio(store: Store<any>) {
     store.commit("player/setDuration", audio.duration);
   }
   audio.onended = (event) => {
-    store.dispatch("player/playNext");
+    store.dispatch("player/next");
   }
   audio.onerror = (event) => {
     store.commit("player/setPaused");
@@ -168,10 +174,10 @@ export function setupAudio(store: Store<any>) {
       store.dispatch("player/pause");
     });
     mediaSession.setActionHandler('nexttrack', () => {
-      store.dispatch("player/playNext");
+      store.dispatch("player/next");
     });
     mediaSession.setActionHandler('previoustrack', () => {
-      store.dispatch("player/playPrevious");
+      store.dispatch("player/previous");
     });
     mediaSession.setActionHandler('stop', () => {
       store.dispatch("player/pause");