Merge pull request #98 from rinsuki/allow-float-vpos

feat: support non-int vpos
xpadev-net · Feb 19, 2024 · a4dcbf7 · a4dcbf7
2 parents 2ee674c + 7cd981d
commit a4dcbf7
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 18 deletions.
diff --git a/README.en.md b/README.en.md
@@ -33,7 +33,7 @@ const res = await req.json();
 const niconiComments = new NiconiComments(canvas, res);
 //If video.ontimeupdate is used, the comments will be choppy due to the small number of calls.
 setInterval(
-  () => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)),
+  () => niconiComments.drawCanvas(video.currentTime * 100),
   10
 );
 ```

diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ const res = await req.json();
 const niconiComments = new NiconiComments(canvas, res);
 //video.ontimeupdateを使用すると、呼び出し回数の関係でコメントカクつく
 setInterval(
-  () => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)),
+  () => niconiComments.drawCanvas(video.currentTime * 100),
   10
 );
 ```

diff --git a/docs/localize.js b/docs/localize.js
@@ -275,10 +275,8 @@ const localize = {
     `<p>addEventListenerで追加されたイベントハンドラを削除します</p>`,
   ],
   m_drawCanvas: [
-    `<p>Draws a comment on the canvas based on vpos(currentTime*100 of the video)</p>
-<p>vpos must be an integer (<span class="yellow">int</span>)</p>`,
-    `<p>vpos(動画のcurrentTime*100)を元にキャンバスにコメントを描画します</p>
-<p>vposは<span class="yellow">整数(int)</span>である必要があります</p>`,
+    `<p>Draws a comment on the canvas based on vpos(currentTime*100 of the video)</p>`,
+    `<p>vpos(動画のcurrentTime*100)を元にキャンバスにコメントを描画します</p>`,
   ],
   m_clear: [`<p>Erase Canvas</p>`, `<p>キャンバスを消去します</p>`],
   c_flash: [

diff --git a/docs/sample/sample.js b/docs/sample/sample.js
@@ -334,13 +334,11 @@ const updateTime = (currentTime, paused) => {
 const updateCanvas = () => {
   if (!nico) return;
   if (!videoMicroSec) {
-    nico.drawCanvas(Math.floor(currentTime * 100));
+    nico.drawCanvas(currentTime * 100);
   } else {
     nico.drawCanvas(
-        Math.floor(
-            (performance.now() - videoMicroSec.microsec) / 10 +
-            videoMicroSec.currentTime * 100
-        )
+        (performance.now() - videoMicroSec.microsec) / 10 +
+        videoMicroSec.currentTime * 100
     );
   }
 };

diff --git a/docs/sample/test.html b/docs/sample/test.html
@@ -20,7 +20,7 @@
     const nico = new NiconiComments(canvasElement, res, {
       format: "formatted",
     });
-    nico.drawCanvas(Math.floor(time * 100));
+    nico.drawCanvas(time * 100);
     const elem = document.createElement("div");
     elem.id = "loaded";
     document.body.appendChild(elem);

diff --git a/src/main.ts b/src/main.ts
@@ -53,6 +53,9 @@ class NiconiComments {
   public showFPS: boolean;
   public showCommentCount: boolean;
   private lastVpos: number;
+  private get lastVposInt() {
+    return Math.floor(this.lastVpos);
+  }
   private processedCommentIndex: number;
   private comments: IComment[];
   private readonly renderer: IRenderer;
@@ -281,21 +284,23 @@ class NiconiComments {
     forceRendering = false,
     cursor?: Position,
   ): boolean {
+    const vposInt = Math.floor(vpos);
     const drawCanvasStart = performance.now();
     if (this.lastVpos === vpos && !forceRendering) return false;
-    triggerHandler(vpos, this.lastVpos);
-    const timelineRange = this.timeline[vpos];
+    triggerHandler(vposInt, this.lastVposInt);
+    const timelineRange = this.timeline[vposInt];
     if (
       !forceRendering &&
       plugins.length === 0 &&
       timelineRange?.filter((item) => item.loc === "naka").length === 0 &&
-      this.timeline[this.lastVpos]?.filter((item) => item.loc === "naka")
+      this.timeline[this.lastVposInt]?.filter((item) => item.loc === "naka")
         ?.length === 0
     ) {
       const current = timelineRange.filter((item) => item.loc !== "naka"),
         last =
-          this.timeline[this.lastVpos]?.filter((item) => item.loc !== "naka") ??
-          [];
+          this.timeline[this.lastVposInt]?.filter(
+            (item) => item.loc !== "naka",
+          ) ?? [];
       if (arrayEqual(current, last)) return false;
     }
     this.renderer.clearRect(0, 0, config.canvasWidth, config.canvasHeight);
@@ -309,7 +314,7 @@ class NiconiComments {
         console.error(`Failed to draw comments`, e);
       }
     }
-    this._drawCollision(vpos);
+    this._drawCollision(vposInt);
     this._drawComments(timelineRange, vpos, cursor);
     this._drawFPS(drawCanvasStart);
     this._drawCommentCount(timelineRange?.length);