added queue system and implemented it into songs page

components/Player.vue

@@ -11,10 +11,10 @@
       </div>
       <div class="controls">
         <IconsShuffle />
-        <IconsRewind />
+        <IconsRewind @click="rewind" />
         <IconsPlay v-if="paused" @click="play" />
         <IconsPause v-if="!paused" @click="pause" />
-        <IconsSkip />
+        <IconsSkip @click="skip" />
         <IconsRepeat @click="toggleLoop" :class="{ 'active': looping }" />
       </div>
       <div class="right-controls">
@@ -35,8 +35,8 @@
       <input type="range" class="progress" v-model="progress" @input="skipTo" min="0" max="100" step=".1" />
       <div class="progress-indicator" :style="{ width: progress + '%' }"></div>
       <div class="numbers">{{ time }} / {{ audio.duration > 0
-          ? new Date(audio.duration * 1000).toISOString().substr(14, 5)
-          : "00:00" }}</div>
+        ? new Date(audio.duration * 1000).toISOString().substr(14, 5)
+        : "00:00" }}</div>
     </div>
   </div>
 </template>
@@ -108,6 +108,14 @@ async function pause() {
   }
 }
 
+function skip() {
+  $music.skip();
+}
+
+function rewind() {
+  $music.rewind();
+}
+
 function skipTo() {
   audio.value.currentTime = (progress.value / 100) * audio.value.duration;
 }

pages/search.vue

@@ -95,7 +95,7 @@ async function handleSongClick(song: MusicSearchResponseItem) {
       title: song.title,
       artist: song.uploaderName,
       length: song.duration,
-      cover: song.thumbnail.replace("w120-h120", "w500-h500"),
+      cover: song.thumbnail,
       date_added: formatDate(new Date())
     }
 

pages/songs.vue

@@ -15,7 +15,7 @@
         </div>
       </div>
       <div class="items">
-        <div v-for="song in filteredSongs" :key="song.id" @click="play(song.id)" class="song">
+        <div v-for="(song, index) in filteredSongs" :key="song.id" @click="play(song.id, index)" class="song">
           <nuxt-img :src="song.coverURL" :alt="song.title" class="cover" />
           <div class="titles">
             <p class="title">{{ truncate(song.title) }}</p>
@@ -95,9 +95,9 @@ const filteredSongs = computed(() => {
     });
 });
 
-async function play(id: string) {
-  await $music.setSong(id);
-  $music.play();
+async function play(id: string, index: number) {
+  const queueIds = filteredSongs.value.slice(index).map(song => song.id);
+  await $music.setQueue(queueIds);
 }
 
 function truncate(text: string, length: number = 45) {

plugins/music.ts

@@ -1,5 +1,6 @@
 import { createPinia } from "pinia";
 import { useMusicStore } from "~/stores/music";
+import { useSettingsStore } from "~/stores/settings"; // Assuming there's a settings store
 import {
   readFile,
   exists,
@@ -25,6 +26,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   musicStore.player.audio.onplay = () => music.ensureAudioContextAndFilters();
 
   const music = {
+    queue: [] as string[],
+    currentQueueIndex: 0,
     async init() {
       const baseDirExists = await exists("Vleer", {
         baseDir: BaseDirectory.Audio,
@@ -230,8 +233,34 @@ export default defineNuxtPlugin((nuxtApp) => {
         await musicStore.player.audioContext.resume();
       }
     },
+    async setQueue(songIds: string[]) {
+      this.queue = songIds;
+      this.currentQueueIndex = 0;
+      if (this.queue.length > 0) {
+        await this.setSong(this.queue[0]);
+        this.play();
+      }
+    },
+    async skip() {
+      if (this.currentQueueIndex < this.queue.length - 1) {
+        this.currentQueueIndex++;
+        await this.setSong(this.queue[this.currentQueueIndex]);
+        this.play();
+      }
+    },
+    async rewind() {
+      if (this.currentQueueIndex > 0) {
+        this.currentQueueIndex--;
+        await this.setSong(this.queue[this.currentQueueIndex]);
+        this.play();
+      }
+    },
   };
 
+  musicStore.player.audio.addEventListener('ended', () => {
+    music.skip();
+  });
+
   return {
     provide: {
       music,