Merge branch 'develop'

.github/workflows/typedoc.yml

@@ -37,6 +37,8 @@ jobs:
         run: rm ./docs/type/* -rf
       - name: update .gitignore
         run: sed -i -e '/\/docs\/type/d' .gitignore
+      - name: update sample.html
+        run: sed --in-place --expression='s/..\/..\/dist\/bundle.js/https:\/\/cdn.jsdelivr.net\/npm\/@xpadev-net\/niconicomments@latest\/dist\/bundle.min.js/' docs/sample/index.html
       - name: generate typedoc
         run: npm run typedoc
 

README.md

@@ -38,5 +38,5 @@ setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100))
 ```
 
 ## Sample
-[サンプル](https://xpadev.net/niconicomments/sample.html)  
+[サンプル](https://xpadev-net.github.io/niconicomments/sample/)  
 [CodePen](https://codepen.io/xpadev-net/pen/mdBdQmX)  

docs/index.html

@@ -87,7 +87,7 @@ <h2>About</h2>
     <section id="sample">
         <h2>Sample</h2>
         <ul>
-            <li><a href="https://xpadev.net/niconicomments/sample.html">サンプル</a></li>
+            <li><a href="https://xpadev-net.github.io/niconicomments/sample/">サンプル</a></li>
             <li><a href="https://codepen.io/xpadev-net/pen/mdBdQmX">レッツゴー！陰陽師(CodePen)</a></li>
         </ul>
     </section>
@@ -179,6 +179,11 @@ <h4 id="p_format">format<span class="type">:<a href="./type/modules/_types_types
                                 <td class="type"><a href="./type/modules/_types_types.html#ownerComment">ownerComment</a>[]</td>
                                 <td>投稿者コメント編集画面のエディータのjsonをそのまま渡してください</td>
                             </tr>
+                            <tr>
+                                <td>legacyOwner</td>
+                                <td class="type">string</td>
+                                <td>旧投稿者コメント編集画面のエディータの文字列(改行含む)をそのまま渡してください</td>
+                            </tr>
                             <tr>
                                 <td>v1</td>
                                 <td class="type"><a href="./type/modules/_types_types.html#v1Thread">v1Thread</a>[]</td>

sample/sample.html → docs/sample/index.html

@@ -128,7 +128,7 @@
     }
 </style>
 <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
-<script type="text/javascript" src="../dist/bundle.js"></script>
+<script type="text/javascript" src="../../dist/bundle.js"></script>
 <script type="text/javascript">
     const videos = [
         {
@@ -166,21 +166,21 @@
                 {
                     id: 4,
                     nc: "sm21172249",
-                    yt: "_d6VuTTa8Do",
+                    yt: "8NBcQgEpkbk",
                     title: "アンインストール　Arrange.ver【コメント職人】@2018/10/1",
                     bg: "black"
                 },
                 {
                     id: 20,
                     nc: "sm21172249",
-                    yt: "_d6VuTTa8Do",
+                    yt: "8NBcQgEpkbk",
                     title: "アンインストール　Arrange.ver【コメント職人】@2022/06/22",
                     bg: "black"
                 },
                 {
                     id: 5,
                     nc: "sm34968071",
-                    yt: "_d6VuTTa8Do",
+                    yt: "8NBcQgEpkbk",
                     title: "投コメ アンインストール",
                     bg: "black"
                 },
@@ -415,7 +415,6 @@
                 keepCA: keepCA,
                 format:"formatted",
                 drawAllImageOnLoad: drawAllImageOnLoad,
-                debug: true
             });
         }
         const background = getById(videos, video).bg;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "types": "dist/dts/types.d.ts",

src/@types/types.d.ts

@@ -2,6 +2,7 @@ type inputFormatType =
   | "niconicome"
   | "formatted"
   | "legacy"
+  | "legacyOwner"
   | "owner"
   | "v1"
   | "default";

src/definition/definition.ts

@@ -1,3 +1,6 @@
+/**
+ * コマンドとカラーコードの対応表
+ */
 const colors: { [key: string]: string } = {
   white: "#FFFFFF",
   red: "#FF0000",
@@ -29,6 +32,9 @@ const colors: { [key: string]: string } = {
 };
 const commentYPaddingTop = 0.08;
 const commentYMarginBottom = 0.24;
+/**
+ * font-size
+ */
 const fontSize: typeFontSize = {
   small: {
     default: 47,
@@ -43,6 +49,9 @@ const fontSize: typeFontSize = {
     resized: 61,
   },
 };
+/**
+ * font-sizeに対しての倍率
+ */
 const lineHeight: typeFontSize = {
   small: {
     default: 1,
@@ -57,6 +66,9 @@ const lineHeight: typeFontSize = {
     resized: 1.01,
   },
 };
+/**
+ * 臨海+改行リサイズが発生した際(DR)の横幅最大値
+ */
 const doubleResizeMaxWidth: typeDoubleResizeMaxWidth = {
   full: {
     legacy: 3020,
@@ -67,6 +79,9 @@ const doubleResizeMaxWidth: typeDoubleResizeMaxWidth = {
     default: 2650,
   },
 };
+/**
+ * 既定の設定
+ */
 const defaultOptions: Options = {
   drawAllImageOnLoad: false,
   format: "default",
@@ -80,6 +95,54 @@ const defaultOptions: Options = {
   useLegacy: false,
   video: undefined,
 };
+/**
+ * fpsを更新する間隔(ms)
+ */
+const fpsInterval = 500;
+/**
+ * キャッシュの追加保持期間(ms)
+ */
+const cacheAge = 2000;
+/**
+ * キャンバスの横幅
+ */
+const canvasWidth = 1920;
+/**
+ * キャンバスの高さ
+ */
+const canvasHeight = 1080;
+/**
+ * コメントの処理範囲
+ */
+const commentDrawRange = 1450;
+/**
+ * コメントの処理範囲外(片側)の幅
+ */
+const commentDrawPadding = (canvasWidth - commentDrawRange) / 2;
+/**
+ * 当たり判定の幅
+ */
+const collisionWidth = 40;
+/**
+ * 当たり判定の左右幅
+ */
+const collisionRange = {
+  left: collisionWidth,
+  right: canvasWidth - collisionWidth,
+};
+/**
+ * 同一CAと判定する投下経過時間の最大値(秒)
+ */
+const sameCARange = 3600;
+/**
+ * 同一CAと判定するvposの範囲(vpos)
+ */
+const sameCAGap = 100;
+/**
+ * レイヤーを分離する基準値
+ */
+const sameCAMinScore = 10;
+
 export {
   colors,
   commentYMarginBottom,
@@ -88,4 +151,14 @@ export {
   lineHeight,
   doubleResizeMaxWidth,
   defaultOptions,
+  fpsInterval,
+  cacheAge,
+  canvasWidth,
+  canvasHeight,
+  commentDrawRange,
+  commentDrawPadding,
+  collisionRange,
+  sameCARange,
+  sameCAGap,
+  sameCAMinScore,
 };

src/inputParser.ts

@@ -17,9 +17,9 @@ const convert2formattedComment = (
     result = fromFormatted(data);
   } else if (type === "legacy" && typeGuard.legacy.rawApiResponses(data)) {
     result = fromLegacy(data);
-  } /*else if (typeGuard.legacyOwner.comments(data) && type === "legacyOwner") {
-        result = fromLegacyOwner(data);
-    }*/ else if (type === "owner" && typeGuard.owner.comments(data)) {
+  } else if (type === "legacyOwner" && typeGuard.legacyOwner.comments(data)) {
+    result = fromLegacyOwner(data);
+  } else if (type === "owner" && typeGuard.owner.comments(data)) {
     result = fromOwner(data);
   } else if (type === "v1" && typeGuard.v1.threads(data)) {
     result = fromV1(data);
@@ -136,43 +136,43 @@ const fromLegacy = (data: rawApiResponse[]): formattedComment[] => {
 
 /**
  * 旧プレイヤーの投稿者コメントのエディターのデータを処理する
- * ※一番左の数値の単位がvposか秒かわからないので実装保留
  * @param data {string}
  * @return {formattedComment[]}
  */
-/*const fromLegacyOwner = (data: string): formattedComment[] => {
-    let data_: formattedComment[] = [], comments = data.split("\n");
-    for (let i = 0; i < comments.length; i++) {
-        let commentData = comments[i]!.split(":");
-        if (commentData.length < 3) {
-            continue;
-        } else if (commentData.length > 3) {
-            for (let j = 3; j < commentData.length; j++) {
-                commentData[2] += ":" + commentData[j];
-            }
-        }
-        let tmpParam: formattedComment = {
-            id: i,
-            vpos: Number(commentData[0]),
-            content: commentData[2]!,
-            date: i,
-            date_usec: 0,
-            owner: true,
-            premium: true,
-            mail: [],
-            user_id: -1,
-            layer: -1
-        };
-        if (commentData[1]) {
-            tmpParam.mail = commentData[1].split(/[\s+]/g);
-        }
-        if (tmpParam.content.startsWith("/")) {
-            tmpParam.mail.push("invisible");
-        }
-        data_.push(tmpParam);
+const fromLegacyOwner = (data: string): formattedComment[] => {
+  let data_: formattedComment[] = [],
+    comments = data.split("\n");
+  for (let i = 0; i < comments.length; i++) {
+    let commentData = comments[i]!.split(":");
+    if (commentData.length < 3) {
+      continue;
+    } else if (commentData.length > 3) {
+      for (let j = 3; j < commentData.length; j++) {
+        commentData[2] += ":" + commentData[j];
+      }
+    }
+    let tmpParam: formattedComment = {
+      id: i,
+      vpos: Number(commentData[0]),
+      content: commentData[2] || "",
+      date: i,
+      date_usec: 0,
+      owner: true,
+      premium: true,
+      mail: [],
+      user_id: -1,
+      layer: -1,
+    };
+    if (commentData[1]) {
+      tmpParam.mail = commentData[1].split(/[\s+]/g);
+    }
+    if (tmpParam.content.startsWith("/")) {
+      tmpParam.mail.push("invisible");
     }
-    return data_;
-}*/
+    data_.push(tmpParam);
+  }
+  return data_;
+};
 
 /**
  * 投稿者コメントのエディターのデータを処理する
@@ -273,7 +273,7 @@ const sort = (data: formattedComment[]): formattedComment[] => {
  */
 const time2vpos = (time_str: string): number => {
   const time = time_str.match(
-    /^(\d+):(\d+)\.(\d+)|(\d+):(\d+)|(\d+)\.(\d+)|(\d+)$/
+    /^(?:(\d+):(\d+)\.(\d+)|(\d+):(\d+)|(\d+)\.(\d+)|(\d+))$/
   );
   if (time) {
     if (