fix: bugs

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <Navbar ref="navbar" v-show="showNavbar" />
+    <Navbar v-show="showNavbar" ref="navbar" />
     <main>
       <keep-alive>
         <router-view v-if="$route.meta.keepAlive"></router-view>
@@ -8,13 +8,13 @@
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     </main>
     <transition name="slide-up">
-      <Player v-if="enablePlayer" ref="player" v-show="showPlayer"
+      <Player v-if="enablePlayer" v-show="showPlayer" ref="player"
     /></transition>
     <Toast />
     <ModalAddTrackToPlaylist v-if="isAccountLoggedIn" />
     <ModalNewPlaylist v-if="isAccountLoggedIn" />
-    <transition name="slide-up" v-if="enablePlayer">
-      <Lyrics v-show="this.$store.state.showLyrics" />
+    <transition v-if="enablePlayer" name="slide-up">
+      <Lyrics v-show="showLyrics" />
     </transition>
   </div>
 </template>
@@ -28,6 +28,7 @@ import Toast from "./components/Toast.vue";
 import { ipcRenderer } from "./electron/ipcRenderer";
 import { isAccountLoggedIn } from "@/utils/auth";
 import Lyrics from "./views/lyrics.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "App",
@@ -45,6 +46,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(["showLyrics"]),
     isAccountLoggedIn() {
       return isAccountLoggedIn();
     },
@@ -177,7 +179,10 @@ a {
   }
 }
 
-/* Let's get this party started */
+main::-webkit-scrollbar {
+  width: 0px;
+}
+
 ::-webkit-scrollbar {
   width: 8px;
 }

src/store/mutations.js

