@xpadev-net/niconicomments 0.0.11 → 0.1.0

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;
@@ -62,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"] = [];
               }
@@ -120,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", "       ");
         }
       }
       /**
@@ -349,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]);
@@ -372,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);
           }
@@ -427,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 - comment.width_max;
-          } 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);
           }
@@ -470,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}}
        */
 
 
@@ -478,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]) {
@@ -514,7 +555,7 @@
         }
 
         for (let i in metadata) {
-          let command = metadata[i];
+          let command = metadata[i].toLowerCase();
 
           if (loc === "naka") {
             switch (command) {
@@ -532,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;
@@ -628,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;
             }
           }
 
@@ -657,6 +703,9 @@
             case "ender":
               ender = true;
               break;
+
+            case "_live":
+              _live = true;
           }
         }
 
@@ -667,7 +716,8 @@
           color,
           font,
           full,
-          ender
+          ender,
+          _live
         };
       }
       /**
@@ -683,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)";
@@ -792,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.11",
+  "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": {