✨ add previous and next button event

Author: irisdew

music-player/src/components/SongList.vue

@@ -28,6 +28,8 @@
     <SongPlayer
       :song="list[currentSongIndex]"
       @goback="isPlayerVisible = !isPlayerVisible"
+      @next="playNext"
+      @previous="playPrevious"
     />
   </div>
 </template>
@@ -79,6 +81,20 @@ export default {
       this.currentSongIndex = index;
       this.isPlayerVisible = true;
     },
+    playNext() {
+      if (this.currentSongIndex < this.list.length - 1) {
+        this.currentSongIndex += 1;
+      } else {
+        this.currentSongIndex = 0;
+      }
+    },
+    playPrevious() {
+      if (this.currentSongIndex != 0) {
+        this.currentSongIndex -= 1;
+      } else {
+        this.currentSongIndex = this.list.length - 1;
+      }
+    },
   },
 };
 </script>

music-player/src/components/SongPlayer.vue

@@ -16,7 +16,7 @@
         <p class="text-gray-400">{{ song.year }}</p>
       </div>
       <div class="grid grid-cols-3 mt-10">
-        <div class="flex items-center justify-center">
+        <div class="flex items-center justify-center" @click="previous">
           <button>Previous</button>
         </div>
         <div class="flex items-center justify-center">
@@ -26,7 +26,7 @@
             Play
           </button>
         </div>
-        <div class="flex items-center justify-center">
+        <div class="flex items-center justify-center" @click="next">
           <button>Next</button>
         </div>
       </div>
@@ -47,11 +47,17 @@ export default {
       songSrc: String,
     },
   },
-  emits: ["goback"],
+  emits: ["goback", "next", "previous"],
   methods: {
     goback() {
       this.$emit("goback");
     },
+    next() {
+      this.$emit("next");
+    },
+    previous() {
+      this.$emit("previous");
+    },
   },
 };
 </script>