@@ -23,11 +23,11 @@ export default {
   },
   togglePlaylistCategory(state, name) {
     const index = state.settings.enabledPlaylistCategories.findIndex(
-      (c) => c.name === name
+      (c) => c === name
     );
     if (index !== -1) {
       state.settings.enabledPlaylistCategories = state.settings.enabledPlaylistCategories.filter(
-        (c) => c.name !== name
+        (c) => c !== name
       );
     } else {
       state.settings.enabledPlaylistCategories.push(name);

src/utils/Player.js

@@ -116,10 +116,13 @@ export default class {
     this._loadSelfFromLocalStorage();
     if (this._enabled) {
       this._replaceCurrentTrack(this._currentTrack.id, false).then(() => {
-        this._howler.seek(localStorage.getItem("playerCurrentTrackTime") ?? 0);
+        this._howler?.seek(localStorage.getItem("playerCurrentTrackTime") ?? 0);
         setInterval(
           () =>
-            localStorage.setItem("playerCurrentTrackTime", this._howler.seek()),
+            localStorage.setItem(
+              "playerCurrentTrackTime",
+              this._howler?.seek()
+            ),
           1000
         );
       }); // update audio source and init howler
@@ -408,7 +411,7 @@ export default class {
     // TODO: 切换歌曲时增加加载中的状态
     const [trackID, index] = this._getNextTrack();
     if (trackID === undefined) {
-      this._howler.stop();
+      this._howler?.stop();
       this._playing = false;
       return false;
     }
@@ -434,14 +437,14 @@ export default class {
   }
 
   pause() {
-    this._howler.pause();
+    this._howler?.pause();
     this._playing = false;
     document.title = "YesPlayMusic";
     this._pauseDiscordPresence(this._currentTrack);
   }
   play() {
-    if (this._howler.playing()) return;
-    this._howler.play();
+    if (this._howler?.playing()) return;
+    this._howler?.play();
     this._playing = true;
     document.title = `${this._currentTrack.name} · ${this._currentTrack.ar[0].name} - YesPlayMusic`;
     this._playDiscordPresence(this._currentTrack, this.seek());
@@ -456,7 +459,7 @@ export default class {
     }
   }
   playOrPause() {
-    if (this._howler.playing()) {
+    if (this._howler?.playing()) {
       this.pause();
     } else {
       this.play();
@@ -464,7 +467,7 @@ export default class {
   }
   seek(time = null) {
     if (time !== null) {
-      this._howler.seek(time);
+      this._howler?.seek(time);
       if (this._playing)
         this._playDiscordPresence(this._currentTrack, this.seek());
     }
@@ -479,10 +482,10 @@ export default class {
     }
   }
   setOutputDevice() {
-    if (this._howler._sounds.length <= 0 || !this._howler._sounds[0]._node) {
+    if (this._howler?._sounds.length <= 0 || !this._howler?._sounds[0]._node) {
       return;
     }
-    this._howler._sounds[0]._node.setSinkId(store.state.settings.outputDevice);
+    this._howler?._sounds[0]._node.setSinkId(store.state.settings.outputDevice);
   }
 
   replacePlaylist(

src/utils/request.js

@@ -33,9 +33,6 @@ service.interceptors.response.use(
     return res;
   },
   (error) => {
-    const errMsg = `error: ${error}`;
-    console.log(errMsg);
-
     return Promise.reject(error);
   }
 );

src/views/album.vue

@@ -169,9 +169,6 @@ export default {
       title: "",
     };
   },
-  created() {
-    this.loadData(this.$route.params.id);
-  },
   computed: {
     ...mapState(["player", "data"]),
     albumTime() {
@@ -197,6 +194,9 @@ export default {
       }
     },
   },
+  created() {
+    this.loadData(this.$route.params.id);
+  },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID", "showToast"]),
@@ -211,15 +211,20 @@ export default {
       likeAAlbum({
         id: this.album.id,
         t: this.dynamicDetail.isSub ? 0 : 1,
-      }).then((data) => {
-        if (data.code === 200) {
-          this.dynamicDetail.isSub = !this.dynamicDetail.isSub;
-          if (toast === true)
-            this.showToast(
-              this.dynamicDetail.isSub ? "已保存到音乐库" : "已从音乐库删除"
-            );
-        }
-      });
+      })
+        .then((data) => {
+          if (data.code === 200) {
+            this.dynamicDetail.isSub = !this.dynamicDetail.isSub;
+            if (toast === true)
+              this.showToast(
+                this.dynamicDetail.isSub ? "已保存到音乐库" : "已从音乐库删除"
+              );
+          }
+          console.log(data);
+        })
+        .catch((error) => {
+          this.showToast(`${error.response.data.message || error}`);
+        });
     },
     formatTitle() {
       let splitTitle = splitSoundtrackAlbumTitle(this.album.name);

src/views/explore.vue

@@ -85,6 +85,16 @@ export default {
     ButtonTwoTone,
     SvgIcon,
   },
+  beforeRouteUpdate(to, from, next) {
+    NProgress.start();
+    this.showLoadMoreButton = false;
+    this.hasMore = true;
+    this.playlists = [];
+    this.offset = 1;
+    this.activeCategory = to.query.category;
+    this.getPlaylist();
+    next();
+  },
   data() {
     return {
       show: false,
@@ -119,7 +129,7 @@ export default {
       this.getPlaylist();
     },
     goToCategory(Category) {
-      if (this.showCatOptions) return;
+      this.showCatOptions = false;
       this.$router.push({ path: "/explore?category=" + Category });
     },
     updatePlaylist(playlists) {
@@ -179,16 +189,6 @@ export default {
       this.togglePlaylistCategory(name);
     },
   },
-  beforeRouteUpdate(to, from, next) {
-    NProgress.start();
-    this.showLoadMoreButton = false;
-    this.hasMore = true;
-    this.playlists = [];
-    this.offset = 1;
-    this.activeCategory = to.query.category;
-    this.getPlaylist();
-    next();
-  },
 };
 </script>
 

src/views/lyrics.vue

@@ -273,12 +273,26 @@ export default {
       return this.lyric.length == 0;
     },
     artist() {
-      return this.currentTrack?.ar[0] || { id: 0, name: "unknown" };
+      return this.currentTrack?.ar
+        ? this.currentTrack.ar[0]
+        : { id: 0, name: "unknown" };
     },
     album() {
       return this.currentTrack?.al || { id: 0, name: "unknown" };
     },
   },
+  watch: {
+    currentTrack() {
+      this.getLyric();
+    },
+    showLyrics(show) {
+      if (show) {
+        this.setLyricsInterval();
+      } else {
+        clearInterval(this.lyricsInterval);
+      }
+    },
+  },
   created() {
     this.getLyric();
   },
@@ -343,27 +357,16 @@ export default {
       const showLyricsTranslation = this.$store.state.settings
         .showLyricsTranslation;
       if (showLyricsTranslation && line.contents[1]) {
-        return `<span>${line?.contents[0]}<br/>${line.contents[1]}</span>`;
-      } else {
-        return `<span>${line?.contents[0]}</span>`;
+        return `<span>${line.contents[0]}<br/>${line.contents[1]}</span>`;
+      } else if (line.contents[0] !== undefined) {
+        return `<span>${line.contents[0]}</span>`;
       }
+      return "unknown";
     },
     moveToFMTrash() {
       this.player.moveToFMTrash();
     },
   },
-  watch: {
-    currentTrack() {
-      this.getLyric();
-    },
-    showLyrics(show) {
-      if (show) {
-        this.setLyricsInterval();
-      } else {
-        clearInterval(this.lyricsInterval);
-      }
-    },
-  },
 };
 </script>