fix: update Next Up page

src/views/next.vue

@@ -3,14 +3,23 @@
     <h1>{{ $t("next.nowPlaying") }}</h1>
     <TrackList
       :tracks="[currentTrack]"
-      :type="'playlist'"
+      type="playlist"
       dbclickTrackFunc="none"
     />
-    <h1>{{ $t("next.nextUp") }}</h1>
+    <h1 v-show="playNextList.length > 0">插队播放</h1>
-
     <TrackList
-      :tracks="sortedTracks"
+      :tracks="playNextTracks"
-      :type="'playlist'"
+      type="playlist"
+      :highlightPlayingTrack="false"
+      dbclickTrackFunc="playTrackOnListByID"
+      itemKey="id+index"
+      v-show="playNextList.length > 0"
+    />
+    <h1>{{ $t("next.nextUp") }}</h1>
+    <TrackList
+      :tracks="filteredTracks"
+      type="playlist"
+      :highlightPlayingTrack="false"
       dbclickTrackFunc="playTrackOnListByID"
     />
   </div>
@@ -39,20 +48,20 @@ export default {
     playerShuffle() {
       return this.player.shuffle;
     },
-    sortedTracks() {
+    filteredTracks() {
-      function compare(property) {
+      let trackIDs = this.player.list.slice(
-        return function (obj1, obj2) {
+        this.player.current + 1,
-          var value1 = obj1[property];
+        this.player.current + 100
-          var value2 = obj2[property];
+      );
-          return value1 - value2;
+      return this.tracks.filter((t) => trackIDs.includes(t.id));
-        };
+    },
-      }
+    playNextList() {
-      return this.tracks
+      return this.player.playNextList;
-        .filter(
+    },
-          (t) => this.player.list.find((t2) => t2.id === t.id) !== undefined
+    playNextTracks() {
-        )
+      return this.playNextList.map((tid) => {
-        .filter((t) => t.sort > this.player.currentTrack.sort)
+        return this.tracks.find((t) => t.id === tid);
-        .sort(compare("sort"));
+      });
     },
   },
   watch: {
@@ -60,36 +69,35 @@ export default {
       this.loadTracks();
     },
     playerShuffle() {
-      this.tracks = this.tracks.map((t) => {
+      this.loadTracks();
-        t.sort = this.player.list.find((t2) => t.id === t2.id).sort;
+    },
-        return t;
+    playNextList() {
-      });
+      this.loadTracks();
     },
   },
   methods: {
     ...mapActions(["playTrackOnListByID"]),
     loadTracks() {
-      console.time("loadTracks");
+      // 获取播放列表当前歌曲后100首歌
-      let loadedTrackIDs = this.tracks.map((t) => t.id);
+      let trackIDs = this.player.list.slice(
-      let basicTracks = this.player.list
+        this.player.current + 1,
-        .filter(
+        this.player.current + 100
-          (t) =>
+      );
-            t.sort > this.player.currentTrack.sort &&
+
-            t.sort <= this.player.currentTrack.sort + 100
+      // 将playNextList的歌曲加进trackIDs
-        )
+      trackIDs.push(...this.playNextList);
-        .filter((t) => loadedTrackIDs.includes(t.id) === false);
+
+      // 获取已经加载了的歌曲
+      let loadedTrackIDs = this.tracks.map((t) => t.id);
 
-      let trackIDs = basicTracks.map((t) => t.id);
       if (trackIDs.length > 0) {
         getTrackDetail(trackIDs.join(",")).then((data) => {
-          let newTracks = data.songs.map((t) => {
+          let newTracks = data.songs.filter(
-            t.sort = this.player.list.find((t2) => t2.id == t.id).sort;
+            (t) => !loadedTrackIDs.includes(t.id)
-            return t;
+          );
-          });
           this.tracks.push(...newTracks);
         });
       }
-      console.timeEnd("loadTracks");
     },
   },
   activated() {
@@ -99,9 +107,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.next-tracks {
-  width: 78vw;
-}
 h1 {
   margin-top: 36px;
   margin-bottom: 18px;