@xpadev-net/niconicomments 0.2.7 → 0.2.10
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/README.md +4 -5
- package/dist/bundle.js +192 -67
- package/dist/dts/main.d.ts +145 -0
- package/dist/dts/main.d.ts.map +1 -0
- package/package.json +12 -7
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
2
|
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ
|
|
4
|
+
High peformance High compatibility comment drawing library
|
|
5
5
|
Reference: https://xpadev-net.github.io/niconicomments/
|
|
6
6
|
Github: https://github.com/xpadev-net/niconicomments
|
|
7
7
|
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
@@ -27,6 +27,5 @@ setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100))
|
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
## Sample
|
|
30
|
-
[
|
|
31
|
-
[
|
|
32
|
-
[ニコニコ動画流星群](https://xpadev.net/niconicomments/ryuuseigun.html)
|
|
30
|
+
[サンプル](https://xpadev.net/niconicomments/sample.html)
|
|
31
|
+
[CodePen](https://codepen.io/xpadev-net/pen/mdBdQmX)
|
package/dist/bundle.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
niconicomments.js v0.2.
|
|
2
|
+
niconicomments.js v0.2.10
|
|
3
3
|
(c) 2021 xpadev-net https://xpadev.net
|
|
4
4
|
Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -9,6 +9,22 @@
|
|
|
9
9
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.NiconiComments = factory());
|
|
10
10
|
})(this, (function () { 'use strict';
|
|
11
11
|
|
|
12
|
+
var _assign = function __assign() {
|
|
13
|
+
_assign = Object.assign || function __assign(t) {
|
|
14
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
15
|
+
s = arguments[i];
|
|
16
|
+
|
|
17
|
+
for (var p in s) {
|
|
18
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return _assign.apply(this, arguments);
|
|
26
|
+
};
|
|
27
|
+
|
|
12
28
|
var NiconiComments = (function () {
|
|
13
29
|
function NiconiComments(canvas, data, options) {
|
|
14
30
|
if (options === void 0) { options = {
|
|
@@ -22,7 +38,10 @@
|
|
|
22
38
|
}; }
|
|
23
39
|
var _this = this;
|
|
24
40
|
this.canvas = canvas;
|
|
25
|
-
|
|
41
|
+
var context = canvas.getContext("2d");
|
|
42
|
+
if (!context)
|
|
43
|
+
throw new Error("Fail to get CanvasRenderingContext2D");
|
|
44
|
+
this.context = context;
|
|
26
45
|
this.context.strokeStyle = "rgba(0,0,0,0.7)";
|
|
27
46
|
this.context.textAlign = "start";
|
|
28
47
|
this.context.textBaseline = "alphabetic";
|
|
@@ -46,11 +65,11 @@
|
|
|
46
65
|
this.doubleResizeMaxWidth = {
|
|
47
66
|
full: {
|
|
48
67
|
legacy: 3020,
|
|
49
|
-
|
|
68
|
+
default: 3220
|
|
50
69
|
},
|
|
51
70
|
normal: {
|
|
52
71
|
legacy: 2540,
|
|
53
|
-
|
|
72
|
+
default: 2740
|
|
54
73
|
}
|
|
55
74
|
};
|
|
56
75
|
var parsedData = options.formatted ? data : this.parseData(data);
|
|
@@ -59,17 +78,18 @@
|
|
|
59
78
|
this.showFPS = options.showFPS;
|
|
60
79
|
this.showCommentCount = options.showCommentCount;
|
|
61
80
|
this.timeline = {};
|
|
62
|
-
this.nicoScripts = {
|
|
81
|
+
this.nicoScripts = { reverse: [], default: [], replace: [], ban: [] };
|
|
63
82
|
this.collision_right = {};
|
|
64
83
|
this.collision_left = {};
|
|
65
84
|
this.collision_ue = {};
|
|
66
85
|
this.collision_shita = {};
|
|
86
|
+
this.data = [];
|
|
67
87
|
this.lastVpos = -1;
|
|
68
88
|
this.useLegacy = options.useLegacy;
|
|
69
89
|
this.preRendering(parsedData, options.drawAllImageOnLoad);
|
|
70
90
|
this.fpsCount = 0;
|
|
71
91
|
this.fps = 0;
|
|
72
|
-
|
|
92
|
+
window.setInterval(function () {
|
|
73
93
|
_this.fps = _this.fpsCount * 2;
|
|
74
94
|
_this.fpsCount = 0;
|
|
75
95
|
}, 500);
|
|
@@ -78,8 +98,11 @@
|
|
|
78
98
|
var data_ = [];
|
|
79
99
|
for (var i = 0; i < data.length; i++) {
|
|
80
100
|
for (var key in data[i]) {
|
|
81
|
-
var
|
|
82
|
-
if (
|
|
101
|
+
var val = data[i];
|
|
102
|
+
if (!val)
|
|
103
|
+
continue;
|
|
104
|
+
var value = val[key];
|
|
105
|
+
if (isApiChat(value) && value["deleted"] !== 1) {
|
|
83
106
|
var tmpParam = {
|
|
84
107
|
"id": value["no"],
|
|
85
108
|
"vpos": value["vpos"],
|
|
@@ -93,6 +116,9 @@
|
|
|
93
116
|
if (value["mail"]) {
|
|
94
117
|
tmpParam["mail"] = value["mail"].split(/[\s ]/g);
|
|
95
118
|
}
|
|
119
|
+
if (value["content"].startsWith("/") && !value["user_id"]) {
|
|
120
|
+
tmpParam["mail"].push("invisible");
|
|
121
|
+
}
|
|
96
122
|
data_.push(tmpParam);
|
|
97
123
|
}
|
|
98
124
|
}
|
|
@@ -115,9 +141,7 @@
|
|
|
115
141
|
return data_;
|
|
116
142
|
};
|
|
117
143
|
NiconiComments.prototype.preRendering = function (rawData, drawAll) {
|
|
118
|
-
|
|
119
|
-
rawData = this.getCommentSize(rawData);
|
|
120
|
-
var parsedData = this.getCommentPos(rawData);
|
|
144
|
+
var parsedData = this.getCommentPos(this.getCommentSize(this.getFont(rawData)));
|
|
121
145
|
this.data = this.sortComment(parsedData);
|
|
122
146
|
if (drawAll) {
|
|
123
147
|
for (var i in parsedData) {
|
|
@@ -126,27 +150,19 @@
|
|
|
126
150
|
}
|
|
127
151
|
};
|
|
128
152
|
NiconiComments.prototype.getFont = function (parsedData) {
|
|
153
|
+
var result = [];
|
|
129
154
|
for (var i in parsedData) {
|
|
130
|
-
var
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
parsedData[i].font = command.font;
|
|
136
|
-
parsedData[i].color = command.color;
|
|
137
|
-
parsedData[i].full = command.full;
|
|
138
|
-
parsedData[i].ender = command.ender;
|
|
139
|
-
parsedData[i]._live = command._live;
|
|
140
|
-
parsedData[i].long = command.long;
|
|
141
|
-
parsedData[i].invisible = command.invisible;
|
|
142
|
-
parsedData[i].content = parsedData[i].content.replaceAll("\t", "\u2003\u2003");
|
|
143
|
-
if (parsedData[i].content.match(/\s{4,}/))
|
|
144
|
-
console.log(parsedData[i], parsedData[i].content.replace(/\t/g, "\u2003\u2003"));
|
|
155
|
+
var value = parsedData[i];
|
|
156
|
+
if (!value)
|
|
157
|
+
continue;
|
|
158
|
+
value.content = value.content.replace(/\t/g, "\u2003\u2003");
|
|
159
|
+
result[i] = this.parseCommandAndNicoscript(value);
|
|
145
160
|
}
|
|
146
|
-
return
|
|
161
|
+
return result;
|
|
147
162
|
};
|
|
148
163
|
NiconiComments.prototype.getCommentSize = function (parsedData) {
|
|
149
164
|
var tmpData = groupBy(parsedData, "font", "fontSize");
|
|
165
|
+
var result = [];
|
|
150
166
|
for (var i in tmpData) {
|
|
151
167
|
for (var j in tmpData[i]) {
|
|
152
168
|
this.context.font = parseFont(i, j, this.useLegacy);
|
|
@@ -156,24 +172,26 @@
|
|
|
156
172
|
continue;
|
|
157
173
|
}
|
|
158
174
|
var measure = this.measureText(comment);
|
|
159
|
-
parsedData[comment.index]
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
175
|
+
var size = parsedData[comment.index];
|
|
176
|
+
size.height = measure.height;
|
|
177
|
+
size.width = measure.width;
|
|
178
|
+
size.width_max = measure.width_max;
|
|
179
|
+
size.width_min = measure.width_min;
|
|
163
180
|
if (measure.resized) {
|
|
164
|
-
|
|
181
|
+
size.fontSize = measure.fontSize;
|
|
165
182
|
this.context.font = parseFont(i, j, this.useLegacy);
|
|
166
183
|
}
|
|
184
|
+
result[comment.index] = size;
|
|
167
185
|
}
|
|
168
186
|
}
|
|
169
187
|
}
|
|
170
|
-
return
|
|
188
|
+
return result;
|
|
171
189
|
};
|
|
172
190
|
NiconiComments.prototype.getCommentPos = function (parsedData) {
|
|
173
191
|
var data = parsedData;
|
|
174
192
|
for (var i in data) {
|
|
175
193
|
var comment = data[i];
|
|
176
|
-
if (comment.invisible) {
|
|
194
|
+
if (!comment || comment.invisible) {
|
|
177
195
|
continue;
|
|
178
196
|
}
|
|
179
197
|
for (var j = 0; j < 500; j++) {
|
|
@@ -231,7 +249,7 @@
|
|
|
231
249
|
break;
|
|
232
250
|
}
|
|
233
251
|
}
|
|
234
|
-
if (left_pos <= 40 && is_break
|
|
252
|
+
if (left_pos <= 40 && !is_break) {
|
|
235
253
|
for (var k in this.collision_left[vpos]) {
|
|
236
254
|
var l = this.collision_left[vpos][k];
|
|
237
255
|
if ((posY < data[l].posY + data[l].height && posY + comment.height > data[l].posY) && data[l].owner === comment.owner) {
|
|
@@ -328,6 +346,8 @@
|
|
|
328
346
|
};
|
|
329
347
|
NiconiComments.prototype.sortComment = function (parsedData) {
|
|
330
348
|
for (var vpos in this.timeline) {
|
|
349
|
+
if (!this.timeline[vpos])
|
|
350
|
+
continue;
|
|
331
351
|
this.timeline[vpos].sort(function (a, b) {
|
|
332
352
|
var A = parsedData[a];
|
|
333
353
|
var B = parsedData[b];
|
|
@@ -350,19 +370,19 @@
|
|
|
350
370
|
if (comment.size === "big" && lines.length > 2) {
|
|
351
371
|
comment.fontSize = this.fontSize.big.resized;
|
|
352
372
|
comment.resized = true;
|
|
353
|
-
comment.
|
|
373
|
+
comment.tateresized = true;
|
|
354
374
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
355
375
|
}
|
|
356
376
|
else if (comment.size === "medium" && lines.length > 4) {
|
|
357
377
|
comment.fontSize = this.fontSize.medium.resized;
|
|
358
378
|
comment.resized = true;
|
|
359
|
-
comment.
|
|
379
|
+
comment.tateresized = true;
|
|
360
380
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
361
381
|
}
|
|
362
382
|
else if (comment.size === "small" && lines.length > 6) {
|
|
363
383
|
comment.fontSize = this.fontSize.small.resized;
|
|
364
384
|
comment.resized = true;
|
|
365
|
-
comment.
|
|
385
|
+
comment.tateresized = true;
|
|
366
386
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
367
387
|
}
|
|
368
388
|
}
|
|
@@ -374,7 +394,7 @@
|
|
|
374
394
|
width_max = Math.max.apply(Math, width_arr);
|
|
375
395
|
width_min = Math.min.apply(Math, width_arr);
|
|
376
396
|
height = (comment.fontSize * (1 + this.commentYPaddingTop) * lines.length) + (this.commentYMarginBottom * comment.fontSize);
|
|
377
|
-
if (comment.loc !== "naka" && !comment.
|
|
397
|
+
if (comment.loc !== "naka" && !comment.tateresized) {
|
|
378
398
|
if (comment.full && width_max > 1920) {
|
|
379
399
|
comment.fontSize -= 2;
|
|
380
400
|
comment.resized = true;
|
|
@@ -390,14 +410,15 @@
|
|
|
390
410
|
return this.measureText(comment);
|
|
391
411
|
}
|
|
392
412
|
}
|
|
393
|
-
else if (comment.loc !== "naka" && comment.
|
|
394
|
-
comment.fontSize = this.fontSize[comment.size]
|
|
413
|
+
else if (comment.loc !== "naka" && comment.tateresized && (comment.full && width_max > 2120 || !comment.full && width_max > 1440) && !comment.yokoResized) {
|
|
414
|
+
comment.fontSize = this.fontSize[comment.size].default;
|
|
395
415
|
comment.resized = true;
|
|
396
416
|
comment.yokoResized = true;
|
|
397
417
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
418
|
+
console.log(comment);
|
|
398
419
|
return this.measureText(comment);
|
|
399
420
|
}
|
|
400
|
-
else if (comment.loc !== "naka" && comment.
|
|
421
|
+
else if (comment.loc !== "naka" && comment.tateresized && comment.yokoResized) {
|
|
401
422
|
if (comment.full && width_max > this.doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
|
|
402
423
|
comment.fontSize -= 1;
|
|
403
424
|
this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
|
|
@@ -429,6 +450,12 @@
|
|
|
429
450
|
reverse = true;
|
|
430
451
|
}
|
|
431
452
|
}
|
|
453
|
+
for (var i in this.nicoScripts.ban) {
|
|
454
|
+
var range = this.nicoScripts.ban[i];
|
|
455
|
+
if (range.start < vpos && vpos < range.end) {
|
|
456
|
+
return;
|
|
457
|
+
}
|
|
458
|
+
}
|
|
432
459
|
var posX = (1920 - comment.width_max) / 2, posY = comment.posY;
|
|
433
460
|
if (comment.loc === "naka") {
|
|
434
461
|
if (reverse) {
|
|
@@ -441,17 +468,20 @@
|
|
|
441
468
|
else if (comment.loc === "shita") {
|
|
442
469
|
posY = 1080 - comment.posY - comment.height;
|
|
443
470
|
}
|
|
444
|
-
|
|
471
|
+
if (comment.image)
|
|
472
|
+
this.context.drawImage(comment.image, posX, posY);
|
|
445
473
|
};
|
|
446
474
|
NiconiComments.prototype.getTextImage = function (i) {
|
|
447
475
|
var value = this.data[i];
|
|
448
|
-
if (value.invisible) {
|
|
476
|
+
if (!value || value.invisible) {
|
|
449
477
|
return;
|
|
450
478
|
}
|
|
451
479
|
var image = document.createElement("canvas");
|
|
452
480
|
image.width = value.width_max;
|
|
453
481
|
image.height = value.height;
|
|
454
482
|
var context = image.getContext("2d");
|
|
483
|
+
if (!context)
|
|
484
|
+
throw new Error("Fail to get CanvasRenderingContext2D");
|
|
455
485
|
context.strokeStyle = "rgba(0,0,0,0.7)";
|
|
456
486
|
context.textAlign = "start";
|
|
457
487
|
context.textBaseline = "alphabetic";
|
|
@@ -518,11 +548,11 @@
|
|
|
518
548
|
switch (command) {
|
|
519
549
|
case "big":
|
|
520
550
|
size = "big";
|
|
521
|
-
fontSize = this.fontSize.big
|
|
551
|
+
fontSize = this.fontSize.big.default;
|
|
522
552
|
break;
|
|
523
553
|
case "small":
|
|
524
554
|
size = "small";
|
|
525
|
-
fontSize = this.fontSize.small
|
|
555
|
+
fontSize = this.fontSize.small.default;
|
|
526
556
|
break;
|
|
527
557
|
}
|
|
528
558
|
}
|
|
@@ -635,7 +665,7 @@
|
|
|
635
665
|
if (nicoscript) {
|
|
636
666
|
switch (nicoscript[1]) {
|
|
637
667
|
case "デフォルト":
|
|
638
|
-
this.nicoScripts
|
|
668
|
+
this.nicoScripts.default.push({
|
|
639
669
|
start: comment.vpos,
|
|
640
670
|
long: data.long === null ? null : Math.floor(data.long * 100),
|
|
641
671
|
color: data.color,
|
|
@@ -646,6 +676,8 @@
|
|
|
646
676
|
break;
|
|
647
677
|
case "逆":
|
|
648
678
|
var reverse = comment.content.match(/^@逆 ?(全|コメ|投コメ)?/);
|
|
679
|
+
if (!reverse)
|
|
680
|
+
reverse = [];
|
|
649
681
|
if (!reverse[1]) {
|
|
650
682
|
reverse[1] = "全";
|
|
651
683
|
}
|
|
@@ -653,31 +685,112 @@
|
|
|
653
685
|
data.long = 30;
|
|
654
686
|
}
|
|
655
687
|
this.nicoScripts.reverse.push({
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
688
|
+
start: comment.vpos,
|
|
689
|
+
end: comment.vpos + (data.long * 100),
|
|
690
|
+
target: reverse[1]
|
|
691
|
+
});
|
|
692
|
+
break;
|
|
693
|
+
case "コメント禁止":
|
|
694
|
+
if (data.long === null) {
|
|
695
|
+
data.long = 30;
|
|
696
|
+
}
|
|
697
|
+
this.nicoScripts.reverse.push({
|
|
698
|
+
start: comment.vpos,
|
|
699
|
+
end: comment.vpos + (data.long * 100),
|
|
700
|
+
});
|
|
701
|
+
break;
|
|
702
|
+
case "置換":
|
|
703
|
+
var content = comment.content.split(""), quote = "", last_i = "", string = "", result = [];
|
|
704
|
+
for (var _i = 0, _a = content.slice(4); _i < _a.length; _i++) {
|
|
705
|
+
var i = _a[_i];
|
|
706
|
+
if (i.match(/["'「]/) && quote === "") {
|
|
707
|
+
quote = i;
|
|
708
|
+
}
|
|
709
|
+
else if (i.match(/["']/) && quote === i && last_i !== "\\") {
|
|
710
|
+
result.push(replaceAll(string, "\\n", "\n"));
|
|
711
|
+
quote = "";
|
|
712
|
+
string = "";
|
|
713
|
+
}
|
|
714
|
+
else if (i.match(/」/) && quote === "「") {
|
|
715
|
+
result.push(string);
|
|
716
|
+
quote = "";
|
|
717
|
+
string = "";
|
|
718
|
+
}
|
|
719
|
+
else if (quote === "" && i.match(/[\s ]/)) {
|
|
720
|
+
if (string) {
|
|
721
|
+
result.push(string);
|
|
722
|
+
string = "";
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
else {
|
|
726
|
+
string += i;
|
|
727
|
+
}
|
|
728
|
+
last_i = i;
|
|
729
|
+
}
|
|
730
|
+
result.push(string);
|
|
731
|
+
this.nicoScripts.replace.push({
|
|
732
|
+
start: comment.vpos,
|
|
733
|
+
long: data.long === null ? null : Math.floor(data.long * 100),
|
|
734
|
+
keyword: result[0],
|
|
735
|
+
replace: result[1] || "",
|
|
736
|
+
range: result[2] || "単",
|
|
737
|
+
target: result[3] || "コメ",
|
|
738
|
+
condition: result[4] || "部分一致",
|
|
739
|
+
color: data.color,
|
|
740
|
+
size: data.size,
|
|
741
|
+
font: data.font,
|
|
742
|
+
loc: data.loc
|
|
659
743
|
});
|
|
660
744
|
break;
|
|
661
745
|
}
|
|
662
746
|
data.invisible = true;
|
|
663
747
|
}
|
|
664
748
|
var color = "#FFFFFF", size = "medium", font = "defont", loc = "naka";
|
|
665
|
-
for (var i in this.nicoScripts
|
|
666
|
-
if (this.nicoScripts
|
|
667
|
-
this.nicoScripts
|
|
749
|
+
for (var i in this.nicoScripts.default) {
|
|
750
|
+
if (this.nicoScripts.default[i].long !== null && this.nicoScripts.default[i].start + this.nicoScripts.default[i].long < comment.vpos) {
|
|
751
|
+
this.nicoScripts.default = this.nicoScripts.default.splice(Number(i), 1);
|
|
668
752
|
continue;
|
|
669
753
|
}
|
|
670
|
-
if (this.nicoScripts
|
|
671
|
-
loc = this.nicoScripts
|
|
754
|
+
if (this.nicoScripts.default[i].loc) {
|
|
755
|
+
loc = this.nicoScripts.default[i].loc;
|
|
756
|
+
}
|
|
757
|
+
if (this.nicoScripts.default[i].color) {
|
|
758
|
+
color = this.nicoScripts.default[i].color;
|
|
759
|
+
}
|
|
760
|
+
if (this.nicoScripts.default[i].size) {
|
|
761
|
+
size = this.nicoScripts.default[i].size;
|
|
672
762
|
}
|
|
673
|
-
if (this.nicoScripts
|
|
674
|
-
|
|
763
|
+
if (this.nicoScripts.default[i].font) {
|
|
764
|
+
font = this.nicoScripts.default[i].font;
|
|
675
765
|
}
|
|
676
|
-
|
|
677
|
-
|
|
766
|
+
}
|
|
767
|
+
for (var i in this.nicoScripts.replace) {
|
|
768
|
+
if (this.nicoScripts.replace[i].long !== null && this.nicoScripts.replace[i].start + this.nicoScripts.replace[i].long < comment.vpos) {
|
|
769
|
+
this.nicoScripts.default = this.nicoScripts.default.splice(Number(i), 1);
|
|
770
|
+
continue;
|
|
678
771
|
}
|
|
679
|
-
|
|
680
|
-
|
|
772
|
+
var item = this.nicoScripts.replace[i];
|
|
773
|
+
if ((item.target === "コメ" && comment.owner) || (item.target === "投コメ" && !comment.owner) || (item.target === "含まない" && comment.owner))
|
|
774
|
+
continue;
|
|
775
|
+
if ((item.condition === "完全一致" && comment.content === item.keyword) || (item.condition === "部分一致" && comment.content.indexOf(item.keyword) !== -1)) {
|
|
776
|
+
if (item.range === "単") {
|
|
777
|
+
comment.content = replaceAll(comment.content, item.keyword, item.replace);
|
|
778
|
+
}
|
|
779
|
+
else {
|
|
780
|
+
comment.content = item.replace;
|
|
781
|
+
}
|
|
782
|
+
if (item.loc) {
|
|
783
|
+
loc = item.loc;
|
|
784
|
+
}
|
|
785
|
+
if (item.color) {
|
|
786
|
+
color = item.color;
|
|
787
|
+
}
|
|
788
|
+
if (item.size) {
|
|
789
|
+
size = item.size;
|
|
790
|
+
}
|
|
791
|
+
if (item.font) {
|
|
792
|
+
font = item.font;
|
|
793
|
+
}
|
|
681
794
|
}
|
|
682
795
|
}
|
|
683
796
|
if (!data.loc) {
|
|
@@ -688,7 +801,7 @@
|
|
|
688
801
|
}
|
|
689
802
|
if (!data.size) {
|
|
690
803
|
data.size = size;
|
|
691
|
-
data.fontSize = this.fontSize[data.size]
|
|
804
|
+
data.fontSize = this.fontSize[data.size].default;
|
|
692
805
|
}
|
|
693
806
|
if (!data.font) {
|
|
694
807
|
data.font = font;
|
|
@@ -701,7 +814,7 @@
|
|
|
701
814
|
data.long = Math.floor(data.long * 100);
|
|
702
815
|
}
|
|
703
816
|
}
|
|
704
|
-
return data;
|
|
817
|
+
return _assign(_assign({}, comment), data);
|
|
705
818
|
};
|
|
706
819
|
NiconiComments.prototype.drawCanvas = function (vpos) {
|
|
707
820
|
if (this.lastVpos === vpos)
|
|
@@ -722,13 +835,14 @@
|
|
|
722
835
|
this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
|
|
723
836
|
}
|
|
724
837
|
if (this.timeline[vpos]) {
|
|
725
|
-
for (var
|
|
726
|
-
var
|
|
727
|
-
|
|
838
|
+
for (var i in this.timeline[vpos]) {
|
|
839
|
+
var index = this.timeline[vpos][Number(i)];
|
|
840
|
+
var comment = this.data[index];
|
|
841
|
+
if (!comment || comment.invisible) {
|
|
728
842
|
continue;
|
|
729
843
|
}
|
|
730
844
|
if (!comment.image) {
|
|
731
|
-
this.getTextImage(
|
|
845
|
+
this.getTextImage(index);
|
|
732
846
|
}
|
|
733
847
|
this.drawText(comment, vpos);
|
|
734
848
|
}
|
|
@@ -804,6 +918,17 @@
|
|
|
804
918
|
return parseInt(str, 16);
|
|
805
919
|
});
|
|
806
920
|
};
|
|
921
|
+
var replaceAll = function (string, target, replace) {
|
|
922
|
+
var count = 0;
|
|
923
|
+
while (string.indexOf(target) !== -1 && count < 100) {
|
|
924
|
+
string = string.replace(target, replace);
|
|
925
|
+
count++;
|
|
926
|
+
}
|
|
927
|
+
return string;
|
|
928
|
+
};
|
|
929
|
+
var isApiChat = function (item) {
|
|
930
|
+
return !!item.chat;
|
|
931
|
+
};
|
|
807
932
|
|
|
808
933
|
return NiconiComments;
|
|
809
934
|
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
declare type InitOptions = {
|
|
2
|
+
useLegacy: boolean;
|
|
3
|
+
formatted: boolean;
|
|
4
|
+
video: HTMLVideoElement | null;
|
|
5
|
+
showCollision: boolean;
|
|
6
|
+
showFPS: boolean;
|
|
7
|
+
showCommentCount: boolean;
|
|
8
|
+
drawAllImageOnLoad: boolean;
|
|
9
|
+
};
|
|
10
|
+
declare type rawApiResponse = {
|
|
11
|
+
[key: string]: apiPing | apiThread | apiLeaf | apiGlobalNumRes | apiChat;
|
|
12
|
+
};
|
|
13
|
+
declare type apiPing = {
|
|
14
|
+
"content": string;
|
|
15
|
+
};
|
|
16
|
+
declare type apiThread = {
|
|
17
|
+
"resultcode": number;
|
|
18
|
+
"thread": string;
|
|
19
|
+
"server_time": number;
|
|
20
|
+
"ticket": string;
|
|
21
|
+
"revision": number;
|
|
22
|
+
};
|
|
23
|
+
declare type apiLeaf = {
|
|
24
|
+
"thread": string;
|
|
25
|
+
"count": number;
|
|
26
|
+
};
|
|
27
|
+
declare type apiGlobalNumRes = {
|
|
28
|
+
"thread": string;
|
|
29
|
+
"num_res": number;
|
|
30
|
+
};
|
|
31
|
+
declare type apiChat = {
|
|
32
|
+
"thread": string;
|
|
33
|
+
"no": number;
|
|
34
|
+
"vpos": number;
|
|
35
|
+
"date": number;
|
|
36
|
+
"date_usec": number;
|
|
37
|
+
"nicoru": number;
|
|
38
|
+
"premium": number;
|
|
39
|
+
"anonymity": number;
|
|
40
|
+
"user_id": string;
|
|
41
|
+
"mail": string;
|
|
42
|
+
"content": string;
|
|
43
|
+
"deleted": number;
|
|
44
|
+
};
|
|
45
|
+
declare type formattedComment = {
|
|
46
|
+
"id": number;
|
|
47
|
+
"vpos": number;
|
|
48
|
+
"content": string;
|
|
49
|
+
"date": number;
|
|
50
|
+
"date_usec": number;
|
|
51
|
+
"owner": boolean;
|
|
52
|
+
"premium": boolean;
|
|
53
|
+
"mail": string[];
|
|
54
|
+
};
|
|
55
|
+
declare type formattedCommentWithFont = formattedComment & {
|
|
56
|
+
"loc": string;
|
|
57
|
+
"size": string;
|
|
58
|
+
"fontSize": number;
|
|
59
|
+
"font": string;
|
|
60
|
+
"color": string;
|
|
61
|
+
"full": boolean;
|
|
62
|
+
"ender": boolean;
|
|
63
|
+
"_live": boolean;
|
|
64
|
+
"long": number;
|
|
65
|
+
"invisible": boolean;
|
|
66
|
+
};
|
|
67
|
+
declare type formattedCommentWithSize = formattedCommentWithFont & {
|
|
68
|
+
"height": number;
|
|
69
|
+
"width": number;
|
|
70
|
+
"width_max": number;
|
|
71
|
+
"width_min": number;
|
|
72
|
+
};
|
|
73
|
+
declare type parsedComment = formattedCommentWithSize & {
|
|
74
|
+
posY: number;
|
|
75
|
+
image?: HTMLCanvasElement;
|
|
76
|
+
};
|
|
77
|
+
declare type measureTextResult = {
|
|
78
|
+
"width": number;
|
|
79
|
+
"width_max": number;
|
|
80
|
+
"width_min": number;
|
|
81
|
+
"height": number;
|
|
82
|
+
"resized": boolean;
|
|
83
|
+
"fontSize": number;
|
|
84
|
+
};
|
|
85
|
+
declare class NiconiComments {
|
|
86
|
+
private canvas;
|
|
87
|
+
private context;
|
|
88
|
+
private readonly commentYPaddingTop;
|
|
89
|
+
private readonly commentYMarginBottom;
|
|
90
|
+
private readonly fontSize;
|
|
91
|
+
private readonly doubleResizeMaxWidth;
|
|
92
|
+
private video;
|
|
93
|
+
private showCollision;
|
|
94
|
+
showFPS: boolean;
|
|
95
|
+
showCommentCount: boolean;
|
|
96
|
+
private data;
|
|
97
|
+
private timeline;
|
|
98
|
+
private nicoScripts;
|
|
99
|
+
private collision_right;
|
|
100
|
+
private collision_left;
|
|
101
|
+
private collision_ue;
|
|
102
|
+
private collision_shita;
|
|
103
|
+
private lastVpos;
|
|
104
|
+
private useLegacy;
|
|
105
|
+
private fpsCount;
|
|
106
|
+
private fps;
|
|
107
|
+
constructor(canvas: HTMLCanvasElement, data: (rawApiResponse | formattedComment)[], options?: InitOptions);
|
|
108
|
+
parseData(data: rawApiResponse[]): formattedComment[];
|
|
109
|
+
preRendering(rawData: formattedComment[], drawAll: boolean): void;
|
|
110
|
+
getFont(parsedData: formattedComment[]): formattedCommentWithFont[];
|
|
111
|
+
getCommentSize(parsedData: formattedCommentWithFont[]): formattedCommentWithSize[];
|
|
112
|
+
getCommentPos(parsedData: parsedComment[]): parsedComment[];
|
|
113
|
+
sortComment(parsedData: parsedComment[]): parsedComment[];
|
|
114
|
+
measureText(comment: {
|
|
115
|
+
content: string;
|
|
116
|
+
resized: boolean;
|
|
117
|
+
ender: any;
|
|
118
|
+
size: string;
|
|
119
|
+
fontSize: number;
|
|
120
|
+
tateresized: boolean;
|
|
121
|
+
font: any;
|
|
122
|
+
loc: string;
|
|
123
|
+
full: any;
|
|
124
|
+
yokoResized: boolean;
|
|
125
|
+
}): measureTextResult;
|
|
126
|
+
drawText(comment: parsedComment, vpos: number): void;
|
|
127
|
+
getTextImage(i: number): void;
|
|
128
|
+
parseCommand(comment: any): {
|
|
129
|
+
loc: string | null;
|
|
130
|
+
size: string | null;
|
|
131
|
+
fontSize: number | null;
|
|
132
|
+
color: any;
|
|
133
|
+
font: string | null;
|
|
134
|
+
full: boolean;
|
|
135
|
+
ender: boolean;
|
|
136
|
+
_live: boolean;
|
|
137
|
+
invisible: boolean;
|
|
138
|
+
long: any;
|
|
139
|
+
};
|
|
140
|
+
parseCommandAndNicoscript(comment: formattedComment): formattedCommentWithFont;
|
|
141
|
+
drawCanvas(vpos: number): void;
|
|
142
|
+
clear(): void;
|
|
143
|
+
}
|
|
144
|
+
export default NiconiComments;
|
|
145
|
+
//# sourceMappingURL=main.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xpadev-net/niconicomments",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.10",
|
|
4
4
|
"description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
|
|
5
5
|
"main": "dist/bundle.js",
|
|
6
|
+
"types": "dist/dts/main.d.ts",
|
|
6
7
|
"scripts": {
|
|
7
8
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
8
9
|
"build": "rollup -c rollup.config.js",
|
|
9
10
|
"watch": "rollup -c rollup.config.js -w",
|
|
10
11
|
"typedoc": "typedoc --options tsdoc.json --out ./docs/type/ ./src/main.ts",
|
|
11
|
-
"
|
|
12
|
+
"tsc": "tsc --emitDeclarationOnly",
|
|
13
|
+
"prepublishOnly": "npm run tsc&&npm run build"
|
|
12
14
|
},
|
|
13
15
|
"repository": {
|
|
14
16
|
"type": "git",
|
|
@@ -22,16 +24,19 @@
|
|
|
22
24
|
"url": "https://github.com/xpadev-net/niconicomments/issues"
|
|
23
25
|
},
|
|
24
26
|
"files": [
|
|
25
|
-
"dist/bundle.js"
|
|
27
|
+
"dist/bundle.js",
|
|
28
|
+
"dist/dts/main.d.ts",
|
|
29
|
+
"dist/dts/main.d.ts.map"
|
|
26
30
|
],
|
|
27
31
|
"homepage": "https://xpadev.net/niconicomments/docs/",
|
|
28
32
|
"license": "MIT",
|
|
29
33
|
"devDependencies": {
|
|
30
34
|
"@rollup/plugin-babel": "^5.3.0",
|
|
31
|
-
"@rollup/plugin-typescript": "^8.3.
|
|
32
|
-
"rollup": "
|
|
33
|
-
"typedoc": "^0.22.
|
|
35
|
+
"@rollup/plugin-typescript": "^8.3.2",
|
|
36
|
+
"rollup": "^2.75.6",
|
|
37
|
+
"typedoc": "^0.22.17",
|
|
34
38
|
"typedoc-plugin-missing-exports": "^0.22.6",
|
|
35
|
-
"typescript": "^4.
|
|
39
|
+
"typescript": "^4.7.3",
|
|
40
|
+
"@babel/preset-env": "^7.18.2"
|
|
36
41
|
}
|
|
37
42
|
}
|