优化 protobuf 实现 (#18)

* 优化toastr过渡

* 优化 protobuf 实现

- DmWebViewReply
- DmSegMobileReply

* 重新实现实时弹幕

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 *.crx
 *.pem
-*.map
+*.map
+*.exe

.vscode/tasks.json

@@ -11,6 +11,13 @@
 			"problemMatcher": [],
 			"label": "npm: build",
 			"detail": "node --experimental-strip-types ./src/build/index.ts"
+		},
+		{
+			"label": "proto2ts",
+			"type": "shell",
+			"command": "./protoc --ts_proto_opt=forceLong=bigint --ts_proto_opt=initializeFieldsAsUndefined=false --plugin=protoc-gen-ts_proto=\".\\\\node_modules\\\\.bin\\\\protoc-gen-ts_proto.cmd\" --ts_proto_out=. ${relativeFile}",
+			"problemMatcher": [],
+			"detail": "编译当前 proto 文件到 typescript 文件（依赖根目录下的 protoc 编译器）"
 		}
 	]
 }

package.json

@@ -1,12 +1,12 @@
 {
   "dependencies": {
-    "flv.js": "*",
-    "protobufjs": "*"
+    "flv.js": "*"
   },
   "devDependencies": {
     "@types/fs-extra": "*",
     "esbuild": "*",
-    "fs-extra": "*"
+    "fs-extra": "*",
+    "ts-proto": "*"
   },
   "scripts": {
     "build": "node --no-warnings --experimental-strip-types ./src/build/index.ts",

src/danmaku/index.ts

@@ -470,7 +470,7 @@ export class Danmaku extends HTMLElement {
                 const dm: IDanmaku = {
                     pool: <0>Number(json[5]),
                     color: Number(json[3]),
-                    ctime: Number(json[4]),
+                    ctime: BigInt(Number(json[4])),
                     idStr: String(json[7]),
                     mode: <1>Number(json[1]),
                     fontsize: Number(json[2]),
@@ -544,9 +544,9 @@ export interface IDanmaku {
     /** 弹幕颜色 */
     color: number;
     /** 弹幕内容 */
-    content: string;
+    content?: string;
     /** 发送时间戳 */
-    ctime: number;
+    ctime: bigint;
     /** 字体大小 */
     fontsize: number;
     /** 唯一id，已超过JavaScript整数上限，如非必要切莫转化为数字 */
@@ -566,9 +566,9 @@ export interface IDanmaku {
      * | :-: | :-: | :-: |
      * | 普通弹幕 | 字幕弹幕 | 特殊弹幕 |
      */
-    pool: 0 | 1 | 2;
+    pool?: 0 | 1 | 2;
     /** 弹幕位于视频中的时间点（单位毫秒） */
-    progress: number;
+    progress?: number;
     /** 弹幕权重，越高显示优先级越高 */
     weight?: number;
     /** 待定 */

src/danmaku/render/mode8/Player/CommentData.ts

@@ -46,9 +46,9 @@ export class CommentData {
 
     constructor(dm: IDanmaku) {
         this.size = dm.fontsize;
-        this.text = dm.content;
+        dm.content && (this.text = dm.content);
         this.mode = dm.mode;
-        this.stime = dm.progress / 1000;
-        this.date = dm.ctime;
+        dm.progress && (this.stime = dm.progress / 1000);
+        this.date = Number(dm.ctime);
     }
 }

src/danmaku/render/mode8/index.ts

@@ -26,21 +26,23 @@ export class Mode8 {
     }
 
     private async prase() {
-        const s = new Scanner(this.$dm.content
-            .replace(/(\/n|\\n|\n|\r\n)/g, '\n')
-            .replace(/(&)|(<)|(>)|(')|(")/g, (a: string) => {
-                // 处理误当成xml非法字符的转义字符
-                return <string>{
-                    '&amp;': '&',
-                    '&lt;': '<',
-                    '&gt;': '>',
-                    '&apos;': '\'',
-                    '&quot;': '"'
-                }[a]
-            }));
-        const p = new Parser(s);
-        this.#vm.rewind();
-        this.#vm.setByteCode(p.parse(this.#vm));
+        if (this.$dm.content) {
+            const s = new Scanner(this.$dm.content
+                .replace(/(\/n|\\n|\n|\r\n)/g, '\n')
+                .replace(/(&amp;)|(&lt;)|(&gt;)|(&apos;)|(&quot;)/g, (a: string) => {
+                    // 处理误当成xml非法字符的转义字符
+                    return <string>{
+                        '&amp;': '&',
+                        '&lt;': '<',
+                        '&gt;': '>',
+                        '&apos;': '\'',
+                        '&quot;': '"'
+                    }[a]
+                }));
+            const p = new Parser(s);
+            this.#vm.rewind();
+            this.#vm.setByteCode(p.parse(this.#vm));
+        }
     }
 
     async execute() {

src/io/com/bapis/README.md

@@ -0,0 +1,4 @@
+要编译proto文件到typescript，须要进行以下操作：
+   1. 下载预构建的 [protoc](https://github.com/protocolbuffers/protobuf/releases) 的二进制文件放到本项目根目录
+   2. 在 VSCode 中打开并切换到对应的 proto 文件
+   3. 运行 VSCode 任务 `proto2ts` 即会在 proto 文件同级生成同名的目标（ts）文件

src/io/com/bapis/bilibili/broadcast/message/main/DanmakuEvent.proto

@@ -0,0 +1,76 @@
+syntax = "proto3";
+
+package bilibili.broadcast.message.main;
+
+/** 弹幕消息数据 */
+message DanmakuEvent {
+    /** 弹幕列表 */
+    repeated DanmakuElem elems = 1;
+}
+
+/** 弹幕实例 */
+message DanmakuElem {
+    /**
+     * 弹幕id
+     * @deprecated 精度丢失
+     */
+    int64 id = 1;
+    /** 弹幕位置：/ms */
+    int32 progress = 2;
+    /**
+     * 弹幕模式
+     * | 1 | 4 | 5 | 6 | 7 | 8 | 9 |
+     * | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
+     * | 普通 | 底部 | 顶部 | 逆向 | 高级 | 代码 | BAS |
+     */
+    int32 mode = 3;
+    /** 弹幕字体 */
+    int32 fontsize = 4;
+    /** 弹幕颜色 */
+    uint32 color = 5;
+    /** 弹幕发送者crc32哈希 */
+    string mid_hash = 6;
+    /** 弹幕文本内容 */
+    string content = 7;
+    /** 弹幕发送时间  时间戳 */
+    int64 ctime = 8;
+    /** 弹幕动作 */
+    optional string action = 9;
+    /**
+     * 弹幕池
+     * | 0 | 1 | 2 |
+     * | :-: | :-: | :-: |
+     * | 普通弹幕 | 字幕弹幕 | 特殊弹幕 |
+     */
+    optional int32 pool = 10;
+    /** 弹幕id字符串 */
+    string id_str = 11;
+}
+
+/** 指令弹幕 */
+message CommandDm {
+    /** 弹幕id */
+    int64 id = 1;
+    /** oid */
+    int64 oid = 2;
+    /** mid */
+    int64 mid = 3;
+
+    int32 type = 4;
+    /** 弹幕指令 */
+    string command = 5;
+    /** 弹幕内容 */
+    string content = 6;
+    /** 弹幕状态 */
+    int32 state = 7;
+    /** 弹幕位置：/ms */
+    int32 progress = 8;
+    /** 创建时间 */
+    string ctime = 9;
+    /** 修改时间 */
+    string mtime = 10;
+    /** 扩展json数据 */
+    string extra = 11;
+    /** 弹幕id_str */
+    string idStr = 12;
+}