@xpadev-net/niconicomments 0.0.10 → 0.1.4
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 -7
- package/README.md +24 -24
- package/dist/bundle.js +192 -105
- package/package.json +33 -32
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
|
-
[](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
|
+
[](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,3 +1,8 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
niconicomments.js v0.1.4
|
|
3
|
+
(c) 2021 xpadev-net https://xpadevn.et
|
|
4
|
+
Released under the MIT License.
|
|
5
|
+
*/
|
|
1
6
|
(function (global, factory) {
|
|
2
7
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
3
8
|
typeof define === 'function' && define.amd ? define(factory) :
|
|
@@ -5,12 +10,12 @@
|
|
|
5
10
|
})(this, (function () { 'use strict';
|
|
6
11
|
|
|
7
12
|
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が独自フォーマットに変換されているか
|
|
13
|
+
/**
|
|
14
|
+
* NiconiComments Constructor
|
|
15
|
+
* @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
|
|
16
|
+
* @param {[]} data - 描画用のコメント
|
|
17
|
+
* @param {boolean} useLegacy - defontにsans-serifを適用するか(trueでニコニコ公式に準拠)
|
|
18
|
+
* @param {boolean} formatted - dataが独自フォーマットに変換されているか
|
|
14
19
|
*/
|
|
15
20
|
constructor(canvas, data, useLegacy = false, formatted = false) {
|
|
16
21
|
this.canvas = canvas;
|
|
@@ -19,8 +24,38 @@
|
|
|
19
24
|
this.context.textAlign = "left";
|
|
20
25
|
this.context.textBaseline = "top";
|
|
21
26
|
this.context.lineWidth = "6";
|
|
22
|
-
|
|
23
|
-
|
|
27
|
+
|
|
28
|
+
if (useLegacy) {
|
|
29
|
+
this.commentYOffset = 0.25;
|
|
30
|
+
} else {
|
|
31
|
+
this.commentYOffset = 0.125;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
this.commentYMarginTop = 10;
|
|
35
|
+
this.fontSize = {
|
|
36
|
+
"small": {
|
|
37
|
+
"default": 45,
|
|
38
|
+
"resized": 18
|
|
39
|
+
},
|
|
40
|
+
"medium": {
|
|
41
|
+
"default": 85,
|
|
42
|
+
"resized": 35
|
|
43
|
+
},
|
|
44
|
+
"big": {
|
|
45
|
+
"default": 120,
|
|
46
|
+
"resized": 57.5
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
this.doubleResizeMaxWidth = {
|
|
50
|
+
full: {
|
|
51
|
+
legacy: 3020,
|
|
52
|
+
default: 3220
|
|
53
|
+
},
|
|
54
|
+
normal: {
|
|
55
|
+
legacy: 2540,
|
|
56
|
+
default: 2740
|
|
57
|
+
}
|
|
58
|
+
};
|
|
24
59
|
|
|
25
60
|
if (formatted) {
|
|
26
61
|
this.data = data;
|
|
@@ -48,10 +83,10 @@
|
|
|
48
83
|
this.fpsCount = 0;
|
|
49
84
|
}, 500);
|
|
50
85
|
}
|
|
51
|
-
/**
|
|
52
|
-
* ニコニコが吐き出したデータを処理しやすいように変換する
|
|
53
|
-
* @param {[]} data - ニコニコが吐き出したコメントデータ
|
|
54
|
-
* @returns {*[]} - 独自フォーマットのコメントデータ
|
|
86
|
+
/**
|
|
87
|
+
* ニコニコが吐き出したデータを処理しやすいように変換する
|
|
88
|
+
* @param {[]} data - ニコニコが吐き出したコメントデータ
|
|
89
|
+
* @returns {*[]} - 独自フォーマットのコメントデータ
|
|
55
90
|
*/
|
|
56
91
|
|
|
57
92
|
|
|
@@ -62,18 +97,19 @@
|
|
|
62
97
|
for (let key in data[i]) {
|
|
63
98
|
let value = data[i][key];
|
|
64
99
|
|
|
65
|
-
if (key === "chat") {
|
|
100
|
+
if (key === "chat" && value["deleted"] !== 1) {
|
|
66
101
|
let tmpParam = {
|
|
67
102
|
"id": value["no"],
|
|
68
103
|
"vpos": value["vpos"],
|
|
69
104
|
"content": value["content"],
|
|
70
105
|
"date": value["date"],
|
|
71
106
|
"date_usec": value["date_usec"],
|
|
72
|
-
"owner": !value["user_id"]
|
|
107
|
+
"owner": !value["user_id"],
|
|
108
|
+
"premium": value["premium"] === 1
|
|
73
109
|
};
|
|
74
110
|
|
|
75
111
|
if (value["mail"]) {
|
|
76
|
-
tmpParam["mail"] = value["mail"].split(
|
|
112
|
+
tmpParam["mail"] = value["mail"].split(/[\s ]/g);
|
|
77
113
|
} else {
|
|
78
114
|
tmpParam["mail"] = [];
|
|
79
115
|
}
|
|
@@ -94,8 +130,8 @@
|
|
|
94
130
|
});
|
|
95
131
|
return data_;
|
|
96
132
|
}
|
|
97
|
-
/**
|
|
98
|
-
* 事前に当たり判定を考慮してコメントの描画場所を決定する
|
|
133
|
+
/**
|
|
134
|
+
* 事前に当たり判定を考慮してコメントの描画場所を決定する
|
|
99
135
|
*/
|
|
100
136
|
|
|
101
137
|
|
|
@@ -104,8 +140,8 @@
|
|
|
104
140
|
this.getCommentSize();
|
|
105
141
|
this.getCommentPos();
|
|
106
142
|
}
|
|
107
|
-
/**
|
|
108
|
-
* コマンドをもとに各コメントに適用するフォントを決定する
|
|
143
|
+
/**
|
|
144
|
+
* コマンドをもとに各コメントに適用するフォントを決定する
|
|
109
145
|
*/
|
|
110
146
|
|
|
111
147
|
|
|
@@ -120,11 +156,12 @@
|
|
|
120
156
|
this.data[i].color = command.color;
|
|
121
157
|
this.data[i].full = command.full;
|
|
122
158
|
this.data[i].ender = command.ender;
|
|
123
|
-
this.data[i].
|
|
159
|
+
this.data[i]._live = command._live;
|
|
160
|
+
this.data[i].content = this.data[i].content.replaceAll("\t", " ");
|
|
124
161
|
}
|
|
125
162
|
}
|
|
126
|
-
/**
|
|
127
|
-
* コメントの描画サイズを計算する
|
|
163
|
+
/**
|
|
164
|
+
* コメントの描画サイズを計算する
|
|
128
165
|
*/
|
|
129
166
|
|
|
130
167
|
|
|
@@ -151,8 +188,8 @@
|
|
|
151
188
|
}
|
|
152
189
|
}
|
|
153
190
|
}
|
|
154
|
-
/**
|
|
155
|
-
* 計算された描画サイズをもとに各コメントの配置位置を決定する
|
|
191
|
+
/**
|
|
192
|
+
* 計算された描画サイズをもとに各コメントの配置位置を決定する
|
|
156
193
|
*/
|
|
157
194
|
|
|
158
195
|
|
|
@@ -212,7 +249,7 @@
|
|
|
212
249
|
|
|
213
250
|
if (posY + comment.height > 1080) {
|
|
214
251
|
if (1080 < comment.height) {
|
|
215
|
-
posY =
|
|
252
|
+
posY = (comment.height - 1080) / -2;
|
|
216
253
|
} else {
|
|
217
254
|
posY = Math.floor(Math.random() * (1080 - comment.height));
|
|
218
255
|
}
|
|
@@ -340,29 +377,40 @@
|
|
|
340
377
|
}
|
|
341
378
|
}
|
|
342
379
|
}
|
|
343
|
-
/**
|
|
344
|
-
* context.measureTextの複数行対応版
|
|
345
|
-
* 画面外にはみ出すコメントの縮小も行う
|
|
346
|
-
* @param comment - 独自フォーマットのコメントデータ
|
|
347
|
-
* @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
|
|
380
|
+
/**
|
|
381
|
+
* context.measureTextの複数行対応版
|
|
382
|
+
* 画面外にはみ出すコメントの縮小も行う
|
|
383
|
+
* @param comment - 独自フォーマットのコメントデータ
|
|
384
|
+
* @returns {{resized: boolean, width: number, width_max: number, fontSize: number, width_min: number, height: number}} - 描画サイズとリサイズの情報
|
|
348
385
|
*/
|
|
349
386
|
|
|
350
387
|
|
|
351
388
|
measureText(comment) {
|
|
352
|
-
let msg = comment.content;
|
|
353
|
-
|
|
354
|
-
if (!comment.defaultFontSize) {
|
|
355
|
-
comment.defaultFontSize = comment.fontSize;
|
|
356
|
-
} else {
|
|
357
|
-
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
358
|
-
}
|
|
359
|
-
|
|
360
389
|
let width,
|
|
361
390
|
width_max,
|
|
362
391
|
width_min,
|
|
363
392
|
height,
|
|
364
393
|
width_arr = [],
|
|
365
|
-
lines =
|
|
394
|
+
lines = comment.content.split("\n");
|
|
395
|
+
|
|
396
|
+
if (!comment.resized && !comment.ender) {
|
|
397
|
+
if (comment.size === "big" && lines.length > 2) {
|
|
398
|
+
comment.fontSize = this.fontSize.big.resized;
|
|
399
|
+
comment.resized = true;
|
|
400
|
+
comment.tateRisized = true;
|
|
401
|
+
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
402
|
+
} else if (comment.size === "medium" && lines.length > 4) {
|
|
403
|
+
comment.fontSize = this.fontSize.medium.resized;
|
|
404
|
+
comment.resized = true;
|
|
405
|
+
comment.tateRisized = true;
|
|
406
|
+
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
407
|
+
} else if (comment.size === "small" && lines.length > 6) {
|
|
408
|
+
comment.fontSize = this.fontSize.small.resized;
|
|
409
|
+
comment.resized = true;
|
|
410
|
+
comment.tateRisized = true;
|
|
411
|
+
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
412
|
+
}
|
|
413
|
+
}
|
|
366
414
|
|
|
367
415
|
for (let i = 0; i < lines.length; i++) {
|
|
368
416
|
let measure = this.context.measureText(lines[i]);
|
|
@@ -372,22 +420,35 @@
|
|
|
372
420
|
width = width_arr.reduce((p, c) => p + c, 0) / width_arr.length;
|
|
373
421
|
width_max = Math.max(...width_arr);
|
|
374
422
|
width_min = Math.min(...width_arr);
|
|
375
|
-
height = comment.fontSize
|
|
423
|
+
height = (comment.fontSize + this.commentYMarginTop) * lines.length;
|
|
376
424
|
|
|
377
|
-
if (
|
|
378
|
-
comment.
|
|
379
|
-
comment.resized = true;
|
|
380
|
-
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
381
|
-
return this.measureText(comment);
|
|
382
|
-
} else if (comment.loc !== "naka" && (lines.length < 3 && comment.size === "big" || lines.length < 5 && comment.size === "medium" || lines.length < 7 && comment.size === "small" || comment.ender)) {
|
|
383
|
-
if (comment.full && width > 1920) {
|
|
425
|
+
if (comment.loc !== "naka" && !comment.tateRisized) {
|
|
426
|
+
if (comment.full && width_max > 1920) {
|
|
384
427
|
comment.fontSize -= 1;
|
|
385
428
|
comment.resized = true;
|
|
429
|
+
comment.yokoResized = true;
|
|
386
430
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
387
431
|
return this.measureText(comment);
|
|
388
|
-
} else if (!comment.full &&
|
|
432
|
+
} else if (!comment.full && width_max > 1440) {
|
|
389
433
|
comment.fontSize -= 1;
|
|
390
434
|
comment.resized = true;
|
|
435
|
+
comment.yokoResized = true;
|
|
436
|
+
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
437
|
+
return this.measureText(comment);
|
|
438
|
+
}
|
|
439
|
+
} else if (comment.loc !== "naka" && comment.tateRisized && (comment.full && width_max > 1920 || !comment.full && width_max > 1440) && !comment.yokoResized) {
|
|
440
|
+
comment.fontSize = this.fontSize[comment.size].default;
|
|
441
|
+
comment.resized = true;
|
|
442
|
+
comment.yokoResized = true;
|
|
443
|
+
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
444
|
+
return this.measureText(comment);
|
|
445
|
+
} else if (comment.loc !== "naka" && comment.tateRisized && comment.yokoResized) {
|
|
446
|
+
if (comment.full && width_max > this.doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
|
|
447
|
+
comment.fontSize -= 1;
|
|
448
|
+
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
449
|
+
return this.measureText(comment);
|
|
450
|
+
} else if (!comment.full && width_max > this.doubleResizeMaxWidth.normal[this.useLegacy ? "legacy" : "default"]) {
|
|
451
|
+
comment.fontSize -= 1.;
|
|
391
452
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
392
453
|
return this.measureText(comment);
|
|
393
454
|
}
|
|
@@ -402,10 +463,10 @@
|
|
|
402
463
|
"fontSize": comment.fontSize
|
|
403
464
|
};
|
|
404
465
|
}
|
|
405
|
-
/**
|
|
406
|
-
* コマンドをもとに所定の位置にコメントを表示する
|
|
407
|
-
* @param comment - 独自フォーマットのコメントデータ
|
|
408
|
-
* @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
466
|
+
/**
|
|
467
|
+
* コマンドをもとに所定の位置にコメントを表示する
|
|
468
|
+
* @param comment - 独自フォーマットのコメントデータ
|
|
469
|
+
* @param {number} vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
409
470
|
*/
|
|
410
471
|
|
|
411
472
|
|
|
@@ -427,29 +488,25 @@
|
|
|
427
488
|
let lines = comment.content.split("\n"),
|
|
428
489
|
posX = (1920 - comment.width_max) / 2;
|
|
429
490
|
|
|
430
|
-
if (comment.loc === "
|
|
431
|
-
if (reverse) {
|
|
432
|
-
posX = (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
|
|
433
|
-
} else {
|
|
434
|
-
posX = 1920 - (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
|
|
435
|
-
}
|
|
436
|
-
|
|
491
|
+
if (comment.loc === "shita") {
|
|
437
492
|
for (let i in lines) {
|
|
438
493
|
let line = lines[i];
|
|
439
|
-
let posY = comment.posY + i * comment.fontSize
|
|
494
|
+
let posY = 1080 - comment.posY + i * (comment.fontSize + this.commentYMarginTop) - comment.height + this.commentYOffset * comment.fontSize;
|
|
440
495
|
this.context.strokeText(line, posX, posY);
|
|
441
496
|
this.context.fillText(line, posX, posY);
|
|
442
497
|
}
|
|
443
|
-
} else
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
498
|
+
} else {
|
|
499
|
+
if (comment.loc === "naka") {
|
|
500
|
+
if (reverse) {
|
|
501
|
+
posX = (1920 + comment.width_max) * (vpos - comment.vpos) / 500 - comment.width_max;
|
|
502
|
+
} else {
|
|
503
|
+
posX = 1920 - (1920 + comment.width_max) * (vpos - comment.vpos) / 500;
|
|
504
|
+
}
|
|
448
505
|
}
|
|
449
|
-
|
|
506
|
+
|
|
450
507
|
for (let i in lines) {
|
|
451
508
|
let line = lines[i];
|
|
452
|
-
let posY =
|
|
509
|
+
let posY = comment.posY + i * (comment.fontSize + this.commentYMarginTop) + this.commentYOffset * comment.fontSize;
|
|
453
510
|
this.context.strokeText(line, posX, posY);
|
|
454
511
|
this.context.fillText(line, posX, posY);
|
|
455
512
|
}
|
|
@@ -467,10 +524,10 @@
|
|
|
467
524
|
this.context.strokeStyle = "rgba(0,0,0,0.7)";
|
|
468
525
|
}
|
|
469
526
|
}
|
|
470
|
-
/**
|
|
471
|
-
* コメントに含まれるコマンドを解釈する
|
|
472
|
-
* @param comment- 独自フォーマットのコメントデータ
|
|
473
|
-
* @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean}}
|
|
527
|
+
/**
|
|
528
|
+
* コメントに含まれるコマンドを解釈する
|
|
529
|
+
* @param comment- 独自フォーマットのコメントデータ
|
|
530
|
+
* @returns {{loc: string, size: string, color: string, fontSize: number, ender: boolean, font: string, full: boolean, _live: boolean}}
|
|
474
531
|
*/
|
|
475
532
|
|
|
476
533
|
|
|
@@ -478,12 +535,13 @@
|
|
|
478
535
|
let metadata = comment.mail,
|
|
479
536
|
loc = "naka",
|
|
480
537
|
size = "medium",
|
|
481
|
-
fontSize =
|
|
482
|
-
color = "#
|
|
538
|
+
fontSize = this.fontSize.medium.default,
|
|
539
|
+
color = "#ffffff",
|
|
483
540
|
font = 'defont',
|
|
484
541
|
full = false,
|
|
485
542
|
ender = false,
|
|
486
|
-
reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/)
|
|
543
|
+
reverse = comment.content.match(/@逆 ?(全|コメ|投コメ)?/),
|
|
544
|
+
_live = false;
|
|
487
545
|
|
|
488
546
|
if (reverse) {
|
|
489
547
|
if (!reverse[1]) {
|
|
@@ -514,7 +572,7 @@
|
|
|
514
572
|
}
|
|
515
573
|
|
|
516
574
|
for (let i in metadata) {
|
|
517
|
-
let command = metadata[i];
|
|
575
|
+
let command = metadata[i].toLowerCase();
|
|
518
576
|
|
|
519
577
|
if (loc === "naka") {
|
|
520
578
|
switch (command) {
|
|
@@ -532,18 +590,22 @@
|
|
|
532
590
|
switch (command) {
|
|
533
591
|
case "big":
|
|
534
592
|
size = "big";
|
|
535
|
-
fontSize =
|
|
593
|
+
fontSize = this.fontSize.big.default;
|
|
536
594
|
break;
|
|
537
595
|
|
|
538
596
|
case "small":
|
|
539
597
|
size = "small";
|
|
540
|
-
fontSize =
|
|
598
|
+
fontSize = this.fontSize.small.default;
|
|
541
599
|
break;
|
|
542
600
|
}
|
|
543
601
|
}
|
|
544
602
|
|
|
545
|
-
if (color === "#
|
|
603
|
+
if (color === "#ffffff") {
|
|
546
604
|
switch (command) {
|
|
605
|
+
case "white":
|
|
606
|
+
color = "#FFFFFF";
|
|
607
|
+
break;
|
|
608
|
+
|
|
547
609
|
case "red":
|
|
548
610
|
color = "#FF0000";
|
|
549
611
|
break;
|
|
@@ -628,12 +690,13 @@
|
|
|
628
690
|
break;
|
|
629
691
|
|
|
630
692
|
default:
|
|
631
|
-
const match = command.match(/#[0-9a-
|
|
693
|
+
const match = command.match(/#[0-9a-z]{3,6}/);
|
|
632
694
|
|
|
633
|
-
if (match) {
|
|
634
|
-
color = match[0];
|
|
695
|
+
if (match && comment.premium) {
|
|
696
|
+
color = match[0].toUpperCase();
|
|
635
697
|
}
|
|
636
698
|
|
|
699
|
+
break;
|
|
637
700
|
}
|
|
638
701
|
}
|
|
639
702
|
|
|
@@ -657,6 +720,9 @@
|
|
|
657
720
|
case "ender":
|
|
658
721
|
ender = true;
|
|
659
722
|
break;
|
|
723
|
+
|
|
724
|
+
case "_live":
|
|
725
|
+
_live = true;
|
|
660
726
|
}
|
|
661
727
|
}
|
|
662
728
|
|
|
@@ -667,12 +733,13 @@
|
|
|
667
733
|
color,
|
|
668
734
|
font,
|
|
669
735
|
full,
|
|
670
|
-
ender
|
|
736
|
+
ender,
|
|
737
|
+
_live
|
|
671
738
|
};
|
|
672
739
|
}
|
|
673
|
-
/**
|
|
674
|
-
* キャンバスを描画する
|
|
675
|
-
* @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
740
|
+
/**
|
|
741
|
+
* キャンバスを描画する
|
|
742
|
+
* @param vpos - 動画の現在位置の100倍 ニコニコから吐き出されるコメントの位置情報は主にこれ
|
|
676
743
|
*/
|
|
677
744
|
|
|
678
745
|
|
|
@@ -683,7 +750,13 @@
|
|
|
683
750
|
for (let index in this.timeline[vpos]) {
|
|
684
751
|
let comment = this.data[this.timeline[vpos][index]];
|
|
685
752
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
686
|
-
|
|
753
|
+
|
|
754
|
+
if (comment._live) {
|
|
755
|
+
let rgb = hex2rgb(comment.color);
|
|
756
|
+
this.context.fillStyle = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},0.5)`;
|
|
757
|
+
} else {
|
|
758
|
+
this.context.fillStyle = comment.color;
|
|
759
|
+
}
|
|
687
760
|
|
|
688
761
|
if (comment.color === "#000000") {
|
|
689
762
|
this.context.strokeStyle = "rgba(255,255,255,0.7)";
|
|
@@ -710,8 +783,8 @@
|
|
|
710
783
|
this.context.fillText("Count:" + this.timeline[vpos].length, 100, 200);
|
|
711
784
|
}
|
|
712
785
|
}
|
|
713
|
-
/**
|
|
714
|
-
* キャンバスを消去する
|
|
786
|
+
/**
|
|
787
|
+
* キャンバスを消去する
|
|
715
788
|
*/
|
|
716
789
|
|
|
717
790
|
|
|
@@ -720,12 +793,12 @@
|
|
|
720
793
|
}
|
|
721
794
|
|
|
722
795
|
}
|
|
723
|
-
/**
|
|
724
|
-
* 配列を複数のキーでグループ化する
|
|
725
|
-
* @param {{}} array
|
|
726
|
-
* @param {string} key
|
|
727
|
-
* @param {string} key2
|
|
728
|
-
* @returns {{}}
|
|
796
|
+
/**
|
|
797
|
+
* 配列を複数のキーでグループ化する
|
|
798
|
+
* @param {{}} array
|
|
799
|
+
* @param {string} key
|
|
800
|
+
* @param {string} key2
|
|
801
|
+
* @returns {{}}
|
|
729
802
|
*/
|
|
730
803
|
|
|
731
804
|
|
|
@@ -747,12 +820,12 @@
|
|
|
747
820
|
|
|
748
821
|
return data;
|
|
749
822
|
};
|
|
750
|
-
/**
|
|
751
|
-
* フォント名とサイズをもとにcontextで使えるフォントを生成する
|
|
752
|
-
* @param {string} font
|
|
753
|
-
* @param {number} size
|
|
754
|
-
* @param {boolean} useLegacy
|
|
755
|
-
* @returns {string}
|
|
823
|
+
/**
|
|
824
|
+
* フォント名とサイズをもとにcontextで使えるフォントを生成する
|
|
825
|
+
* @param {string} font
|
|
826
|
+
* @param {number} size
|
|
827
|
+
* @param {boolean} useLegacy
|
|
828
|
+
* @returns {string}
|
|
756
829
|
*/
|
|
757
830
|
|
|
758
831
|
|
|
@@ -773,11 +846,11 @@
|
|
|
773
846
|
|
|
774
847
|
}
|
|
775
848
|
};
|
|
776
|
-
/**
|
|
777
|
-
* phpのarray_push的なあれ
|
|
778
|
-
* @param array
|
|
779
|
-
* @param {string} key
|
|
780
|
-
* @param push
|
|
849
|
+
/**
|
|
850
|
+
* phpのarray_push的なあれ
|
|
851
|
+
* @param array
|
|
852
|
+
* @param {string} key
|
|
853
|
+
* @param push
|
|
781
854
|
*/
|
|
782
855
|
|
|
783
856
|
|
|
@@ -792,6 +865,20 @@
|
|
|
792
865
|
|
|
793
866
|
array[key].push(push);
|
|
794
867
|
};
|
|
868
|
+
/**
|
|
869
|
+
* Hexからrgbに変換する(_live用)
|
|
870
|
+
* @param {string} hex
|
|
871
|
+
* @return {array} RGB
|
|
872
|
+
*/
|
|
873
|
+
|
|
874
|
+
|
|
875
|
+
const hex2rgb = hex => {
|
|
876
|
+
if (hex.slice(0, 1) === "#") hex = hex.slice(1);
|
|
877
|
+
if (hex.length === 3) hex = hex.slice(0, 1) + hex.slice(0, 1) + hex.slice(1, 2) + hex.slice(1, 2) + hex.slice(2, 3) + hex.slice(2, 3);
|
|
878
|
+
return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map(function (str) {
|
|
879
|
+
return parseInt(str, 16);
|
|
880
|
+
});
|
|
881
|
+
};
|
|
795
882
|
|
|
796
883
|
return NiconiComments;
|
|
797
884
|
|
package/package.json
CHANGED
|
@@ -1,32 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@xpadev-net/niconicomments",
|
|
3
|
-
"version": "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/niconicomments/docs/",
|
|
26
|
-
"license": "MIT",
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@xpadev-net/niconicomments",
|
|
3
|
+
"version": "0.1.4",
|
|
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
|
+
}
|