@xpadev-net/niconicomments 0.2.51 → 0.2.52
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 +21 -21
- package/README.en.md +53 -53
- package/README.md +51 -53
- package/dist/bundle.d.ts +3 -207
- package/dist/bundle.js +26 -26
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 xpadev-net
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 xpadev-net
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.en.md
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
-
|
|
3
|
-
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
4
|
-
[](https://github.com/xpadev-net/niconicomments/actions/workflows/codeql-analysis.yml)
|
|
5
|
-
[](https://github.com/xpadev-net/niconicomments/actions/workflows/typedoc.yml)
|
|
6
|
-
|
|
7
|
-
[[日本語](https://github.com/xpadev-net/niconicomments/blob/develop/README.md)]
|
|
8
|
-
|
|
9
|
-
Comment rendering library that is somewhat compatible with the official Nico Nico Douga player
|
|
10
|
-
Reference: https://xpadev-net.github.io/niconicomments/
|
|
11
|
-
Github: https://github.com/xpadev-net/niconicomments
|
|
12
|
-
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
13
|
-
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
[
|
|
1
|
+
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
+
|
|
3
|
+
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
4
|
+
[](https://github.com/xpadev-net/niconicomments/actions/workflows/codeql-analysis.yml)
|
|
5
|
+
[](https://github.com/xpadev-net/niconicomments/actions/workflows/typedoc.yml)
|
|
6
|
+
|
|
7
|
+
[[日本語](https://github.com/xpadev-net/niconicomments/blob/develop/README.md)]
|
|
8
|
+
|
|
9
|
+
Comment rendering library that is somewhat compatible with the official Nico Nico Douga player
|
|
10
|
+
Reference: https://xpadev-net.github.io/niconicomments/
|
|
11
|
+
Github: https://github.com/xpadev-net/niconicomments
|
|
12
|
+
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
or
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
npm i @xpadev-net/niconicomments
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Examples
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
const canvas = document.getElementById("canvas");
|
|
30
|
+
const video = document.getElementById("video");
|
|
31
|
+
const req = await fetch("sample.json");
|
|
32
|
+
const res = await req.json();
|
|
33
|
+
const niconiComments = new NiconiComments(canvas, res);
|
|
34
|
+
//If video.ontimeupdate is used, the comments will be choppy due to the small number of calls.
|
|
35
|
+
setInterval(
|
|
36
|
+
() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)),
|
|
37
|
+
10
|
|
38
|
+
);
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Sample
|
|
42
|
+
|
|
43
|
+
[Sample](https://xpadev-net.github.io/niconicomments/sample/)
|
|
44
|
+
|
|
45
|
+
### For users who use this library for domestic use in Japan
|
|
46
|
+
|
|
47
|
+
This library may infringe on Dwango's patents depending on how it is used
|
|
48
|
+
Please carefully review the following applicable patents and case law before using this library with caution.
|
|
49
|
+
[JP,2006-333851](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-2006-333851/7294651F33633E1EBF3DEC66FAE0ECAD878D19E1829C378FC81D26BBD0A4263B/10/en)
|
|
50
|
+
[JP,2010-267283](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-4734471/9085C128B7ED7D57F6C2F09D9BE4FCB496E638331DB9EC7ADE1E3A44999A3878/15/en)
|
|
51
|
+
[JP,2018-202475](https://www.j-platpat.inpit.go.jp/c1800/PU/JP-6526304/D8AF77CFB92D96C785FEECBD690C53E2F9023F1739E7A5BBDAB588E2ECAC5316/15/en)
|
|
52
|
+
[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)
|
|
53
|
+
[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)
|
package/README.md
CHANGED
|
@@ -1,53 +1,51 @@
|
|
|
1
|
-
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
-
|
|
3
|
-
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
4
|
-
[](https://github.com/xpadev-net/niconicomments/actions/workflows/codeql-analysis.yml)
|
|
5
|
-
[](https://github.com/xpadev-net/niconicomments/actions/workflows/typedoc.yml)
|
|
6
|
-
|
|
7
|
-
[[English](https://github.com/xpadev-net/niconicomments/blob/develop/README.en.md)]
|
|
8
|
-
|
|
9
|
-
ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ
|
|
10
|
-
High peformance High compatibility comment drawing library
|
|
11
|
-
Reference: https://xpadev-net.github.io/niconicomments/
|
|
12
|
-
Github: https://github.com/xpadev-net/niconicomments
|
|
13
|
-
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
[サンプル](https://xpadev-net.github.io/niconicomments/sample/)
|
|
1
|
+
# [niconicomments](https://xpadev.net/niconicomments/)
|
|
2
|
+
|
|
3
|
+
[](https://github.com/xpadev-net/niconicomments/blob/master/LICENSE)
|
|
4
|
+
[](https://github.com/xpadev-net/niconicomments/actions/workflows/codeql-analysis.yml)
|
|
5
|
+
[](https://github.com/xpadev-net/niconicomments/actions/workflows/typedoc.yml)
|
|
6
|
+
|
|
7
|
+
[[English](https://github.com/xpadev-net/niconicomments/blob/develop/README.en.md)]
|
|
8
|
+
|
|
9
|
+
ニコニコ動画の公式プレイヤー互換の高パフォーマンスなコメント描画ライブラリ
|
|
10
|
+
High peformance High compatibility comment drawing library
|
|
11
|
+
Reference: https://xpadev-net.github.io/niconicomments/
|
|
12
|
+
Github: https://github.com/xpadev-net/niconicomments
|
|
13
|
+
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```html
|
|
19
|
+
<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
or
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
npm i @xpadev-net/niconicomments
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Examples
|
|
29
|
+
|
|
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(
|
|
38
|
+
() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)),
|
|
39
|
+
10
|
|
40
|
+
);
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Sample
|
|
44
|
+
|
|
45
|
+
[サンプル](https://xpadev-net.github.io/niconicomments/sample/)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
### このライブラリを使用される方へ
|
|
49
|
+
|
|
50
|
+
このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります
|
|
51
|
+
詳しくはこちら[ニコニコが保有する特許について](https://github.com/xpadev-net/niconicomments/blob/develop/ABOUT_PATENT.md)を参照してください
|
package/dist/bundle.d.ts
CHANGED
|
@@ -1,202 +1,6 @@
|
|
|
1
1
|
/// <reference types="node" />
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) 2020 lynweklm@gmail.com
|
|
6
|
-
*
|
|
7
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
8
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
9
|
-
* in the Software without restriction, including without limitation the rights
|
|
10
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
11
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
12
|
-
* furnished to do so, subject to the following conditions:
|
|
13
|
-
*
|
|
14
|
-
* The above copyright notice and this permission notice shall be included in all
|
|
15
|
-
* copies or substantial portions of the Software.
|
|
16
|
-
*
|
|
17
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
18
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
19
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
20
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
21
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
22
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
23
|
-
* SOFTWARE.
|
|
24
|
-
*
|
|
25
|
-
* original source: @napi-rs/canvas
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
declare class NodeCanvas {
|
|
29
|
-
constructor(width: number, height: number, flag?: SvgExportFlag);
|
|
30
|
-
|
|
31
|
-
width: number;
|
|
32
|
-
height: number;
|
|
33
|
-
getContext(
|
|
34
|
-
contextType: "2d",
|
|
35
|
-
contextAttributes?: ContextAttributes
|
|
36
|
-
): NodeContext;
|
|
37
|
-
encodeSync(format: "webp" | "jpeg", quality?: number): Buffer;
|
|
38
|
-
encodeSync(format: "png"): Buffer;
|
|
39
|
-
encodeSync(format: "avif", cfg?: AvifConfig): Buffer;
|
|
40
|
-
encode(format: "webp" | "jpeg", quality?: number): Promise<Buffer>;
|
|
41
|
-
encode(format: "png"): Promise<Buffer>;
|
|
42
|
-
encode(format: "avif", cfg?: AvifConfig): Promise<Buffer>;
|
|
43
|
-
|
|
44
|
-
toBuffer(mime: "image/png"): Buffer;
|
|
45
|
-
toBuffer(mime: "image/jpeg" | "image/webp", quality?: number): Buffer;
|
|
46
|
-
toBuffer(mime: "image/avif", cfg?: AvifConfig): Buffer;
|
|
47
|
-
// raw pixels
|
|
48
|
-
data(): Buffer;
|
|
49
|
-
toDataURL(mime?: "image/png"): string;
|
|
50
|
-
toDataURL(mime: "image/jpeg" | "image/webp", quality?: number): string;
|
|
51
|
-
toDataURL(
|
|
52
|
-
mime?: "image/jpeg" | "image/webp" | "image/png",
|
|
53
|
-
quality?: number
|
|
54
|
-
): string;
|
|
55
|
-
toDataURL(mime?: "image/avif", cfg?: AvifConfig): string;
|
|
56
|
-
|
|
57
|
-
toDataURLAsync(mime?: "image/png"): Promise<string>;
|
|
58
|
-
toDataURLAsync(
|
|
59
|
-
mime: "image/jpeg" | "image/webp",
|
|
60
|
-
quality?: number
|
|
61
|
-
): Promise<string>;
|
|
62
|
-
toDataURLAsync(
|
|
63
|
-
mime?: "image/jpeg" | "image/webp" | "image/png",
|
|
64
|
-
quality?: number
|
|
65
|
-
): Promise<string>;
|
|
66
|
-
toDataURLAsync(mime?: "image/avif", cfg?: AvifConfig): Promise<string>;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
declare enum SvgExportFlag {
|
|
70
|
-
ConvertTextToPaths = 0x01,
|
|
71
|
-
NoPrettyXML = 0x02,
|
|
72
|
-
RelativePathEncoding = 0x04,
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
interface AvifConfig {
|
|
76
|
-
/** 0-100 scale, 100 is lossless */
|
|
77
|
-
quality?: number;
|
|
78
|
-
/** 0-100 scale */
|
|
79
|
-
alphaQuality?: number;
|
|
80
|
-
/** rav1e preset 1 (slow) 10 (fast but crappy), default is 4 */
|
|
81
|
-
speed?: number;
|
|
82
|
-
/** How many threads should be used (0 = match core count) */
|
|
83
|
-
threads?: number;
|
|
84
|
-
/** set to '4:2:0' to use chroma subsampling, default '4:4:4' */
|
|
85
|
-
chromaSubsampling?: ChromaSubsampling;
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* https://en.wikipedia.org/wiki/Chroma_subsampling#Types_of_sampling_and_subsampling
|
|
89
|
-
* https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_concepts
|
|
90
|
-
*/
|
|
91
|
-
declare enum ChromaSubsampling {
|
|
92
|
-
/**
|
|
93
|
-
* Each of the three Y'CbCr components has the same sample rate, thus there is no chroma subsampling. This scheme is sometimes used in high-end film scanners and cinematic post-production.
|
|
94
|
-
* Note that "4:4:4" may instead be wrongly referring to R'G'B' color space, which implicitly also does not have any chroma subsampling (except in JPEG R'G'B' can be subsampled).
|
|
95
|
-
* Formats such as HDCAM SR can record 4:4:4 R'G'B' over dual-link HD-SDI.
|
|
96
|
-
*/
|
|
97
|
-
Yuv444 = 0,
|
|
98
|
-
/**
|
|
99
|
-
* The two chroma components are sampled at half the horizontal sample rate of luma: the horizontal chroma resolution is halved. This reduces the bandwidth of an uncompressed video signal by one-third.
|
|
100
|
-
* Many high-end digital video formats and interfaces use this scheme:
|
|
101
|
-
* - [AVC-Intra 100](https://en.wikipedia.org/wiki/AVC-Intra)
|
|
102
|
-
* - [Digital Betacam](https://en.wikipedia.org/wiki/Betacam#Digital_Betacam)
|
|
103
|
-
* - [Betacam SX](https://en.wikipedia.org/wiki/Betacam#Betacam_SX)
|
|
104
|
-
* - [DVCPRO50](https://en.wikipedia.org/wiki/DV#DVCPRO) and [DVCPRO HD](https://en.wikipedia.org/wiki/DV#DVCPRO_HD)
|
|
105
|
-
* - [Digital-S](https://en.wikipedia.org/wiki/Digital-S)
|
|
106
|
-
* - [CCIR 601](https://en.wikipedia.org/wiki/Rec._601) / [Serial Digital Interface](https://en.wikipedia.org/wiki/Serial_digital_interface) / [D1](https://en.wikipedia.org/wiki/D-1_(Sony))
|
|
107
|
-
* - [ProRes (HQ, 422, LT, and Proxy)](https://en.wikipedia.org/wiki/Apple_ProRes)
|
|
108
|
-
* - [XDCAM HD422](https://en.wikipedia.org/wiki/XDCAM)
|
|
109
|
-
* - [Canon MXF HD422](https://en.wikipedia.org/wiki/Canon_XF-300)
|
|
110
|
-
*/
|
|
111
|
-
Yuv422 = 1,
|
|
112
|
-
/**
|
|
113
|
-
* n 4:2:0, the horizontal sampling is doubled compared to 4:1:1,
|
|
114
|
-
* but as the **Cb** and **Cr** channels are only sampled on each alternate line in this scheme, the vertical resolution is halved.
|
|
115
|
-
* The data rate is thus the same.
|
|
116
|
-
* This fits reasonably well with the PAL color encoding system, since this has only half the vertical chrominance resolution of [NTSC](https://en.wikipedia.org/wiki/NTSC).
|
|
117
|
-
* It would also fit extremely well with the [SECAM](https://en.wikipedia.org/wiki/SECAM) color encoding system,
|
|
118
|
-
* since like that format, 4:2:0 only stores and transmits one color channel per line (the other channel being recovered from the previous line).
|
|
119
|
-
* However, little equipment has actually been produced that outputs a SECAM analogue video signal.
|
|
120
|
-
* In general, SECAM territories either have to use a PAL-capable display or a [transcoder](https://en.wikipedia.org/wiki/Transcoding) to convert the PAL signal to SECAM for display.
|
|
121
|
-
*/
|
|
122
|
-
Yuv420 = 2,
|
|
123
|
-
/**
|
|
124
|
-
* What if the chroma subsampling model is 4:0:0?
|
|
125
|
-
* That says to use every pixel of luma data, but that each row has 0 chroma samples applied to it. The resulting image, then, is comprised solely of the luminance data—a greyscale image.
|
|
126
|
-
*/
|
|
127
|
-
Yuv400 = 3,
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
interface ContextAttributes {
|
|
131
|
-
alpha?: boolean;
|
|
132
|
-
colorSpace?: ColorSpace;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
interface NodeContext
|
|
136
|
-
extends Omit<
|
|
137
|
-
CanvasRenderingContext2D,
|
|
138
|
-
| "drawImage"
|
|
139
|
-
| "createPattern"
|
|
140
|
-
| "getTransform"
|
|
141
|
-
| "drawFocusIfNeeded"
|
|
142
|
-
| "scrollPathIntoView"
|
|
143
|
-
| "canvas"
|
|
144
|
-
> {
|
|
145
|
-
canvas: NodeCanvas;
|
|
146
|
-
/**
|
|
147
|
-
* @param startAngle The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
|
|
148
|
-
* @param x The x-axis coordinate of the centre of the gradient.
|
|
149
|
-
* @param y The y-axis coordinate of the centre of the gradient.
|
|
150
|
-
*/
|
|
151
|
-
createConicGradient(startAngle: number, x: number, y: number): CanvasGradient;
|
|
152
|
-
drawImage(image: Image | NodeCanvas, dx: number, dy: number): void;
|
|
153
|
-
drawImage(
|
|
154
|
-
image: Image | NodeCanvas,
|
|
155
|
-
dx: number,
|
|
156
|
-
dy: number,
|
|
157
|
-
dw: number,
|
|
158
|
-
dh: number
|
|
159
|
-
): void;
|
|
160
|
-
drawImage(
|
|
161
|
-
image: Image | NodeCanvas,
|
|
162
|
-
sx: number,
|
|
163
|
-
sy: number,
|
|
164
|
-
sw: number,
|
|
165
|
-
sh: number,
|
|
166
|
-
dx: number,
|
|
167
|
-
dy: number,
|
|
168
|
-
dw: number,
|
|
169
|
-
dh: number
|
|
170
|
-
): void;
|
|
171
|
-
createPattern(
|
|
172
|
-
image: Image | ImageData,
|
|
173
|
-
repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat" | null
|
|
174
|
-
): CanvasPattern;
|
|
175
|
-
getContextAttributes(): { alpha: boolean; desynchronized: boolean };
|
|
176
|
-
getTransform(): DOMMatrix;
|
|
177
|
-
}
|
|
178
|
-
declare class Image {
|
|
179
|
-
constructor();
|
|
180
|
-
// attrs only affects SVG
|
|
181
|
-
constructor(
|
|
182
|
-
width: number,
|
|
183
|
-
height: number,
|
|
184
|
-
attrs?: { colorSpace?: ColorSpace }
|
|
185
|
-
);
|
|
186
|
-
width: number;
|
|
187
|
-
height: number;
|
|
188
|
-
readonly naturalWidth: number;
|
|
189
|
-
readonly naturalHeight: number;
|
|
190
|
-
readonly complete: boolean;
|
|
191
|
-
alt: string;
|
|
192
|
-
src: Buffer;
|
|
193
|
-
onload?(): void;
|
|
194
|
-
onerror?(err: Error): void;
|
|
195
|
-
}
|
|
196
|
-
type ColorSpace = "srgb" | "display-p3";
|
|
197
|
-
|
|
198
|
-
type Canvas = NodeCanvas | HTMLCanvasElement;
|
|
199
|
-
type Context2D = NodeContext | CanvasRenderingContext2D;
|
|
2
|
+
type Canvas = HTMLCanvasElement;
|
|
3
|
+
type Context2D = CanvasRenderingContext2D;
|
|
200
4
|
|
|
201
5
|
declare class BaseComment implements IComment {
|
|
202
6
|
protected readonly context: Context2D;
|
|
@@ -1162,10 +966,6 @@ declare const typeGuard: {
|
|
|
1162
966
|
config: {
|
|
1163
967
|
initOptions: (item: unknown) => item is Partial<BaseOptions>;
|
|
1164
968
|
};
|
|
1165
|
-
canvas: {
|
|
1166
|
-
nodeCanvas: (_: Canvas) => _ is NodeCanvas;
|
|
1167
|
-
nodeContext: (_: Context2D) => _ is NodeContext;
|
|
1168
|
-
};
|
|
1169
969
|
};
|
|
1170
970
|
|
|
1171
971
|
declare namespace typeGuard_d {
|
|
@@ -1370,10 +1170,6 @@ declare class NiconiComments {
|
|
|
1370
1170
|
config: {
|
|
1371
1171
|
initOptions: (item: unknown) => item is Partial<BaseOptions>;
|
|
1372
1172
|
};
|
|
1373
|
-
canvas: {
|
|
1374
|
-
nodeCanvas: (_: Canvas) => _ is NodeCanvas;
|
|
1375
|
-
nodeContext: (_: Context2D) => _ is NodeContext;
|
|
1376
|
-
};
|
|
1377
1173
|
};
|
|
1378
1174
|
static default: typeof NiconiComments;
|
|
1379
1175
|
static FlashComment: {
|
|
@@ -1397,4 +1193,4 @@ declare class NiconiComments {
|
|
|
1397
1193
|
clear(): void;
|
|
1398
1194
|
}
|
|
1399
1195
|
|
|
1400
|
-
export { ApiChat, ApiGlobalNumRes, ApiLeaf, ApiPing, ApiThread,
|
|
1196
|
+
export { ApiChat, ApiGlobalNumRes, ApiLeaf, ApiPing, ApiThread, BaseConfig, BaseOptions, Canvas, Collision, CollisionItem, CollisionPos, CommentContentIndex, CommentContentItem, CommentDisableEvent, CommentDisableEventHandler, CommentEnableEvent, CommentEnableEventHandler, CommentEventBase, CommentEventHandler, CommentEventHandlerMap, CommentEventMap, CommentEventName, CommentFlashFont, CommentFont, CommentLoc, CommentMeasuredContentItem, CommentSize, CommentStageSize, Config, ConfigItem, Context2D, FlashMode, FlashScriptChar, FontItem, FormattedComment, FormattedCommentWithFont, FormattedCommentWithSize, FormattedLegacyComment, HTML5Fonts, IComment, IPlugin, IPluginConstructor, InputFormat, InputFormatType, JumpEvent, JumpEventHandler, MeasureInput, MeasureTextInput, MeasureTextResult, NicoScript, NicoScriptReplace, NicoScriptReplaceCondition, NicoScriptReplaceRange, NicoScriptReplaceTarget, NicoScriptReverseTarget, Options, OwnerComment, ParseCommandAndNicoScriptResult, ParseContentResult, ParsedCommand, Platform, PlatformFont, RawApiResponse, SeekDisableEvent, SeekDisableEventHandler, SeekEnableEvent, SeekEnableEventHandler, Timeline, V1Comment, V1Thread, ValueOf, NiconiComments as default, formattedComment, formattedLegacyComment, inputFormat, inputFormatType, ownerComment, rawApiResponse, v1Thread };
|
package/dist/bundle.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
niconicomments.js v0.2.
|
|
2
|
+
niconicomments.js v0.2.52
|
|
3
3
|
(c) 2021 xpadev-net https://xpadev.net
|
|
4
4
|
Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -235,8 +235,6 @@
|
|
|
235
235
|
colors: colors
|
|
236
236
|
});
|
|
237
237
|
|
|
238
|
-
const isNode = typeof process === "object" && typeof require === "function";
|
|
239
|
-
|
|
240
238
|
const isBoolean = (i) => typeof i === "boolean";
|
|
241
239
|
const isNumber = (i) => typeof i === "number";
|
|
242
240
|
const isObject = (i) => typeof i === "object";
|
|
@@ -443,10 +441,6 @@
|
|
|
443
441
|
return true;
|
|
444
442
|
},
|
|
445
443
|
},
|
|
446
|
-
canvas: {
|
|
447
|
-
nodeCanvas: (_) => isNode,
|
|
448
|
-
nodeContext: (_) => isNode,
|
|
449
|
-
},
|
|
450
444
|
};
|
|
451
445
|
const objectVerify = (item, keys) => {
|
|
452
446
|
if (typeof item !== "object" || !item)
|
|
@@ -560,7 +554,7 @@
|
|
|
560
554
|
const parseBrackets = (input) => {
|
|
561
555
|
const content = input.split(""), result = [];
|
|
562
556
|
let quote = "", last_i = "", string = "";
|
|
563
|
-
for (const i of content
|
|
557
|
+
for (const i of content) {
|
|
564
558
|
if (i.match(/["'\u300c]/) && quote === "") {
|
|
565
559
|
quote = i;
|
|
566
560
|
}
|
|
@@ -589,7 +583,7 @@
|
|
|
589
583
|
return result;
|
|
590
584
|
};
|
|
591
585
|
const addNicoscriptReplace = (comment, commands) => {
|
|
592
|
-
const result = parseBrackets(comment.content);
|
|
586
|
+
const result = parseBrackets(comment.content.slice(4));
|
|
593
587
|
if (result[0] === undefined ||
|
|
594
588
|
(result[2] !== undefined &&
|
|
595
589
|
!typeGuard.nicoScript.replace.range(result[2])) ||
|
|
@@ -1294,30 +1288,15 @@
|
|
|
1294
1288
|
});
|
|
1295
1289
|
|
|
1296
1290
|
const generateCanvas = () => {
|
|
1297
|
-
if (isNode) {
|
|
1298
|
-
const { createCanvas } = require("@napi-rs/canvas");
|
|
1299
|
-
return createCanvas(1920, 1080);
|
|
1300
|
-
}
|
|
1301
1291
|
return document.createElement("canvas");
|
|
1302
1292
|
};
|
|
1303
1293
|
const getContext = (canvas) => {
|
|
1304
|
-
if (typeGuard.canvas.nodeCanvas(canvas)) {
|
|
1305
|
-
return canvas.getContext("2d");
|
|
1306
|
-
}
|
|
1307
1294
|
const context = canvas.getContext("2d");
|
|
1308
1295
|
if (!context)
|
|
1309
1296
|
throw new CanvasRenderingContext2DError();
|
|
1310
1297
|
return context;
|
|
1311
1298
|
};
|
|
1312
1299
|
const drawImage = (targetContext, sourceImage, x, y) => {
|
|
1313
|
-
if (typeGuard.canvas.nodeContext(targetContext)) {
|
|
1314
|
-
if (!typeGuard.canvas.nodeCanvas(sourceImage))
|
|
1315
|
-
return;
|
|
1316
|
-
targetContext.drawImage(sourceImage, x, y);
|
|
1317
|
-
return;
|
|
1318
|
-
}
|
|
1319
|
-
if (typeGuard.canvas.nodeCanvas(sourceImage))
|
|
1320
|
-
return;
|
|
1321
1300
|
targetContext.drawImage(sourceImage, x, y);
|
|
1322
1301
|
};
|
|
1323
1302
|
|
|
@@ -1412,6 +1391,7 @@
|
|
|
1412
1391
|
this.image = this.getTextImage();
|
|
1413
1392
|
}
|
|
1414
1393
|
if (this.image) {
|
|
1394
|
+
this.context.save();
|
|
1415
1395
|
if (this.comment._live) {
|
|
1416
1396
|
this.context.globalAlpha = config.contextFillLiveOpacity;
|
|
1417
1397
|
}
|
|
@@ -1419,16 +1399,20 @@
|
|
|
1419
1399
|
this.context.globalAlpha = 1;
|
|
1420
1400
|
}
|
|
1421
1401
|
drawImage(this.context, this.image, posX, posY);
|
|
1402
|
+
this.context.restore();
|
|
1422
1403
|
}
|
|
1423
1404
|
}
|
|
1424
1405
|
_drawRectColor(posX, posY) {
|
|
1425
1406
|
if (this.comment.wakuColor) {
|
|
1407
|
+
this.context.save();
|
|
1426
1408
|
this.context.strokeStyle = this.comment.wakuColor;
|
|
1427
1409
|
this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
|
|
1410
|
+
this.context.restore();
|
|
1428
1411
|
}
|
|
1429
1412
|
}
|
|
1430
1413
|
_drawDebugInfo(posX, posY, debug) {
|
|
1431
1414
|
if (debug) {
|
|
1415
|
+
this.context.save();
|
|
1432
1416
|
const font = this.context.font;
|
|
1433
1417
|
const fillStyle = this.context.fillStyle;
|
|
1434
1418
|
this.context.font = parseFont("defont", 30);
|
|
@@ -1436,6 +1420,7 @@
|
|
|
1436
1420
|
this.context.fillText(this.comment.mail.join(","), posX, posY + 30);
|
|
1437
1421
|
this.context.font = font;
|
|
1438
1422
|
this.context.fillStyle = fillStyle;
|
|
1423
|
+
this.context.restore();
|
|
1439
1424
|
}
|
|
1440
1425
|
}
|
|
1441
1426
|
_drawCollision(posX, posY, showCollision) {
|
|
@@ -1535,6 +1520,7 @@
|
|
|
1535
1520
|
return this.getCommentSize(this.parseCommandAndNicoscript(comment));
|
|
1536
1521
|
}
|
|
1537
1522
|
getCommentSize(parsedData) {
|
|
1523
|
+
this.context.save();
|
|
1538
1524
|
this.context.font = parseFont(parsedData.font, parsedData.fontSize);
|
|
1539
1525
|
const size = parsedData;
|
|
1540
1526
|
if (parsedData.invisible) {
|
|
@@ -1546,6 +1532,7 @@
|
|
|
1546
1532
|
size.resizedX = false;
|
|
1547
1533
|
size.resizedY = false;
|
|
1548
1534
|
size.charSize = 0;
|
|
1535
|
+
this.context.restore();
|
|
1549
1536
|
return size;
|
|
1550
1537
|
}
|
|
1551
1538
|
const measure = this.measureText(parsedData);
|
|
@@ -1562,6 +1549,7 @@
|
|
|
1562
1549
|
size.resizedX = measure.resizedX;
|
|
1563
1550
|
size.resizedY = measure.resizedY;
|
|
1564
1551
|
size.charSize = measure.charSize;
|
|
1552
|
+
this.context.restore();
|
|
1565
1553
|
return size;
|
|
1566
1554
|
}
|
|
1567
1555
|
parseCommandAndNicoscript(comment) {
|
|
@@ -1680,6 +1668,7 @@
|
|
|
1680
1668
|
}
|
|
1681
1669
|
_drawCollision(posX, posY, showCollision) {
|
|
1682
1670
|
if (showCollision) {
|
|
1671
|
+
this.context.save();
|
|
1683
1672
|
this.context.strokeStyle = "rgba(255,0,255,1)";
|
|
1684
1673
|
this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
|
|
1685
1674
|
for (let i = 0, n = this.comment.lineCount; i < n; i++) {
|
|
@@ -1694,6 +1683,7 @@
|
|
|
1694
1683
|
this.scale *
|
|
1695
1684
|
(this.comment.layer === -1 ? options.scale : 1));
|
|
1696
1685
|
}
|
|
1686
|
+
this.context.restore();
|
|
1697
1687
|
}
|
|
1698
1688
|
}
|
|
1699
1689
|
_generateTextImage() {
|
|
@@ -1774,6 +1764,7 @@
|
|
|
1774
1764
|
return this.getCommentSize(this.parseCommandAndNicoscript(comment));
|
|
1775
1765
|
}
|
|
1776
1766
|
getCommentSize(parsedData) {
|
|
1767
|
+
this.context.save();
|
|
1777
1768
|
this.context.font = parseFont(parsedData.font, parsedData.fontSize);
|
|
1778
1769
|
const size = parsedData;
|
|
1779
1770
|
if (parsedData.invisible) {
|
|
@@ -1785,6 +1776,7 @@
|
|
|
1785
1776
|
size.resizedX = false;
|
|
1786
1777
|
size.resizedY = false;
|
|
1787
1778
|
size.charSize = 0;
|
|
1779
|
+
this.context.restore();
|
|
1788
1780
|
return size;
|
|
1789
1781
|
}
|
|
1790
1782
|
const measure = this.measureText(parsedData);
|
|
@@ -1802,6 +1794,7 @@
|
|
|
1802
1794
|
size.resizedX = measure.resizedX;
|
|
1803
1795
|
size.resizedY = measure.resizedY;
|
|
1804
1796
|
size.charSize = measure.charSize;
|
|
1797
|
+
this.context.restore();
|
|
1805
1798
|
return size;
|
|
1806
1799
|
}
|
|
1807
1800
|
parseCommandAndNicoscript(comment) {
|
|
@@ -1923,6 +1916,7 @@
|
|
|
1923
1916
|
}
|
|
1924
1917
|
_drawCollision(posX, posY, showCollision) {
|
|
1925
1918
|
if (showCollision) {
|
|
1919
|
+
this.context.save();
|
|
1926
1920
|
const scale = getConfig(config.commentScale, false);
|
|
1927
1921
|
this.context.strokeStyle = "rgba(0,255,255,1)";
|
|
1928
1922
|
this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
|
|
@@ -1936,6 +1930,7 @@
|
|
|
1936
1930
|
this.context.strokeStyle = "rgba(255,255,0,0.5)";
|
|
1937
1931
|
this.context.strokeRect(posX, posY + linePosY, this.comment.width, this.comment.fontSize * -1 * scale);
|
|
1938
1932
|
}
|
|
1933
|
+
this.context.restore();
|
|
1939
1934
|
}
|
|
1940
1935
|
}
|
|
1941
1936
|
_generateTextImage() {
|
|
@@ -2726,7 +2721,6 @@
|
|
|
2726
2721
|
resetNicoScripts();
|
|
2727
2722
|
this.canvas = canvas;
|
|
2728
2723
|
this.context = getContext(canvas);
|
|
2729
|
-
this.context.strokeStyle = `rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
|
|
2730
2724
|
this.context.textAlign = "start";
|
|
2731
2725
|
this.context.textBaseline = "alphabetic";
|
|
2732
2726
|
this.context.lineWidth = config.contextLineWidth;
|
|
@@ -2873,7 +2867,7 @@
|
|
|
2873
2867
|
return true;
|
|
2874
2868
|
}
|
|
2875
2869
|
_drawVideo() {
|
|
2876
|
-
if (this.video
|
|
2870
|
+
if (this.video) {
|
|
2877
2871
|
let scale;
|
|
2878
2872
|
const height = this.canvas.height / this.video.videoHeight, width = this.canvas.width / this.video.videoWidth;
|
|
2879
2873
|
if (this.enableLegacyPiP ? height > width : height < width) {
|
|
@@ -2907,6 +2901,7 @@
|
|
|
2907
2901
|
}
|
|
2908
2902
|
_drawCollision(vpos) {
|
|
2909
2903
|
if (this.showCollision) {
|
|
2904
|
+
this.context.save();
|
|
2910
2905
|
const leftCollision = this.collision.left[vpos], rightCollision = this.collision.right[vpos];
|
|
2911
2906
|
this.context.fillStyle = "red";
|
|
2912
2907
|
if (leftCollision) {
|
|
@@ -2919,10 +2914,12 @@
|
|
|
2919
2914
|
this.context.fillRect(config.collisionRange.right, comment.posY, config.contextLineWidth * -1, comment.height);
|
|
2920
2915
|
}
|
|
2921
2916
|
}
|
|
2917
|
+
this.context.restore();
|
|
2922
2918
|
}
|
|
2923
2919
|
}
|
|
2924
2920
|
_drawFPS(drawCanvasStart) {
|
|
2925
2921
|
if (this.showFPS) {
|
|
2922
|
+
this.context.save();
|
|
2926
2923
|
this.context.font = parseFont("defont", 60);
|
|
2927
2924
|
this.context.fillStyle = "#00FF00";
|
|
2928
2925
|
this.context.strokeStyle = `rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
|
|
@@ -2930,15 +2927,18 @@
|
|
|
2930
2927
|
const fps = Math.floor(1000 / (drawTime === 0 ? 1 : drawTime));
|
|
2931
2928
|
this.context.strokeText(`FPS:${fps}(${drawTime}ms)`, 100, 100);
|
|
2932
2929
|
this.context.fillText(`FPS:${fps}(${drawTime}ms)`, 100, 100);
|
|
2930
|
+
this.context.restore();
|
|
2933
2931
|
}
|
|
2934
2932
|
}
|
|
2935
2933
|
_drawCommentCount(count) {
|
|
2936
2934
|
if (this.showCommentCount) {
|
|
2935
|
+
this.context.save();
|
|
2937
2936
|
this.context.font = parseFont("defont", 60);
|
|
2938
2937
|
this.context.fillStyle = "#00FF00";
|
|
2939
2938
|
this.context.strokeStyle = `rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
|
|
2940
2939
|
this.context.strokeText(`Count:${count || 0}`, 100, 200);
|
|
2941
2940
|
this.context.fillText(`Count:${count || 0}`, 100, 200);
|
|
2941
|
+
this.context.restore();
|
|
2942
2942
|
}
|
|
2943
2943
|
}
|
|
2944
2944
|
addEventListener(eventName, handler) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xpadev-net/niconicomments",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.52",
|
|
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",
|