Merge branch 'qier222:master' into revincx-pr

src/views/album.vue

@@ -96,9 +96,7 @@
         {{ $t('album.released') }}
         {{ album.publishTime | formatDate('MMMM D, YYYY') }}
       </div>
-      <div v-if="album.company !== null" class="copyright">
-        © {{ album.company }}
-      </div>
+      <div v-if="album.company" class="copyright"> © {{ album.company }} </div>
     </div>
     <div v-if="filteredMoreAlbums.length !== 0" class="more-by">
       <div class="section-title">

src/views/artist.vue

@@ -241,7 +241,9 @@ export default {
   computed: {
     ...mapState(['player']),
     albums() {
-      return this.albumsData.filter(a => a.type === '专辑');
+      return this.albumsData.filter(
+        a => a.type === '专辑' || a.type === '精选集'
+      );
     },
     eps() {
       return this.albumsData.filter(a =>

src/views/loginAccount.vue

@@ -261,6 +261,8 @@ export default {
       });
     },
     checkQrCodeLogin() {
+      // 清除二维码检测
+      clearInterval(this.qrCodeCheckInterval);
       this.qrCodeCheckInterval = setInterval(() => {
         if (this.qrCodeKey === '') return;
         loginQrCodeCheck(this.qrCodeKey).then(result => {
@@ -275,7 +277,7 @@ export default {
             clearInterval(this.qrCodeCheckInterval);
             this.qrCodeInformation = '登录成功，请稍等...';
             result.code = 200;
-            result.cookie = result.cookie.replace('HTTPOnly', '');
+            result.cookie = result.cookie.replaceAll(' HTTPOnly', '');
             this.handleLoginResponse(result);
           }
         });

src/views/lyrics.vue

@@ -201,6 +201,28 @@
               >
                 <svg-icon icon-class="shuffle" />
               </button-icon>
+              <button-icon
+                v-show="
+                  isShowLyricTypeSwitch &&
+                  $store.state.settings.showLyricsTranslation &&
+                  lyricType === 'translation'
+                "
+                :title="$t('player.translationLyric')"
+                @click.native="switchLyricType"
+              >
+                <span class="lyric-switch-icon">译</span>
+              </button-icon>
+              <button-icon
+                v-show="
+                  isShowLyricTypeSwitch &&
+                  $store.state.settings.showLyricsTranslation &&
+                  lyricType === 'romaPronunciation'
+                "
+                :title="$t('player.PronunciationLyric')"
+                @click.native="switchLyricType"
+              >
+                <span class="lyric-switch-icon">音</span>
+              </button-icon>
             </div>
           </div>
         </div>
@@ -215,7 +237,7 @@
           >
             <div id="line-1" class="line"></div>
             <div
-              v-for="(line, index) in lyricWithTranslation"
+              v-for="(line, index) in lyricToShow"
               :id="`line${index}`"
               :key="index"
               class="line"
@@ -277,6 +299,8 @@ export default {
       lyricsInterval: null,
       lyric: [],
       tlyric: [],
+      romalyric: [],
+      lyricType: 'translation', // or 'romaPronunciation'
       highlightLyricIndex: -1,
       minimize: true,
       background: '',
@@ -302,6 +326,14 @@ export default {
     bgImageUrl() {
       return this.player.currentTrack?.al?.picUrl + '?param=512y512';
     },
+    isShowLyricTypeSwitch() {
+      return this.romalyric.length > 0 && this.tlyric.length > 0;
+    },
+    lyricToShow() {
+      return this.lyricType === 'translation'
+        ? this.lyricWithTranslation
+        : this.lyricWithRomaPronunciation;
+    },
     lyricWithTranslation() {
       let ret = [];
       // 空内容的去除
@@ -333,6 +365,37 @@ export default {
       }
       return ret;
     },
+    lyricWithRomaPronunciation() {
+      let ret = [];
+      // 空内容的去除
+      const lyricFiltered = this.lyric.filter(({ content }) =>
+        Boolean(content)
+      );
+      // content统一转换数组形式
+      if (lyricFiltered.length) {
+        lyricFiltered.forEach(l => {
+          const { rawTime, time, content } = l;
+          const lyricItem = { time, content, contents: [content] };
+          const sameTimeRomaLyric = this.romalyric.find(
+            ({ rawTime: tLyricRawTime }) => tLyricRawTime === rawTime
+          );
+          if (sameTimeRomaLyric) {
+            const { content: romaLyricContent } = sameTimeRomaLyric;
+            if (content) {
+              lyricItem.contents.push(romaLyricContent);
+            }
+          }
+          ret.push(lyricItem);
+        });
+      } else {
+        ret = lyricFiltered.map(({ time, content }) => ({
+          time,
+          content,
+          contents: [content],
+        }));
+      }
+      return ret;
+    },
     lyricFontSize() {
       return {
         fontSize: `${this.$store.state.settings.lyricFontSize || 28}px`,
@@ -439,9 +502,10 @@ export default {
         if (!data?.lrc?.lyric) {
           this.lyric = [];
           this.tlyric = [];
+          this.romalyric = [];
           return false;
         } else {
-          let { lyric, tlyric } = lyricParser(data);
+          let { lyric, tlyric, romalyric } = lyricParser(data);
           lyric = lyric.filter(
             l => !/^作(词|曲)\s*(:|：)\s*无$/.exec(l.content)
           );
@@ -461,15 +525,27 @@ export default {
           if (lyric.length === 1 && includeAM) {
             this.lyric = [];
             this.tlyric = [];
+            this.romalyric = [];
             return false;
           } else {
             this.lyric = lyric;
             this.tlyric = tlyric;
+            this.romalyric = romalyric;
+            if (tlyric.length * romalyric.length > 0) {
+              this.lyricType = 'translation';
+            } else {
+              this.lyricType =
+                lyric.length > 0 ? 'translation' : 'romaPronunciation';
+            }
             return true;
           }
         }
       });
     },
+    switchLyricType() {
+      this.lyricType =
+        this.lyricType === 'translation' ? 'romaPronunciation' : 'translation';
+    },
     formatTrackTime(value) {
       return formatTrackTime(value);
     },
@@ -758,6 +834,12 @@ export default {
           width: 22px;
         }
       }
+      .lyric-switch-icon {
+        color: var(--color-text);
+        font-size: 14px;
+        line-height: 14px;
+        opacity: 0.88;
+      }
     }
   }
 }

src/views/settings.vue

@@ -58,20 +58,32 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> 音乐语种偏好 </div>
+          <div class="title">
+            {{ $t('settings.MusicGenrePreference.text') }}
+          </div>
         </div>
         <div class="right">
           <select v-model="musicLanguage">
-            <option value="all">无偏好</option>
-            <option value="zh">华语</option>
-            <option value="ea">欧美</option>
-            <option value="jp">日语</option>
-            <option value="kr">韩语</option>
+            <option value="all">{{
+              $t('settings.MusicGenrePreference.none')
+            }}</option>
+            <option value="zh">{{
+              $t('settings.MusicGenrePreference.mandarin')
+            }}</option>
+            <option value="ea">{{
+              $t('settings.MusicGenrePreference.western')
+            }}</option>
+            <option value="jp">{{
+              $t('settings.MusicGenrePreference.japanese')
+            }}</option>
+            <option value="kr">{{
+              $t('settings.MusicGenrePreference.korean')
+            }}</option>
           </select>
         </div>
       </div>
 
-      <h3>音质</h3>
+      <!-- <h3>音质</h3> -->
       <div class="item">
         <div class="left">
           <div class="title"> {{ $t('settings.musicQuality.text') }} </div>
@@ -166,7 +178,7 @@
         </div>
       </div>
 
-      <h3>歌词</h3>
+      <h3>{{ $t('settings.lyric') }}</h3>
       <div class="item">
         <div class="left">
           <div class="title">{{ $t('settings.showLyricsTranslation') }}</div>
@@ -433,7 +445,7 @@
         </div>
       </section>
 
-      <h3>第三方</h3>
+      <h3>{{ $t('settings.customization') }}</h3>
       <div class="item">
         <div class="left">
           <div class="title">
@@ -470,7 +482,7 @@
         </div>
       </div>
 
-      <h3>其他</h3>
+      <h3>{{ $t('settings.others') }}</h3>
       <div v-if="isElectron && !isMac" class="item">
         <div class="left">
           <div class="title"> {{ $t('settings.closeAppOption.text') }} </div>