增加收藏歌曲和收藏歌单功能，优化播放器逻辑，修复bug以及体验优化

src/App.vue

@@ -11,7 +11,11 @@
       <Player
         v-if="this.$store.state.player.enable"
         ref="player"
-        v-show="this.$route.name !== 'mv'"
+        v-show="
+          ['mv', 'loginUsername', 'login', 'loginAccount'].includes(
+            this.$route.name
+          ) === false
+        "
     /></transition>
     <GlobalEvents :filter="globalEventFilter" @keydown.space="play" />
   </div>
@@ -50,13 +54,9 @@ export default {
   font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
     PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
     WenQuanYi Micro Hei, sans-serif;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  // margin-top: 60px;
-
   width: 100%;
 }
+
 html {
   overflow-y: overlay;
   min-width: 1000px;
@@ -78,7 +78,6 @@ button {
 }
 input,
 button {
-  font-family: "Barlow", sans-serif;
   &:focus {
     outline: none;
   }

src/api/album.js

@@ -1,4 +1,5 @@
 import request from "@/utils/request";
+import { mapTrackPlayableStatus } from "@/utils/common";
 
 export function getAlbum(id) {
   return request({
@@ -7,6 +8,9 @@ export function getAlbum(id) {
     params: {
       id,
     },
+  }).then((data) => {
+    data.songs = mapTrackPlayableStatus(data.songs);
+    return data;
   });
 }
 

src/api/artist.js

@@ -9,6 +9,7 @@ export function getArtist(id) {
     },
   });
 }
+
 export function getArtistAlbum(params) {
   // 必选参数 : id: 歌手 id
   // 可选参数 : limit: 取出数量 , 默认为 50

src/api/others.js

@@ -1,9 +1,14 @@
 import request from "@/utils/request";
+import { mapTrackPlayableStatus } from "@/utils/common";
 
 export function search(params) {
   return request({
     url: "/search",
     method: "get",
     params,
+  }).then((data) => {
+    if (data.result.song !== undefined)
+      data.result.song.songs = mapTrackPlayableStatus(data.result.song.songs);
+    return data;
   });
 }

src/api/playlist.js

@@ -17,13 +17,13 @@ export function dailyRecommendPlaylist(params) {
   });
 }
 
-export function getPlaylistDetail(id) {
+export function getPlaylistDetail(id, noCache = false) {
+  let params = { id };
+  if (noCache) params.timestamp = new Date().getTime();
   return request({
     url: "/playlist/detail",
     method: "get",
-    params: {
-      id,
-    },
+    params,
   });
 }
 
@@ -63,3 +63,13 @@ export function toplists() {
     method: "get",
   });
 }
+
+export function subscribePlaylist(params) {
+  // 必选参数 :
+  // t : 类型,1:收藏,2:取消收藏 id : 歌单 id
+  return request({
+    url: "/playlist/subscribe",
+    method: "get",
+    params,
+  });
+}

src/api/track.js

@@ -1,4 +1,5 @@
 import request from "@/utils/request";
+import { mapTrackPlayableStatus } from "@/utils/common";
 
 export function getMP3(id) {
   return request({
@@ -17,6 +18,9 @@ export function getTrackDetail(id) {
     params: {
       ids: id,
     },
+  }).then((data) => {
+    data.songs = mapTrackPlayableStatus(data.songs);
+    return data;
   });
 }
 
@@ -45,3 +49,25 @@ export function topSong(type) {
     },
   });
 }
+
+export function likeATrack(params) {
+  // 必选参数: id: 歌曲 id
+  // 可选参数 : like: 布尔值 , 默认为 true 即喜欢 , 若传 false, 则取消喜欢
+  params.timestamp = new Date().getTime();
+  return request({
+    url: "/like",
+    method: "get",
+    params,
+  });
+}
+
+export function scrobble(params) {
+  // 必选参数 : id: 歌曲 id, sourceid: 歌单或专辑 id
+  // 可选参数 : time: 歌曲播放时间,单位为秒
+  params.timestamp = new Date().getTime();
+  return request({
+    url: "/scrobble",
+    method: "get",
+    params,
+  });
+}

src/api/user.js

@@ -38,6 +38,9 @@ export function userLikedSongsIDs(uid) {
   return request({
     url: "/likelist",
     method: "get",
-    uid,
+    params: {
+      uid,
+      timestamp: new Date().getTime(),
+    },
   });
 }

src/assets/icons/heart-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>

src/assets/icons/heart.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"></path></svg>

src/components/ButtonIcon.vue

@@ -27,18 +27,10 @@ button {
     margin-left: 0;
   }
   &:hover {
-    // background: #eaeffd;
-    // .svg-icon {
-    //   color: #335eea;
-    // }
     background: #f5f5f7;
   }
   &:active {
     transform: scale(0.92);
-    // background: #eaeffd;
-    // .svg-icon {
-    //   color: #335eea;
-    // }
   }
 }
 </style>

src/components/ButtonTwoTone.vue

@@ -1,5 +1,5 @@
 <template>
-  <button :style="{ padding: `8px ${horizontalPadding}px` }" :class="color">
+  <button :style="buttonStyle" :class="color">
     <svg-icon
       v-if="iconClass !== null"
       :iconClass="iconClass"
