update

Project-And-Factory · Oct 4, 2022 · 918f068 · 918f068
1 parent 8c21993
commit 918f068
Show file tree

Hide file tree

Showing 12 changed files with 616 additions and 2,345 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ outputs
 BlurLyric2.0.zip
 node_modules.zip
 data/user/*.json
+out
diff --git a/index.html b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon.ico" />
-    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
-    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
+    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BlurLyric</title>
     <link rel="preconnect" href="https://s1.hdslb.com/" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,35 +7,35 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "start": "node server.js",
+    "start": "electron-forge start",
     "test": "electron .",
-    "packager": "electron-packager ./ BlurLyric --win --out ./outputs --electron-version 15.5.1 --overwrite"
+    "packager": "electron-packager ./ BlurLyric --win --out ./outputs --electron-version 15.5.1 --overwrite",
+    "package": "electron-forge package",
+    "make": "electron-forge make"
   },
   "dependencies": {
     "@unblockneteasemusic/server": "^0.27.0-rc.6",
     "animejs": "^3.2.1",
     "axios": "^0.27.2",
     "color.js": "^1.2.0",
-    "electron": "^20.0.0-alpha.7",
     "express": "^4.18.1",
     "express-fileupload": "^1.4.0",
     "js-cookie": "^3.0.1",
     "md5": "^2.3.0",
+    "music-metadata": "^7.5.3",
     "pac-proxy-agent": "^5.0.0",
     "qrcode": "^1.5.0",
     "safe-decode-uri-component": "^1.2.1",
     "tunnel": "^0.0.6",
     "vite": "^2.9.9",
-    "vue": "^3.2.25",
+    "vue": "^3.2.40",
     "vue-router": "^4.1.1",
     "vue3-lazyload": "^0.3.5",
-    "yargs": "^17.5.1",
-    "music-metadata": "^7.5.3"
+    "yargs": "^17.5.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
-    "electron": "^20.0.0-alpha.7",
-    "electron-packager": "^15.5.1",
+    "electron": "^20.3.0",
     "vite": "^2.9.9"
   },
   "description": "高颜值的网易云第三方播放器",
@@ -48,5 +48,32 @@
   "bugs": {
     "url": "https://github.com/gozaoo/BlurLyric2.0/issues"
   },
-  "homepage": "https://github.com/gozaoo/BlurLyric2.0#readme"
+  "homepage": "https://github.com/gozaoo/BlurLyric2.0#readme",
+  "config": {
+    "forge": {
+      "packagerConfig": {},
+      "makers": [
+        {
+          "name": "@electron-forge/maker-squirrel",
+          "config": {
+            "name": "blurlyric"
+          }
+        },
+        {
+          "name": "@electron-forge/maker-zip",
+          "platforms": [
+            "darwin"
+          ]
+        },
+        {
+          "name": "@electron-forge/maker-deb",
+          "config": {}
+        },
+        {
+          "name": "@electron-forge/maker-rpm",
+          "config": {}
+        }
+      ]
+    }
+  }
 }
diff --git a/serverRouter.js b/serverRouter.js
@@ -28,7 +28,7 @@ router.get('/getUser',(req,res)=>{
     }
 
     user.getUser(req.query.id,(data)=>{
-        jsonTool('200',data,req,res)
+        jsonTool(data.code,data,req,res)
     })
 })
 
@@ -50,7 +50,7 @@ router.get('/writeUser',(req,res)=>{
 
 function jsonTool(code,data,req,res) {
     res.json({
-        "code": 400 || code,
+        "code": code || 400,
         "date": new Date(),
         "data": '' ||data,
         "ip": '' ||req.ip

diff --git a/src/App.vue b/src/App.vue
@@ -16,7 +16,7 @@
 
   <!--左侧导航栏-->
   <div v-bind:class="'leftlab ' + data.ui.leftSideWidth + ' ' + data.player.uiDisplay.mainDisplay">
-    <div class="linkbox">
+    <div class="linkbox" style="flex-direction: row;flex-wrap: wrap;display: flex;">
       <!--返回按钮-->
       <a @click="this.$router.go(-1)"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
           class="bi bi-chevron-left" viewBox="0 0 16 16">
@@ -456,7 +456,7 @@
       <div class="right-side playerIndexSide">
 
         <div id="lyric">
-          <ul id="lyrics" v-if="data.player.musicCache[id]">
+          <ul id="lyrics" ref="lyricBox" v-if="data.player.musicCache[id]">
             <li @click="audio.currentTime = item.t" v-for="(item) in this.data.player.musicCache[id].lyric.ms"
               v-bind:key="item.t">
               <h1>{{item.c}}</h1>
@@ -692,6 +692,7 @@
       });
       this.audio.addEventListener("pause", () => {
         this.state.playing = false;
+        if(document.getElementById('lyrics'))
         anime({
                 targets: document.getElementById('lyrics').getElementsByTagName("li"),
                 delay: (el, i, l) => {
@@ -865,7 +866,9 @@
 
       myPlayList() {
         reTools.getData('/user/playlist', {
-          uid: this.data.user.account.id
+          uid: this.data.user.account.id,
+          timetamp: (Number(new Date()))
+
         }).then(r => {
           this.data.myMusicList = r.playlist
         })
@@ -877,27 +880,29 @@
       },
       async lyricSet(force) {
 
-        if (document.getElementById('lyrics') && this.state.playing ==
-          true && this.data.player.uiDisplay.mainDisplay != 'buttom') {
-          let lyrics = document.getElementById('lyrics'),
-            lis = lyrics.getElementsByTagName("li"),
-            currTime = this.audio.currentTime,
+        if (this.$refs.lyricBox && this.state.playing ==
+          true && this.data.player.uiDisplay.mainDisplay != 'buttom' && this.data.player.musicCache[this.id])  {
+          let lyrics = this.$refs.lyricBox,
+            lis = lyrics.getElementsByTagName('li'),
+            currTime = this.data.player.uiDisplay.realCurrTime,
             lyricNum = this.data.player.musicCache[this.id].lyric.ms.findIndex(obj => obj.t >= (currTime + 0.6)) - 1
-
-          if (lis.length > 0) {
+            
+            if (lis.length > 0) {
             if (lyricNum == -2) lyricNum = this.data.player.musicCache[this.id].lyric.ms.length - 1
 
             if ((this.data.player.uiDisplay.LineNum != lyricNum || force == true) && lis[lyricNum]) {
               this.data.player.uiDisplay.LineNum = lyricNum
+              let ms =this.data.player.musicCache[this.id].lyric.ms[lyricNum].c
 
               //歌词高亮设置
-              let LyricBoxOffsetHeight = document.querySelector("#lyric").offsetHeight
+              let LyricBoxOffsetHeight = lyrics.parentNode.offsetHeight
               anime({
                 targets: lis,
+                round: 100,
                 translateY: (el, i, l) => {
                   let offset = i - lyricNum
 
-                  if (offset < -2) return -(el.offsetTop + el.offsetHeight)
+                  if (offset < -2) return -LyricBoxOffsetHeight
                   if (offset > 7) return LyricBoxOffsetHeight - el.offsetTop
                   return Math.floor(lyrics.offsetTop - lis[lyricNum].offsetTop + (
                     bodyHeight * 0.15))
@@ -953,26 +958,22 @@
 
           }
         }
-        setTimeout(() => {
-          if (force != true) {
-            this.lyricSet()
-          }
-
-        }, 24);
       },
       async getCurr() {
         //音频进度转换
         let currTime, cur, audio = this.audio
-          cur = audio.currentTime.toFixed(3)
+          cur = Number(audio.currentTime.toFixed(3))
           currTime = parseInt(cur)
-        
+          this.data.player.uiDisplay.realCurrTime = cur
         this.data.player.uiDisplay.currTime = currTime
         let progress = cur / this.data.player.uiDisplay.duration
         if (transitionning != true) this.data.player.uiDisplay.progress = progress.toFixed(3)
 
         //音频过度事件触发
         if (this.data.player.uiDisplay.duration - currTime <= 10.5 && this.data.player.uiDisplay.duration >= 10.5)
           this.transitionNextMusic()
+
+          this.lyricSet()
         setTimeout(() => this.getCurr(), 100)
       },
       async transitionNextMusic(times) {

diff --git a/src/network/request.js b/src/network/request.js
@@ -5,7 +5,7 @@ export function request(config,num) {
     axios.defaults.withCredentials = true;
     const instance = axios.create({
         baseURL: '/api/', 
-        // baseURL: 'http://web.blurlyric.app/',
+        //baseURL: 'https://web.blurlyric.app/',
         // baseURL: 'http://localhost:18775/',
         // baseURL: '',
         timeout: 10000,

diff --git a/src/style.css b/src/style.css
@@ -23,7 +23,14 @@ h2 {
 h3 {
   font-weight: normal;
 }
+img[lazy=loading],img:not([src]),img[src=""],img[lazy=error],img[lazy=error]::before{
+  background: linear-gradient(#ccc, #bbb);
+  animation: imgLoading 500ms infinite;
+}
 
+@keyframes imgloading {
+
+}
 
 html,
 body {
@@ -536,7 +543,10 @@ div.player-Mini > div:nth-child(1),div.tracks > div:nth-child(1){
 .player-Mini-Title,.trackTitle {
   font-size: 15px;
   margin: 0 8px;
-  display: inline-block;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:1;
+  /* display: inline-block; */
   user-select: none;
   white-space: nowrap;
   overflow: hidden;
