@xpadev-net/niconicomments 0.0.11 → 0.1.5

package/dist/bundle.js

@@ -1,3 +1,8 @@
+/*!
+  niconicomments.js v0.1.5
+  (c) 2021 xpadev-net https://xpadevn.et
+  Released under the MIT License.
+*/
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
@@ -18,9 +23,50 @@
         this.context.strokeStyle = "rgba(0,0,0,0.7)";
         this.context.textAlign = "left";
         this.context.textBaseline = "top";
-        this.context.lineWidth = "6";
-        this.commentYOffset = 0.25;
-        this.commentYMarginTop = 0.05;
+        this.context.lineWidth = 2;
+
+        if (useLegacy) {
+          this.commentYOffset = 0.25;
+        } else {
+          this.commentYOffset = 0.2;
+        }
+
+        this.commentYMarginTop = 0.08;
+        this.fontSize = {
+          "small": {
+            "default": 47,
+            "resized": 27.5
+          },
+          "medium": {
+            "default": 76,
+            "resized": 39
+          },
+          "big": {
+            "default": 118,
+            "resized": 62.5
+          }
+        };
+        this.defaultCommandValue = {
+          loc: "naka",
+          size: "medium",
+          fontSize: this.fontSize.medium.default,
+          color: "#ffffff",
+          font: 'defont',
+          full: false,
+          ender: false,
+          _live: false,
+          invisible: false
+        };
+        this.doubleResizeMaxWidth = {
+          full: {
+            legacy: 3020,
+            default: 3220
+          },
+          normal: {
+            legacy: 2540,
+            default: 2740
+          }
+        };
 
         if (formatted) {
           this.data = data;
@@ -33,7 +79,8 @@
         this.showCommentCount = false;
         this.timeline = {};
         this.nicoScripts = {
-          "reverse": []
+          "reverse": [],
+          "default": []
         };
         this.collision_right = {};
         this.collision_left = {};
@@ -62,18 +109,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"] = [];
               }
