Merge branch 'develop'

docs/index.html

@@ -65,6 +65,7 @@ <h1>Index</h1>
                   <li>
                     <a href="#Methods">Methods</a>
                     <ul>
+                      <li><a href="#m_addComments">addComments</a></li>
                       <li><a href="#m_drawCanvas">drawCanvas</a></li>
                       <li><a href="#m_clear">clear</a></li>
                     </ul>
@@ -343,6 +344,16 @@ <h4 id="p_video">
           </div>
           <h3 id="Methods">Methods</h3>
           <div class="item">
+            <h4 id="m_addComments">
+              addComments(...comments<span class="type"><a href="./type/types/_types_format_formatted.formattedComment.html"
+            >:formattedComment</a
+            ></span>)<span
+                class="type"
+                >:void</span
+              >
+            </h4>
+            <div class="item" data-i18n="m_addComments">
+            </div>
             <h4 id="m_drawCanvas">
               drawCanvas(vpos<span class="type">:number</span>)<span
                 class="type"

docs/localize.js

@@ -33,9 +33,9 @@ const localize = {
 <p>サイズ設定をミスるとコメントが正常に描画されません</p>`,
   ],
   p_data: [
-    `<p>Please pass comment data.</p>
+    `<p>Please pass comment data or undefined.</p>
 <p>Please check the <a href="#p_format">format</a> for supported formats.</p>`,
-    `<p>コメントデータを渡してください</p>
+    `<p>コメントデータまたはundefinedを渡してください</p>
 <p>対応フォーマットは<a href="#p_format">format</a>を確認してください</p>`,
   ],
   p_config: [
@@ -69,6 +69,11 @@ const localize = {
 <p>Supported formats are as follows</p>
 <table><thead><tr><th>Name</th><th>Type</th><th>Note</th></tr></thead>
   <tbody>
+    <tr>
+      <td>empty</td>
+      <td class="type">undefined</td>
+      <td>For dynamic additional comments</td>
+    </tr>
     <tr>
       <td>niconicome</td>
       <td class="type">XMLDocument</td>
@@ -106,6 +111,11 @@ const localize = {
 <table>
   <thead><tr><th>名前</th><th>dataのtype</th><th>備考</th></tr></thead>
   <tbody>
+    <tr>
+      <td>empty</td>
+      <td class="type">undefined</td>
+      <td>動的追加コメント用</td>
+    </tr>
     <tr>
       <td>niconicome</td>
       <td class="type">XMLDocument</td>
@@ -232,6 +242,14 @@ const localize = {
 <p>デフォルト(<span class="yellow">null</span>)の場合は描画を行いません</p>
 <p>指定されている場合は、背景に指定された動画を描画し、その上にコメントを描画します</p>
 <p>この機能を応用すると、Picture in Pictureにもコメントを表示できるようになります</p>`,
+  ],
+  m_addComments: [
+      `<p>This is a feature to dynamically add comments, mainly for live broadcasts.</p>
+<p>Comments added by this feature are placed based on a hit decision, but do not affect the position of subsequent comments that have already been placed.</p>
+<p>Comments may overlap with each other when placed between already generated comments.</p>`,
+    `<p>主に生配信向けの、コメントを動的に追加する機能です</p>
+<p>この機能によって追加されたコメントは当たり判定を考慮して配置されますが、すでに配置されているその後のコメントの位置には影響を及ぼしません</p>
+<p>生成済みのコメントの間に配置した場合、コメント同士が重複する場合があります</p>`
   ],
   m_drawCanvas: [
     `<p>Draws a comment on the canvas based on vpos(currentTime*100 of the video)</p>

docs/style.css

@@ -45,11 +45,13 @@ main {
 
 aside {
   width: 30%;
+  max-width: 300px;
   min-height: 100vh;
 }
 
 main {
   width: 70%;
+  min-width: calc(100% - 300px);
 }
 
 section {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "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",
@@ -24,7 +24,12 @@
     "url": "git+https://github.com/xpadev-net/niconicomments.git"
   },
   "keywords": [
-    "niconico"
+    "canvas",
+    "comment",
+    "danmaku",
+    "html5",
+    "niconico",
+    "nicovide"
   ],
   "author": "xpadev(xpadev.net)",
   "bugs": {

src/@types/options.d.ts

@@ -5,6 +5,7 @@ type inputFormatType =
   | "legacyOwner"
   | "owner"
   | "v1"
+  | "empty"
   | "default";
 type inputFormat =
   | XMLDocument
@@ -13,7 +14,8 @@ type inputFormat =
   | rawApiResponse[]
   | ownerComment[]
   | v1Thread[]
-  | string;
+  | string
+  | undefined;
 type modeType = "default" | "html5" | "flash";
 type Options = {
   config: ConfigNullable;

src/@types/types.d.ts

@@ -55,7 +55,7 @@ type commentSize = "big" | "medium" | "small";
 type commentLoc = "ue" | "naka" | "shita";
 type collision = { [key in collisionPos]: collisionItem };
 type collisionPos = "ue" | "shita" | "right" | "left";
-type collisionItem = { [p: number]: number[] };
+type collisionItem = { [p: number]: IComment[] };
 type nicoScript = {
   reverse: nicoScriptReverse[];
   ban: nicoScriptBan[];

src/inputParser.ts

@@ -11,7 +11,9 @@ const convert2formattedComment = (
   type: inputFormatType
 ): formattedComment[] => {
   let result: formattedComment[] = [];
-  if (type === "niconicome" && typeGuard.niconicome.xmlDocument(data)) {
+  if (type === "empty" && data === undefined) {
+    return [];
+  } else if (type === "niconicome" && typeGuard.niconicome.xmlDocument(data)) {
     result = fromNiconicome(data);
   } else if (type === "formatted" && typeGuard.formatted.legacyComments(data)) {
     result = fromFormatted(data);