fix: issue of displaying wrong lyrics when the current track has no lyrics

src/views/lyrics.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="slide-up">
-    <div class="lyrics-page">
+    <div class="lyrics-page" :class="{ 'no-lyric': noLyric }">
       <div class="left-side">
         <div>
           <div class="cover">
@@ -117,24 +117,21 @@
         </div>
       </div>
       <div class="right-side">
-        <div class="lyrics-container" ref="lyricsContainer">
+        <transition name="slide-fade">
-          <div
+          <div class="lyrics-container" ref="lyricsContainer" v-show="!noLyric">
-            class="line"
+            <div
-            :class="{
+              class="line"
-              highlight: highlightLyricIndex === index,
+              :class="{
-            }"
+                highlight: highlightLyricIndex === index,
-            :style="lineStyles"
+              }"
-            v-for="(line, index) in lyricWithTranslation"
+              :style="lineStyles"
-            :key="index"
+              v-for="(line, index) in lyricWithTranslation"
-            :id="`line-${index}`"
+              :key="index"
-            v-html="
+              :id="`line-${index}`"
-              haveTranslation
-                ? line.contents[0] + '<br/>' + line.contents[1]
-                : line.contents[0]
-            "
-          ></div>
-        </div>
               v-html="formatLine(line)"
+            ></div>
+          </div>
+        </transition>
       </div>
       <div class="close-button" @click="toggleLyrics">
         <button><svg-icon icon-class="arrow-down" /></button>
@@ -233,6 +230,9 @@ export default {
     showLyrics() {
       return this.$store.state.showLyrics;
     },
+    noLyric() {
+      return this.lyric.length == 0;
+    },
   },
   created() {
     this.getLyric();
@@ -244,9 +244,16 @@ export default {
     ...mapMutations(["toggleLyrics"]),
     getLyric() {
       return getLyric(this.currentTrack.id).then((data) => {
-        let { lyric, tlyric } = lyricParser(data);
+        if (data.nolyric) {
-        this.lyric = lyric;
+          this.lyric = [];
-        this.tlyric = tlyric;
+          this.tlyric = [];
+          return false;
+        } else {
+          let { lyric, tlyric } = lyricParser(data);
+          this.lyric = lyric;
+          this.tlyric = tlyric;
+          return true;
+        }
       });
     },
     formatTrackTime(value) {
@@ -287,9 +294,11 @@ export default {
   },
   watch: {
     currentTrack() {
-      this.getLyric().then(() => {
+      this.getLyric().then((result) => {
-        const el = document.getElementById(`line-0`);
+        if (result) {
-        el.scrollIntoView({ block: "center" });
+          const el = document.getElementById(`line-0`);
+          el.scrollIntoView({ block: "center" });
+        }
       });
     },
     showLyrics(show) {
@@ -316,12 +325,13 @@ export default {
 }
 
 .left-side {
-  flex: 4;
+  flex: 1;
   display: flex;
   justify-content: flex-end;
-  margin-right: 24px;
+  margin-right: 32px;
   margin-top: 24px;
   align-items: center;
+  transition: all 0.5s;
   .controls {
     max-width: 54vh;
     margin-top: 24px;
@@ -441,9 +451,10 @@ export default {
 }
 
 .right-side {
-  flex: 5;
+  flex: 1;
   font-weight: 600;
   color: var(--color-text);
+  margin-right: 24px;
   .lyrics-container {
     height: 100%;
     display: flex;
@@ -498,6 +509,14 @@ export default {
   }
 }
 
+.lyrics-page.no-lyric {
+  .left-side {
+    transition: all 0.5s;
+    transform: translateX(27vh);
+    margin-right: 0;
+  }
+}
+
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: all 0.4s;
@@ -505,4 +524,16 @@ export default {
 .slide-up-enter, .slide-up-leave-to /* .fade-leave-active below version 2.1.8 */ {
   transform: translateY(100%);
 }
+
+.slide-fade-enter-active {
+  transition: all 0.5s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(27vh);
+  opacity: 0;
+}
 </style>