@xpadev-net/niconicomments 0.1.4 → 0.1.8

package/LICENSE

@@ -1,7 +1,7 @@
-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.
+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,24 +1,24 @@
-# [niconicomments](https://xpadev.net/niconicomments/)
-[![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/  
-Github： https://github.com/xpadev-net/niconicomments  
-
-## Installation
-```html
-<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
-```
-or
-```
-npm i @xpadev-net/niconicomments
-```
-
-## Examples
-```javascript
-const niconiComments = new NiconiComments(canvas, comments);
-niconiComments.drawCanvas(vpos)
-```
-
-## Sample
-https://xpadev.net/niconicomments/sample.html
+# [niconicomments](https://xpadev.net/niconicomments/)
+[![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/  
+Github： https://github.com/xpadev-net/niconicomments  
+
+## Installation
+```html
+<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
+```
+or
+```
+npm i @xpadev-net/niconicomments
+```
+
+## Examples
+```javascript
+const niconiComments = new NiconiComments(canvas, comments);
+niconiComments.drawCanvas(vpos)
+```
+
+## Sample
+https://xpadev.net/niconicomments/sample.html

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.1.4
+  niconicomments.js v0.1.8
   (c) 2021 xpadev-net https://xpadevn.et
   Released under the MIT License.
 */
@@ -10,42 +10,56 @@
 })(this, (function () { 'use strict';
 
     class NiconiComments {
-      /**
-       * NiconiComments Constructor
-       * @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
-       * @param {[]} data - 描画用のコメント
-       * @param {boolean} useLegacy - defontにsans-serifを適用するか(trueでニコニコ公式に準拠)
-       * @param {boolean} formatted - dataが独自フォーマットに変換されているか
+      /**
+       * NiconiComments Constructor
+       * @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
+       * @param {[]} 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 = "6";
+        this.context.lineWidth = 4;
 
-        if (useLegacy) {
+        if (options.useLegacy) {
           this.commentYOffset = 0.25;
         } else {
-          this.commentYOffset = 0.125;
+          this.commentYOffset = 0.2;
         }
 
-        this.commentYMarginTop = 10;
+        this.commentYMarginTop = 0.08;
         this.fontSize = {
           "small": {
-            "default": 45,
-            "resized": 18
+            "default": 47,
+            "resized": 27.5
           },
           "medium": {
-            "default": 85,
-            "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,
@@ -57,24 +71,26 @@
           }
         };
 
-        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;
         this.timeline = {};
         this.nicoScripts = {
-          "reverse": []
+          "reverse": [],
+          "default": []
         };
         this.collision_right = {};
         this.collision_left = {};
         this.collision_ue = {};
         this.collision_shita = {};
-        this.useLegacy = useLegacy;
+        this.useLegacy = options.useLegacy;
         this.preRendering();
         this.fpsCount = 0;
         this.fps = 0;
@@ -83,10 +99,10 @@
           this.fpsCount = 0;
         }, 500);
       }
-      /**
-       * ニコニコが吐き出したデータを処理しやすいように変換する
-       * @param {[]} data - ニコニコが吐き出したコメントデータ
-       * @returns {*[]} - 独自フォーマットのコメントデータ
+      /**
+       * ニコニコが吐き出したデータを処理しやすいように変換する
+       * @param {[]} data - ニコニコが吐き出したコメントデータ
+       * @returns {*[]} - 独自フォーマットのコメントデータ
        */
 
 
@@ -130,8 +146,8 @@
         });
         return data_;
       }
-      /**
-       * 事前に当たり判定を考慮してコメントの描画場所を決定する
+      /**
+       * 事前に当たり判定を考慮してコメントの描画場所を決定する
        */
 
 
@@ -139,16 +155,17 @@
         this.getFont();
         this.getCommentSize();
         this.getCommentPos();
+        this.sortComment();
       }
-      /**
-       * コマンドをもとに各コメントに適用するフォントを決定する
+      /**
+       * コマンドをもとに各コメントに適用するフォントを決定する
        */
 
 
       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;
@@ -157,11 +174,13 @@
           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", "       ");
         }
       }
-      /**
-       * コメントの描画サイズを計算する
+      /**
+       * コメントの描画サイズを計算する
        */
 
 
@@ -174,6 +193,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;
@@ -188,8 +212,8 @@
           }
         }
       }
