@xpadev-net/niconicomments 0.2.33 → 0.2.35
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.en.md +41 -0
- package/README.md +12 -12
- package/dist/bundle.d.ts +1 -6
- package/dist/bundle.js +35 -50
- package/package.json +1 -1
- package/README.ja.md +0 -41
package/README.en.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
+
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
3
|
+
|
|
4
|
+
[[日本語](https://github.com/xpadev-net/niconicomments/blob/develop/README.md)]
|
|
5
|
+
|
|
6
|
+
Comment rendering library that is somewhat compatible with the official Nico Nico Douga player
|
|
7
|
+
Reference: https://xpadev-net.github.io/niconicomments/
|
|
8
|
+
Github: https://github.com/xpadev-net/niconicomments
|
|
9
|
+
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
10
|
+
|
|
11
|
+
## For users who use this library for domestic use in Japan
|
|
12
|
+
This library may infringe on Dwango's patents depending on how it is used
|
|
13
|
+
Please carefully review the following applicable patents and case law before using this library with caution.
|
|
14
|
+
[JP,2006-333851](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-2006-333851/7294651F33633E1EBF3DEC66FAE0ECAD878D19E1829C378FC81D26BBD0A4263B/10/en)
|
|
15
|
+
[JP,2010-267283](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-4734471/9085C128B7ED7D57F6C2F09D9BE4FCB496E638331DB9EC7ADE1E3A44999A3878/15/en)
|
|
16
|
+
[JP,2018-202475](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-6526304/D8AF77CFB92D96C785FEECBD690C53E2F9023F1739E7A5BBDAB588E2ECAC5316/15/en)
|
|
17
|
+
[2018: Case No. Heisei 28 (wa) 38565, Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/073/088073_hanrei.pdf)
|
|
18
|
+
[2022: Heisei 30 (ne) 10077 Appeal for Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/418/091418_hanrei.pdf)
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
```html
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
|
|
23
|
+
```
|
|
24
|
+
or
|
|
25
|
+
```
|
|
26
|
+
npm i @xpadev-net/niconicomments
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Examples
|
|
30
|
+
```javascript
|
|
31
|
+
const canvas = document.getElementById("canvas");
|
|
32
|
+
const video = document.getElementById("video");
|
|
33
|
+
const req = await fetch("sample.json");
|
|
34
|
+
const res = await req.json();
|
|
35
|
+
const niconiComments = new NiconiComments(canvas, res);
|
|
36
|
+
//If video.ontimeupdate is used, the comments will be choppy due to the small number of calls.
|
|
37
|
+
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Sample
|
|
41
|
+
[Sample](https://xpadev-net.github.io/niconicomments/sample/)
|
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
2
|
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
3
3
|
|
|
4
|
-
[
|
|
4
|
+
[[English](https://github.com/xpadev-net/niconicomments/blob/develop/README.en.md)]
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ
|
|
7
|
+
High peformance High compatibility comment drawing library
|
|
7
8
|
Reference: https://xpadev-net.github.io/niconicomments/
|
|
8
9
|
Github: https://github.com/xpadev-net/niconicomments
|
|
9
10
|
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
10
11
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
[
|
|
17
|
-
|
|
18
|
-
[2022: Heisei 30 (ne) 10077 Appeal for Patent Infringement Injunction, etc. Patent Right Civil Litigation](https://www.courts.go.jp/app/files/hanrei_jp/418/091418_hanrei.pdf)
|
|
12
|
+
## [重要]このライブラリを使用される方へ
|
|
13
|
+
ニコニコ運営が画面にコメントを流すアドオンを特許侵害だと騒ぎ立てて潰して回っているようです
|
|
14
|
+
このライブラリ本体は描画部分のみのため特許侵害に当たるとは考えていませんが、ニコニコ動画運営(とその近辺の人)に叩かれる可能性があります
|
|
15
|
+
(名前は出しませんがすでにいくつかのOSSに被害が出ています)
|
|
16
|
+
また、このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります
|
|
17
|
+
詳しくはこちら[ニコニコが保有する特許について](https://github.com/xpadev-net/niconicomments/blob/develop/ABOUT_PATENT.md)を参照してください
|
|
18
|
+
**※当ライブラリを削除する予定は一切ありません**
|
|
19
19
|
|
|
20
20
|
## Installation
|
|
21
21
|
```html
|
|
@@ -33,9 +33,9 @@ const video = document.getElementById("video");
|
|
|
33
33
|
const req = await fetch("sample.json");
|
|
34
34
|
const res = await req.json();
|
|
35
35
|
const niconiComments = new NiconiComments(canvas, res);
|
|
36
|
-
//
|
|
36
|
+
//video.ontimeupdateを使用すると、呼び出し回数の関係でコメントカクつく
|
|
37
37
|
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
## Sample
|
|
41
|
-
[
|
|
41
|
+
[サンプル](https://xpadev-net.github.io/niconicomments/sample/)
|
package/dist/bundle.d.ts
CHANGED
|
@@ -61,11 +61,6 @@ declare let imageCache: {
|
|
|
61
61
|
declare const resetImageCache: () => void;
|
|
62
62
|
|
|
63
63
|
|
|
64
|
-
declare let canvas: HTMLCanvasElement;
|
|
65
|
-
declare let context: CanvasRenderingContext2D;
|
|
66
|
-
declare const initCanvas: () => void;
|
|
67
|
-
|
|
68
|
-
|
|
69
64
|
declare let nicoScripts: nicoScript;
|
|
70
65
|
declare const resetNicoScripts: () => void;
|
|
71
66
|
|
|
@@ -610,7 +605,7 @@ declare class NiconiComments {
|
|
|
610
605
|
|
|
611
606
|
declare const getLineHeight: (fontSize: commentSize, isFlash: boolean, resized?: boolean) => number;
|
|
612
607
|
declare const getCharSize: (fontSize: commentSize, isFlash: boolean) => number;
|
|
613
|
-
declare const measure: (comment: measureInput) => {
|
|
608
|
+
declare const measure: (comment: measureInput, context: CanvasRenderingContext2D) => {
|
|
614
609
|
height: number;
|
|
615
610
|
width: number;
|
|
616
611
|
lineWidth: number[];
|
package/dist/bundle.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
niconicomments.js v0.2.
|
|
2
|
+
niconicomments.js v0.2.35
|
|
3
3
|
(c) 2021 xpadev-net https://xpadev.net
|
|
4
4
|
Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -132,7 +132,6 @@
|
|
|
132
132
|
"date",
|
|
133
133
|
"date_usec",
|
|
134
134
|
"anonymity",
|
|
135
|
-
"user_id",
|
|
136
135
|
"mail",
|
|
137
136
|
"leaf",
|
|
138
137
|
"premium",
|
|
@@ -1330,18 +1329,6 @@
|
|
|
1330
1329
|
return result;
|
|
1331
1330
|
};
|
|
1332
1331
|
|
|
1333
|
-
var canvas;
|
|
1334
|
-
var context;
|
|
1335
|
-
var initCanvas = function () {
|
|
1336
|
-
canvas = document.createElement("canvas");
|
|
1337
|
-
var _context = canvas.getContext("2d");
|
|
1338
|
-
if (_context === null)
|
|
1339
|
-
throw new Error("fail to get Context2D");
|
|
1340
|
-
context = _context;
|
|
1341
|
-
context.textAlign = "start";
|
|
1342
|
-
context.textBaseline = "alphabetic";
|
|
1343
|
-
};
|
|
1344
|
-
|
|
1345
1332
|
var getLineHeight = function (fontSize, isFlash, resized) {
|
|
1346
1333
|
if (resized === void 0) { resized = false; }
|
|
1347
1334
|
var lineCounts = getConfig(config.lineCounts, isFlash), commentStageSize = getConfig(config.commentStageSize, isFlash), lineHeight = commentStageSize.height / lineCounts.doubleResized[fontSize], defaultLineCount = lineCounts.default[fontSize];
|
|
@@ -1357,11 +1344,11 @@
|
|
|
1357
1344
|
var lineCounts = getConfig(config.lineCounts, isFlash), commentStageSize = getConfig(config.commentStageSize, isFlash);
|
|
1358
1345
|
return commentStageSize.height / lineCounts.doubleResized[fontSize];
|
|
1359
1346
|
};
|
|
1360
|
-
var measure = function (comment) {
|
|
1361
|
-
var width = measureWidth(comment);
|
|
1347
|
+
var measure = function (comment, context) {
|
|
1348
|
+
var width = measureWidth(comment, context);
|
|
1362
1349
|
return _assign(_assign({}, width), { height: comment.lineHeight * (comment.lineCount - 1) + comment.charSize });
|
|
1363
1350
|
};
|
|
1364
|
-
var measureWidth = function (comment) {
|
|
1351
|
+
var measureWidth = function (comment, context) {
|
|
1365
1352
|
var _a = getFontSizeAndScale(comment.charSize), fontSize = _a.fontSize, scale = _a.scale, lineWidth = [], itemWidth = [];
|
|
1366
1353
|
context.font = parseFont(comment.font, fontSize);
|
|
1367
1354
|
var currentWidth = 0;
|
|
@@ -1528,13 +1515,13 @@
|
|
|
1528
1515
|
comment.lineHeight = lineHeight_1;
|
|
1529
1516
|
comment.resized = true;
|
|
1530
1517
|
comment.resizedY = true;
|
|
1531
|
-
var measureResult = measure(comment);
|
|
1518
|
+
var measureResult = measure(comment, this.context);
|
|
1532
1519
|
height = measureResult.height;
|
|
1533
1520
|
width = measureResult.width;
|
|
1534
1521
|
itemWidth = measureResult.itemWidth;
|
|
1535
1522
|
}
|
|
1536
1523
|
else {
|
|
1537
|
-
var measureResult = measure(comment);
|
|
1524
|
+
var measureResult = measure(comment, this.context);
|
|
1538
1525
|
height = measureResult.height;
|
|
1539
1526
|
width = measureResult.width;
|
|
1540
1527
|
itemWidth = measureResult.itemWidth;
|
|
@@ -1546,14 +1533,14 @@
|
|
|
1546
1533
|
_comment.charSize = (_comment.charSize || 0) * scale_1;
|
|
1547
1534
|
_comment.lineHeight = (_comment.lineHeight || 0) * scale_1;
|
|
1548
1535
|
_comment.fontSize = _comment.charSize * 0.8;
|
|
1549
|
-
var result = measure(_comment);
|
|
1536
|
+
var result = measure(_comment, this.context);
|
|
1550
1537
|
if (result.width > widthLimit) {
|
|
1551
1538
|
while (result.width >= widthLimit) {
|
|
1552
1539
|
var originalCharSize = _comment.charSize;
|
|
1553
1540
|
_comment.charSize -= 1;
|
|
1554
1541
|
_comment.lineHeight *= _comment.charSize / originalCharSize;
|
|
1555
1542
|
_comment.fontSize = _comment.charSize * 0.8;
|
|
1556
|
-
result = measure(_comment);
|
|
1543
|
+
result = measure(_comment, this.context);
|
|
1557
1544
|
}
|
|
1558
1545
|
}
|
|
1559
1546
|
else {
|
|
@@ -1564,7 +1551,7 @@
|
|
|
1564
1551
|
_comment.charSize += 1;
|
|
1565
1552
|
_comment.lineHeight *= _comment.charSize / originalCharSize;
|
|
1566
1553
|
_comment.fontSize = _comment.charSize * 0.8;
|
|
1567
|
-
result = measure(_comment);
|
|
1554
|
+
result = measure(_comment, this.context);
|
|
1568
1555
|
}
|
|
1569
1556
|
_comment = lastComment;
|
|
1570
1557
|
}
|
|
@@ -1578,7 +1565,7 @@
|
|
|
1578
1565
|
comment.lineHeight = _comment.lineHeight;
|
|
1579
1566
|
}
|
|
1580
1567
|
comment.fontSize = (comment.charSize || 0) * 0.8;
|
|
1581
|
-
result = measure(comment);
|
|
1568
|
+
result = measure(comment, this.context);
|
|
1582
1569
|
width = result.width;
|
|
1583
1570
|
height = result.height;
|
|
1584
1571
|
itemWidth = result.itemWidth;
|
|
@@ -1715,14 +1702,13 @@
|
|
|
1715
1702
|
"@@HTML5@@" +
|
|
1716
1703
|
__spreadArray([], this.comment.mail, true).sort().join(","), cache = imageCache[cacheKey];
|
|
1717
1704
|
if (cache) {
|
|
1705
|
+
this.image = cache.image;
|
|
1706
|
+
window.setTimeout(function () {
|
|
1707
|
+
delete _this.image;
|
|
1708
|
+
}, this.comment.long * 10 + config.cacheAge);
|
|
1718
1709
|
clearTimeout(cache.timeout);
|
|
1719
1710
|
cache.timeout = window.setTimeout(function () {
|
|
1720
|
-
|
|
1721
|
-
delete _this.image;
|
|
1722
|
-
}
|
|
1723
|
-
if (cache) {
|
|
1724
|
-
delete imageCache[cacheKey];
|
|
1725
|
-
}
|
|
1711
|
+
delete imageCache[cacheKey];
|
|
1726
1712
|
}, this.comment.long * 10 + config.cacheAge);
|
|
1727
1713
|
return cache.image;
|
|
1728
1714
|
}
|
|
@@ -1777,14 +1763,12 @@
|
|
|
1777
1763
|
}
|
|
1778
1764
|
}
|
|
1779
1765
|
this.image = image;
|
|
1766
|
+
window.setTimeout(function () {
|
|
1767
|
+
delete _this.image;
|
|
1768
|
+
}, this.comment.long * 10 + config.cacheAge);
|
|
1780
1769
|
imageCache[cacheKey] = {
|
|
1781
1770
|
timeout: window.setTimeout(function () {
|
|
1782
|
-
|
|
1783
|
-
delete imageCache[cacheKey];
|
|
1784
|
-
}
|
|
1785
|
-
if (_this.image) {
|
|
1786
|
-
delete _this.image;
|
|
1787
|
-
}
|
|
1771
|
+
delete imageCache[cacheKey];
|
|
1788
1772
|
}, this.comment.long * 10 + config.cacheAge),
|
|
1789
1773
|
image: image,
|
|
1790
1774
|
};
|
|
@@ -2131,8 +2115,6 @@
|
|
|
2131
2115
|
var height = (comment.fontSize * comment.lineHeight * lineCount +
|
|
2132
2116
|
config.commentYPaddingTop[comment.resizedY ? "resized" : "default"]) *
|
|
2133
2117
|
this.scale;
|
|
2134
|
-
if (Number.isNaN(height))
|
|
2135
|
-
console.log(comment, lineCount, this.scale);
|
|
2136
2118
|
if (comment.loc !== "naka") {
|
|
2137
2119
|
var widthLimit = getConfig(config.commentStageSize, true)[comment.full ? "fullWidth" : "width"];
|
|
2138
2120
|
if (width_max > widthLimit && !comment.resizedX) {
|
|
@@ -2231,12 +2213,7 @@
|
|
|
2231
2213
|
else {
|
|
2232
2214
|
this.context.globalAlpha = 1;
|
|
2233
2215
|
}
|
|
2234
|
-
|
|
2235
|
-
this.context.drawImage(this.image, posX, posY);
|
|
2236
|
-
}
|
|
2237
|
-
catch (e) {
|
|
2238
|
-
console.log(this.comment, e);
|
|
2239
|
-
}
|
|
2216
|
+
this.context.drawImage(this.image, posX, posY);
|
|
2240
2217
|
}
|
|
2241
2218
|
if (showCollision) {
|
|
2242
2219
|
this.context.strokeStyle = "rgba(255,0,255,1)";
|
|
@@ -2273,14 +2250,13 @@
|
|
|
2273
2250
|
"@@FLASH@@" +
|
|
2274
2251
|
__spreadArray([], this.comment.mail, true).sort().join(","), cache = imageCache[cacheKey];
|
|
2275
2252
|
if (cache) {
|
|
2253
|
+
this.image = cache.image;
|
|
2254
|
+
window.setTimeout(function () {
|
|
2255
|
+
delete _this.image;
|
|
2256
|
+
}, this.comment.long * 10 + config.cacheAge);
|
|
2276
2257
|
clearTimeout(cache.timeout);
|
|
2277
2258
|
cache.timeout = window.setTimeout(function () {
|
|
2278
|
-
|
|
2279
|
-
delete _this.image;
|
|
2280
|
-
}
|
|
2281
|
-
if (cache) {
|
|
2282
|
-
delete imageCache[cacheKey];
|
|
2283
|
-
}
|
|
2259
|
+
delete imageCache[cacheKey];
|
|
2284
2260
|
}, this.comment.long * 10 + config.cacheAge);
|
|
2285
2261
|
return cache.image;
|
|
2286
2262
|
}
|
|
@@ -2336,6 +2312,16 @@
|
|
|
2336
2312
|
}
|
|
2337
2313
|
}
|
|
2338
2314
|
}
|
|
2315
|
+
this.image = image;
|
|
2316
|
+
window.setTimeout(function () {
|
|
2317
|
+
delete _this.image;
|
|
2318
|
+
}, this.comment.long * 10 + config.cacheAge);
|
|
2319
|
+
imageCache[cacheKey] = {
|
|
2320
|
+
timeout: window.setTimeout(function () {
|
|
2321
|
+
delete imageCache[cacheKey];
|
|
2322
|
+
}, this.comment.long * 10 + config.cacheAge),
|
|
2323
|
+
image: image,
|
|
2324
|
+
};
|
|
2339
2325
|
return image;
|
|
2340
2326
|
};
|
|
2341
2327
|
return FlashComment;
|
|
@@ -2347,7 +2333,6 @@
|
|
|
2347
2333
|
if (initOptions === void 0) { initOptions = {}; }
|
|
2348
2334
|
var constructorStart = performance.now();
|
|
2349
2335
|
initConfig();
|
|
2350
|
-
initCanvas();
|
|
2351
2336
|
if (!typeGuard.config.initOptions(initOptions))
|
|
2352
2337
|
throw new Error("Please see document: https://xpadev-net.github.io/niconicomments/#p_options");
|
|
2353
2338
|
setOptions(Object.assign(defaultOptions, initOptions));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xpadev-net/niconicomments",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.35",
|
|
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
6
|
"types": "dist/bundle.d.ts",
|
package/README.ja.md
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
-
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
3
|
-
|
|
4
|
-
[English](https://github.com/xpadev-net/niconicomments/blob/develop/README.md)
|
|
5
|
-
|
|
6
|
-
ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ
|
|
7
|
-
High peformance High compatibility comment drawing library
|
|
8
|
-
Reference: https://xpadev-net.github.io/niconicomments/
|
|
9
|
-
Github: https://github.com/xpadev-net/niconicomments
|
|
10
|
-
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
11
|
-
|
|
12
|
-
## [重要]このライブラリを使用される方へ
|
|
13
|
-
ニコニコ運営が画面にコメントを流すアドオンを特許侵害だと騒ぎ立てて潰して回っているようです
|
|
14
|
-
このライブラリ本体は描画部分のみのため特許侵害に当たるとは考えていませんが、ニコニコ動画運営(とその近辺の人)に叩かれる可能性があります
|
|
15
|
-
(名前は出しませんがすでにいくつかのOSSに被害が出ています)
|
|
16
|
-
また、このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります
|
|
17
|
-
詳しくはこちら[ニコニコが保有する特許について](https://github.com/xpadev-net/niconicomments/blob/develop/ABOUT_PATENT.md)を参照してください
|
|
18
|
-
**※当ライブラリを削除する予定は一切ありません**
|
|
19
|
-
|
|
20
|
-
## Installation
|
|
21
|
-
```html
|
|
22
|
-
<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
|
|
23
|
-
```
|
|
24
|
-
or
|
|
25
|
-
```
|
|
26
|
-
npm i @xpadev-net/niconicomments
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## Examples
|
|
30
|
-
```javascript
|
|
31
|
-
const canvas = document.getElementById("canvas");
|
|
32
|
-
const video = document.getElementById("video");
|
|
33
|
-
const req = await fetch("sample.json");
|
|
34
|
-
const res = await req.json();
|
|
35
|
-
const niconiComments = new NiconiComments(canvas, res);
|
|
36
|
-
//video.ontimeupdateを使用すると、呼び出し回数の関係でコメントカクつく
|
|
37
|
-
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Sample
|
|
41
|
-
[サンプル](https://xpadev-net.github.io/niconicomments/sample/)
|