feat: add clear queue button to next page

src/components/TrackList.vue

@@ -10,7 +10,15 @@
       </div>
       <hr />
       <div class="item" @click="play">{{ $t('contextMenu.play') }}</div>
-      <div class="item" @click="playNext">{{ $t('contextMenu.playNext') }}</div>
+      <div class="item" @click="addToQueue">{{
+        $t('contextMenu.addToQueue')
+      }}</div>
+      <div
+        v-if="extraContextMenuItem.includes('removeTrackFromQueue')"
+        class="item"
+        @click="removeTrackFromQueue"
+        >从队列删除</div
+      >
       <hr />
       <div v-show="!isRightClickedTrackLiked" class="item" @click="like">
         {{ $t('contextMenu.saveToMyLikedSongs') }}
@@ -33,7 +41,7 @@
         :track="track"
         :highlight-playing-track="highlightPlayingTrack"
         @dblclick.native="playThisList(track.id)"
-        @click.right.native="openMenu($event, track)"
+        @click.right.native="openMenu($event, track, index)"
       />
     </div>
   </div>
@@ -74,7 +82,10 @@ export default {
     extraContextMenuItem: {
       type: Array,
       default: () => {
-        return []; // 'removeTrackFromPlaylist'
+        return [
+          // 'removeTrackFromPlaylist'
+          // 'removeTrackFromQueue'
+        ];
       },
     },
     columnNumber: {
@@ -98,11 +109,12 @@ export default {
         ar: [{ name: '' }],
         al: { picUrl: '' },
       },
+      rightClickedTrackIndex: -1,
       listStyles: {},
     };
   },
   computed: {
-    ...mapState(['liked']),
+    ...mapState(['liked', 'player']),
     isRightClickedTrackLiked() {
       return this.liked.songs.includes(this.rightClickedTrack?.id);
     },
@@ -119,8 +131,9 @@ export default {
   methods: {
     ...mapMutations(['updateModal']),
     ...mapActions(['nextTrack', 'showToast', 'likeATrack']),
-    openMenu(e, track) {
+    openMenu(e, track, index = -1) {
       this.rightClickedTrack = track;
+      this.rightClickedTrackIndex = index;
       this.$refs.menu.openMenu(e);
     },
     closeMenu() {
@@ -130,6 +143,7 @@ export default {
         ar: [{ name: '' }],
         al: { picUrl: '' },
       };
+      this.rightClickedTrackIndex = -1;
     },
     playThisList(trackID) {
       if (this.dbclickTrackFunc === 'default') {
@@ -137,50 +151,32 @@ export default {
       } else if (this.dbclickTrackFunc === 'none') {
         // do nothing
       } else if (this.dbclickTrackFunc === 'playTrackOnListByID') {
-        this.$store.state.player.playTrackOnListByID(trackID);
+        this.player.playTrackOnListByID(trackID);
       } else if (this.dbclickTrackFunc === 'playPlaylistByID') {
-        this.$store.state.player.playPlaylistByID(this.id, trackID);
+        this.player.playPlaylistByID(this.id, trackID);
       } else if (this.dbclickTrackFunc === 'playAList') {
         let trackIDs = this.tracks.map(t => t.id);
-        this.$store.state.player.replacePlaylist(
-          trackIDs,
-          this.id,
-          'artist',
-          trackID
-        );
+        this.player.replacePlaylist(trackIDs, this.id, 'artist', trackID);
       } else if (this.dbclickTrackFunc === 'dailyTracks') {
         let trackIDs = this.tracks.map(t => t.id);
-        this.$store.state.player.replacePlaylist(
-          trackIDs,
-          '/daily/songs',
-          'url',
-          trackID
-        );
+        this.player.replacePlaylist(trackIDs, '/daily/songs', 'url', trackID);
       }
     },
     playThisListDefault(trackID) {
       if (this.type === 'playlist') {
-        this.$store.state.player.playPlaylistByID(this.id, trackID);
+        this.player.playPlaylistByID(this.id, trackID);
       } else if (this.type === 'album') {
-        this.$store.state.player.playAlbumByID(this.id, trackID);
+        this.player.playAlbumByID(this.id, trackID);
       } else if (this.type === 'tracklist') {
         let trackIDs = this.tracks.map(t => t.id);
-        this.$store.state.player.replacePlaylist(
-          trackIDs,
-          this.id,
-          'artist',
-          trackID
-        );
+        this.player.replacePlaylist(trackIDs, this.id, 'artist', trackID);
       }
     },
     play() {
-      this.$store.state.player.addTrackToPlayNext(
-        this.rightClickedTrack.id,
-        true
-      );
+      this.player.addTrackToPlayNext(this.rightClickedTrack.id, true);
     },
-    playNext() {
-      this.$store.state.player.addTrackToPlayNext(this.rightClickedTrack.id);
+    addToQueue() {
+      this.player.addTrackToPlayNext(this.rightClickedTrack.id);
     },
     like() {
       this.likeATrack(this.rightClickedTrack.id);
@@ -220,6 +216,11 @@ export default {
         });
       }
     },
+    removeTrackFromQueue() {
+      this.$store.state.player.removeTrackFromQueue(
+        this.rightClickedTrackIndex
+      );
+    },
   },
 };
 </script>

src/locale/lang/en.js

@@ -161,7 +161,7 @@ export default {
   },
   contextMenu: {
     play: 'Play',
-    playNext: 'Play Next',
+    addToQueue: 'Add to queue',
     saveToMyLikedSongs: 'Save to my Liked Songs',
     removeFromMyLikedSongs: 'Remove from my Liked Songs',
   },

src/locale/lang/tr.js

@@ -160,7 +160,7 @@ export default {
   },
   contextMenu: {
     play: 'Oynat',
-    playNext: 'Sonrakini Oynat',
+    addToQueue: 'Sonrakini Oynat',
     saveToMyLikedSongs: 'Beğendiğim Müziklere Kaydet',
     removeFromMyLikedMüzikler: 'Beğendiğim Müziklerden Kaldır',
   },

src/locale/lang/zh-CN.js

@@ -162,7 +162,7 @@ export default {
   },
   contextMenu: {
     play: '播放',
-    playNext: '下一首播放',
+    addToQueue: '添加到队列',
     saveToMyLikedSongs: '添加到我喜欢的音乐',
     removeFromMyLikedSongs: '从喜欢的音乐中删除',
   },

src/utils/Player.js

@@ -620,4 +620,11 @@ export default class {
   switchShuffle() {
     this.shuffle = !this.shuffle;
   }
+
+  clearPlayNextList() {
+    this._playNextList = [];
+  }
+  removeTrackFromQueue(index) {
+    this._playNextList.splice(index, 1);
+  }
 }

src/views/album.vue

@@ -114,7 +114,7 @@
       </p>
     </Modal>
     <ContextMenu ref="albumMenu">
-      <div class="item">{{ $t('contextMenu.playNext') }}</div>
+      <!-- <div class="item">{{ $t('contextMenu.addToQueue') }}</div> -->
       <div class="item" @click="likeAlbum(true)">{{
         dynamicDetail.isSub ? '从音乐库删除' : '保存到音乐库'
       }}</div>

src/views/next.vue

@@ -6,7 +6,10 @@
       type="playlist"
       dbclick-track-func="none"
     />
-    <h1 v-show="playNextList.length > 0">插队播放</h1>
+    <h1 v-show="playNextList.length > 0"
+      >插队播放
+      <button @click="player.clearPlayNextList()">清除队列</button>
+    </h1>
     <TrackList
       v-show="playNextList.length > 0"
       :tracks="playNextTracks"
@@ -14,6 +17,7 @@
       :highlight-playing-track="false"
       dbclick-track-func="playTrackOnListByID"
       item-key="id+index"
+      :extra-context-menu-item="['removeTrackFromQueue']"
     />
     <h1>{{ $t('next.nextUp') }}</h1>
     <TrackList
@@ -112,5 +116,26 @@ h1 {
   margin-bottom: 18px;
   cursor: default;
   color: var(--color-text);
+  display: flex;
+  justify-content: space-between;
+  button {
+    color: var(--color-text);
+    border-radius: 8px;
+    padding: 0 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.2s;
+    opacity: 0.68;
+    font-weight: 500;
+    &:hover {
+      opacity: 1;
+      background: var(--color-secondary-bg);
+    }
+    &:active {
+      opacity: 1;
+      transform: scale(0.92);
+    }
+  }
 }
 </style>

src/views/playlist.vue

@@ -184,7 +184,7 @@
     >
 
     <ContextMenu ref="playlistMenu">
-      <div class="item">{{ $t('contextMenu.playNext') }}</div>
+      <!-- <div class="item">{{ $t('contextMenu.addToQueue') }}</div> -->
       <div class="item" @click="likePlaylist(true)">{{
         playlist.subscribed ? '从音乐库删除' : '保存到音乐库'
       }}</div>