@xpadev-net/niconicomments 0.1.0 → 0.1.6

package/dist/bundle.js

@@ -1,3 +1,8 @@
+/*!
+  niconicomments.js v0.1.6
+  (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,21 +23,48 @@
         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 = 10;
+        this.context.lineWidth = 2;
+
+        if (useLegacy) {
+          this.commentYOffset = 0.25;
+        } else {
+          this.commentYOffset = 0.2;
+        }
+
+        this.commentYMarginTop = 0.08;
         this.fontSize = {
           "small": {
-            "default": 45,
-            "resized": 20
+            "default": 47,
+            "resized": 27.5
           },
           "medium": {
-            "default": 70,
-            "resized": 35
+            "default": 76,
+            "resized": 39
           },
           "big": {
-            "default": 120,
-            "resized": 57.5
+            "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
           }
         };
 
@@ -47,7 +79,8 @@
         this.showCommentCount = false;
         this.timeline = {};
         this.nicoScripts = {
-          "reverse": []
+          "reverse": [],
+          "default": []
         };
         this.collision_right = {};
         this.collision_left = {};
@@ -118,6 +151,7 @@
         this.getFont();
         this.getCommentSize();
         this.getCommentPos();
+        this.sortComment();
       }
       /**
        * コマンドをもとに各コメントに適用するフォントを決定する
@@ -127,7 +161,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;
@@ -136,6 +170,8 @@
           this.data[i].full = command.full;
           this.data[i].ender = command.ender;
           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", "       ");
         }
       }
@@ -153,6 +189,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;
@@ -178,6 +219,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] = [];
@@ -208,73 +253,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 (left_pos + comment.width_max >= 1880) {
-                  for (let k in this.collision_right[vpos]) {
-                    let l = this.collision_right[vpos][k];
+            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 (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 = (comment.height - 1080) / -2;
+                          } else {
+                            posY = Math.floor(Math.random() * (1080 - comment.height));
+                          }
 
-                      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 (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 (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;
-                }
               }
             }
 
@@ -341,7 +390,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);
 
@@ -356,6 +405,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の複数行対応版
        * 画面外にはみ出すコメントの縮小も行う
@@ -399,7 +465,7 @@
         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) * lines.length;
+        height = (comment.fontSize + this.commentYMarginTop * comment.fontSize) * lines.length;
 
         if (comment.loc !== "naka" && !comment.tateRisized) {
           if (comment.full && width_max > 1920) {
@@ -415,23 +481,19 @@
             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) {
+        } 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.tateRisized && comment.yokoResized) {
-          if (comment.full && width_max > 3420) {
+        } else if (comment.loc !== "naka" && comment.tateRisized && comment.yokoResized) {
+          if (comment.full && width_max > this.doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
             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 > 2940) {
-            comment.fontSize -= 1;
-            comment.resized = true;
-            comment.yokoResized = true;
+          } 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);
           }
@@ -471,32 +533,16 @@
         let lines = comment.content.split("\n"),
             posX = (1920 - comment.width_max) / 2;
 
-        if (comment.loc === "shita") {
-          for (let i in lines) {
-            let line = lines[i];
-            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 === "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;
-            }
-          }
-
-          for (let i in lines) {
-            let line = lines[i];
-            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);
+        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 (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);
@@ -504,60 +550,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, _live: 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 = this.fontSize.medium.default,
-            color = "#ffffff",
-            font = 'defont',
+            loc = null,
+            size = null,
+            fontSize = null,
+            color = null,
+            font = null,
             full = false,
             ender = false,
-            reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/),
-            _live = false;
-
-        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;
-            }
-          }
-
-          if (!length) {
-            length = 30;
-          }
-
-          this.nicoScripts.reverse.push({
-            "start": comment.vpos,
-            "end": comment.vpos + length * 100,
-            "target": reverse[1]
-          });
-          fontSize = 0;
-        }
+            _live = false,
+            invisible = false,
+            long = null;
 
         for (let i in metadata) {
           let command = metadata[i].toLowerCase();
+          const match = command.match(/^@([0-9.]+)/);
 
-          if (loc === "naka") {
+          if (match) {
+            long = match[1];
+          }
+
+          if (loc === null) {
             switch (command) {
               case "ue":
                 loc = "ue";
@@ -569,7 +622,7 @@
             }
           }
 
-          if (size === "medium") {
+          if (size === null) {
             switch (command) {
               case "big":
                 size = "big";
@@ -583,7 +636,7 @@
             }
           }
 
-          if (color === "#ffffff") {
+          if (color === null) {
             switch (command) {
               case "white":
                 color = "#FFFFFF";
@@ -683,7 +736,7 @@
             }
           }
 
-          if (font === 'defont') {
+          if (font === null) {
             switch (command) {
               case "gothic":
                 font = "gothic";
@@ -706,6 +759,11 @@
 
             case "_live":
               _live = true;
+              break;
+
+            case "invisible":
+              invisible = true;
+              break;
           }
         }
 
@@ -717,9 +775,106 @@
           font,
           full,
           ender,
-          _live
+          _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倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
@@ -730,25 +885,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);
+        if (this.timeline[vpos]) {
+          for (let index in this.timeline[vpos]) {
+            let comment = this.data[this.timeline[vpos][index]];
 
-          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.invisible) {
+              continue;
+            }
 
-          if (comment.color === "#000000") {
-            this.context.strokeStyle = "rgba(255,255,255,0.7)";
-          }
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
 
-          this.drawText(comment, vpos);
+            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(0,0,0,0.7)";
+            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)";
+            }
           }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.1.0",
+  "version": "0.1.6",
   "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"
   }
 }