@xpadev-net/niconicomments 0.1.7 → 0.1.10

package/dist/bundle.js

@@ -1,6 +1,6 @@
 /*!
-  niconicomments.js v0.1.7
-  (c) 2021 xpadev-net https://xpadevn.et
+  niconicomments.js v0.1.10
+  (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
 (function (global, factory) {
@@ -14,10 +14,13 @@
        * NiconiComments Constructor
        * @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
        * @param {[]} data - 描画用のコメント
-       * @param {boolean} useLegacy - defontにsans-serifを適用するか(trueでニコニコ公式に準拠)
-       * @param {boolean} formatted - dataが独自フォーマットに変換されているか
+       * @param {{useLegacy: boolean, formatted: boolean, video: HTMLVideoElement|null}} options - 細かい設定類
        */
-      constructor(canvas, data, useLegacy = false, formatted = false) {
+      constructor(canvas, data, options = {
+        useLegacy: false,
+        formatted: false,
+        video: null
+      }) {
         this.canvas = canvas;
         this.context = canvas.getContext("2d");
         this.context.strokeStyle = "rgba(0,0,0,0.7)";
@@ -25,7 +28,7 @@
         this.context.textBaseline = "top";
         this.context.lineWidth = 4;
 
-        if (useLegacy) {
+        if (options.useLegacy) {
           this.commentYOffset = 0.25;
         } else {
           this.commentYOffset = 0.2;
@@ -68,12 +71,13 @@
           }
         };
 
-        if (formatted) {
+        if (options.formatted) {
           this.data = data;
         } else {
           this.data = this.parseData(data);
         }
 
+        this.video = options.video ? options.video : null;
         this.showCollision = false;
         this.showFPS = false;
         this.showCommentCount = false;
@@ -86,7 +90,7 @@
         this.collision_left = {};
         this.collision_ue = {};
         this.collision_shita = {};
-        this.useLegacy = useLegacy;
+        this.useLegacy = options.useLegacy;
         this.preRendering();
         this.fpsCount = 0;
         this.fps = 0;
@@ -109,7 +113,7 @@
           for (let key in data[i]) {
             let value = data[i][key];
 
-            if (key === "chat" && value["deleted"] !== 1) {
+            if (key === "chat" && value["deleted"] !== 1 && !value["content"].startsWith("/")) {
               let tmpParam = {
                 "id": value["no"],
                 "vpos": value["vpos"],
@@ -172,7 +176,7 @@
           this.data[i]._live = command._live;
           this.data[i].long = command.long;
           this.data[i].invisible = command.invisible;
-          this.data[i].content = this.data[i].content.replaceAll("\t", "       ");
+          this.data[i].content = this.data[i].content.replaceAll("\t", "        ");
         }
       }
       /**
@@ -885,6 +889,24 @@
         this.fpsCount++;
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
+        if (this.video) {
+          let offsetX,
+              offsetY,
+              scale,
+              height = this.canvas.height / this.video.videoHeight,
+              width = this.canvas.width / this.video.videoWidth;
+
+          if (height > width) {
+            scale = width;
+          } else {
+            scale = height;
+          }
+
+          offsetX = (this.canvas.width - this.video.videoWidth * scale) * 0.5;
+          offsetY = (this.canvas.height - this.video.videoHeight * scale) * 0.5;
+          this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
+        }
+
         if (this.timeline[vpos]) {
           for (let index in this.timeline[vpos]) {
             let comment = this.data[this.timeline[vpos][index]];
@@ -924,8 +946,14 @@
         if (this.showCommentCount) {
           this.context.font = parseFont("defont", 60, this.useLegacy);
           this.context.fillStyle = "#00FF00";
-          this.context.strokeText("Count:" + this.timeline[vpos].length, 100, 200);
-          this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
+
+          if (this.timeline[vpos]) {
+            this.context.strokeText("Count:" + this.timeline[vpos].length, 100, 200);
+            this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
+          } else {
+            this.context.strokeText("Count:0", 100, 200);
+            this.context.fillText("Count:0", 100, 200);
+          }
         }
       }
       /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "scripts": {