-      /**
-       * 計算された描画サイズをもとに各コメントの配置位置を決定する
+      /**
+       * 計算された描画サイズをもとに各コメントの配置位置を決定する
        */
 
 
@@ -199,6 +223,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] = [];
@@ -229,73 +257,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 = (comment.height - 1080) / -2;
-                        } 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;
-                }
               }
             }
 
@@ -362,7 +394,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);
 
@@ -377,11 +409,28 @@
           }
         }
       }
-      /**
-       * context.measureTextの複数行対応版
-       * 画面外にはみ出すコメントの縮小も行う
-       * @param comment - 独自フォーマットのコメントデータ
-       * @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
+
+      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の複数行対応版
+       * 画面外にはみ出すコメントの縮小も行う
+       * @param comment - 独自フォーマットのコメントデータ
+       * @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
        */
 
 
@@ -420,7 +469,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) {
@@ -463,10 +512,10 @@
           "fontSize": comment.fontSize
         };
       }
-      /**
-       * コマンドをもとに所定の位置にコメントを表示する
-       * @param comment - 独自フォーマットのコメントデータ
-       * @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
+      /**
+       * コマンドをもとに所定の位置にコメントを表示する
+       * @param comment - 独自フォーマットのコメントデータ
+       * @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
        */
 
 
@@ -488,32 +537,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);
@@ -521,60 +554,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)";
+          }
         }
-      }
-      /**
-       * コメントに含まれるコマンドを解釈する
-       * @param comment- 独自フォーマットのコメントデータ
-       * @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean, _live: boolean}}
-       */
 
