@xpadev-net/niconicomments 0.0.7 → 0.0.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.
- package/LICENSE +7 -11
- package/README.md +24 -20
- package/dist/bundle.js +63 -55
- package/package.json +33 -32
package/LICENSE
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。
|
|
9
|
-
|
|
10
|
-
ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。
|
|
11
|
-
作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。
|
|
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,20 +1,24 @@
|
|
|
1
|
-
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
-
[](https://github.com/
|
|
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/niconicomments@latest/
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
+
[](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
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
})(this, (function () { 'use strict';
|
|
6
6
|
|
|
7
7
|
class NiconiComments {
|
|
8
|
-
/**
|
|
9
|
-
* NiconiComments Constructor
|
|
10
|
-
* @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
|
|
11
|
-
* @param {[]} data - 描画用のコメント
|
|
12
|
-
* @param {boolean} useLegacy - defontにsans-serifを適用するか(trueでニコニコ公式に準拠)
|
|
13
|
-
* @param {boolean} formatted - dataが独自フォーマットに変換されているか
|
|
8
|
+
/**
|
|
9
|
+
* NiconiComments Constructor
|
|
10
|
+
* @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
|
|
11
|
+
* @param {[]} data - 描画用のコメント
|
|
12
|
+
* @param {boolean} useLegacy - defontにsans-serifを適用するか(trueでニコニコ公式に準拠)
|
|
13
|
+
* @param {boolean} formatted - dataが独自フォーマットに変換されているか
|
|
14
14
|
*/
|
|
15
15
|
constructor(canvas, data, useLegacy = false, formatted = false) {
|
|
16
16
|
this.canvas = canvas;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
this.context.textAlign = "left";
|
|
20
20
|
this.context.textBaseline = "top";
|
|
21
21
|
this.context.lineWidth = "6";
|
|
22
|
-
this.commentYOffset = 0.
|
|
22
|
+
this.commentYOffset = 0.25;
|
|
23
23
|
this.commentYMarginTop = 0.05;
|
|
24
24
|
|
|
25
25
|
if (formatted) {
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
this.showCollision = false;
|
|
32
32
|
this.showFPS = false;
|
|
33
|
+
this.showCommentCount = false;
|
|
33
34
|
this.timeline = {};
|
|
34
35
|
this.nicoScripts = {
|
|
35
36
|
"reverse": []
|
|
@@ -47,10 +48,10 @@
|
|
|
47
48
|
this.fpsCount = 0;
|
|
48
49
|
}, 500);
|
|
49
50
|
}
|
|
50
|
-
/**
|
|
51
|
-
* ニコニコが吐き出したデータを処理しやすいように変換する
|
|
52
|
-
* @param {[]} data - ニコニコが吐き出したコメントデータ
|
|
53
|
-
* @returns {*[]} - 独自フォーマットのコメントデータ
|
|
51
|
+
/**
|
|
52
|
+
* ニコニコが吐き出したデータを処理しやすいように変換する
|
|
53
|
+
* @param {[]} data - ニコニコが吐き出したコメントデータ
|
|
54
|
+
* @returns {*[]} - 独自フォーマットのコメントデータ
|
|
54
55
|
*/
|
|
55
56
|
|
|
56
57
|
|
|
@@ -93,8 +94,8 @@
|
|
|
93
94
|
});
|
|
94
95
|
return data_;
|
|
95
96
|
}
|
|
96
|
-
/**
|
|
97
|
-
* 事前に当たり判定を考慮してコメントの描画場所を決定する
|
|
97
|
+
/**
|
|
98
|
+
* 事前に当たり判定を考慮してコメントの描画場所を決定する
|
|
98
99
|
*/
|
|
99
100
|
|
|
100
101
|
|
|
@@ -103,8 +104,8 @@
|
|
|
103
104
|
this.getCommentSize();
|
|
104
105
|
this.getCommentPos();
|
|
105
106
|
}
|
|
106
|
-
/**
|
|
107
|
-
* コマンドをもとに各コメントに適用するフォントを決定する
|
|
107
|
+
/**
|
|
108
|
+
* コマンドをもとに各コメントに適用するフォントを決定する
|
|
108
109
|
*/
|
|
109
110
|
|
|
110
111
|
|
|
@@ -122,8 +123,8 @@
|
|
|
122
123
|
this.data[i].content = this.data[i].content.replaceAll("\t", " ").replaceAll(/(\n){3,}/g, "\n\n\n");
|
|
123
124
|
}
|
|
124
125
|
}
|
|
125
|
-
/**
|
|
126
|
-
* コメントの描画サイズを計算する
|
|
126
|
+
/**
|
|
127
|
+
* コメントの描画サイズを計算する
|
|
127
128
|
*/
|
|
128
129
|
|
|
129
130
|
|
|
@@ -150,8 +151,8 @@
|
|
|
150
151
|
}
|
|
151
152
|
}
|
|
152
153
|
}
|
|
153
|
-
/**
|
|
154
|
-
* 計算された描画サイズをもとに各コメントの配置位置を決定する
|
|
154
|
+
/**
|
|
155
|
+
* 計算された描画サイズをもとに各コメントの配置位置を決定する
|
|
155
156
|
*/
|
|
156
157
|
|
|
157
158
|
|
|
@@ -339,11 +340,11 @@
|
|
|
339
340
|
}
|
|
340
341
|
}
|
|
341
342
|
}
|
|
342
|
-
/**
|
|
343
|
-
* context.measureTextの複数行対応版
|
|
344
|
-
* 画面外にはみ出すコメントの縮小も行う
|
|
345
|
-
* @param comment - 独自フォーマットのコメントデータ
|
|
346
|
-
* @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
|
|
343
|
+
/**
|
|
344
|
+
* context.measureTextの複数行対応版
|
|
345
|
+
* 画面外にはみ出すコメントの縮小も行う
|
|
346
|
+
* @param comment - 独自フォーマットのコメントデータ
|
|
347
|
+
* @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
|
|
347
348
|
*/
|
|
348
349
|
|
|
349
350
|
|
|
@@ -401,10 +402,10 @@
|
|
|
401
402
|
"fontSize": comment.fontSize
|
|
402
403
|
};
|
|
403
404
|
}
|
|
404
|
-
/**
|
|
405
|
-
* コマンドをもとに所定の位置にコメントを表示する
|
|
406
|
-
* @param comment - 独自フォーマットのコメントデータ
|
|
407
|
-
* @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
405
|
+
/**
|
|
406
|
+
* コマンドをもとに所定の位置にコメントを表示する
|
|
407
|
+
* @param comment - 独自フォーマットのコメントデータ
|
|
408
|
+
* @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
408
409
|
*/
|
|
409
410
|
|
|
410
411
|
|
|
@@ -428,7 +429,7 @@
|
|
|
428
429
|
|
|
429
430
|
if (comment.loc === "naka") {
|
|
430
431
|
if (reverse) {
|
|
431
|
-
posX = (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
|
|
432
|
+
posX = (1920 + comment.width_max) * (vpos - comment.vpos) / 500 - comment.width_max;
|
|
432
433
|
} else {
|
|
433
434
|
posX = 1920 - (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
|
|
434
435
|
}
|
|
@@ -466,10 +467,10 @@
|
|
|
466
467
|
this.context.strokeStyle = "rgba(0,0,0,0.7)";
|
|
467
468
|
}
|
|
468
469
|
}
|
|
469
|
-
/**
|
|
470
|
-
* コメントに含まれるコマンドを解釈する
|
|
471
|
-
* @param comment- 独自フォーマットのコメントデータ
|
|
472
|
-
* @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean}}
|
|
470
|
+
/**
|
|
471
|
+
* コメントに含まれるコマンドを解釈する
|
|
472
|
+
* @param comment- 独自フォーマットのコメントデータ
|
|
473
|
+
* @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean}}
|
|
473
474
|
*/
|
|
474
475
|
|
|
475
476
|
|
|
@@ -669,9 +670,9 @@
|
|
|
669
670
|
ender
|
|
670
671
|
};
|
|
671
672
|
}
|
|
672
|
-
/**
|
|
673
|
-
* キャンバスを描画する
|
|
674
|
-
* @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
673
|
+
/**
|
|
674
|
+
* キャンバスを描画する
|
|
675
|
+
* @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
675
676
|
*/
|
|
676
677
|
|
|
677
678
|
|
|
@@ -701,9 +702,16 @@
|
|
|
701
702
|
this.context.strokeText("FPS:" + this.fps, 100, 100);
|
|
702
703
|
this.context.fillText("FPS:" + this.fps, 100, 100);
|
|
703
704
|
}
|
|
705
|
+
|
|
706
|
+
if (this.showCommentCount) {
|
|
707
|
+
this.context.font = parseFont("defont", 60, this.useLegacy);
|
|
708
|
+
this.context.fillStyle = "#00FF00";
|
|
709
|
+
this.context.strokeText("Count:" + this.timeline[vpos].length, 100, 200);
|
|
710
|
+
this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
|
|
711
|
+
}
|
|
704
712
|
}
|
|
705
|
-
/**
|
|
706
|
-
* キャンバスを消去する
|
|
713
|
+
/**
|
|
714
|
+
* キャンバスを消去する
|
|
707
715
|
*/
|
|
708
716
|
|
|
709
717
|
|
|
@@ -712,12 +720,12 @@
|
|
|
712
720
|
}
|
|
713
721
|
|
|
714
722
|
}
|
|
715
|
-
/**
|
|
716
|
-
* 配列を複数のキーでグループ化する
|
|
717
|
-
* @param {{}} array
|
|
718
|
-
* @param {string} key
|
|
719
|
-
* @param {string} key2
|
|
720
|
-
* @returns {{}}
|
|
723
|
+
/**
|
|
724
|
+
* 配列を複数のキーでグループ化する
|
|
725
|
+
* @param {{}} array
|
|
726
|
+
* @param {string} key
|
|
727
|
+
* @param {string} key2
|
|
728
|
+
* @returns {{}}
|
|
721
729
|
*/
|
|
722
730
|
|
|
723
731
|
|
|
@@ -739,12 +747,12 @@
|
|
|
739
747
|
|
|
740
748
|
return data;
|
|
741
749
|
};
|
|
742
|
-
/**
|
|
743
|
-
* フォント名とサイズをもとにcontextで使えるフォントを生成する
|
|
744
|
-
* @param {string} font
|
|
745
|
-
* @param {number} size
|
|
746
|
-
* @param {boolean} useLegacy
|
|
747
|
-
* @returns {string}
|
|
750
|
+
/**
|
|
751
|
+
* フォント名とサイズをもとにcontextで使えるフォントを生成する
|
|
752
|
+
* @param {string} font
|
|
753
|
+
* @param {number} size
|
|
754
|
+
* @param {boolean} useLegacy
|
|
755
|
+
* @returns {string}
|
|
748
756
|
*/
|
|
749
757
|
|
|
750
758
|
|
|
@@ -765,11 +773,11 @@
|
|
|
765
773
|
|
|
766
774
|
}
|
|
767
775
|
};
|
|
768
|
-
/**
|
|
769
|
-
* phpのarray_push的なあれ
|
|
770
|
-
* @param array
|
|
771
|
-
* @param {string} key
|
|
772
|
-
* @param push
|
|
776
|
+
/**
|
|
777
|
+
* phpのarray_push的なあれ
|
|
778
|
+
* @param array
|
|
779
|
+
* @param {string} key
|
|
780
|
+
* @param push
|
|
773
781
|
*/
|
|
774
782
|
|
|
775
783
|
|
package/package.json
CHANGED
|
@@ -1,32 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@xpadev-net/niconicomments",
|
|
3
|
-
"version": "0.0.
|
|
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/",
|
|
26
|
-
"license": "MIT",
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@xpadev-net/niconicomments",
|
|
3
|
+
"version": "0.0.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
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@rollup/plugin-babel": "^5.3.0"
|
|
32
|
+
}
|
|
33
|
+
}
|