@@ -29,6 +29,20 @@ export default {
       type: String,
       default: "blue",
     },
+    shape: {
+      type: String,
+      default: "square",
+    },
+  },
+  computed: {
+    buttonStyle() {
+      return {
+        borderRadius: this.shape === "round" ? "50%" : "8px",
+        padding: `8px ${this.horizontalPadding}px`,
+        height: "38px",
+        width: this.shape === "round" ? "38px" : "auto",
+      };
+    },
   },
 };
 </script>
@@ -37,11 +51,11 @@ export default {
 button {
   display: flex;
   align-items: center;
+  justify-content: center;
   font-size: 18px;
   font-weight: 600;
   background-color: rgba(51, 94, 234, 0.1);
   color: #335eea;
-  border-radius: 8px;
   margin-right: 12px;
   transition: 0.2s;
   .svg-icon {
@@ -59,4 +73,7 @@ button.grey {
   background-color: #f5f5f7;
   color: rgba(0, 0, 0, 0.5);
 }
+button.transparent {
+  background-color: transparent;
+}
 </style>

src/components/Player.vue

@@ -17,28 +17,35 @@
     </div>
     <div class="controls">
       <div class="playing">
-        <router-link :to="`/album/${player.currentTrack.album.id}`"
-          ><img :src="player.currentTrack.album.picUrl | resizeImage" />
+        <router-link :to="`/album/${currentTrack.al.id}`"
+          ><img :src="currentTrack.al.picUrl | resizeImage" />
         </router-link>
         <div class="track-info">
           <div class="name">
             <router-link
               :to="'/' + player.listInfo.type + '/' + player.listInfo.id"
-              >{{ player.currentTrack.name }}</router-link
+              >{{ currentTrack.name }}</router-link
             >
           </div>
           <div class="artist">
-            <span
-              v-for="(ar, index) in player.currentTrack.artists"
-              :key="ar.id"
-            >
+            <span v-for="(ar, index) in currentTrack.ar" :key="ar.id">
               <router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link>
-              <span v-if="index !== player.currentTrack.artists.length - 1"
-                >,
-              </span>
+              <span v-if="index !== currentTrack.ar.length - 1">, </span>
             </span>
           </div>
         </div>
+        <div class="like-button" v-show="isLoggedIn">
+          <button-icon @click.native="likeCurrentSong">
+            <svg-icon
+              icon-class="heart"
+              v-show="!liked.songs.includes(currentTrack.id)"
+            ></svg-icon>
+            <svg-icon
+              icon-class="heart-solid"
+              v-show="liked.songs.includes(currentTrack.id)"
+            ></svg-icon>
+          </button-icon>
+        </div>
       </div>
       <div class="middle-control-buttons">
         <button-icon @click.native="previous" title="Previous Song"
@@ -106,6 +113,9 @@
 <script>
 import { updateMediaSessionMetaData } from "@/utils/mediaSession";
 import { mapState, mapMutations, mapActions } from "vuex";
+import { isLoggedIn } from "@/utils/auth";
+import { userLikedSongsIDs } from "@/api/user";
+import { likeATrack } from "@/api/track";
 import "@/assets/css/slider.css";
 
 import ButtonIcon from "@/components/ButtonIcon.vue";
@@ -128,9 +138,17 @@ export default {
     setInterval(() => {
       this.progress = ~~this.howler.seek();
     }, 1000);
+    if (this.isLoggedIn) {
+      userLikedSongsIDs(this.settings.user.userId).then((data) => {
+        this.updateLikedSongs(data.ids);
+      });
+    }
   },
   computed: {
-    ...mapState(["player", "howler", "Howler"]),
+    ...mapState(["player", "howler", "Howler", "settings", "liked"]),
+    currentTrack() {
+      return this.player.currentTrack;
+    },
     volume: {
       get() {
         return this.player.volume;
@@ -147,9 +165,12 @@ export default {
       return this.howler.playing();
     },
     progressMax() {
-      let max = ~~(this.player.currentTrack.time / 1000);
+      let max = ~~(this.currentTrack.dt / 1000);
       return max > 1 ? max - 1 : max;
     },
+    isLoggedIn() {
+      return isLoggedIn();
+    },
   },
   methods: {
     ...mapMutations([
@@ -158,6 +179,7 @@ export default {
       "shuffleTheList",
       "updatePlayerState",
       "updateRepeatStatus",
+      "updateLikedSongs",
     ]),
     ...mapActions([
       "nextTrack",
@@ -170,22 +192,22 @@ export default {
         this.howler.pause();
       } else {
         if (this.howler.state() === "unloaded") {
-          this.playTrackOnListByID(this.player.currentTrack.id);
+          this.playTrackOnListByID(this.currentTrack.id);
         }
         this.howler.play();
         if (this.howler._onend.length === 0) {
           this.addNextTrackEvent();
-          updateMediaSessionMetaData(this.player.currentTrack);
+          updateMediaSessionMetaData(this.currentTrack);
         }
       }
     },
     next() {
-      this.nextTrack(true);
       this.progress = 0;
+      this.nextTrack(true);
     },
     previous() {
-      this.previousTrack();
       this.progress = 0;
+      this.previousTrack();
     },
     shuffle() {
       if (this.player.shuffle === true) {
@@ -228,6 +250,20 @@ export default {
       let sec = (~~(value % 60)).toString().padStart(2, "0");
       return `${min}:${sec}`;
     },
+    likeCurrentSong() {
+      let id = this.currentTrack.id;
+      let like = true;
+      if (this.liked.songs.includes(id)) like = false;
+      likeATrack({ id, like }).then(() => {
+        if (like === false) {
+          this.updateLikedSongs(this.liked.songs.filter((d) => d !== id));
+        } else {
+          let newLikeSongs = this.liked.songs;
+          newLikeSongs.push(id);
+          this.updateLikedSongs(newLikeSongs);
+        }
+      });
+    },
   },
 };
 </script>
@@ -289,6 +325,7 @@ export default {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
       overflow: hidden;
+      word-break: break-all;
       &:hover {
         text-decoration: underline;
       }
@@ -300,6 +337,7 @@ export default {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
       overflow: hidden;
+      word-break: break-all;
       a {
         cursor: pointer;
         &:hover {
@@ -319,11 +357,11 @@ export default {
     margin: 0 8px;
   }
   .play {
-    height: 48px;
-    width: 48px;
+    height: 42px;
+    width: 42px;
     .svg-icon {
-      width: 28px;
-      height: 28px;
+      width: 24px;
+      height: 24px;
     }
   }
 }
@@ -351,4 +389,8 @@ export default {
     }
   }
 }
+
+.like-button {
+  margin-left: 16px;
+}
 </style>

src/components/TrackList.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapState } from "vuex";
 import {
   playPlaylistByID,
   playAlbumByID,
@@ -42,7 +42,7 @@ export default {
     },
     dbclickTrackFunc: {
       type: String,
-      default: "none",
+      default: "default",
     },
   },
   data() {
@@ -55,8 +55,11 @@ export default {
     if (this.type === "tracklist")
       this.listStyles = { display: "flex", flexWrap: "wrap" };
   },
+  computed: {
+    ...mapState(["liked"]),
+  },
   methods: {
-    ...mapActions(["nextTrack"]),
+    ...mapActions(["nextTrack", "playTrackOnListByID"]),
     openMenu(e, track) {
       if (!track.playable) {
         return;
@@ -65,24 +68,31 @@ export default {
       this.$refs.menu.openMenu(e);
     },
     playThisList(trackID) {
+      if (this.dbclickTrackFunc === "default") {
+        this.playThisListDefault(trackID);
+      } else if (this.dbclickTrackFunc === "none") {
+        // do nothing
+      } else if (this.dbclickTrackFunc === "playTrackOnListByID") {
+        this.playTrackOnListByID(trackID);
+      } else if (this.dbclickTrackFunc === "playPlaylistByID") {
+        playPlaylistByID(this.id, trackID);
+      }
+    },
+    playThisListDefault(trackID) {
       if (this.type === "playlist") {
         playPlaylistByID(this.id, trackID);
       } else if (this.type === "album") {
         playAlbumByID(this.id, trackID);
       } else if (this.type === "tracklist") {
-        if (this.dbclickTrackFunc === "none") {
-          playAList(this.tracks, this.tracks[0].ar[0].id, "artist", trackID);
-        } else {
-          if (this.dbclickTrackFunc === "playPlaylistByID")
-            playPlaylistByID(this.id, trackID);
-        }
+        let trackIDs = this.tracks.map((t) => t.id);
+        playAList(trackIDs, this.tracks[0].ar[0].id, "artist", trackID);
       }
     },
     play() {
-      appendTrackToPlayerList(this.clickTrack, true);
+      appendTrackToPlayerList(this.clickTrack.id, true);
     },
     playNext() {
-      appendTrackToPlayerList(this.clickTrack);
+      appendTrackToPlayerList(this.clickTrack.id);
     },
   },
 };

src/components/TrackListItem.vue

@@ -1,7 +1,22 @@
 <template>
-  <div class="track" :class="trackClass" :style="trackStyle">
+  <div
+    class="track"
+    :class="trackClass"
+    :style="trackStyle"
+    @mouseover="focus = true"
+    @mouseleave="focus = false"
+  >
     <img :src="imgUrl | resizeImage" v-if="!isAlbum" @click="goToAlbum" />
-    <div class="no" v-if="isAlbum">{{ track.no }}</div>
+    <div class="no" v-if="isAlbum">
+      <button
+        class="play-button"
+        v-show="focus && track.playable"
+        @click="playTrack"
+      >
+        <svg-icon icon-class="play"></svg-icon>
+      </button>
+      <span v-show="!focus">{{ track.no }}</span>
+    </div>
     <div class="title-and-artist">
       <div class="container">
         <div class="title">
@@ -18,7 +33,7 @@
           <span
             v-if="track.mark === 1318912"
             class="explicit-symbol before-artist"
-            ><ExplicitSymbol
+            ><ExplicitSymbol :size="15"
           /></span>
           <ArtistsInLine :artists="artists" />
         </div>
@@ -26,13 +41,23 @@
       <div></div>
     </div>
     <div class="album" v-if="!isTracklist && !isAlbum">
-      <div class="container">
-        <router-link :to="`/album/${track.al.id}`">{{
-          track.al.name
-        }}</router-link>
-      </div>
+      <router-link :to="`/album/${track.al.id}`">{{
+        track.al.name
+      }}</router-link>
       <div></div>
     </div>
+    <div class="actions" v-if="!isTracklist">
+      <button v-if="isLoggedIn" @click="likeThisSong">
+        <svg-icon
+          icon-class="heart"
+          :style="{
+            visibility:
+              focus && !isLiked && track.playable ? 'visible' : 'hidden',
+          }"
+        ></svg-icon>
+        <svg-icon icon-class="heart-solid" v-show="isLiked"></svg-icon>
+      </button>
+    </div>
     <div class="time" v-if="!isTracklist">
       {{ track.dt | formatTime }}
     </div>
@@ -40,6 +65,9 @@
 </template>
 
 <script>
+import { isLoggedIn } from "@/utils/auth";
+import { likeATrack } from "@/api/track";
+
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
 
@@ -50,16 +78,7 @@ export default {
     track: Object,
   },
   data() {
-    return {
-      trackClass: [],
-      trackStyle: {},
-    };
-  },
-  created() {
-    this.trackClass.push(this.type);
-    if (!this.track.playable) this.trackClass.push("disable");
-    if (this.$parent.itemWidth !== -1)
-      this.trackStyle = { width: this.$parent.itemWidth + "px" };
+    return { focus: false, trackStyle: {} };
   },
   computed: {
     imgUrl() {
@@ -84,16 +103,82 @@ export default {
     isPlaylist() {
       return this.type === "playlist";
     },
+    isLiked() {
+      return this.$parent.liked.songs.includes(this.track.id);
+    },
+    isPlaying() {
+      return this.$store.state.player.currentTrack.id === this.track.id;
+    },
+    trackClass() {
+      let trackClass = [this.type];
+      if (!this.track.playable) trackClass.push("disable");
+      if (this.isPlaying) trackClass.push("playing");
+      return trackClass;
+    },
+    isLoggedIn() {
+      return isLoggedIn();
+    },
   },
   methods: {
     goToAlbum() {
       this.$router.push({ path: "/album/" + this.track.al.id });
     },
+    playTrack() {
+      this.$parent.playThisList(this.track.id);
+    },
+    likeThisSong() {
+      let id = this.track.id;
+      let like = true;
+      let likedSongs = this.$parent.liked.songs;
+      if (likedSongs.includes(id)) like = false;
+      likeATrack({ id, like }).then(() => {
+        if (like === false) {
+          this.$store.commit(
+            "updateLikedSongs",
+            likedSongs.filter((d) => d !== id)
+          );
+        } else {
+          likedSongs.push(id);
+          this.$store.commit("updateLikedSongs", likedSongs);
+        }
+      });
+    },
+  },
+  created() {
+    if (this.$parent.itemWidth !== -1)
+      this.trackStyle = { width: this.$parent.itemWidth + "px" };
   },
 };
 </script>
 
 <style lang="scss" scoped>
+button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  background: transparent;
+  border-radius: 25%;
+  transition: transform 0.2s;
+  .svg-icon {
+    height: 16px;
+    width: 16px;
+    color: #335eea;
+  }
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+button.play-button {
+  opacity: 1;
+  .svg-icon {
+    height: 14px;
+    width: 14px;
+    color: #335eea;
+  }
+}
+
 .track {
   display: flex;
   align-items: center;
@@ -182,20 +267,12 @@ export default {
   .album {
     flex: 1;
     display: flex;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
-    .container {
-      display: flex;
-      flex-direction: column;
-      &:hover {
-        text-decoration: underline;
-        cursor: pointer;
-      }
-    }
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.88);
   }
   .time {
     font-size: 16px;
@@ -247,4 +324,32 @@ export default {
 .track.album {
   height: 32px;
 }
+
+.actions {
+  width: 80px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.track.playing {
+  background: #eaeffd;
+  color: #335eea;
+  .title,
+  .album {
+    color: #335eea;
+  }
+  .title .featured,
+  .artist {
+    color: #335eea;
+    opacity: 0.88;
+  }
+  .no span {
+    color: #335eea;
+    opacity: 0.78;
+  }
+  .explicit-symbol {
+    color: #335eea;
+    opacity: 0.88;
+  }
+}
 </style>

src/store/actions.js

@@ -1,24 +1,39 @@
 // import { getMP3 } from "@/api/track";
 import { updateMediaSessionMetaData } from "@/utils/mediaSession";
+import { getTrackDetail, scrobble } from "@/api/track";
 
 export default {
-  switchTrack({ state, dispatch, commit }, track) {
-    commit("updateCurrentTrack", track);
+  switchTrack({ state, dispatch, commit }, basicTrack) {
+    getTrackDetail(basicTrack.id).then((data) => {
+      let track = data.songs[0];
+      track.sort = basicTrack.sort;
+      console.log(track);
 
-    if (track.playable === false) {
-      dispatch("nextTrack");
-      return;
-    }
+      if (track.playable === false) {
+        dispatch("nextTrack");
+        return;
+      }
 
-    updateMediaSessionMetaData(track);
-    document.title = `${track.name} · ${track.artists[0].name} - YesPlayMusic`;
+      let time = state.howler.seek();
+      scrobble({
+        id: state.player.currentTrack.id,
+        sourceid: state.player.listInfo.id,
+        time: time === 0 ? 180 : time,
+      }).then((data) => {
+        console.log("scrobble", data);
+      });
 
-    commit(
-      "replaceMP3",
-      `https://music.163.com/song/media/outer/url?id=${track.id}`
-    );
-    state.howler.once("end", () => {
-      dispatch("nextTrack");
+      commit("updateCurrentTrack", track);
+      updateMediaSessionMetaData(track);
+      document.title = `${track.name} · ${track.ar[0].name} - YesPlayMusic`;
+
+      commit(
+        "replaceMP3",
+        `https://music.163.com/song/media/outer/url?id=${track.id}`
+      );
+      state.howler.once("end", () => {
+        dispatch("nextTrack");
+      });
     });
   },
   playFirstTrackOnList({ state, dispatch }) {
@@ -26,7 +41,6 @@ export default {
   },
   playTrackOnListByID(context, trackID) {
     let track = context.state.player.list.find((t) => t.id === trackID);
-    if (track.playable === false) return;
     context.dispatch("switchTrack", track);
   },
   nextTrack({ state, dispatch }, realNext = false) {

src/store/initState.js

@@ -3,6 +3,9 @@ import { Howler } from "howler";
 const initState = {
   Howler: Howler,
   howler: null,
+  liked: {
+    songs: [],
+  },
   contextMenu: {
     clickObjectID: 0,
     showMenu: false,
@@ -82,7 +85,7 @@ const initState = {
       },
     ],
     user: {
-      id: 1,
+      id: 0,
     },
   },
 };

src/store/mutations.js

@@ -86,4 +86,7 @@ export default {
   updateUserInfo(sate, { key, value }) {
     state.settings.user[key] = value;
   },
+  updateLikedSongs(state, trackIDs) {
+    state.liked.songs = trackIDs;
+  },
 };

src/store/state.js

@@ -3,6 +3,9 @@ import { Howler } from "howler";
 export default {
   Howler: Howler,
   howler: null,
+  liked: {
+    songs: [],
+  },
   contextMenu: {
     clickObjectID: 0,
     showMenu: false,

src/utils/filters.js

@@ -61,6 +61,14 @@ Vue.filter("formatPlayCount", (count) => {
     return `${~~(count / 10000)}万`;
   }
   return count;
+
+  // if (count > 1000000) {
+  //   return `${Math.floor((count / 1000000) * 100) / 100}M`;
+  // }
+  // if (count > 1000) {
+  //   return `${~~(count / 1000)}K`;
+  // }
+  // return count;
 });
 
 Vue.filter("toHttps", (url) => {

src/utils/mediaSession.js

@@ -22,14 +22,14 @@ export function initMediaSession() {
 
 export function updateMediaSessionMetaData(track) {
   if ("mediaSession" in navigator) {
-    let artists = track.artists.map((a) => a.name);
+    let artists = track.ar.map((a) => a.name);
     navigator.mediaSession.metadata = new window.MediaMetadata({
       title: track.name,
       artist: artists.join(","),
-      album: track.album.name,
+      album: track.al.name,
       artwork: [
         {
-          src: track.album.picUrl + "?param=512y512",
+          src: track.al.picUrl + "?param=512y512",
           type: "image/jpg",
           sizes: "512x512",
         },

src/utils/play.js

@@ -1,23 +1,12 @@
 import store from "@/store";
 import { getAlbum } from "@/api/album";
 import { getPlaylistDetail } from "@/api/playlist";
-import { getTrackDetail } from "@/api/track";
 import { getArtist } from "@/api/artist";
-import { isTrackPlayable } from "@/utils/common";
 
 export function playAList(list, id, type, trackID = "first") {
-  let filteredList = list.map((track, index) => {
-    return {
-      sort: index,
-      name: track.name,
-      id: track.id,
-      artists: track.ar,
-      album: track.al,
-      time: track.dt,
-      playable: isTrackPlayable(track).playable,
-    };
+  let filteredList = list.map((id, index) => {
+    return { sort: index, id };
   });
-
   store.commit("updatePlayerList", filteredList);
 
   if (trackID === "first") store.dispatch("playFirstTrackOnList");
@@ -28,16 +17,15 @@ export function playAList(list, id, type, trackID = "first") {
 
 export function playAlbumByID(id, trackID = "first") {
   getAlbum(id).then((data) => {
-    playAList(data.songs, id, "album", trackID);
+    let trackIDs = data.songs.map((t) => t.id);
+    playAList(trackIDs, id, "album", trackID);
   });
 }
 
-export function playPlaylistByID(id, trackID = "first") {
-  getPlaylistDetail(id).then((data) => {
+export function playPlaylistByID(id, trackID = "first", noCache = false) {
+  getPlaylistDetail(id, noCache).then((data) => {
     let trackIDs = data.playlist.trackIds.map((t) => t.id);
-    getTrackDetail(trackIDs.join(",")).then((data) => {
-      playAList(data.songs, id, "playlist", trackID);
-    });
+    playAList(trackIDs, id, "playlist", trackID);
   });
 }
 
@@ -47,15 +35,10 @@ export function playArtistByID(id, trackID = "first") {
   });
 }
 
-export function appendTrackToPlayerList(track, playNext = false) {
+export function appendTrackToPlayerList(trackID, playNext = false) {
   let filteredTrack = {
     sort: 0,
-    name: track.name,
-    id: track.id,
-    artists: track.ar,
-    album: track.al,
-    time: track.dt,
-    playable: track.playable,
+    id: trackID,
   };
 
   store.commit("appendTrackToPlayerList", {

src/views/album.vue

@@ -76,7 +76,6 @@ import { mapMutations, mapActions, mapState } from "vuex";
 import NProgress from "nprogress";
 import { getTrackDetail } from "@/api/track";
 import { playAlbumByID } from "@/utils/play";
-import { mapTrackPlayableStatus } from "@/utils/common";
 import { getAlbum } from "@/api/album";
 
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
@@ -111,17 +110,15 @@ export default {
       .then((data) => {
         this.album = data.album;
         this.tracks = data.songs;
-        this.tracks = mapTrackPlayableStatus(this.tracks);
         NProgress.done();
         this.show = true;
         return this.tracks;
       })
       .then((tracks) => {
+        // to get explicit mark
         let trackIDs = tracks.map((t) => t.id);
         getTrackDetail(trackIDs.join(",")).then((data) => {
           this.tracks = data.songs;
-
-          this.tracks = mapTrackPlayableStatus(this.tracks);
         });
       });
   },

src/views/artist.vue

@@ -170,7 +170,8 @@ export default {
       });
     },
     playPopularSongs(trackID = "first") {
-      playAList(this.popularTracks, this.artist.id, "artist", trackID);
+      let trackIDs = this.popularTracks.map((t) => t.id);
+      playAList(trackIDs, this.artist.id, "artist", trackID);
     },
   },
   created() {

src/views/library.vue

@@ -20,7 +20,9 @@
         <div class="bottom">
           <div class="titles">
             <div class="title">Liked Songs</div>
-            <div class="sub-title">{{ likedSongs.trackCount }} songs</div>
+            <div class="sub-title">
+              {{ likedSongsPlaylist.trackCount }} songs
+            </div>
           </div>
           <button @click.stop="playLikedSongs">
             <svg-icon icon-class="play" />
@@ -29,10 +31,10 @@
       </div>
       <div class="songs">
         <TrackList
-          :tracks="likedSongs.tracks"
+          :tracks="likedSongs"
           :type="'tracklist'"
           :itemWidth="220"
-          :id="likedSongs.id"
+          :id="likedSongsPlaylist.id"
           dbclickTrackFunc="playPlaylistByID"
         />
       </div>
@@ -79,7 +81,12 @@ export default {
       },
       playlists: [],
       hasMorePlaylists: true,
+      likedSongsPlaylist: {
+        id: 0,
+        trackCount: 0,
+      },
       likedSongs: [],
+      likedSongIDs: [],
       lyric: undefined,
     };
   },
@@ -94,6 +101,9 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
+    likedSongsInState() {
+      return this.$store.state.liked.songs;
+    },
     pickedLyric() {
       if (this.lyric === undefined) return "";
       let lyric = this.lyric.split("\n");
@@ -116,7 +126,7 @@ export default {
   },
   methods: {
     playLikedSongs() {
-      playPlaylistByID(this.likedSongs.id);
+      playPlaylistByID(this.playlists[0].id, "first", true);
     },
     goToLikedSongsList() {
       this.$router.push({ path: "/library/liked-songs" });
@@ -126,42 +136,43 @@ export default {
         userPlaylist({
           uid: this.settings.user.userId,
           offset: this.playlists.length,
+          timestamp: new Date().getTime(),
         }).then((data) => {
           this.playlists.push(...data.playlist);
           this.hasMorePlaylists = data.more;
+          this.likedSongsPlaylist = data.playlist[0];
         });
       }
       this.getLikedSongs();
     },
-    getLikedSongs() {
-      getPlaylistDetail(this.settings.user.likedSongPlaylistID).then((data) => {
-        let oldTracks = this.likedSongs.tracks;
-        this.likedSongs = data.playlist;
-        this.likedSongs.tracks = oldTracks;
-
-        this.getMoreLikedSongs();
-        this.getRandomLyric();
-      });
-    },
-    getMoreLikedSongs() {
-      let TrackIDs = this.likedSongs.trackIds.slice(0, 20).map((t) => t.id);
-      getTrackDetail(TrackIDs.join(",")).then((data) => {
-        this.likedSongs.tracks = data.songs;
-        this.likedSongs.tracks = mapTrackPlayableStatus(this.likedSongs.tracks);
-        NProgress.done();
-        this.show = true;
-      });
+    getLikedSongs(getLyric = true) {
+      getPlaylistDetail(this.settings.user.likedSongPlaylistID, true).then(
+        (data) => {
+          let TrackIDs = data.playlist.trackIds.slice(0, 20).map((t) => t.id);
+          this.likedSongIDs = TrackIDs;
+          getTrackDetail(this.likedSongIDs.join(",")).then((data) => {
+            this.likedSongs = data.songs;
+            this.likedSongs = mapTrackPlayableStatus(this.likedSongs);
+            NProgress.done();
+            this.show = true;
+          });
+          if (getLyric) this.getRandomLyric();
+        }
+      );
     },
     getRandomLyric() {
       getLyric(
-        this.likedSongs.trackIds[
-          randomNum(0, this.likedSongs.trackIds.length - 1)
-        ].id
+        this.likedSongIDs[randomNum(0, this.likedSongIDs.length - 1)]
       ).then((data) => {
         if (data.lrc !== undefined) this.lyric = data.lrc.lyric;
       });
     },
   },
+  watch: {
+    likedSongsInState() {
+      this.getLikedSongs(false);
+    },
+  },
 };
 </script>
 

src/views/mv.vue

@@ -13,7 +13,8 @@
           {{ mv.data.name }}
         </div>
         <div class="info">
-          {{ mv.data.playCount }} Views · {{ mv.data.publishTime }}
+          {{ mv.data.playCount | formatPlayCount }} Views ·
+          {{ mv.data.publishTime }}
         </div>
       </div>
     </div>

src/views/next.vue

@@ -1,94 +1,43 @@
 <template>
   <div class="next-tracks">
     <h1>Now Playing</h1>
-    <div class="track-list">
-      <div class="track playing">
-        <img :src="currentTrack.album.picUrl | resizeImage" />
-        <div class="title-and-artist">
-          <div class="container">
-            <div class="title">
-              {{ currentTrack.name }}
-            </div>
-            <div class="artist">
-              <span v-for="(ar, index) in currentTrack.artists" :key="ar.id">
-                <router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link
-                ><span v-if="index !== currentTrack.artists.length - 1"
-                  >,
-                </span>
-              </span>
-            </div>
-          </div>
-          <div></div>
-        </div>
-        <div class="album">
-          <div class="container">
-            <router-link :to="`/album/${currentTrack.album.id}`">{{
-              currentTrack.album.name
-            }}</router-link>
-          </div>
-          <div></div>
-        </div>
-        <div class="time">
-          {{ currentTrack.time | formatTime }}
-        </div>
-      </div>
-    </div>
+    <TrackList
+      :tracks="[currentTrack]"
+      :type="'playlist'"
+      dbclickTrackFunc="none"
+    />
     <h1>Next Up</h1>
-    <div class="track-list">
-      <div
-        class="track"
-        v-for="track in tracks"
-        :class="{ disable: !track.playable }"
-        :title="!track.playable ? track.reason : ''"
-        :key="`${track.id}-${track.sort}`"
-        @dblclick="playTrackOnListByID(track.id)"
-      >
-        <img :src="track.album.picUrl | resizeImage" />
-        <div class="title-and-artist">
-          <div class="container">
-            <div class="title">
-              {{ track.name }}
-            </div>
-            <div class="artist">
-              <span v-for="(ar, index) in track.artists" :key="ar.id">
-                <router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link
-                ><span v-if="index !== track.artists.length - 1">, </span>
-              </span>
-            </div>
-          </div>
-          <div></div>
-        </div>
-        <div class="album">
-          <div class="container">
-            <router-link :to="`/album/${track.album.id}`">{{
-              track.album.name
-            }}</router-link>
-          </div>
-          <div></div>
-        </div>
-        <div class="time">
-          {{ parseInt((track.time % (1000 * 60 * 60)) / (1000 * 60)) }}:{{
-            parseInt((track.time % (1000 * 60)) / 1000)
-              .toString()
-              .padStart(2, "0")
-          }}
-        </div>
-      </div>
-    </div>
+
+    <TrackList
+      :tracks="sortedTracks"
+      :type="'playlist'"
+      dbclickTrackFunc="playTrackOnListByID"
+    />
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
+import { getTrackDetail } from "@/api/track";
+import TrackList from "@/components/TrackList.vue";
 
 export default {
   name: "Next",
+  components: {
+    TrackList,
+  },
+  data() {
+    return {
+      tracks: [],
+      showTracks: [],
+    };
+  },
   computed: {
     ...mapState(["player"]),
     currentTrack() {
       return this.player.currentTrack;
     },
-    tracks() {
+    sortedTracks() {
       function compare(property) {
         return function(obj1, obj2) {
           var value1 = obj1[property];
@@ -96,15 +45,45 @@ export default {
           return value1 - value2;
         };
       }
-      return this.player.list
-        .filter(
-          (t) => t.sort > this.player.currentTrack.sort // && t.playable === true
-        )
+      let tracks = this.tracks
+        .filter((t) => t.sort > this.player.currentTrack.sort)
         .sort(compare("sort"));
+      return tracks;
+    },
+  },
+  watch: {
+    currentTrack() {
+      this.loadTracks();
     },
   },
   methods: {
     ...mapActions(["playTrackOnListByID"]),
+    loadTracks() {
+      console.time("loadTracks");
+      let loadedTrackIDs = this.tracks.map((t) => t.id);
+      let basicTracks = this.player.list
+        .filter(
+          (t) =>
+            t.sort > this.player.currentTrack.sort &&
+            t.sort <= this.player.currentTrack.sort + 100
+        )
+        .filter((t) => loadedTrackIDs.includes(t.id) === false);
+
+      let trackIDs = basicTracks.map((t) => t.id);
+      if (trackIDs.length > 0) {
+        getTrackDetail(trackIDs.join(",")).then((data) => {
+          let newTracks = data.songs.map((t) => {
+            t.sort = this.player.list.find((t2) => t2.id == t.id).sort;
+            return t;
+          });
+          this.tracks.push(...newTracks);
+        });
+      }
+      console.timeEnd("loadTracks");
+    },
+  },
+  activated() {
+    this.loadTracks();
   },
 };
 </script>

src/views/playlist.vue

@@ -46,10 +46,14 @@
             PLAY
           </ButtonTwoTone>
           <ButtonTwoTone
-            @click.native="shufflePlay"
-            :iconClass="`shuffle`"
+            v-if="
+              isLoggedIn && playlist.creator.userId !== settings.user.userId
+            "
+            shape="round"
+            :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
             :iconButton="true"
-            :horizontalPadding="11"
+            :horizontalPadding="0"
+            @click.native="likePlaylist"
           >
           </ButtonTwoTone>
         </div>
@@ -76,10 +80,11 @@
 <script>
 import { mapMutations, mapActions, mapState } from "vuex";
 import NProgress from "nprogress";
-import { getPlaylistDetail } from "@/api/playlist";
-import { playPlaylistByID } from "@/utils/play";
+import { getPlaylistDetail, subscribePlaylist } from "@/api/playlist";
+import { playAList } from "@/utils/play";
 import { getTrackDetail } from "@/api/track";
 import { mapTrackPlayableStatus } from "@/utils/common";
+import { isLoggedIn } from "@/utils/auth";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
@@ -115,7 +120,10 @@ export default {
     window.removeEventListener("scroll", this.handleScroll, true);
   },
   computed: {
-    ...mapState(["player"]),
+    ...mapState(["player", "settings"]),
+    isLoggedIn() {
+      return isLoggedIn();
+    },
   },
   methods: {
     ...mapMutations([
@@ -125,16 +133,24 @@ export default {
     ]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playPlaylistByID(trackID = "first") {
-      playPlaylistByID(this.playlist.id, trackID);
+      let trackIDs = this.playlist.trackIds.map((t) => t.id);
+      playAList(trackIDs, this.playlist.id, "playlist", trackID);
     },
-    shufflePlay() {
-      this.playPlaylistByID();
-      this.shuffleTheList();
+    likePlaylist() {
+      subscribePlaylist({
+        id: this.playlist.id,
+        t: this.playlist.subscribed ? 2 : 1,
+      }).then((data) => {
+        if (data.code === 200)
+          this.playlist.subscribed = !this.playlist.subscribed;
+        getPlaylistDetail(this.id, true).then((data) => {
+          this.playlist = data.playlist;
+        });
+      });
     },
     loadData(id, next = undefined) {
-      console.log("loadData");
       this.id = id;
-      getPlaylistDetail(this.id)
+      getPlaylistDetail(this.id, true)
         .then((data) => {
           this.playlist = data.playlist;
           this.tracks = data.playlist.tracks;
@@ -142,6 +158,7 @@ export default {
           NProgress.done();
           if (next !== undefined) next();
           this.show = true;
+          this.lastLoadedTrackIndex = data.playlist.tracks.length - 1;
           if (this.playlist.trackCount > this.tracks.length) {
             window.addEventListener("scroll", this.handleScroll, true);
           }
@@ -233,26 +250,7 @@ export default {
       margin-top: 32px;
       display: flex;
       button {
-        display: flex;
-        align-items: center;
-        font-size: 18px;
-        font-weight: 600;
-        background-color: rgba(51, 94, 234, 0.1);
-        color: #335eea;
-        padding: 8px 16px;
-        border-radius: 8px;
-        margin-right: 12px;
-        .svg-icon {
-          width: 16px;
-          height: 16px;
-          margin-right: 8px;
-        }
-      }
-      .shuffle {
-        padding: 8px 11px;
-        .svg-icon {
-          margin: 0;
-        }
+        margin-right: 16px;
       }
     }
   }

src/views/search.vue

@@ -73,7 +73,7 @@
         <TrackList :tracks="tracks" :type="'tracklist'" />
       </div>
 
-      <div class="mvs" v-if="mvs.length > 0">
+      <div class="mvs" v-if="mvs !== null && mvs.length > 0">
         <div class="section-title">MVs</div>
         <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
       </div>
@@ -119,7 +119,6 @@
 import { mapState } from "vuex";
 import NProgress from "nprogress";
 import { appendTrackToPlayerList } from "@/utils/play";
-import { mapTrackPlayableStatus } from "@/utils/common";
 import { search } from "@/api/others";
 
 import Cover from "@/components/Cover.vue";
@@ -149,7 +148,7 @@ export default {
       return this.$route.query.keywords;
     },
     tracks() {
-      let tracks = mapTrackPlayableStatus(this.result.song.songs.slice(0, 12));
+      let tracks = this.result.song.songs.slice(0, 12);
       return tracks;
     },
   },