@xpadev-net/niconicomments 0.1.8 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/LICENSE +7 -7
  2. package/README.md +24 -24
  3. package/dist/bundle.js +79 -73
  4. package/package.json +31 -31
package/LICENSE CHANGED
@@ -1,7 +1,7 @@
1
- Copyright (c) 2021 xpadev https://xpadev.net
2
-
3
- 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:
4
-
5
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
-
7
- 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.
1
+ Copyright (c) 2021 xpadev https://xpadev.net
2
+
3
+ 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:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ 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 CHANGED
@@ -1,24 +1,24 @@
1
- # [niconicomments](https://xpadev.net/niconicomments/)
2
- [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
3
- ニコニコ動画の公式プレイヤーに多少の互換性を持つコメント描画ライブラリです
4
- This is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.
5
- Reference: https://xpadev.net/niconicomments/docs/
6
- Github: https://github.com/xpadev-net/niconicomments
7
-
8
- ## Installation
9
- ```html
10
- <script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
11
- ```
12
- or
13
- ```
14
- npm i @xpadev-net/niconicomments
15
- ```
16
-
17
- ## Examples
18
- ```javascript
19
- const niconiComments = new NiconiComments(canvas, comments);
20
- niconiComments.drawCanvas(vpos)
21
- ```
22
-
23
- ## Sample
24
- https://xpadev.net/niconicomments/sample.html
1
+ # [niconicomments](https://xpadev.net/niconicomments/)
2
+ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
3
+ ニコニコ動画の公式プレイヤーに多少の互換性を持つコメント描画ライブラリです
4
+ This is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.
5
+ Reference: https://xpadev.net/niconicomments/docs/
6
+ Github: https://github.com/xpadev-net/niconicomments
7
+
8
+ ## Installation
9
+ ```html
10
+ <script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
11
+ ```
12
+ or
13
+ ```
14
+ npm i @xpadev-net/niconicomments
15
+ ```
16
+
17
+ ## Examples
18
+ ```javascript
19
+ const niconiComments = new NiconiComments(canvas, comments);
20
+ niconiComments.drawCanvas(vpos)
21
+ ```
22
+
23
+ ## Sample
24
+ https://xpadev.net/niconicomments/sample.html
package/dist/bundle.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
- niconicomments.js v0.1.8
3
- (c) 2021 xpadev-net https://xpadevn.et
2
+ niconicomments.js v0.1.11
3
+ (c) 2021 xpadev-net https://xpadev.net
4
4
  Released under the MIT License.
5
5
  */
6
6
  (function (global, factory) {
@@ -10,11 +10,11 @@
10
10
  })(this, (function () { 'use strict';
11
11
 
12
12
  class NiconiComments {
13
- /**
14
- * NiconiComments Constructor
15
- * @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
16
- * @param {[]} data - 描画用のコメント
17
- * @param {{useLegacy: boolean, formatted: boolean, video: HTMLVideoElement|null}} options - 細かい設定類
13
+ /**
14
+ * NiconiComments Constructor
15
+ * @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
16
+ * @param {[]} data - 描画用のコメント
17
+ * @param {{useLegacy: boolean, formatted: boolean, video: HTMLVideoElement|null}} options - 細かい設定類
18
18
  */
19
19
  constructor(canvas, data, options = {
20
20
  useLegacy: false,
@@ -77,7 +77,7 @@
77
77
  this.data = this.parseData(data);
78
78
  }
79
79
 
80
- this.video = options.video ? options.video : null;
80
+ this.video = options.video || null;
81
81
  this.showCollision = false;
82
82
  this.showFPS = false;
83
83
  this.showCommentCount = false;
@@ -99,10 +99,10 @@
99
99
  this.fpsCount = 0;
100
100
  }, 500);
101
101
  }
102
- /**
103
- * ニコニコが吐き出したデータを処理しやすいように変換する
104
- * @param {[]} data - ニコニコが吐き出したコメントデータ
105
- * @returns {*[]} - 独自フォーマットのコメントデータ
102
+ /**
103
+ * ニコニコが吐き出したデータを処理しやすいように変換する
104
+ * @param {[]} data - ニコニコが吐き出したコメントデータ
105
+ * @returns {*[]} - 独自フォーマットのコメントデータ
106
106
  */
107
107
 
108
108
 
@@ -113,7 +113,7 @@
113
113
  for (let key in data[i]) {
114
114
  let value = data[i][key];
115
115
 
116
- if (key === "chat" && value["deleted"] !== 1) {
116
+ if (key === "chat" && value["deleted"] !== 1 && !value["content"].startsWith("/")) {
117
117
  let tmpParam = {
118
118
  "id": value["no"],
119
119
  "vpos": value["vpos"],
@@ -146,8 +146,8 @@
146
146
  });
147
147
  return data_;
148
148
  }
149
- /**
150
- * 事前に当たり判定を考慮してコメントの描画場所を決定する
149
+ /**
150
+ * 事前に当たり判定を考慮してコメントの描画場所を決定する
151
151
  */
152
152
 
153
153
 
@@ -157,8 +157,8 @@
157
157
  this.getCommentPos();
158
158
  this.sortComment();
159
159
  }
160
- /**
161
- * コマンドをもとに各コメントに適用するフォントを決定する
160
+ /**
161
+ * コマンドをもとに各コメントに適用するフォントを決定する
162
162
  */
163
163
 
164
164
 
@@ -176,11 +176,11 @@
176
176
  this.data[i]._live = command._live;
177
177
  this.data[i].long = command.long;
178
178
  this.data[i].invisible = command.invisible;
179
- this.data[i].content = this.data[i].content.replaceAll("\t", " ");
179
+ this.data[i].content = this.data[i].content.replaceAll("\t", " ");
180
180
  }
181
181
  }
182
- /**
183
- * コメントの描画サイズを計算する
182
+ /**
183
+ * コメントの描画サイズを計算する
184
184
  */
185
185
 
186
186
 
@@ -189,7 +189,7 @@
189
189
 
190
190
  for (let i in tmpData) {
191
191
  for (let j in tmpData[i]) {
192
- this.context.font = parseFont(i, j, this.useLegacy);
192
+ this.context.font = parseFont("defont", j, this.useLegacy);
193
193
 
194
194
  for (let k in tmpData[i][j]) {
195
195
  let comment = tmpData[i][j][k];
@@ -206,14 +206,14 @@
206
206
 
207
207
  if (measure.resized) {
208
208
  this.data[comment.index].fontSize = measure.fontSize;
209
- this.context.font = parseFont(i, j, this.useLegacy);
209
+ this.context.font = parseFont("defont", j, this.useLegacy);
210
210
  }
211
211
  }
212
212
  }
213
213
  }
214
214
  }
