feat: karaoke-ify

MoePlayer · Jan 22, 2020 · f6d20aa · f6d20aa
1 parent adf42f7
commit f6d20aa
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 36 deletions.
diff --git a/declaration/library.d.ts b/declaration/library.d.ts
@@ -3,4 +3,5 @@ export declare function checkIfTimePointIsOfTheObject(time: number, obj: LyricIt
     node: LyricNode;
     item: LyricItem;
 }): 0 | 1 | -1;
+export declare function findPercentage(node: LyricNode, item: LyricItem, time: number): number;
 export declare function DivisionSearch<T>(checker: (el: T) => number, arr: T[]): T | null;
diff --git a/declaration/view.d.ts b/declaration/view.d.ts
@@ -3,10 +3,10 @@ export default class CaraokeView extends HTMLElement {
     private lyricNodes;
     private shadow;
     private drawer;
-    private pointer;
+    private backgroundDrawer;
     static install(): void;
     constructor();
-    setNode(node: LyricNode): this;
+    setNode(node: LyricNode, percentage: number): this;
     private _setNode;
     setLyric(lyric: LyricItem): this;
     private _setLyric;

diff --git a/dist/caraoke.js b/dist/caraoke.js
@@ -1,4 +1,4 @@
-import { checkIfTimePointIsOfTheObject, DivisionSearch } from "./library.js";
+import { checkIfTimePointIsOfTheObject, DivisionSearch, findPercentage } from "./library.js";
 import CaraokeView from "./view.js";
 export default class Caraoke {
     constructor(defaultOptions) {
@@ -23,9 +23,9 @@ export default class Caraoke {
         let FoundLyricNode;
         if (this.now.item)
             FoundLyricNode = DivisionSearch((el) => checkIfTimePointIsOfTheObject(time, { node: el, item: this.now.item }), this.now.item.nodes);
-        if (FoundLyricNode !== this.now.node && FoundLyricNode) {
+        if (FoundLyricNode) {
             this.now.node = FoundLyricNode;
-            this.view.setNode(FoundLyricNode);
+            this.view.setNode(FoundLyricNode, findPercentage(FoundLyricNode, FoundLyricItem, time));
         }
     }
 }
diff --git a/dist/library.js b/dist/library.js
@@ -11,6 +11,9 @@ export function checkIfTimePointIsOfTheObject(time, obj) {
         || !beforeEnd && 1
         || !afterStart && -1;
 }
+export function findPercentage(node, item, time) {
+    return (time - item.start - node.start) / (node.end - node.start);
+}
 export function DivisionSearch(checker, arr) {
     if (arr.length === 0)
         return null;

diff --git a/dist/view.js b/dist/view.js
@@ -9,52 +9,57 @@ export default class CaraokeView extends HTMLElement {
     constructor() {
         super();
         this.shadow = this.attachShadow({ mode: "closed" });
-        this.pointer = document.createElement("span");
-        this.pointer.id = "pointer";
         this.drawer = document.createElement("div");
         this.drawer.id = "drawer";
+        this.backgroundDrawer = document.createElement("div");
+        this.backgroundDrawer.id = "backgroundDrawer";
         this.shadow.appendChild(style `
             #pointer{
                 display:none;
             }
-            #drawer > * {
+            #drawer {
+                position: absolute;
+            }
+            #backgroundDrawer > *, #drawer > * {
                 color: red;
                 text-shadow: 0 0 0.1em red;
-                transition: color .5s;
-                font-size: 5em;
+                clip-path: inset(0 100% 0 0);
+                font-size: 3em;
                 font-family: caraoke-custom-font, "Source Han Serif","STZhongSong","Yu Mincho", serif;
                 font-weight: 900;
             }
-            #drawer > #pointer ~ * {
+            #backgroundDrawer > * {
                 color: white;
                 text-shadow: 0 0 0.1em grey;
+                clip-path: none;
             }
         `);
         this.shadow.appendChild(this.drawer);
+        this.shadow.appendChild(this.backgroundDrawer);
     }
-    setNode(node) {
+    setNode(node, percentage) {
         let point = 0;
         "content" in node && (point = this.lyricNodes.nodes.findIndex(p => p === node));
-        this._setNode(point);
+        this._setNode(point, percentage);
         return this;
     }
-    _setNode(point) {
-        this.drawer.insertBefore(this.pointer, this.shadow.getElementById("node_" + (point + 1)));
+    _setNode(point, percentage) {
+        (point - 1) >= 0 && (this.shadow.getElementById("node_" + (point - 1)).style["clipPath"] = "inset(0 0 0 0)");
+        this.shadow.getElementById("node_" + point).style["clipPath"] = "inset(0 " + parseInt((1 - percentage) * 100) + "% 0 0)";
     }
     setLyric(lyric) {
         "nodes" in lyric && (this.lyricNodes = lyric);
         this._setLyric();
         return this;
     }
     _setLyric() {
-        this.drawer.innerHTML = ((lyricNodes => {
+        [this.drawer.innerHTML, this.backgroundDrawer.innerHTML] = ((lyricNodes => {
             let domstring = "";
             for (let i = lyricNodes.length - 1; i >= 0; i--) {
                 domstring = `<span id="node_${i}">${lyricNodes[i].content}</span>` + domstring;
             }
-            return domstring;
+            return [domstring, domstring];
         })(this.lyricNodes.nodes));
-        this.drawer.insertBefore(this.pointer, this.shadow.getElementById("node_0"));
     }
 }
 function style(styleText, ...other) {

diff --git a/src/caraoke.ts b/src/caraoke.ts
@@ -1,5 +1,5 @@
 import { Option, LyricItem, LyricNode } from "./caraoke.interface.js";
-import { checkIfTimePointIsOfTheObject, DivisionSearch } from "./library.js";
+import { checkIfTimePointIsOfTheObject, DivisionSearch, findPercentage } from "./library.js";
 import CaraokeView from "./view.js";
 /**
  * Module `Caraoke` 
@@ -38,9 +38,9 @@ export default class Caraoke {
         }
         let FoundLyricNode;
         if (this.now.item) FoundLyricNode = DivisionSearch((el) => checkIfTimePointIsOfTheObject(time, { node: el, item: this.now.item }), this.now.item.nodes);
-        if (FoundLyricNode !== this.now.node && FoundLyricNode) {
+        if (/*FoundLyricNode !== this.now.node &&*/ FoundLyricNode) {
             this.now.node = FoundLyricNode;
-            this.view.setNode(FoundLyricNode);
+            this.view.setNode(FoundLyricNode, findPercentage(FoundLyricNode, FoundLyricItem, time));
         }
     }
 }
diff --git a/src/library.ts b/src/library.ts
@@ -27,6 +27,10 @@ export function checkIfTimePointIsOfTheObject(
         || !afterStart && -1;
 }
 
+export function findPercentage(node: LyricNode, item: LyricItem, time: number) {
+    return (time - item.start - node.start) / (node.end - node.start);
+}
+
 export function DivisionSearch<T>(
     checker: (el: T) => number,
     arr: T[]): T | null {

diff --git a/src/view.ts b/src/view.ts
@@ -5,7 +5,7 @@ export default class CaraokeView extends HTMLElement {
     private lyricNodes: LyricItem;
     private shadow: ShadowRoot;
     private drawer: HTMLDivElement;
-    private pointer: HTMLSpanElement;
+    private backgroundDrawer: HTMLDivElement;
     static install() {
         if (isInstalled) return;
         window.customElements.define("caraoke-view", CaraokeView);
@@ -14,38 +14,44 @@ export default class CaraokeView extends HTMLElement {
     constructor() {
         super();
         this.shadow = this.attachShadow({ mode: "closed" });
-        this.pointer = document.createElement("span");
-        this.pointer.id = "pointer";
         this.drawer = document.createElement("div");
         this.drawer.id = "drawer";
+        this.backgroundDrawer = document.createElement("div");
+        this.backgroundDrawer.id = "backgroundDrawer";
 
         this.shadow.appendChild(style`
             #pointer{
                 display:none;
             }
-            #drawer > * {
+            #drawer {
+                position: absolute;
+            }
+            #backgroundDrawer > *, #drawer > * {
                 color: red;
                 text-shadow: 0 0 0.1em red;
-                transition: color .5s;
-                font-size: 5em;
+                clip-path: inset(0 100% 0 0);
+                font-size: 3em;
                 font-family: caraoke-custom-font, "Source Han Serif","STZhongSong","Yu Mincho", serif;
                 font-weight: 900;
             }
-            #drawer > #pointer ~ * {
+            #backgroundDrawer > * {
                 color: white;
                 text-shadow: 0 0 0.1em grey;
+                clip-path: none;
             }
         `);
         this.shadow.appendChild(this.drawer);
+        this.shadow.appendChild(this.backgroundDrawer);
     }
-    public setNode(node: LyricNode) {
+    public setNode(node: LyricNode, percentage: number) {
         let point = 0;
         "content" in node && (point = this.lyricNodes.nodes.findIndex(p => p === node));
-        this._setNode(point);
+        this._setNode(point, percentage);
         return this;
     }
-    private _setNode(point: number) {
-        this.drawer.insertBefore(this.pointer, this.shadow.getElementById("node_" + (point + 1)));
+    private _setNode(point: number, percentage: number) {
+        (point-1)>=0&&(this.shadow.getElementById("node_" + (point-1)).style["clipPath"] = "inset(0 0 0 0)");
+        this.shadow.getElementById("node_" + point).style["clipPath"] = "inset(0 " + parseInt((1 - percentage) * 100 as any) + "% 0 0)";
     }
     public setLyric(lyric: LyricItem) {
         "nodes" in lyric && (this.lyricNodes = lyric);
@@ -58,14 +64,13 @@ export default class CaraokeView extends HTMLElement {
      * pointer,node_0,node_1,...node_another?
      */
     private _setLyric() {
-        this.drawer.innerHTML = ((lyricNodes => {
+        [this.drawer.innerHTML, this.backgroundDrawer.innerHTML] = ((lyricNodes => {
             let domstring = "";
             for (let i = lyricNodes.length - 1; i >= 0; i--) {
                 domstring = `<span id="node_${i}">${lyricNodes[i].content}</span>` + domstring
             }
-            return domstring;
-        })(this.lyricNodes.nodes))
-        this.drawer.insertBefore(this.pointer, this.shadow.getElementById("node_0"));
+            return [domstring, domstring];
+        })(this.lyricNodes.nodes));
     }
 }
 function style(styleText: any, ...other: any[]) {