Merge pull request #28 from imsyy/dev

feat: 支持音译歌词

Author: imsyy

README.md

@@ -131,6 +131,8 @@ npm build
 
 - [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
 - [YesPlayMusic](https://github.com/qier222/YesPlayMusic)
+- [UnblockNeteaseMusic](https://github.com/UnblockNeteaseMusic/server)
+- [BlurLyric](https://github.com/Project-And-Factory/BlurLyric)
 - [Vue-mmPlayer](https://github.com/maomao1996/Vue-mmPlayer)
 
 ## 📜 开源许可

package.json

@@ -1,6 +1,6 @@
 {
   "name": "splayer",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": "imsyy",
   "home": "https://imsyy.top",
   "github": "https://github.com/imsyy/SPlayer",

src/components/Nav/index.vue

@@ -4,7 +4,7 @@
       <div class="logo" @click="router.push('/')">
         <img src="/images/logo/favicon.svg" alt="logo" />
       </div>
-      <div class="controls">
+      <div :class="site.searchInputActive ? 'controls hidden' : 'controls'">
         <n-icon size="22" :component="Left" @click="router.go(-1)" />
         <n-icon size="22" :component="Right" @click="router.go(1)" />
       </div>
@@ -68,13 +68,14 @@ import {
   SunOne,
   Moon,
 } from "@icon-park/vue-next";
-import { userStore, settingStore } from "@/store";
+import { userStore, settingStore, siteStore } from "@/store";
 import { useRouter } from "vue-router";
 import AboutSite from "@/components/DataModal/AboutSite.vue";
 import SearchInp from "@/components/SearchInp/index.vue";
 
 const router = useRouter();
 const user = userStore();
+const site = siteStore();
 const setting = settingStore();
 const aboutSiteRef = ref(null);
 const timeOut = ref(null);
@@ -361,6 +362,7 @@ watch(
 
 onMounted(() => {
   changeUserOptions(user.userLogin);
+  console.log(router);
 });
 
 onBeforeUnmount(() => {
@@ -402,7 +404,10 @@ nav {
       flex-direction: row;
       align-items: center;
       @media (max-width: 520px) {
-        display: none;
+        &.hidden{
+          display: none;
+        }
+        
       }
       .n-icon {
         margin: 0 4px;

src/components/Player/BigPlayer.vue

@@ -120,9 +120,9 @@
               >
                 <n-icon
                   v-if="music.getPlaySongTransl"
-                  :class="setting.getShowTransl ? 'open' : ''"
+                  :class="setting.showTransl ? 'open' : ''"
                   :component="GTranslateFilled"
-                  @click="setting.setShowTransl(!setting.getShowTransl)"
+                  @click="setting.setShowTransl(!setting.showTransl)"
                 />
                 <n-icon
                   class="open"

src/components/Player/CountDown.vue

@@ -5,7 +5,7 @@
       :style="{ animationPlayState: music.getPlayState ? 'running' : 'paused' }"
       v-if="
         remainingPoint <= 2 &&
-        totalDuration > 3 &&
+        totalDuration > 1 &&
         music.getPlaySongLyric.lrc[0]
       "
     >

src/components/Player/RollingLyrics.vue

@@ -50,15 +50,26 @@
           </span>
           <span
             v-show="
-              music.getPlaySongLyric.hasTran &&
-              setting.getShowTransl &&
+              music.getPlaySongLyric.hasLrcTran &&
+              setting.showTransl &&
               item.tran
             "
             :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
             class="lyric-fy"
           >
             {{ item.tran }}</span
           >
+          <span
+            v-show="
+              music.getPlaySongLyric.hasLrcRoma &&
+              setting.showRoma &&
+              item.roma
+            "
+            :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
+            class="lyric-roma"
+          >
+            {{ item.roma }}</span
+          >
         </div>
       </div>
     </template>
@@ -88,11 +99,11 @@
               v-for="(v, i) in item.content"
               :key="i"
               :style="{
-                '--dur': v.duration - 0.15 + 's',
+                '--dur': `${Math.max(v.duration - 0.15, 0.1)}s`,
               }"
               :class="
-                music.getPlaySongLyricIndex == index &&
-                music.getPlaySongTime.currentTime + 0.15 >= v.time
+                music.getPlaySongLyricIndex === index &&
+                music.getPlaySongTime.currentTime + 0.15 > v.time
                   ? 'text fill'
                   : 'text'
               "
@@ -102,15 +113,26 @@
           </div>
           <span
             v-show="
-              music.getPlaySongLyric.hasTran &&
-              setting.getShowTransl &&
+              music.getPlaySongLyric.hasYrcTran &&
+              setting.showTransl &&
               item.tran
             "
             :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
             class="lyric-fy"
           >
-            {{ item.tran }}</span
+            {{ item.tran }}
+          </span>
+          <span
+            v-show="
+              music.getPlaySongLyric.hasYrcRoma &&
+              setting.showRoma &&
+              item.roma
+            "
+            :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
+            class="lyric-roma"
           >
+            {{ item.roma }}
+          </span>
         </div>
       </div>
     </template>
@@ -268,7 +290,8 @@ const lrcTextClick = (time) => {
           }
         }
       }
-      .lyric-fy {
+      .lyric-fy,
+      .lyric-roma {
         margin-top: 4px;
         transition: all 0.3s;
         opacity: 0.6;

src/components/SearchInp/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="searchInp">
     <n-input
-      :class="inputActive ? 'input focus' : 'input'"
+      :class="site.searchInputActive ? 'input focus' : 'input'"
       :input-props="{ autoComplete: false }"
+      ref="searchInpRef"
       round
       clearable
       placeholder="搜索音乐/视频"
@@ -14,7 +15,7 @@
       <template #prefix>
         <n-icon
           size="16"
-          :class="inputActive ? 'active' : ''"
+          :class="site.searchInputActive ? 'active' : ''"
           :component="Search"
         />
       </template>
@@ -23,7 +24,7 @@
       <n-card
         class="list"
         v-show="
-          inputActive &&
+          site.searchInputActive &&
           !inputValue &&
           (music.getSearchHistory[0] || searchData.hot[0])
         "
@@ -93,7 +94,7 @@
     <CollapseTransition easing="ease-in-out">
       <n-card
         class="list"
-        v-show="inputActive && inputValue && searchData.suggest"
+        v-show="site.searchInputActive && inputValue && searchData.suggest"
         content-style="padding: 0"
       >
         <n-scrollbar>
@@ -195,20 +196,21 @@ import {
 import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
 import debounce from "@/utils/debounce";
 import { useRouter } from "vue-router";
-import { musicStore, settingStore } from "@/store";
+import { musicStore, settingStore, siteStore } from "@/store";
+
 const router = useRouter();
 const music = musicStore();
 const setting = settingStore();
+const site = siteStore();
 
 // 输入框内容
 const inputValue = ref(null);
-
-// 输入框激活状态
-const inputActive = ref(false);
+const searchInpRef = ref(null);
 
 // 输入框激活事件
 const inputFocus = () => {
-  inputActive.value = true;
+  searchInpRef.value?.focus();
+  site.searchInputActive = true;
   music.showPlayList = false;
   getSearchHotData();
 };
@@ -274,7 +276,8 @@ const toSearch = (val, type) => {
 const inputkeydown = (e) => {
   if (e.key === "Enter" && inputValue.value != null) {
     console.log("执行搜索" + inputValue.value.trim());
-    inputActive.value = false;
+    searchInpRef.value?.blur();
+    site.searchInputActive = false;
     // 写入搜索历史
     music.setSearchHistory(inputValue.value.trim());
     router.push({
@@ -306,13 +309,15 @@ onMounted(() => {
   getSearchHotData();
   // 搜索框失焦
   document.addEventListener("click", () => {
-    inputActive.value = false;
+    searchInpRef.value?.blur();
+    site.searchInputActive = false;
   });
 });
 
 onUnmounted(() => {
   document.removeEventListener("click", () => {
-    inputActive.value = false;
+    searchInpRef.value?.blur();
+    site.searchInputActive = false;
   });
 });
 
@@ -333,7 +338,10 @@ watch(
 watch(
   () => music.showPlayList,
   (val) => {
-    if (val) inputActive.value = false;
+    if (val) {
+      searchInpRef.value?.blur();
+      site.searchInputActive = false;
+    }
   }
 );
 </script>

src/store/musicData.js

@@ -232,22 +232,22 @@ const useMusicDataStore = defineStore("musicData", {
             setLikeSong(id, like).then((res) => {
               if (res.code == 200) {
                 list.push(id);
-                $message.info("成功喜欢歌曲");
+                $message.info("已添加到我喜欢的音乐");
               } else {
-                $message.error("喜欢歌曲时发生错误");
+                $message.error("喜欢音乐时发生错误");
               }
             });
           } else {
-            $message.info("我喜欢的列表中已存在该歌曲");
+            $message.info("我喜欢的音乐中已存在该歌曲");
           }
         } else {
           if (exists) {
             setLikeSong(id, like).then((res) => {
               if (res.code == 200) {
                 list.splice(list.indexOf(id), 1);
-                $message.info("成功取消喜欢歌曲");
+                $message.info("已从我喜欢的音乐中移除");
               } else {
-                $message.error("取消喜欢歌曲时发生错误");
+                $message.error("取消喜欢音乐时发生错误");
               }
             });
           } else {

src/store/settingData.js

@@ -26,6 +26,8 @@ const useSettingDataStore = defineStore("settingData", {
       showYrc: true,
       // 是否显示歌词翻译
       showTransl: true,
+      // 是否显示歌词音译
+      showRoma: true,
       // 歌曲音质
       songLevel: "exhigh",
       // 歌词位置
@@ -53,10 +55,6 @@ const useSettingDataStore = defineStore("settingData", {
     getSiteTheme(state) {
       return state.theme;
     },
-    // 获取是否开启翻译
-    getShowTransl(state) {
-      return state.showTransl;
-    },
   },
   actions: {
     // 切换明暗模式

src/store/siteData.js

@@ -7,6 +7,8 @@ const useSiteDataStore = defineStore("siteData", {
       siteTitle: "SPlayer",
       // 封面主题色
       songPicColor: "rgb(128,128,128)",
+      // 搜索框激活状态
+      searchInputActive: false,
     };
   },
   getters: {},