+        for (let i in lines) {
+          let line = lines[i],
+              posY;
 
-      parseCommand(comment) {
-        let metadata = comment.mail,
-            loc = "naka",
-            size = "medium",
-            fontSize = this.fontSize.medium.default,
-            color = "#ffffff",
-            font = 'defont',
-            full = false,
-            ender = false,
-            reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/),
-            _live = false;
-
-        if (reverse) {
-          if (!reverse[1]) {
-            reverse[1] = "全";
+          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;
           }
 
-          let length = false;
+          this.context.strokeText(line, posX, posY);
+          this.context.fillText(line, posX, posY);
 
-          for (let i in metadata) {
-            let match = metadata[i].match(/@([0-9]+)/);
+          if (this.showCollision) {
+            this.context.strokeStyle = "rgba(255,255,0,0.5)";
+            this.context.strokeRect(posX, posY, comment.width_max, comment.fontSize);
 
-            if (match) {
-              length = match[1];
-              break;
+            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|null, size: string|null, color: string|null, fontSize: number|null, ender: boolean, font: string|null, full: boolean, _live: boolean, invisible: boolean, long:number|null}}
+       */
 
-          if (!length) {
-            length = 30;
-          }
 
-          this.nicoScripts.reverse.push({
-            "start": comment.vpos,
-            "end": comment.vpos + length * 100,
-            "target": reverse[1]
-          });
-          fontSize = 0;
-        }
+      parseCommand(comment) {
+        let metadata = comment.mail,
+            loc = null,
+            size = null,
+            fontSize = null,
+            color = null,
+            font = null,
+            full = false,
+            ender = false,
+            _live = false,
+            invisible = false,
+            long = null;
 
         for (let i in metadata) {
           let command = metadata[i].toLowerCase();
+          const match = command.match(/^@([0-9.]+)/);
+
+          if (match) {
+            long = match[1];
+          }
 
-          if (loc === "naka") {
+          if (loc === null) {
             switch (command) {
               case "ue":
                 loc = "ue";
@@ -586,7 +626,7 @@
             }
           }
 
-          if (size === "medium") {
+          if (size === null) {
             switch (command) {
               case "big":
                 size = "big";
@@ -600,7 +640,7 @@
             }
           }
 
-          if (color === "#ffffff") {
+          if (color === null) {
             switch (command) {
               case "white":
                 color = "#FFFFFF";
@@ -700,7 +740,7 @@
             }
           }
 
-          if (font === 'defont') {
+          if (font === null) {
             switch (command) {
               case "gothic":
                 font = "gothic";
@@ -723,6 +763,11 @@
 
             case "_live":
               _live = true;
+              break;
+
+            case "invisible":
+              invisible = true;
+              break;
           }
         }
 
@@ -734,12 +779,109 @@
           font,
           full,
           ender,
-          _live
+          _live,
+          invisible,
+          long
         };
       }
-      /**
-       * キャンバスを描画する
-       * @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
+
+      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倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
        */
 
 
@@ -747,25 +889,50 @@
         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.video) {
+          let offsetX,
+              offsetY,
+              scale,
+              height = this.canvas.height / this.video.videoHeight,
+              width = this.canvas.width / this.video.videoWidth;
 
-          if (comment._live) {
-            let rgb = hex2rgb(comment.color);
-            this.context.fillStyle = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},0.5)`;
+          if (height > width) {
+            scale = width;
           } else {
-            this.context.fillStyle = comment.color;
+            scale = height;
           }
 
-          if (comment.color === "#000000") {
-            this.context.strokeStyle = "rgba(255,255,255,0.7)";
-          }
+          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);
+        }
 
-          this.drawText(comment, vpos);
+        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(0,0,0,0.7)";
+            if (comment.invisible) {
+              continue;
+            }
+
+            this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+
+            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)";
+            }
           }
         }
 
@@ -783,8 +950,8 @@
           this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
         }
       }
-      /**
-       * キャンバスを消去する
+      /**
+       * キャンバスを消去する
        */
 
 
@@ -793,12 +960,12 @@
       }
 
     }
-    /**
-     * 配列を複数のキーでグループ化する
-     * @param {{}} array
-     * @param {string} key
-     * @param {string} key2
-     * @returns {{}}
+    /**
+     * 配列を複数のキーでグループ化する
+     * @param {{}} array
+     * @param {string} key
+     * @param {string} key2
+     * @returns {{}}
      */
 
 
@@ -820,12 +987,12 @@
 
       return data;
     };
-    /**
-     * フォント名とサイズをもとにcontextで使えるフォントを生成する
-     * @param {string} font
-     * @param {number} size
-     * @param {boolean} useLegacy
-     * @returns {string}
+    /**
+     * フォント名とサイズをもとにcontextで使えるフォントを生成する
+     * @param {string} font
+     * @param {number} size
+     * @param {boolean} useLegacy
+     * @returns {string}
      */
 
 
@@ -846,11 +1013,11 @@
 
       }
     };
-    /**
-     * phpのarray_push的なあれ
-     * @param array
-     * @param {string} key
-     * @param push
+    /**
+     * phpのarray_push的なあれ
+     * @param array
+     * @param {string} key
+     * @param push
      */
 
 
@@ -865,10 +1032,10 @@
 
       array[key].push(push);
     };
-    /**
-     * Hexからrgbに変換する(_live用)
-     * @param {string} hex
-     * @return {array} RGB
+    /**
+     * Hexからrgbに変換する(_live用)
+     * @param {string} hex
+     * @return {array} RGB
      */
 
 

package/package.json

@@ -1,33 +1,31 @@
-{
-  "name": "@xpadev-net/niconicomments",
-  "version": "0.1.4",
-  "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
-  "main": "dist/bundle.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c rollup.config.js",
-    "prepublishOnly": "rollup -c rollup.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/xpadev-net/niconicomments.git"
-  },
-  "keywords": [
-    "niconico"
-  ],
-  "author": "xpadev(xpadev.net)",
-  "bugs": {
-    "url": "https://github.com/xpadev-net/niconicomments/issues"
-  },
-  "files": [
-    "dist/bundle.js"
-  ],
-  "homepage": "https://xpadev.net/niconicomments/docs/",
-  "license": "MIT",
-  "devDependencies": {
-    "rollup": "^2.61.1"
-  },
-  "dependencies": {
-    "@rollup/plugin-babel": "^5.3.0"
-  }
-}
+{
+  "name": "@xpadev-net/niconicomments",
+  "version": "0.1.8",
+  "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
+  "main": "dist/bundle.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c rollup.config.js",
+    "prepublishOnly": "rollup -c rollup.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xpadev-net/niconicomments.git"
+  },
+  "keywords": [
+    "niconico"
+  ],
+  "author": "xpadev(xpadev.net)",
+  "bugs": {
+    "url": "https://github.com/xpadev-net/niconicomments/issues"
+  },
+  "files": [
+    "dist/bundle.js"
+  ],
+  "homepage": "https://xpadev.net/niconicomments/docs/",
+  "license": "MIT",
+  "devDependencies": {
+    "rollup": "^2.61.1",
+    "@rollup/plugin-babel": "^5.3.0"
+  }
+}