Add lyric offset option

RainPlus-Team · Apr 1, 2021 · 514f0d8 · 514f0d8
1 parent 2a76fa7
commit 514f0d8
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@m4tec/penguinplayer",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A simple player based on Netease Cloud Music",
   "main": "dist/player.js",
   "scripts": {

diff --git a/src/icons/down.svg b/src/icons/down.svg
diff --git a/src/icons/up.svg b/src/icons/up.svg
diff --git a/src/sass/player.sass b/src/sass/player.sass
@@ -374,6 +374,29 @@
                 svg
                     width: 14px
                     height: 14px
+        .penguin-player__lyric-settings--lyric-offset
+            position: absolute
+            left: 10px
+            bottom: 10px
+            > span
+                display: inline-block
+                width: 24px
+                height: 24px
+                cursor: pointer
+                border-radius: 5px
+                &:hover
+                    background-color: rgba(0, 0, 0, 0.1)
+                svg
+                    vertical-align: middle
+            .penguin-player__lyric-settings--lyric-offset-value
+                outline: none
+                border: none
+                width: 40px
+                text-align: center
+                -moz-appearance: textfield
+                &::-webkit-outer-spin-button,
+                &::-webkit-inner-spin-button
+                    -webkit-appearance: none
     .penguin-player__lyric-settings--overlay
         position: fixed
         top: 0

diff --git a/src/template.pug b/src/template.pug
@@ -59,6 +59,10 @@ audio.penguin-player__audio
         |&nbsp;&nbsp;
         span.penguin-player__lyric-settings--status-tlrc-icon
         span.penguin-player__lyric-settings--status-tlrc-text
-    //-
-        TODO: Add lyric offset adjustment
+    .penguin-player__lyric-settings--lyric-offset
+        span.penguin-player__lyric-settings--lyric-offset-up
+            include:svgo icons/up.svg
+        input.penguin-player__lyric-settings--lyric-offset-value(type="number", value="0", step="0.5")
+        span.penguin-player__lyric-settings--lyric-offset-down
+            include:svgo icons/down.svg
 .penguin-player__lyric-settings--overlay
diff --git a/src/typescript/lyric.ts b/src/typescript/lyric.ts
@@ -5,7 +5,12 @@ import { container as el } from "./player";
 
 import tickIcon from "../icons/tick.svg";
 import errorIcon from "../icons/error.svg";
-import { addEventListener } from "./modules/event";
+import { addEventListener, fireEvent } from "./modules/event";
+/// #if IE_SUPPORT
+import { inputStep } from "./modules/helper";
+/// #endif
+
+export let lyricOffset = 0;
 
 let audio: HTMLAudioElement, lrcInfos = {
     main: <any>{},
@@ -21,17 +26,45 @@ addEventListener("setup", () => {
         lrcOffset = tLrcOffset = 0;
         lyricUpdate();
     });
-    window.addEventListener("click", (e: MouseEvent) => {
-        if (e.target instanceof HTMLElement && el.querySelector(".penguin-player__lyric-settings").classList.contains("penguin-player__lyric-settings-shown") && (<HTMLElement>e.target).closest(".penguin-player__lyric-settings") == null) {
-            toggleSettings();
-        }
-        if (e.pageY >= window.innerHeight - 60 && e.pageX >= 56 + 20 && el.querySelector(".penguin-player__player").clientWidth <= 56 && window.innerWidth <= 700) {
-            lyricTap();
-            e.preventDefault();
+    window.addEventListener("mousedown", (e: MouseEvent) => {
+        if (el.querySelector(".penguin-player__lyric-settings").classList.contains("penguin-player__lyric-settings-shown")) {
+            if (e.target instanceof HTMLElement && (<HTMLElement>e.target).closest(".penguin-player__lyric-settings") == null) {
+                toggleSettings();
+            }
+        } else {
+            if (e.pageY >= window.innerHeight - 60 && e.pageX >= 56 + 20 && el.querySelector(".penguin-player__player").clientWidth <= 56 && window.innerWidth <= 700) {
+                lyricTap();
+                e.preventDefault();
+            }
         }
     });
+    // Lyric settings menu setup
     (<HTMLDivElement>el.querySelector(".penguin-player__lyric--expand-button")).addEventListener("click", () => toggleSettings());
     el.querySelector(".penguin-player__lyric-settings--overlay").addEventListener("click", () => toggleSettings(false));
+    let offsetField: HTMLInputElement = el.querySelector(".penguin-player__lyric-settings--lyric-offset-value");
+    /// #if IE_SUPPORT
+    el.querySelector(".penguin-player__lyric-settings--lyric-offset-up").addEventListener("click", () => {inputStep(offsetField); fireEvent(offsetField, "change");});
+    el.querySelector(".penguin-player__lyric-settings--lyric-offset-down").addEventListener("click", () => {inputStep(offsetField, "down"); fireEvent(offsetField, "change");});
+    /// #else
+    el.querySelector(".penguin-player__lyric-settings--lyric-offset-up").addEventListener("click", () => {offsetField.stepUp(); fireEvent(offsetField, "change");});
+    el.querySelector(".penguin-player__lyric-settings--lyric-offset-down").addEventListener("click", () => {offsetField.stepDown(); fireEvent(offsetField, "change");});
+    /// #endif
+    offsetField.addEventListener("change", function() {
+        let offset = Number(this.value);
+        lyricOffset = isNaN(offset) ? lyricOffset : offset;
+        lrcOffset = tLrcOffset = 0;
+        //localStorage.setItem("penguinplayer_lyric_offset", offset.toString());
+    });
+    addEventListener("songchange", () => {lyricOffset = (<any>offsetField.value) = 0;});
+    // Well, this shouldn't be saved
+    /*if (localStorage.getItem("penguinplayer_lyric_offset") != null) {
+        let offset = Number(localStorage.getItem("penguinplayer_lyric_offset"));
+        if (isNaN(offset)) {
+            localStorage.setItem("penguinplayer_lyric_offset", "0");
+        } else {
+            lyricOffset = (<any>offsetField.value) = offset;
+        }
+    }*/
 });
 
 let lastTap: number;
@@ -77,9 +110,9 @@ function setElText(text: string, name: string = "main") {
 function lyricUpdate() {
     if (audio.paused) { return; }
     let [main, sub] = ["", ""];
-    if (!isNaN(audio.currentTime) && (lrcOffset = findLrcPos(lrc, getCurrentTime(), lrcOffset)) != -1) {
+    if (!isNaN(audio.currentTime) && (lrcOffset = findLrcPos(lrc, getCurrentTime() + lyricOffset, lrcOffset)) != -1) {
         main = lrc[lrcOffset].value;
-        if ((tLrcOffset = findLrcPos(tLrc, getCurrentTime(), tLrcOffset)) != -1) {
+        if ((tLrcOffset = findLrcPos(tLrc, getCurrentTime() + lyricOffset, tLrcOffset)) != -1) {
             sub = tLrc[tLrcOffset].value;
         } else {
             sub = lrc[lrcOffset + 1]?.value || "";

diff --git a/src/typescript/modules/event.ts b/src/typescript/modules/event.ts
@@ -20,15 +20,27 @@ export function dispatchEvent(name: string, ...parameters: any) {
     }
 }
 
-export function dispatchWindowEvent(name: string, detail?: object) {
+function createEvent(name: string, detail?: object) {
     let event: Event;
     if (typeof(Event) === "function") {
         event = detail == undefined ? new Event(name) : new CustomEvent(name, detail);
     } else {
         event = document.createEvent("Event");
         event.initEvent(name, true, true);
     }
-    window.dispatchEvent(event);
+    return event;
+}
+
+export function dispatchWindowEvent(name: string, detail?: object) {
+    window.dispatchEvent(createEvent(name, detail));
+}
+
+export function fireEvent(target: EventTarget, name: string, ...args: any) {
+    if ("dispatchEvent" in target) {
+        target.dispatchEvent(createEvent(name, args));
+    } else {
+        (<any>target).fireEvent(createEvent(name, args));
+    }
 }
 
 export function callHandlers(handlers: Array<(e: any) => void>, ...args: any): boolean {

diff --git a/src/typescript/modules/helper.ts b/src/typescript/modules/helper.ts
@@ -33,4 +33,16 @@ export function deepEventHandler(element: HTMLElement, ...args: any[]) {
 export function isBlurSupported() {
     return Modernizr.testAllProps("backdropFilter", "blur(5px)");
 }
+
+function getStep(el: HTMLInputElement): number {
+    let step = Number(el.getAttribute("step"));
+    return isNaN(step) ? 1 : step;
+}
+
+export function inputStep(el: HTMLInputElement, dir: "up" | "down" = "up") {
+    let val = Number(el.value);
+    if (!isNaN(val)) {
+        el.value = (val + getStep(el) * (dir == "up" ? 1 : -1)).toString();
+    }
+}
 /// #endif