215
- /**
216
- * 計算された描画サイズをもとに各コメントの配置位置を決定する
215
+ /**
216
+ * 計算された描画サイズをもとに各コメントの配置位置を決定する
217
217
  */
218
218
 
219
219
 
@@ -426,11 +426,11 @@
426
426
  });
427
427
  }
428
428
  }
429
- /**
430
- * context.measureTextの複数行対応版
431
- * 画面外にはみ出すコメントの縮小も行う
432
- * @param comment - 独自フォーマットのコメントデータ
433
- * @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
429
+ /**
430
+ * context.measureTextの複数行対応版
431
+ * 画面外にはみ出すコメントの縮小も行う
432
+ * @param comment - 独自フォーマットのコメントデータ
433
+ * @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
434
434
  */
435
435
 
436
436
 
@@ -447,17 +447,17 @@
447
447
  comment.fontSize = this.fontSize.big.resized;
448
448
  comment.resized = true;
449
449
  comment.tateRisized = true;
450
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
450
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
451
451
  } else if (comment.size === "medium" && lines.length > 4) {
452
452
  comment.fontSize = this.fontSize.medium.resized;
453
453
  comment.resized = true;
454
454
  comment.tateRisized = true;
455
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
455
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
456
456
  } else if (comment.size === "small" && lines.length > 6) {
457
457
  comment.fontSize = this.fontSize.small.resized;
458
458
  comment.resized = true;
459
459
  comment.tateRisized = true;
460
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
460
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
461
461
  }
