Merge branch 'develop'

xpadev-net · Nov 22, 2022 · ffbdb4d · ffbdb4d
2 parents 4e90fa6 + 4b5049c
commit ffbdb4d
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 104 deletions.
diff --git a/README.en.md b/README.en.md
@@ -0,0 +1,41 @@
+# [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)
+
+[[日本語](https://github.com/xpadev-net/niconicomments/blob/develop/README.md)]
+
+Comment rendering library that is somewhat compatible with the official Nico Nico Douga player  
+Reference： https://xpadev-net.github.io/niconicomments/  
+Github： https://github.com/xpadev-net/niconicomments  
+npm： https://www.npmjs.com/package/@xpadev-net/niconicomments
+
+## For users who use this library for domestic use in Japan
+This library may infringe on Dwango's patents depending on how it is used  
+Please carefully review the following applicable patents and case law before using this library with caution.  
+[JP,2006-333851](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-2006-333851/7294651F33633E1EBF3DEC66FAE0ECAD878D19E1829C378FC81D26BBD0A4263B/10/en)  
+[JP,2010-267283](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-4734471/9085C128B7ED7D57F6C2F09D9BE4FCB496E638331DB9EC7ADE1E3A44999A3878/15/en)  
+[JP,2018-202475](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-6526304/D8AF77CFB92D96C785FEECBD690C53E2F9023F1739E7A5BBDAB588E2ECAC5316/15/en)  
+[2018: Case No. Heisei 28 (wa) 38565, Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/073/088073_hanrei.pdf)  
+[2022: Heisei 30 (ne) 10077 Appeal for Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/418/091418_hanrei.pdf)  
+
+## 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 canvas = document.getElementById("canvas");
+const video = document.getElementById("video");
+const req = await fetch("sample.json");
+const res = await req.json();
+const niconiComments = new NiconiComments(canvas, res);
+//If video.ontimeupdate is used, the comments will be choppy due to the small number of calls.
+setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);
+```
+
+## Sample
+[Sample](https://xpadev-net.github.io/niconicomments/sample/)  
diff --git a/README.ja.md b/README.ja.md
diff --git a/README.md b/README.md
@@ -1,21 +1,21 @@
 # [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)
 
-[日本語](https://github.com/xpadev-net/niconicomments/blob/develop/README.ja.md)
+[[English](https://github.com/xpadev-net/niconicomments/blob/develop/README.en.md)]
 
-Comment rendering library that is somewhat compatible with the official Nico Nico Douga player  
+ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ   
+High peformance High compatibility comment drawing library  
 Reference： https://xpadev-net.github.io/niconicomments/  
 Github： https://github.com/xpadev-net/niconicomments  
 npm： https://www.npmjs.com/package/@xpadev-net/niconicomments
 
-## For users who use this library for domestic use in Japan
-This library may infringe on Dwango's patents depending on how it is used  
-Please carefully review the following applicable patents and case law before using this library with caution.  
-[JP,2006-333851](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-2006-333851/7294651F33633E1EBF3DEC66FAE0ECAD878D19E1829C378FC81D26BBD0A4263B/10/en)  
-[JP,2010-267283](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-4734471/9085C128B7ED7D57F6C2F09D9BE4FCB496E638331DB9EC7ADE1E3A44999A3878/15/en)  
-[JP,2018-202475](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-6526304/D8AF77CFB92D96C785FEECBD690C53E2F9023F1739E7A5BBDAB588E2ECAC5316/15/en)  
-[2018: Case No. Heisei 28 (wa) 38565, Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/073/088073_hanrei.pdf)  
-[2022: Heisei 30 (ne) 10077 Appeal for Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/418/091418_hanrei.pdf)  
+## [重要]このライブラリを使用される方へ
+ニコニコ運営が画面にコメントを流すアドオンを特許侵害だと騒ぎ立てて潰して回っているようです  
+このライブラリ本体は描画部分のみのため特許侵害に当たるとは考えていませんが、ニコニコ動画運営(とその近辺の人)に叩かれる可能性があります  
+(名前は出しませんがすでにいくつかのOSSに被害が出ています)  
+また、このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります  
+詳しくはこちら[ニコニコが保有する特許について](https://github.com/xpadev-net/niconicomments/blob/develop/ABOUT_PATENT.md)を参照してください  
+**※当ライブラリを削除する予定は一切ありません**
 
 ## Installation
 ```html
@@ -33,9 +33,9 @@ const video = document.getElementById("video");
 const req = await fetch("sample.json");
 const res = await req.json();
 const niconiComments = new NiconiComments(canvas, res);
-//If video.ontimeupdate is used, the comments will be choppy due to the small number of calls.
+//video.ontimeupdateを使用すると、呼び出し回数の関係でコメントカクつく
 setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);
 ```
 
 ## Sample
-[Sample](https://xpadev-net.github.io/niconicomments/sample/)  
+[サンプル](https://xpadev-net.github.io/niconicomments/sample/)  
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "types": "dist/bundle.d.ts",

diff --git a/src/comments/FlashComment.ts b/src/comments/FlashComment.ts
@@ -331,7 +331,6 @@ class FlashComment implements IComment {
       (comment.fontSize * comment.lineHeight * lineCount +
         config.commentYPaddingTop[comment.resizedY ? "resized" : "default"]) *
       this.scale;
-    if (Number.isNaN(height)) console.log(comment, lineCount, this.scale);
     if (comment.loc !== "naka") {
       const widthLimit = getConfig(config.commentStageSize, true)[
         comment.full ? "fullWidth" : "width"
@@ -444,11 +443,7 @@ class FlashComment implements IComment {
       } else {
         this.context.globalAlpha = 1;
       }
-      try {
-        this.context.drawImage(this.image, posX, posY);
-      } catch (e) {
-        console.log(this.comment, e);
-      }
+      this.context.drawImage(this.image, posX, posY);
     }
     if (showCollision) {
       this.context.strokeStyle = "rgba(255,0,255,1)";
@@ -505,14 +500,13 @@ class FlashComment implements IComment {
         [...this.comment.mail].sort().join(","),
       cache = imageCache[cacheKey];
     if (cache) {
+      this.image = cache.image;
+      window.setTimeout(() => {
+        delete this.image;
+      }, this.comment.long * 10 + config.cacheAge);
       clearTimeout(cache.timeout);
       cache.timeout = window.setTimeout(() => {
-        if (this.image) {
-          delete this.image;
-        }
-        if (cache) {
-          delete imageCache[cacheKey];
-        }
+        delete imageCache[cacheKey];
       }, this.comment.long * 10 + config.cacheAge);
       return cache.image;
     }
@@ -576,6 +570,18 @@ class FlashComment implements IComment {
         }
       }
     }
+
+    this.image = image;
+    window.setTimeout(() => {
+      delete this.image;
+    }, this.comment.long * 10 + config.cacheAge);
+    imageCache[cacheKey] = {
+      timeout: window.setTimeout(() => {
+        delete imageCache[cacheKey];
+      }, this.comment.long * 10 + config.cacheAge),
+      image,
+    };
+
     return image;
   }
 }

diff --git a/src/comments/HTML5Comment.ts b/src/comments/HTML5Comment.ts
@@ -116,12 +116,12 @@ class HTML5Comment implements IComment {
       comment.lineHeight = lineHeight;
       comment.resized = true;
       comment.resizedY = true;
-      const measureResult = measure(comment as measureInput);
+      const measureResult = measure(comment as measureInput, this.context);
       height = measureResult.height;
       width = measureResult.width;
       itemWidth = measureResult.itemWidth;
     } else {
-      const measureResult = measure(comment as measureInput);
+      const measureResult = measure(comment as measureInput, this.context);
       height = measureResult.height;
       width = measureResult.width;
       itemWidth = measureResult.itemWidth;
@@ -133,14 +133,14 @@ class HTML5Comment implements IComment {
       _comment.charSize = (_comment.charSize || 0) * scale;
       _comment.lineHeight = (_comment.lineHeight || 0) * scale;
       _comment.fontSize = _comment.charSize * 0.8;
-      let result = measure(_comment as measureInput);
+      let result = measure(_comment as measureInput, this.context);
       if (result.width > widthLimit) {
         while (result.width >= widthLimit) {
           const originalCharSize = _comment.charSize;
           _comment.charSize -= 1;
           _comment.lineHeight *= _comment.charSize / originalCharSize;
           _comment.fontSize = _comment.charSize * 0.8;
-          result = measure(_comment as measureInput);
+          result = measure(_comment as measureInput, this.context);
         }
       } else {
         let lastComment = { ..._comment };
@@ -150,7 +150,7 @@ class HTML5Comment implements IComment {
           _comment.charSize += 1;
           _comment.lineHeight *= _comment.charSize / originalCharSize;
           _comment.fontSize = _comment.charSize * 0.8;
-          result = measure(_comment as measureInput);
+          result = measure(_comment as measureInput, this.context);
         }
         _comment = lastComment;
       }
@@ -163,7 +163,7 @@ class HTML5Comment implements IComment {
         comment.lineHeight = _comment.lineHeight;
       }
       comment.fontSize = (comment.charSize || 0) * 0.8;
-      result = measure(comment as measureInput);
+      result = measure(comment as measureInput, this.context);
       width = result.width;
       height = result.height;
       itemWidth = result.itemWidth;
@@ -328,14 +328,13 @@ class HTML5Comment implements IComment {
         [...this.comment.mail].sort().join(","),
       cache = imageCache[cacheKey];
     if (cache) {
+      this.image = cache.image;
+      window.setTimeout(() => {
+        delete this.image;
+      }, this.comment.long * 10 + config.cacheAge);
       clearTimeout(cache.timeout);
       cache.timeout = window.setTimeout(() => {
-        if (this.image) {
-          delete this.image;
-        }
-        if (cache) {
-          delete imageCache[cacheKey];
-        }
+        delete imageCache[cacheKey];
       }, this.comment.long * 10 + config.cacheAge);
       return cache.image;
     }
@@ -391,18 +390,15 @@ class HTML5Comment implements IComment {
       }
     }
     this.image = image;
+    window.setTimeout(() => {
+      delete this.image;
+    }, this.comment.long * 10 + config.cacheAge);
     imageCache[cacheKey] = {
       timeout: window.setTimeout(() => {
-        if (cache) {
-          delete imageCache[cacheKey];
-        }
-        if (this.image) {
-          delete this.image;
-        }
+        delete imageCache[cacheKey];
       }, this.comment.long * 10 + config.cacheAge),
       image,
     };
-
     return image;
   }
 }

diff --git a/src/contexts/canvas.ts b/src/contexts/canvas.ts
diff --git a/src/main.ts b/src/main.ts
@@ -22,7 +22,6 @@ import { HTML5Comment } from "@/comments/HTML5Comment";
 import { FlashComment } from "@/comments/FlashComment";
 import { resetImageCache } from "@/contexts/cache";
 import { resetNicoScripts } from "@/contexts/nicoscript";
-import { initCanvas } from "@/contexts/canvas";
 
 let isDebug = false;
 
@@ -52,7 +51,6 @@ class NiconiComments {
   ) {
     const constructorStart = performance.now();
     initConfig();
-    initCanvas();
     if (!typeGuard.config.initOptions(initOptions))
       throw new Error(
         "Please see document: https://xpadev-net.github.io/niconicomments/#p_options"

diff --git a/src/nico.ts b/src/nico.ts
@@ -1,6 +1,5 @@
 import { getConfig, parseFont } from "@/util";
 import { config } from "@/definition/config";
-import { context } from "@/contexts/canvas";
 
 /**
  * 各サイズの行高を返す
@@ -33,15 +32,18 @@ const getCharSize = (fontSize: commentSize, isFlash: boolean): number => {
   return commentStageSize.height / lineCounts.doubleResized[fontSize];
 };
 
-const measure = (comment: measureInput) => {
-  const width = measureWidth(comment);
+const measure = (comment: measureInput, context: CanvasRenderingContext2D) => {
+  const width = measureWidth(comment, context);
   return {
     ...width,
     height: comment.lineHeight * (comment.lineCount - 1) + comment.charSize,
   };
 };
 
-const measureWidth = (comment: measureInput) => {
+const measureWidth = (
+  comment: measureInput,
+  context: CanvasRenderingContext2D
+) => {
   const { fontSize, scale } = getFontSizeAndScale(comment.charSize),
     lineWidth = [],
     itemWidth = [];