@@ -112,7 +160,7 @@
       getFont() {
         for (let i in this.data) {
           let comment = this.data[i];
-          let command = this.parseCommand(comment);
+          let command = this.parseCommandAndNicoscript(comment);
           this.data[i].loc = command.loc;
           this.data[i].size = command.size;
           this.data[i].fontSize = command.fontSize;
@@ -120,7 +168,10 @@
           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].long = command.long;
+          this.data[i].invisible = command.invisible;
+          this.data[i].content = this.data[i].content.replaceAll("\t", "       ");
         }
       }
       /**
@@ -137,6 +188,11 @@
 
             for (let k in tmpData[i][j]) {
               let comment = tmpData[i][j][k];
+
+              if (comment.invisible) {
+                continue;
+              }
+
               let measure = this.measureText(comment);
               this.data[comment.index].height = measure.height;
               this.data[comment.index].width = measure.width;
@@ -162,6 +218,10 @@
         for (let i in data) {
           let comment = data[i];
 
+          if (comment.invisible) {
+            continue;
+          }
+
           for (let j = 0; j < 500; j++) {
             if (!this.timeline[comment.vpos + j]) {
               this.timeline[comment.vpos + j] = [];
@@ -192,73 +252,77 @@
                 is_change = true,
                 count = 0;
 
-            while (is_change && count < 10) {
-              is_change = false;
-              count++;
-
-              for (let j = 0; j < 500; j++) {
-                let vpos = comment.vpos + j;
-                let left_pos = 1920 - (1920 + comment.width_max) * j / 500;
+            if (1080 < comment.height) {
+              posY = (comment.height - 1080) / -2;
+            } else {
+              while (is_change && count < 10) {
+                is_change = false;
+                count++;
+
+                for (let j = 0; j < 500; j++) {
+                  let vpos = comment.vpos + j;
+                  let left_pos = 1920 - (1920 + comment.width_max) * j / 500;
+
+                  if (left_pos + comment.width_max >= 1880) {
+                    for (let k in this.collision_right[vpos]) {
+                      let l = this.collision_right[vpos][k];
+
+                      if (posY < data[l].posY + data[l].height && posY + comment.height > data[l].posY && data[l].owner === comment.owner) {
+                        if (data[l].posY + data[l].height > posY) {
+                          posY = data[l].posY + data[l].height;
+                          is_change = true;
+                        }
 
-                if (left_pos + comment.width_max >= 1880) {
-                  for (let k in this.collision_right[vpos]) {
-                    let l = this.collision_right[vpos][k];
+                        if (posY + comment.height > 1080) {
+                          if (1080 < comment.height) {
+                            posY = (comment.height - 1080) / -2;
+                          } else {
+                            posY = Math.floor(Math.random() * (1080 - comment.height));
+                          }
 
-                    if (posY < data[l].posY + data[l].height && posY + comment.height > data[l].posY && data[l].owner === comment.owner) {
-                      if (data[l].posY + data[l].height > posY) {
-                        posY = data[l].posY + data[l].height;
-                        is_change = true;
-                      }
-
-                      if (posY + comment.height > 1080) {
-                        if (1080 < comment.height) {
-                          posY = 0;
-                        } else {
-                          posY = Math.floor(Math.random() * (1080 - comment.height));
+                          is_break = true;
+                          break;
                         }
-
-                        is_break = true;
-                        break;
                       }
                     }
-                  }
 
-                  if (is_break) {
-                    break;
+                    if (is_break) {
+                      break;
+                    }
                   }
-                }
 
-                if (left_pos <= 40 && is_break === false) {
-                  for (let k in this.collision_left[vpos]) {
-                    let l = this.collision_left[vpos][k];
-
-                    if (posY < data[l].posY + data[l].height && posY + comment.height > data[l].posY && data[l].owner === comment.owner) {
-                      if (data[l].posY + data[l].height > posY) {
-                        posY = data[l].posY + data[l].height;
-                        is_change = true;
-                      }
+                  if (left_pos <= 40 && is_break === false) {
+                    for (let k in this.collision_left[vpos]) {
+                      let l = this.collision_left[vpos][k];
 
-                      if (posY + comment.height > 1080) {
-                        if (1080 < comment.height) {
-                          posY = 0;
-                        } else {
-                          posY = Math.random() * (1080 - comment.height);
+                      if (posY < data[l].posY + data[l].height && posY + comment.height > data[l].posY && data[l].owner === comment.owner) {
+                        if (data[l].posY + data[l].height > posY) {
+                          posY = data[l].posY + data[l].height;
+                          is_change = true;
                         }
 
-                        is_break = true;
-                        break;
+                        if (posY + comment.height > 1080) {
+                          if (1080 < comment.height) {
+                            posY = 0;
+                          } else {
+                            posY = Math.random() * (1080 - comment.height);
+                          }
+
+                          is_break = true;
+                          break;
+                        }
                       }
                     }
+
+                    if (is_break) {
+                      break;
+                    }
                   }
 
                   if (is_break) {
                     break;
                   }
                 }
-
-                if (is_break) {
-                  break;
-                }
               }
             }
 
@@ -325,7 +389,7 @@
               }
             }
 
-            for (let j = 0; j < 300; j++) {
+            for (let j = 0; j < comment.long; j++) {
               let vpos = comment.vpos + j;
               arrayPush(this.timeline, vpos, i);
 
@@ -349,20 +413,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 +447,35 @@
         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 * comment.fontSize) * lines.length;
 
-        if (height > 1080) {
-          comment.fontSize -= 1;
-          comment.resized = 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) {
+        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 > 1440) {
+          } 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.loc !== "naka" && 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" && comment.tateRisized && comment.yokoResized) {
+          if (comment.full && width_max > this.doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
+            comment.fontSize -= 1;
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+            return this.measureText(comment);
+          } else if (!comment.full && width_max > this.doubleResizeMaxWidth.normal[this.useLegacy ? "legacy" : "default"]) {
+            comment.fontSize -= 1.;
             this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
             return this.measureText(comment);
           }
@@ -433,30 +521,10 @@
           } else {
             posX = 1920 - (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
           }
-
-          for (let i in lines) {
-            let line = lines[i];
-            let posY = comment.posY + i * comment.fontSize * (1 + this.commentYMarginTop) + 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 === "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;
-            this.context.strokeText(line, posX, posY);
-            this.context.fillText(line, posX, posY);
-          }
         }
 
         if (this.showCollision) {
-          this.context.strokeStyle = "rgba(255,255,0,1)";
+          this.context.strokeStyle = "rgba(0,255,255,1)";
 
           if (comment.loc === "shita") {
             this.context.strokeRect(posX, 1080 - comment.posY - comment.height, comment.width_max, comment.height);
@@ -464,59 +532,67 @@
             this.context.strokeRect(posX, comment.posY, comment.width_max, comment.height);
           }
 
-          this.context.strokeStyle = "rgba(0,0,0,0.7)";
+          if (comment.color === "#000000") {
+            this.context.strokeStyle = "rgba(255,255,255,0.7)";
+          } else {
+            this.context.strokeStyle = "rgba(0,0,0,0.7)";
+          }
+        }
+
+        for (let i in lines) {
+          let line = lines[i],
+              posY;
+
+          if (comment.loc === "shita") {
+            posY = 1080 - comment.posY + i * (comment.fontSize + this.commentYMarginTop * comment.fontSize) - comment.height + this.commentYOffset * comment.fontSize;
+          } else {
+            posY = comment.posY + i * (comment.fontSize + this.commentYMarginTop * comment.fontSize) + this.commentYOffset * comment.fontSize;
+          }
+
+          this.context.strokeText(line, posX, posY);
+          this.context.fillText(line, posX, posY);
+
+          if (this.showCollision) {
+            this.context.strokeStyle = "rgba(255,255,0,0.5)";
+            this.context.strokeRect(posX, posY, comment.width_max, comment.fontSize);
+
+            if (comment.color === "#000000") {
+              this.context.strokeStyle = "rgba(255,255,255,0.7)";
+            } else {
+              this.context.strokeStyle = "rgba(0,0,0,0.7)";
+            }
+          }
         }
       }
       /**
        * コメントに含まれるコマンドを解釈する
        * @param comment- 独自フォーマットのコメントデータ
-       * @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean}}
+       * @returns {{loc: string|null, size: string|null, color: string|null, fontSize: number|null, ender: boolean, font: string|null, full: boolean, _live: boolean, invisible: boolean, long:number|null}}
        */
 
 
       parseCommand(comment) {
         let metadata = comment.mail,
-            loc = "naka",
-            size = "medium",
-            fontSize = 70,
-            color = "#FFFFFF",
-            font = 'defont',
+            loc = null,
+            size = null,
+            fontSize = null,
+            color = null,
+            font = null,
             full = false,
             ender = false,
-            reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/);
+            _live = false,
+            invisible = false,
+            long = null;
 
