feat: add "Save to / remove from my Liked Songs" to track list context menu

src/components/TrackList.vue

@@ -3,6 +3,12 @@
     <ContextMenu ref="menu">
       <div class="item" @click="play">Play</div>
       <div class="item" @click="playNext">Play Next</div>
+      <div class="item" @click="like" v-show="!isRightClickedTrackLiked">
+        Save to my Liked Songs
+      </div>
+      <div class="item" @click="like" v-show="isRightClickedTrackLiked">
+        Remove from my Liked Songs
+      </div>
     </ContextMenu>
     <TrackListItem
       v-for="track in tracks"
@@ -15,12 +21,13 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapMutations, mapState } from "vuex";
+import { likeATrack } from "@/api/track";
 import {
   playPlaylistByID,
   playAlbumByID,
   playAList,
-  appendTrackToPlayerList,
+  appendTrackToPlayerList
 } from "@/utils/play";
 
 import TrackListItem from "@/components/TrackListItem.vue";
@@ -30,7 +37,7 @@ export default {
   name: "TrackList",
   components: {
     TrackListItem,
-    ContextMenu,
+    ContextMenu
   },
   props: {
     tracks: Array,
@@ -38,17 +45,17 @@ export default {
     id: Number,
     itemWidth: {
       type: Number,
-      default: -1,
+      default: -1
     },
     dbclickTrackFunc: {
       type: String,
-      default: "default",
-    },
+      default: "default"
+    }
   },
   data() {
     return {
-      clickTrack: null,
-      listStyles: {},
+      rightClickedTrack: null,
+      listStyles: {}
     };
   },
   created() {
@@ -57,14 +64,18 @@ export default {
   },
   computed: {
     ...mapState(["liked"]),
+    isRightClickedTrackLiked() {
+      return this.liked.songs.includes(this.rightClickedTrack?.id);
+    }
   },
   methods: {
+    ...mapMutations(["updateLikedSongs"]),
     ...mapActions(["nextTrack", "playTrackOnListByID"]),
     openMenu(e, track) {
       if (!track.playable) {
         return;
       }
-      this.clickTrack = track;
+      this.rightClickedTrack = track;
       this.$refs.menu.openMenu(e);
     },
     playThisList(trackID) {
@@ -84,7 +95,7 @@ export default {
       } else if (this.type === "album") {
         playAlbumByID(this.id, trackID);
       } else if (this.type === "tracklist") {
-        let trackIDs = this.tracks.map((t) => t.id);
+        let trackIDs = this.tracks.map(t => t.id);
         playAList(trackIDs, this.tracks[0].ar[0].id, "artist", trackID);
       }
     },
@@ -94,7 +105,24 @@ export default {
     playNext() {
       appendTrackToPlayerList(this.clickTrack.id);
     },
+    like() {
+      this.likeASong(this.rightClickedTrack.id);
     },
+    likeASong(id) {
+      let like = true;
+      let likedSongs = this.liked.songs;
+      if (likedSongs.includes(id)) like = false;
+      likeATrack({ id, like }).then(data => {
+        if (data.code !== 200) return;
+        if (like === false) {
+          this.updateLikedSongs(likedSongs.filter(d => d !== id));
+        } else {
+          likedSongs.push(id);
+          this.updateLikedSongs(likedSongs);
+        }
+      });
+    }
+  }
 };
 </script>
 

src/components/TrackListItem.vue

@@ -3,6 +3,7 @@
     class="track"
     :class="trackClass"
     :style="trackStyle"
+    :title="track.reason"
     @mouseover="focus = true"
     @mouseleave="focus = false"
   >
@@ -15,7 +16,7 @@
       >
         <svg-icon icon-class="play"></svg-icon>
       </button>
-      <span v-show="!focus">{{ track.no }}</span>
+      <span v-show="!focus || !track.playable">{{ track.no }}</span>
     </div>
     <div class="title-and-artist">
       <div class="container">
@@ -66,7 +67,6 @@
 
 <script>
 import { isLoggedIn } from "@/utils/auth";
-import { likeATrack } from "@/api/track";
 
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
@@ -127,21 +127,7 @@ export default {
       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);
-        }
-      });
+      this.$parent.likeASong(this.track.id);
     }
   },
   created() {