462
462
  }
463
463
 
@@ -476,29 +476,29 @@
476
476
  comment.fontSize -= 1;
477
477
  comment.resized = true;
478
478
  comment.yokoResized = true;
479
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
479
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
480
480
  return this.measureText(comment);
481
481
  } else if (!comment.full && width_max > 1440) {
482
482
  comment.fontSize -= 1;
483
483
  comment.resized = true;
484
484
  comment.yokoResized = true;
485
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
485
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
486
486
  return this.measureText(comment);
487
487
  }
488
488
  } else if (comment.loc !== "naka" && comment.tateRisized && (comment.full && width_max > 1920 || !comment.full && width_max > 1440) && !comment.yokoResized) {
489
489
  comment.fontSize = this.fontSize[comment.size].default;
490
490
  comment.resized = true;
491
491
  comment.yokoResized = true;
492
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
492
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
493
493
  return this.measureText(comment);
494
494
  } else if (comment.loc !== "naka" && comment.tateRisized && comment.yokoResized) {
495
495
  if (comment.full && width_max > this.doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
496
496
  comment.fontSize -= 1;
497
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
497
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
498
498
  return this.measureText(comment);
499
499
  } else if (!comment.full && width_max > this.doubleResizeMaxWidth.normal[this.useLegacy ? "legacy" : "default"]) {
500
500
  comment.fontSize -= 1.;
501
- this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
501
+ this.context.font = parseFont("defont", comment.fontSize, this.useLegacy);
502
502
  return this.measureText(comment);
503
503
  }
504
504
  }
@@ -512,10 +512,10 @@
512
512
  "fontSize": comment.fontSize
513
513
  };
514
514
  }
515
- /**
516
- * コマンドをもとに所定の位置にコメントを表示する
517
- * @param comment - 独自フォーマットのコメントデータ
518
- * @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
515
+ /**
516
+ * コマンドをもとに所定の位置にコメントを表示する
517
+ * @param comment - 独自フォーマットのコメントデータ
518
+ * @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
519
519
  */
520
520
 
521
521
 
@@ -586,10 +586,10 @@
586
586
  }
587
587
  }
588
588
  }
589
- /**
590
- * コメントに含まれるコマンドを解釈する
591
- * @param comment- 独自フォーマットのコメントデータ
592
- * @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}}
589
+ /**
590
+ * コメントに含まれるコマンドを解釈する
591
+ * @param comment- 独自フォーマットのコメントデータ
592
+ * @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}}
593
593
  */
594
594
 
595
595
 
@@ -879,9 +879,9 @@
879
879
 
880
880
  return data;
881
881
  }
882
- /**
883
- * キャンバスを描画する
884
- * @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
882
+ /**
883
+ * キャンバスを描画する
884
+ * @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
885
885
  */
886
886
 
887
887
 
@@ -946,12 +946,18 @@
946
946
  if (this.showCommentCount) {
947
947
  this.context.font = parseFont("defont", 60, this.useLegacy);
948
948
  this.context.fillStyle = "#00FF00";
949
- this.context.strokeText("Count:" + this.timeline[vpos].length, 100, 200);
950
- this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
949
+
950
+ if (this.timeline[vpos]) {
951
+ this.context.strokeText("Count:" + this.timeline[vpos].length, 100, 200);
952
+ this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
953
+ } else {
954
+ this.context.strokeText("Count:0", 100, 200);
955
+ this.context.fillText("Count:0", 100, 200);
956
+ }
951
957
  }
952
958
  }
953
- /**
954
- * キャンバスを消去する
959
+ /**
960
+ * キャンバスを消去する
955
961
  */
956
962
 
957
963
 
@@ -960,12 +966,12 @@
960
966
  }
961
967
 
962
968
  }
