@xpadev-net/niconicomments 0.1.5 → 0.1.9

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.1.5
+  niconicomments.js v0.1.9
   (c) 2021 xpadev-net https://xpadevn.et
   Released under the MIT License.
 */
@@ -14,18 +14,21 @@
        * 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)";
         this.context.textAlign = "left";
         this.context.textBaseline = "top";
-        this.context.lineWidth = 2;
+        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"],
@@ -151,6 +155,7 @@
         this.getFont();
         this.getCommentSize();
         this.getCommentPos();
+        this.sortComment();
       }
       /**
        * コマンドをもとに各コメントに適用するフォントを決定する
@@ -404,6 +409,23 @@
           }
         }
       }
+
+      sortComment() {
+        for (let vpos in this.timeline) {
+          this.timeline[vpos].sort((a, b) => {
+            const A = this.data[a];
+            const B = this.data[b];
+
+            if (!A.owner && B.owner) {
+              return -1;
+            } else if (A.owner && !B.owner) {
+              return 1;
+            } else {
+              return 0;
+            }
+          });
+        }
+      }
       /**
        * context.measureTextの複数行対応版
        * 画面外にはみ出すコメントの縮小も行う
@@ -867,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]];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.1.5",
+  "version": "0.1.9",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "scripts": {
@@ -25,9 +25,7 @@
   "homepage": "https://xpadev.net/niconicomments/docs/",
   "license": "MIT",
   "devDependencies": {
-    "rollup": "^2.61.1"
-  },
-  "dependencies": {
+    "rollup": "^2.61.1",
     "@rollup/plugin-babel": "^5.3.0"
   }
 }