@@ -549,7 +559,10 @@ div.player-Mini > div:nth-child(1),div.tracks > div:nth-child(1){
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-	display: -webkit-box;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:1;
+  max-width: 100%;
 }
 
 div.player-Mini-Title>h1,.trackTitle>h1 {
@@ -566,6 +579,94 @@ div.player-Mini-Title>h2,.trackTitle>h2 {
 div.player-Mini-Title>h2>a,.trackTitle>h2>a {
   margin: 0 0.4em 0 0;
 }
+
+.PLtrack {
+  display: grid;
+  --repeat: 2;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  --gapver: calc(1.2vh + 1.2vw);
+  gap: var(--gapver);
+  justify-content: space-between;
+  font-size: 16px;
+}
+@media (max-width: 60vh) {
+  .PLtrack {
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  }
+}
+
+.PLtrack>div>img {
+  width: 100%;
+  border-radius: 1.5vw;
+}
+
+.PlTrTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  color: rgba(50, 50, 50, 1);
+  font-size: calc(1.5vh + 0.5vw);
+}.
+
+.PlTrTitle>* {
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+
+}
+.Pltracks{
+  position: relative;
+}
+.Pltracks:hover>.PlButtom{
+  display: flex;
+}
+.PlButtom{
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  padding: 4px 5px;
+  background-color: #44444440;
+  box-shadow: 0px 0px 20px #00000040;
+  backdrop-filter: blur(8px);
+  border-radius: 6px;
+  min-height: 24px;
+  min-width: 24px;
+  gap: 5px;
+  display: none;
+}
+.PlButtom>*{
+  color: white;
+  height: 24px;
+  width: 24px;
+  border-radius: 4px;
+}
+.PlButtom>*>svg{
+  height: 24px;
+  width: 24px;
+}
+.PlButtom>*:hover{
+  background-color: #ffffff30;
+}
+
+.PlTrTitle>h1 {
+  -webkit-line-clamp: 2;
+  font-size: 1em;
+  color: rgba(50, 50, 50, 1);
+  margin: 0.4em 0 0 0;
+}
+
+.PlTrTitle>h2 {
+  -webkit-line-clamp: 1;
+  font-size: 0.8em;
+  color: rgba(100, 100, 100, 1);
+  margin: 1px 0 0 0;
+
+}
+
+
 .player-Mini-Contorl{
   display: flex;
   align-items: center;