@xpadev-net/niconicomments 0.0.8 → 0.1.0

package/LICENSE

@@ -1,11 +1,7 @@
-The MIT License
-===============
-
 Copyright (c) 2021 xpadev https://xpadev.net
 
-以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
-上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。
-作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
 # [niconicomments](https://xpadev.net/niconicomments/)
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xpadev_net/niconicomments/LICENSE)  
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)  
 ニコニコ動画の公式プレイヤーに多少の互換性を持つコメント描画ライブラリです  
 This is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.  
 Reference： https://xpadev.net/niconicomments/docs/  
@@ -7,7 +7,11 @@ Github： https://github.com/xpadev-net/niconicomments
 
 ## Installation
 ```html
-<script src="https://cdn.jsdelivr.net/npm/niconicomments@latest/src/main.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
+```
+or
+```
+npm i @xpadev-net/niconicomments
 ```
 
 ## Examples

package/dist/bundle.js

@@ -20,7 +20,21 @@
         this.context.textBaseline = "top";
         this.context.lineWidth = "6";
         this.commentYOffset = 0.25;
-        this.commentYMarginTop = 0.05;
+        this.commentYMarginTop = 10;
+        this.fontSize = {
+          "small": {
+            "default": 45,
+            "resized": 20
+          },
+          "medium": {
+            "default": 70,
+            "resized": 35
+          },
+          "big": {
+            "default": 120,
+            "resized": 57.5
+          }
+        };
 
         if (formatted) {
           this.data = data;
@@ -30,6 +44,7 @@
 
         this.showCollision = false;
         this.showFPS = false;
+        this.showCommentCount = false;
         this.timeline = {};
         this.nicoScripts = {
           "reverse": []
@@ -61,18 +76,19 @@
           for (let key in data[i]) {
             let value = data[i][key];
 
-            if (key === "chat") {
+            if (key === "chat" && value["deleted"] !== 1) {
               let tmpParam = {
                 "id": value["no"],
                 "vpos": value["vpos"],
                 "content": value["content"],
                 "date": value["date"],
                 "date_usec": value["date_usec"],
-                "owner": !value["user_id"]
+                "owner": !value["user_id"],
+                "premium": value["premium"] === 1
               };
 
               if (value["mail"]) {
-                tmpParam["mail"] = value["mail"].split(" ");
+                tmpParam["mail"] = value["mail"].split(/[\s　]/g);
               } else {
                 tmpParam["mail"] = [];
               }
@@ -119,7 +135,8 @@
           this.data[i].color = command.color;
           this.data[i].full = command.full;
           this.data[i].ender = command.ender;
-          this.data[i].content = this.data[i].content.replaceAll("\t", "       ").replaceAll(/(\n){3,}/g, "\n\n\n");
+          this.data[i]._live = command._live;
+          this.data[i].content = this.data[i].content.replaceAll("\t", "       ");
         }
       }
       /**
@@ -348,20 +365,31 @@
 
 
       measureText(comment) {
-        let msg = comment.content;
-
-        if (!comment.defaultFontSize) {
-          comment.defaultFontSize = comment.fontSize;
-        } else {
-          this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
-        }
-
         let width,
             width_max,
             width_min,
             height,
             width_arr = [],
-            lines = msg.split("\n");
+            lines = comment.content.split("\n");
+
+        if (!comment.resized && !comment.ender) {
+          if (comment.size === "big" && lines.length > 2) {
+            comment.fontSize = this.fontSize.big.resized;
+            comment.resized = true;
+            comment.tateRisized = true;
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+          } else if (comment.size === "medium" && lines.length > 4) {
+            comment.fontSize = this.fontSize.medium.resized;
+            comment.resized = true;
+            comment.tateRisized = true;
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+          } else if (comment.size === "small" && lines.length > 6) {
+            comment.fontSize = this.fontSize.small.resized;
+            comment.resized = true;
+            comment.tateRisized = true;
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+          }
+        }
 
         for (let i = 0; i < lines.length; i++) {
           let measure = this.context.measureText(lines[i]);
@@ -371,22 +399,39 @@
         width = width_arr.reduce((p, c) => p + c, 0) / width_arr.length;
         width_max = Math.max(...width_arr);
         width_min = Math.min(...width_arr);
-        height = comment.fontSize * (this.commentYMarginTop + 1) * lines.length;
+        height = (comment.fontSize + this.commentYMarginTop) * lines.length;
 
-        if (height > 1080) {
-          comment.fontSize -= 1;
+        if (comment.loc !== "naka" && !comment.tateRisized) {
+          if (comment.full && width_max > 1920) {
+            comment.fontSize -= 1;
+            comment.resized = true;
+            comment.yokoResized = true;
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+            return this.measureText(comment);
+          } else if (!comment.full && width_max > 1440) {
+            comment.fontSize -= 1;
+            comment.resized = true;
+            comment.yokoResized = true;
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+            return this.measureText(comment);
+          }
+        } else if (comment.tateRisized && (comment.full && width_max > 1920 || !comment.full && width_max > 1440) && !comment.yokoResized) {
+          comment.fontSize = this.fontSize[comment.size].default;
           comment.resized = true;
+          comment.yokoResized = true;
           this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
           return this.measureText(comment);
-        } else if (comment.loc !== "naka" && (lines.length < 3 && comment.size === "big" || lines.length < 5 && comment.size === "medium" || lines.length < 7 && comment.size === "small" || comment.ender)) {
-          if (comment.full && width > 1920) {
+        } else if (comment.tateRisized && comment.yokoResized) {
+          if (comment.full && width_max > 3420) {
             comment.fontSize -= 1;
             comment.resized = true;
+            comment.yokoResized = true;
             this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
             return this.measureText(comment);
-          } else if (!comment.full && width > 1440) {
+          } else if (!comment.full && width_max > 2940) {
             comment.fontSize -= 1;
             comment.resized = true;
+            comment.yokoResized = true;
             this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
             return this.measureText(comment);
           }
@@ -426,29 +471,25 @@
         let lines = comment.content.split("\n"),
             posX = (1920 - comment.width_max) / 2;
 
-        if (comment.loc === "naka") {
-          if (reverse) {
-            posX = (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
-          } else {
-            posX = 1920 - (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
-          }
-
+        if (comment.loc === "shita") {
           for (let i in lines) {
             let line = lines[i];
-            let posY = comment.posY + i * comment.fontSize * (1 + this.commentYMarginTop) + this.commentYOffset * comment.fontSize;
+            let posY = 1080 - comment.posY + i * (comment.fontSize + this.commentYMarginTop) - comment.height + this.commentYOffset * comment.fontSize;
             this.context.strokeText(line, posX, posY);
             this.context.fillText(line, posX, posY);
           }
-        } else if (comment.loc === "ue") {
-          for (let i in lines) {
-            let line = lines[i];
-            this.context.strokeText(line, posX, comment.posY + i * comment.fontSize + this.commentYOffset * comment.fontSize + this.commentYMarginTop * comment.fontSize);
-            this.context.fillText(line, posX, comment.posY + i * comment.fontSize + this.commentYOffset * comment.fontSize + this.commentYMarginTop * comment.fontSize);
+        } else {
+          if (comment.loc === "naka") {
+            if (reverse) {
+              posX = (1920 + comment.width_max) * (vpos - comment.vpos) / 500 - comment.width_max;
+            } else {
+              posX = 1920 - (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
+            }
           }
-        } else if (comment.loc === "shita") {
+
           for (let i in lines) {
             let line = lines[i];
-            let posY = 1080 - (comment.posY + comment.height) + i * comment.fontSize - this.commentYMarginTop * comment.fontSize + this.commentYMarginTop * comment.fontSize;
+            let posY = comment.posY + i * (comment.fontSize + this.commentYMarginTop) + this.commentYOffset * comment.fontSize;
             this.context.strokeText(line, posX, posY);
             this.context.fillText(line, posX, posY);
           }
@@ -469,7 +510,7 @@
       /**
        * コメントに含まれるコマンドを解釈する
        * @param comment- 独自フォーマットのコメントデータ
-       * @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean}}
+       * @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean, _live: boolean}}
        */
 
 
@@ -477,12 +518,13 @@
         let metadata = comment.mail,
             loc = "naka",
             size = "medium",
-            fontSize = 70,
-            color = "#FFFFFF",
+            fontSize = this.fontSize.medium.default,
+            color = "#ffffff",
             font = 'defont',
             full = false,
             ender = false,
-            reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/);
+            reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/),
+            _live = false;
 
         if (reverse) {
           if (!reverse[1]) {
@@ -513,7 +555,7 @@
         }
 
         for (let i in metadata) {
-          let command = metadata[i];
+          let command = metadata[i].toLowerCase();
 
           if (loc === "naka") {
             switch (command) {
@@ -531,18 +573,22 @@
             switch (command) {
               case "big":
                 size = "big";
-                fontSize = 100;
+                fontSize = this.fontSize.big.default;
                 break;
 
               case "small":
                 size = "small";
-                fontSize = 50;
+                fontSize = this.fontSize.small.default;
                 break;
             }
           }
 
-          if (color === "#FFFFFF") {
+          if (color === "#ffffff") {
             switch (command) {
+              case "white":
+                color = "#FFFFFF";
+                break;
+
               case "red":
                 color = "#FF0000";
                 break;
@@ -627,12 +673,13 @@
                 break;
 
               default:
-                const match = command.match(/#[0-9a-zA-Z]{3,6}/);
+                const match = command.match(/#[0-9a-z]{3,6}/);
 
-                if (match) {
-                  color = match[0];
+                if (match && comment.premium) {
+                  color = match[0].toUpperCase();
                 }
 
+                break;
             }
           }
 
@@ -656,6 +703,9 @@
             case "ender":
               ender = true;
               break;
+
+            case "_live":
+              _live = true;
           }
         }
 
@@ -666,7 +716,8 @@
           color,
           font,
           full,
-          ender
+          ender,
+          _live
         };
       }
       /**
@@ -682,7 +733,13 @@
         for (let index in this.timeline[vpos]) {
           let comment = this.data[this.timeline[vpos][index]];
           this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
-          this.context.fillStyle = comment.color;
+
+          if (comment._live) {
+            let rgb = hex2rgb(comment.color);
+            this.context.fillStyle = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},0.5)`;
+          } else {
+            this.context.fillStyle = comment.color;
+          }
 
           if (comment.color === "#000000") {
             this.context.strokeStyle = "rgba(255,255,255,0.7)";
@@ -701,6 +758,13 @@
           this.context.strokeText("FPS:" + this.fps, 100, 100);
           this.context.fillText("FPS:" + this.fps, 100, 100);
         }
+
+        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);
+        }
       }
       /**
        * キャンバスを消去する
@@ -784,6 +848,20 @@
 
       array[key].push(push);
     };
+    /**
+     * Hexからrgbに変換する(_live用)
+     * @param {string} hex
+     * @return {array} RGB
+     */
+
+
+    const hex2rgb = hex => {
+      if (hex.slice(0, 1) === "#") hex = hex.slice(1);
+      if (hex.length === 3) hex = hex.slice(0, 1) + hex.slice(0, 1) + hex.slice(1, 2) + hex.slice(1, 2) + hex.slice(2, 3) + hex.slice(2, 3);
+      return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map(function (str) {
+        return parseInt(str, 16);
+      });
+    };
 
     return NiconiComments;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "scripts": {
@@ -22,11 +22,12 @@
   "files": [
     "dist/bundle.js"
   ],
-  "homepage": "https://xpadev.net/",
+  "homepage": "https://xpadev.net/niconicomments/docs/",
   "license": "MIT",
   "devDependencies": {
-    "babel-preset-es2015-rollup": "^3.0.0",
-    "rollup": "^2.60.2",
-    "rollup-plugin-babel": "^4.4.0"
+    "rollup": "^2.61.1"
+  },
+  "dependencies": {
+    "@rollup/plugin-babel": "^5.3.0"
   }
 }