implement play next and add to Queue

src/components/shared/SongItem.vue

@@ -63,6 +63,7 @@
 import perks from "../../composables/perks.js";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
+import useQueueStore from "../../stores/queue";
 import { ContextSrc } from "../../composables/enums";
 
 import { ref } from "vue";
@@ -71,7 +72,7 @@ import { Track } from "../../interfaces.js";
 import { paths } from "../../config";
 
 const contextStore = useContextStore();
-const modalStore = useModalStore();
+
 const context_on = ref(false);
 const imguri = paths.images.thumb
 
@@ -79,7 +80,7 @@ const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  const menus = trackContext(props.song, modalStore);
+  const menus = trackContext(props.song, useModalStore, useQueueStore);
 
   contextStore.showContextMenu(e, menus, ContextSrc.Track);
   context_on.value = true;

src/components/shared/TrackItem.vue

@@ -43,11 +43,11 @@ import { ContextSrc } from "../../composables/enums";
 
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
+import useQueueStore from "../../stores/queue";
 import { paths } from "../../config";
 
 
 const contextStore = useContextStore();
-const modalStore = useModalStore();
 const imguri = paths.images.thumb
 
 const props = defineProps<{
@@ -62,7 +62,7 @@ const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  const menus = trackContext(props.track, modalStore);
+  const menus = trackContext(props.track, useModalStore, useQueueStore);
 
   contextStore.showContextMenu(e, menus, ContextSrc.Track);
   context_on.value = true;

src/contexts/track_context.ts

@@ -3,6 +3,8 @@ import Router from "../router";
 import { Option } from "../interfaces";
 import { getAllPlaylists, addTrackToPlaylist } from "../composables/playlists";
 
+import useQueueStore from "../stores/queue";
+import useModalStore from "../stores/modal";
 /**
  * Returns a list of context menu items for a track.
  * @param  {any} track a track object.
@@ -10,7 +12,11 @@ import { getAllPlaylists, addTrackToPlaylist } from "../composables/playlists";
  * @return {Array<Option>()} a list of context menu items.
  */
 
-export default async (track: Track, modalStore: any): Promise<Option[]> => {
+export default async (
+  track: Track,
+  modalStore: typeof useModalStore,
+  QueueStore: typeof useQueueStore,
+): Promise<Option[]> => {
   const separator: Option = {
     type: "separator",
   };
@@ -46,7 +52,7 @@ export default async (track: Track, modalStore: any): Promise<Option[]> => {
     const new_playlist = <Option>{
       label: "New playlist",
       action: () => {
-        modalStore.showNewPlaylistModal(track);
+        modalStore().showNewPlaylistModal(track);
       },
     };
 
@@ -61,10 +67,20 @@ export default async (track: Track, modalStore: any): Promise<Option[]> => {
 
   const add_to_q: Option = {
     label: "Add to Queue",
-    action: () => console.log("Add to Queue"),
+    action: () => {
+      QueueStore().addTrackToQueue(track);
+    },
     icon: "add_to_queue",
   };
 
+  const play_next: Option = {
+    label: "Play next",
+    action: () => {
+      QueueStore().playTrackNext(track);
+    },
+    icon: "add_to_queue",
+  }
+
   const go_to_folder: Option = {
     label: "Go to Folder",
     action: () => {
@@ -120,6 +136,7 @@ export default async (track: Track, modalStore: any): Promise<Option[]> => {
   const options: Option[] = [
     add_to_playlist,
     add_to_q,
+    play_next,
     add_to_fav,
     separator,
     go_to_folder,

src/interfaces.ts

@@ -30,7 +30,6 @@ interface AlbumInfo {
   count: number;
   duration: number;
   date: string;
-  artistimage: string;
   image: string;
 }
 

src/stores/queue.ts

@@ -197,5 +197,17 @@ export default defineStore("Queue", {
 
       this.setNewQueue(tracks);
     },
+    addTrackToQueue(track: Track) {
+      this.tracks.push(track);
+      addQToLocalStorage(this.from, this.tracks);
+    },
+    playTrackNext(track: Track) {
+      const current = this.tracks.findIndex(
+        (t: Track) => t.trackid === this.current.trackid
+      );
+
+      this.tracks.splice(current + 1, 0, track);
+      addQToLocalStorage(this.from, this.tracks);
+    },
   },
 });