-        if (reverse) {
-          if (!reverse[1]) {
-            reverse[1] = "全";
-          }
-
-          let length = false;
-
-          for (let i in metadata) {
-            let match = metadata[i].match(/@([0-9]+)/);
-
-            if (match) {
-              length = match[1];
-              break;
-            }
-          }
+        for (let i in metadata) {
+          let command = metadata[i].toLowerCase();
+          const match = command.match(/^@([0-9.]+)/);
 
-          if (!length) {
-            length = 30;
+          if (match) {
+            long = match[1];
           }
 
-          this.nicoScripts.reverse.push({
-            "start": comment.vpos,
-            "end": comment.vpos + length * 100,
-            "target": reverse[1]
-          });
-          fontSize = 0;
-        }
-
-        for (let i in metadata) {
-          let command = metadata[i];
-
-          if (loc === "naka") {
+          if (loc === null) {
             switch (command) {
               case "ue":
                 loc = "ue";
@@ -528,22 +604,26 @@
             }
           }
 
-          if (size === "medium") {
+          if (size === null) {
             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 === null) {
             switch (command) {
+              case "white":
+                color = "#FFFFFF";
+                break;
+
               case "red":
                 color = "#FF0000";
                 break;
@@ -628,16 +708,17 @@
                 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;
             }
           }
 
-          if (font === 'defont') {
+          if (font === null) {
             switch (command) {
               case "gothic":
                 font = "gothic";
@@ -657,6 +738,14 @@
             case "ender":
               ender = true;
               break;
+
+            case "_live":
+              _live = true;
+              break;
+
+            case "invisible":
+              invisible = true;
+              break;
           }
         }
 
@@ -667,9 +756,107 @@
           color,
           font,
           full,
-          ender
+          ender,
+          _live,
+          invisible,
+          long
         };
       }
+
+      parseCommandAndNicoscript(comment) {
+        let data = this.parseCommand(comment),
+            nicoscript = comment.content.match(/^@(デフォルト|置換|逆|コメント禁止|シーク禁止|ジャンプ)/);
+
+        if (nicoscript) {
+          switch (nicoscript[1]) {
+            case "デフォルト":
+              this.nicoScripts.default.push({
+                start: comment.vpos,
+                long: data.long === null ? null : Math.floor(data.long * 100),
+                color: data.color,
+                size: data.size,
+                font: data.font,
+                loc: data.loc
+              });
+              break;
+
+            case "逆":
+              let reverse = comment.content.match(/^@逆 ?(全|コメ|投コメ)?/);
+
+              if (!reverse[1]) {
+                reverse[1] = "全";
+              }
+
+              if (data.long === null) {
+                data.long = 30;
+              }
+
+              this.nicoScripts.reverse.push({
+                "start": comment.vpos,
+                "end": comment.vpos + data.long * 100,
+                "target": reverse[1]
+              });
+              break;
+          }
+
+          data.invisible = true;
+        }
+
+        let color = "#FFFFFF",
+            size = "medium",
+            font = "defont",
+            loc = "naka";
+
+        for (let i in this.nicoScripts.default) {
+          if (this.nicoScripts.default[i].long !== null && this.nicoScripts.default[i].start + this.nicoScripts.default[i].long < comment.vpos) {
+            this.nicoScripts.default = this.nicoScripts.default.splice(Number(i), 1);
+            continue;
+          }
+
+          if (this.nicoScripts.default[i].loc) {
+            loc = this.nicoScripts.default[i].loc;
+          }
+
+          if (this.nicoScripts.default[i].color) {
+            color = this.nicoScripts.default[i].color;
+          }
+
+          if (this.nicoScripts.default[i].size) {
+            size = this.nicoScripts.default[i].size;
+          }
+
+          if (this.nicoScripts.default[i].font) {
+            font = this.nicoScripts.default[i].font;
+          }
+        }
+
+        if (!data.loc) {
+          data.loc = loc;
+        }
+
+        if (!data.color) {
+          data.color = color;
+        }
+
+        if (!data.size) {
+          data.size = size;
+          data.fontSize = this.fontSize[data.size].default;
+        }
+
+        if (!data.font) {
+          data.font = font;
+        }
+
+        if (data.loc !== "naka") {
+          if (!data.long) {
+            data.long = 300;
+          } else {
+            data.long = Math.floor(data.long * 100);
+          }
+        }
+
+        return data;
+      }
       /**
        * キャンバスを描画する
        * @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
@@ -680,19 +867,32 @@
         this.fpsCount++;
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-        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 (this.timeline[vpos]) {
+          for (let index in this.timeline[vpos]) {
+            let comment = this.data[this.timeline[vpos][index]];
 
-          if (comment.color === "#000000") {
-            this.context.strokeStyle = "rgba(255,255,255,0.7)";
-          }
+            if (comment.invisible) {
+              continue;
+            }
 
-          this.drawText(comment, vpos);
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
 
-          if (comment.color === "#000000") {
-            this.context.strokeStyle = "rgba(0,0,0,0.7)";
+            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)";
+            }
+
+            this.drawText(comment, vpos);
+
+            if (comment.color === "#000000") {
+              this.context.strokeStyle = "rgba(0,0,0,0.7)";
+            }
           }
         }
 
@@ -792,6 +992,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.5",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "scripts": {