From 2c8ba10e2030211fbb6a49f62edecdfd78673480 Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Mon, 26 Apr 2021 15:38:39 +0800
Subject: [PATCH] fix: bugs

---
 src/components/Player.vue        |  4 +--
 src/components/TrackList.vue     | 47 +++++++++-----------------------
 src/components/TrackListItem.vue | 30 ++++++++++----------
 src/electron/ipcRenderer.js      | 36 ++++++++++++------------
 src/utils/request.js             | 16 +++++------
 src/views/library.vue            |  2 +-
 src/views/lyrics.vue             |  4 +--
 7 files changed, 59 insertions(+), 80 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 76529fc..a1dccca 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -46,7 +46,7 @@
           <div class="like-button">
             <button-icon
               :title="$t('player.like')"
-              @click.native="likeASong(player.currentTrack.id)"
+              @click.native="likeATrack(player.currentTrack.id)"
             >
               <svg-icon
                 v-show="!player.isCurrentTrackLiked"
@@ -203,7 +203,7 @@ export default {
   },
   methods: {
     ...mapMutations(['toggleLyrics']),
-    ...mapActions(['showToast', 'likeASong']),
+    ...mapActions(['showToast', 'likeATrack']),
     goToNextTracksPage() {
       if (this.player.isPersonalFM) return;
       this.$route.name === 'next'
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
index a2c02a8..712b875 100644
--- a/src/components/TrackList.vue
+++ b/src/components/TrackList.vue
@@ -12,10 +12,10 @@
       <div class="item" @click="play">{{ $t('contextMenu.play') }}</div>
       <div class="item" @click="playNext">{{ $t('contextMenu.playNext') }}</div>
       <hr />
-      <div class="item" @click="like" v-show="!isRightClickedTrackLiked">
+      <div v-show="!isRightClickedTrackLiked" class="item" @click="like">
         {{ $t('contextMenu.saveToMyLikedSongs') }}
       </div>
-      <div class="item" @click="like" v-show="isRightClickedTrackLiked">
+      <div v-show="isRightClickedTrackLiked" class="item" @click="like">
         {{ $t('contextMenu.removeFromMyLikedSongs') }}
       </div>
       <div
@@ -29,9 +29,9 @@
     <div :style="listStyles">
       <TrackListItem
         v-for="(track, index) in tracks"
-        :track="track"
         :key="itemKey === 'id' ? track.id : `${track.id}${index}`"
-        :highlightPlayingTrack="highlightPlayingTrack"
+        :track="track"
+        :highlight-playing-track="highlightPlayingTrack"
         @dblclick.native="playThisList(track.id)"
         @click.right.native="openMenu($event, track)"
       />
@@ -41,7 +41,6 @@
 
 <script>
 import { mapActions, mapMutations, mapState } from 'vuex';
-import { likeATrack } from '@/api/track';
 import { addOrRemoveTrackFromPlaylist } from '@/api/playlist';
 import { isAccountLoggedIn } from '@/utils/auth';
 
@@ -102,6 +101,12 @@ export default {
       listStyles: {},
     };
   },
+  computed: {
+    ...mapState(['liked']),
+    isRightClickedTrackLiked() {
+      return this.liked.songs.includes(this.rightClickedTrack?.id);
+    },
+  },
   created() {
     if (this.type === 'tracklist') {
       this.listStyles = {
@@ -111,15 +116,9 @@ export default {
       };
     }
   },
-  computed: {
-    ...mapState(['liked']),
-    isRightClickedTrackLiked() {
-      return this.liked.songs.includes(this.rightClickedTrack?.id);
-    },
-  },
   methods: {
-    ...mapMutations(['updateLikedSongs', 'updateModal']),
-    ...mapActions(['nextTrack', 'showToast']),
+    ...mapMutations(['updateModal']),
+    ...mapActions(['nextTrack', 'showToast', 'likeATrack']),
     openMenu(e, track) {
       this.rightClickedTrack = track;
       this.$refs.menu.openMenu(e);
@@ -184,27 +183,7 @@ export default {
       this.$store.state.player.addTrackToPlayNext(this.rightClickedTrack.id);
     },
     like() {
-      this.likeASong(this.rightClickedTrack.id);
-    },
-    likeASong(id) {
-      if (!isAccountLoggedIn()) {
-        this.showToast('此操作需要登录网易云账号');
-        return;
-      }
-      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.showToast(this.$t('toast.removedFromMyLikedSongs'));
-          this.updateLikedSongs(likedSongs.filter(d => d !== id));
-        } else {
-          this.showToast(this.$t('toast.savedToMyLikedSongs'));
-          likedSongs.push(id);
-          this.updateLikedSongs(likedSongs);
-        }
-      });
+      this.likeATrack(this.rightClickedTrack.id);
     },
     addTrackToPlaylist() {
       if (!isAccountLoggedIn()) {
diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index 76e2a16..2389962 100644
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@@ -77,12 +77,12 @@
 </template>
 
 <script>
-import ArtistsInLine from "@/components/ArtistsInLine.vue";
-import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
-import { mapState } from "vuex";
+import ArtistsInLine from '@/components/ArtistsInLine.vue';
+import ExplicitSymbol from '@/components/ExplicitSymbol.vue';
+import { mapState } from 'vuex';
 
 export default {
-  name: "TrackListItem",
+  name: 'TrackListItem',
   components: { ArtistsInLine, ExplicitSymbol },
   props: {
     track: Object,
@@ -95,13 +95,13 @@ export default {
     return { hover: false, trackStyle: {} };
   },
   computed: {
-    ...mapState(["settings"]),
+    ...mapState(['settings']),
     imgUrl() {
       let image =
         this.track?.al?.picUrl ??
         this.track?.album?.picUrl ??
-        "https://p2.music.126.net/UeTuwE7pvjBpypWLudqukA==/3132508627578625.jpg";
-      return image + "?param=224y224";
+        'https://p2.music.126.net/UeTuwE7pvjBpypWLudqukA==/3132508627578625.jpg';
+      return image + '?param=224y224';
     },
     artists() {
       if (this.track.ar !== undefined) return this.track.ar;
@@ -115,13 +115,13 @@ export default {
       return this.$parent.type;
     },
     isAlbum() {
-      return this.type === "album";
+      return this.type === 'album';
     },
     isTracklist() {
-      return this.type === "tracklist";
+      return this.type === 'tracklist';
     },
     isPlaylist() {
-      return this.type === "playlist";
+      return this.type === 'playlist';
     },
     isLiked() {
       return this.$parent.liked.songs.includes(this.track.id);
@@ -132,10 +132,10 @@ export default {
     trackClass() {
       let trackClass = [this.type];
       if (!this.track.playable && this.showUnavailableSongInGreyStyle)
-        trackClass.push("disable");
+        trackClass.push('disable');
       if (this.isPlaying && this.highlightPlayingTrack)
-        trackClass.push("playing");
-      if (this.focus) trackClass.push("focus");
+        trackClass.push('playing');
+      if (this.focus) trackClass.push('focus');
       return trackClass;
     },
     isMenuOpened() {
@@ -155,13 +155,13 @@ export default {
   },
   methods: {
     goToAlbum() {
-      this.$router.push({ path: "/album/" + this.track.al.id });
+      this.$router.push({ path: '/album/' + this.track.al.id });
     },
     playTrack() {
       this.$parent.playThisList(this.track.id);
     },
     likeThisSong() {
-      this.$parent.likeASong(this.track.id);
+      this.$parent.likeATrack(this.track.id);
     },
   },
 };
diff --git a/src/electron/ipcRenderer.js b/src/electron/ipcRenderer.js
index 8b973fa..dbc1da2 100644
--- a/src/electron/ipcRenderer.js
+++ b/src/electron/ipcRenderer.js
@@ -1,76 +1,76 @@
-import store from "@/store";
+import store from '@/store';
 
 const player = store.state.player;
 
 export function ipcRenderer(vueInstance) {
   const self = vueInstance;
   // 添加专有的类名
-  document.body.setAttribute("data-electron", "yes");
+  document.body.setAttribute('data-electron', 'yes');
   document.body.setAttribute(
-    "data-electron-os",
-    window.require("os").platform()
+    'data-electron-os',
+    window.require('os').platform()
   );
   // ipc message channel
-  const electron = window.require("electron");
+  const electron = window.require('electron');
   const ipcRenderer = electron.ipcRenderer;
 
   // listens to the main process 'changeRouteTo' event and changes the route from
   // inside this Vue instance, according to what path the main process requires.
   // responds to Menu click() events at the main process and changes the route accordingly.
 
-  ipcRenderer.on("changeRouteTo", (event, path) => {
+  ipcRenderer.on('changeRouteTo', (event, path) => {
     self.$router.push(path);
   });
 
-  ipcRenderer.on("search", () => {
+  ipcRenderer.on('search', () => {
     // 触发数据响应
     self.$refs.navbar.$refs.searchInput.focus();
     self.$refs.navbar.inputFocus = true;
   });
 
-  ipcRenderer.on("play", () => {
+  ipcRenderer.on('play', () => {
     player.playOrPause();
   });
 
-  ipcRenderer.on("next", () => {
+  ipcRenderer.on('next', () => {
     player.playNextTrack();
   });
 
-  ipcRenderer.on("previous", () => {
+  ipcRenderer.on('previous', () => {
     player.playPrevTrack();
   });
 
-  ipcRenderer.on("increaseVolume", () => {
+  ipcRenderer.on('increaseVolume', () => {
     if (player.volume + 0.1 >= 1) {
       return (player.volume = 1);
     }
     player.volume += 0.1;
   });
 
-  ipcRenderer.on("decreaseVolume", () => {
+  ipcRenderer.on('decreaseVolume', () => {
     if (player.volume - 0.1 <= 0) {
       return (player.volume = 0);
     }
     player.volume -= 0.1;
   });
 
-  ipcRenderer.on("like", () => {
-    store.dispatch("likeASong", player.currentTrack.id);
+  ipcRenderer.on('like', () => {
+    store.dispatch('likeATrack', player.currentTrack.id);
   });
 
-  ipcRenderer.on("repeat", () => {
+  ipcRenderer.on('repeat', () => {
     player.switchRepeatMode();
   });
 
-  ipcRenderer.on("shuffle", () => {
+  ipcRenderer.on('shuffle', () => {
     player.switchShuffle();
   });
 
-  ipcRenderer.on("routerGo", (event, where) => {
+  ipcRenderer.on('routerGo', (event, where) => {
     self.$refs.navbar.go(where);
   });
 
-  ipcRenderer.on("nextUp", () => {
+  ipcRenderer.on('nextUp', () => {
     self.$refs.player.goToNextTracksPage();
   });
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index 5ef73de..f496e59 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,10 +1,10 @@
-import axios from "axios";
-import Cookies from "js-cookie";
+import axios from 'axios';
+import Cookies from 'js-cookie';
 
-let baseURL = "";
+let baseURL = '';
 // Web 和 Electron 跑在不同端口避免同时启动时冲突
 if (process.env.IS_ELECTRON) {
-  if (process.env.NODE_ENV === "production") {
+  if (process.env.NODE_ENV === 'production') {
     baseURL = process.env.VUE_APP_ELECTRON_API_URL;
   } else {
     baseURL = process.env.VUE_APP_ELECTRON_API_URL_DEV;
@@ -21,18 +21,18 @@ const service = axios.create({
 
 service.interceptors.request.use(function (config) {
   if (!config.params) config.params = {};
-  if (baseURL[0] !== "/") {
-    config.params.cookie = `MUSIC_U=${Cookies.get("MUSIC_U")};`;
+  if (baseURL[0] !== '/' && !process.env.IS_ELECTRON) {
+    config.params.cookie = `MUSIC_U=${Cookies.get('MUSIC_U')};`;
   }
   return config;
 });
 
 service.interceptors.response.use(
-  (response) => {
+  response => {
     const res = response.data;
     return res;
   },
-  (error) => {
+  error => {
     return Promise.reject(error);
   }
 );
diff --git a/src/views/library.vue b/src/views/library.vue
index c066436..ba40bfc 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -31,7 +31,7 @@
       </div>
       <div class="songs">
         <TrackList
-          :id="liked.playlist ? liked.playlist[0].id : 0"
+          :id="liked.playlists.length > 0 ? liked.playlists[0].id : 0"
           :tracks="liked.songsWithDetails"
           :column-number="3"
           type="tracklist"
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index 41d32f2..e975113 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -55,7 +55,7 @@
               <div class="buttons">
                 <button-icon
                   :title="$t('player.like')"
-                  @click.native="likeASong(player.currentTrack.id)"
+                  @click.native="likeATrack(player.currentTrack.id)"
                 >
                   <svg-icon
                     :icon-class="
@@ -285,7 +285,7 @@ export default {
   },
   methods: {
     ...mapMutations(['toggleLyrics']),
-    ...mapActions(['likeASong']),
+    ...mapActions(['likeATrack']),
     getLyric() {
       if (!this.currentTrack.id) return;
       return getLyric(this.currentTrack.id).then(data => {