963
- /**
964
- * 配列を複数のキーでグループ化する
965
- * @param {{}} array
966
- * @param {string} key
967
- * @param {string} key2
968
- * @returns {{}}
969
+ /**
970
+ * 配列を複数のキーでグループ化する
971
+ * @param {{}} array
972
+ * @param {string} key
973
+ * @param {string} key2
974
+ * @returns {{}}
969
975
  */
970
976
 
971
977
 
@@ -987,12 +993,12 @@
987
993
 
988
994
  return data;
989
995
  };
990
- /**
991
- * フォント名とサイズをもとにcontextで使えるフォントを生成する
992
- * @param {string} font
993
- * @param {number} size
994
- * @param {boolean} useLegacy
995
- * @returns {string}
996
+ /**
997
+ * フォント名とサイズをもとにcontextで使えるフォントを生成する
998
+ * @param {string} font
999
+ * @param {number} size
1000
+ * @param {boolean} useLegacy
1001
+ * @returns {string}
996
1002
  */
997
1003
 
998
1004
 
@@ -1013,11 +1019,11 @@
1013
1019
 
1014
1020
  }
1015
1021
  };
1016
- /**
1017
- * phpのarray_push的なあれ
1018
- * @param array
1019
- * @param {string} key
1020
- * @param push
1022
+ /**
1023
+ * phpのarray_push的なあれ
1024
+ * @param array
1025
+ * @param {string} key
1026
+ * @param push
1021
1027
  */
1022
1028
 
1023
1029
 
@@ -1032,10 +1038,10 @@
1032
1038
 
1033
1039
  array[key].push(push);
1034
1040
  };
1035
- /**
1036
- * Hexからrgbに変換する(_live用)
1037
- * @param {string} hex
1038
- * @return {array} RGB
1041
+ /**
1042
+ * Hexからrgbに変換する(_live用)
1043
+ * @param {string} hex
1044
+ * @return {array} RGB
1039
1045
  */
1040
1046
 
1041
1047
 
package/package.json CHANGED
@@ -1,31 +1,31 @@
1
- {
2
- "name": "@xpadev-net/niconicomments",
3
- "version": "0.1.8",
4
- "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
5
- "main": "dist/bundle.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1",
8
- "build": "rollup -c rollup.config.js",
9
- "prepublishOnly": "rollup -c rollup.config.js"
10
- },
11
- "repository": {
12
- "type": "git",
13
- "url": "git+https://github.com/xpadev-net/niconicomments.git"
14
- },
15
- "keywords": [
16
- "niconico"
17
- ],
18
- "author": "xpadev(xpadev.net)",
19
- "bugs": {
20
- "url": "https://github.com/xpadev-net/niconicomments/issues"
21
- },
22
- "files": [
23
- "dist/bundle.js"
24
- ],
25
- "homepage": "https://xpadev.net/niconicomments/docs/",
26
- "license": "MIT",
27
- "devDependencies": {
28
- "rollup": "^2.61.1",
29
- "@rollup/plugin-babel": "^5.3.0"
30
- }
31
- }
1
+ {
2
+ "name": "@xpadev-net/niconicomments",
3
+ "version": "0.1.11",
4
+ "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
5
+ "main": "dist/bundle.js",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1",
8
+ "build": "rollup -c rollup.config.js",
9
+ "prepublishOnly": "rollup -c rollup.config.js"
10
+ },
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/xpadev-net/niconicomments.git"
14
+ },
15
+ "keywords": [
16
+ "niconico"
17
+ ],
18
+ "author": "xpadev(xpadev.net)",
19
+ "bugs": {
20
+ "url": "https://github.com/xpadev-net/niconicomments/issues"
21
+ },
22
+ "files": [
23
+ "dist/bundle.js"
24
+ ],
25
+ "homepage": "https://xpadev.net/niconicomments/docs/",
26
+ "license": "MIT",
27
+ "devDependencies": {
28
+ "rollup": "^2.61.1",
29
+ "@rollup/plugin-babel": "^5.3.0"
30
+ }
31
+ }