Add support for deleting music from play queue

packages/web/components/ContextMenus/TrackContextMenu.tsx

@@ -91,6 +91,13 @@ const TrackContextMenu = () => {
                 player.addToNextPlay(Number(dataSourceID))
               },
             },
+            {
+              type: 'item',
+              label: t`context-menu.delete-from-queue`,
+              onClick: () => {
+                player.deleteFromPlaylist(Number(dataSourceID))
+              }
+            },
             {
               type: 'divider',
             },

packages/web/i18n/locales/en-us.json

@@ -137,6 +137,7 @@
     "go-to-album": "Go to album",
     "go-to-artist": "Go to artist",
     "add-to-queue": "Add to Queue",
+    "delete-from-queue": "Delete from Queue",
     "follow": "Follow",
     "unfollow": "Unfollow",
     "followed": "Followed",

packages/web/i18n/locales/zh-cn.json

@@ -137,6 +137,7 @@
     "go-to-album": "查看专辑",
     "go-to-artist": "查看艺人",
     "add-to-queue": "添加到播放队列",
+    "delete-from-queue": "从播放队列中删除",
     "unfollow": "取消关注",
     "follow": "关注",
     "followed": "已关注",

packages/web/utils/player.ts

@@ -559,6 +559,28 @@ export class Player {
     this.trackList.splice(Number(this._nextTrackIndex), 0, trackID)
   }
 
+  /**
+   * deleteFromPlaylist() - function to remove a track from current play queue
+   * 
+   * @param trackID
+   */
+
+  deleteFromPlaylist(trackID: number) {
+    // Check if the song existed in the tracklist
+    if (!this.trackList.includes(trackID)) {
+      return
+    }
+    // Check whether we are deleting the content that we are playing
+    if (this.track?.id != undefined && this.track?.id != trackID){
+      this.trackList = this.trackList.filter(item => item != trackID)
+      return
+    }
+    // If we are deleting current playing. Switch to the next first
+    this.prevTrack()
+    this.trackList = this.trackList.filter(item => item != trackID)
+    this.nextTrack()
+  }
+
   /**
    *
    * @param trackID