Merge pull request #3 from gnehs/dev

Dev
gnehs · Aug 8, 2018 · 7b0bf7c · 7b0bf7c
2 parents d670e40 + 0cdaf36
commit 7b0bf7c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -448,7 +448,7 @@ header.mdui-appbar.mdui-appbar-fixed {
         font-size: calc(8px + 1vmin);
     }
     [data-player]>.info>[data-lrc]>[data-lrc="inner"] {
-        padding: 80px 0;
+        padding: 20px 0;
     }
 }
 
@@ -519,10 +519,14 @@ header.mdui-appbar.mdui-appbar-fixed {
         transform: scaleX(0);
         opacity: 0;
     }
-    100% {
+    90% {
         transform: scaleX(1);
         opacity: 1;
     }
+    100% {
+        transform: scaleX(1);
+        opacity: 0;
+    }
 }
 
 [data-lrc] p {
@@ -532,7 +536,7 @@ header.mdui-appbar.mdui-appbar-fixed {
 }
 
 [data-lrc] p.mdui-text-color-theme-accent,
-[data-lrc] p.mdui-text-color-theme-accent+p {
+[data-lrc] p.mdui-text-color-theme-accent:not(:empty)+p {
     opacity: 1;
 }
 

diff --git a/js/script.js b/js/script.js
@@ -10,6 +10,7 @@ ap.on("play", async function() {
     //沒歌就隨機播放
     if (ap.list.audios.length == 0) play_random();
     updateMediaSession()
+    lrc.load(`[00:00.000]歌詞讀取中`) // 歌詞清空
 })
 ap.on("loadedmetadata", async function() {
     lrc.load(`[00:00.000]歌詞讀取中`)
@@ -569,6 +570,12 @@ async function show_now() {
                 html += `<p>${text}</p>`
         }
         $('div[data-lrc="inner"]').html(html)
+        let nowLrc = lrc.select(ap.audio.currentTime)
+        if (nowLrc > -1) {
+            $('[data-player] div[data-lrc="inner"] p').eq(nowLrc).addClass('mdui-text-color-theme-accent')
+            let sh = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('[data-player] .info>div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight
+            $('[data-player] .info>div[data-lrc]').scrollTop(sh);
+        }
     }
 
     ap.on("pause", function() {
@@ -665,6 +672,12 @@ function show_lrc() {
                 html += `<p>${text}</p>`
         }
         $("#content>div[data-lrc]>[data-lrc=\"inner\"]").html(html)
+        let nowLrc = lrc.select(ap.audio.currentTime)
+        if (nowLrc > -1) {
+            $('#content>div[data-lrc]>div[data-lrc="inner"] p').eq(nowLrc).addClass('mdui-text-color-theme-accent')
+            let top = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight * 2
+            $('#content>div[data-lrc]').animate({ scrollTop: top }, 0);
+        }
     }
     ap.on("timeupdate", function() {
         // 歌詞亮亮
@@ -674,7 +687,7 @@ function show_lrc() {
         if (before != after && nowLrc > -1) {
             $('#content>div[data-lrc]>div[data-lrc="inner"] p').removeClass('mdui-text-color-theme-accent')
             $('#content>div[data-lrc]>div[data-lrc="inner"] p').eq(nowLrc).addClass('mdui-text-color-theme-accent')
-            let top = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight
+            let top = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight * 2
             $('#content>div[data-lrc]').animate({ scrollTop: top }, 300);
         }
     });

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pokaplayer",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "description": "",
     "main": "index.js",
     "scripts": {