├── .gitignore
├── .babelrc
├── src
    ├── index.css
    ├── effect.jsx
    ├── index.js
    ├── Comments.jsx
    └── DanmakuButton.jsx
├── Dockerfile.Jellyfin
├── Dockerfile
├── webpack.config.mjs
├── package.json
├── .github
    └── workflows
    │   └── main.yml
├── server
    └── index.mjs
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /data
3 | build-jellyfin.sh
4 | .env
5 | /dist
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "@babel/preset-env",
4 |     "@babel/preset-react"
5 |   ]
6 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | .skinHeader-withBackground.skinHeader-withBackground.osdHeader {
2 |     z-index: 2;
3 | }
4 | .videoOsdBottom.videoOsdBottom {
5 |     z-index: 2;
6 | }


--------------------------------------------------------------------------------
/Dockerfile.Jellyfin:
--------------------------------------------------------------------------------
1 | ARG JELLYFIN_IMAGE=linuxserver/jellyfin:latest
2 | FROM $JELLYFIN_IMAGE
3 | ARG JFDMK_HOST
4 | RUN sed -i "s/<\/body>/<script src=\"\/\/$JFDMK_HOST\/dist\/index.js\" defer><\/script><\/body>/g" /usr/share/jellyfin/web/index.html
5 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:16
 2 | WORKDIR /usr/src/app
 3 | 
 4 | COPY package.json ./
 5 | COPY yarn.lock ./
 6 | RUN yarn install --production=true
 7 | COPY server ./server
 8 | COPY dist ./dist
 9 | EXPOSE 10086
10 | VOLUME /usr/src/app/data
11 | CMD ["yarn", "start"]
12 | 


--------------------------------------------------------------------------------
/src/effect.jsx:
--------------------------------------------------------------------------------
 1 | import ReactDOM from "react-dom";
 2 | import React from "react";
 3 | import Comments from "./Comments";
 4 | 
 5 | const effect = ({ video, buttons, osdTimeText, itemIdSubject, basePath }) => {
 6 |   const root = document.createElement("div");
 7 |   document.body.appendChild(root);
 8 |   const buttonContainer = document.createElement("div");
 9 |   buttons.insertBefore(buttonContainer, osdTimeText.nextSibling);
10 |   ReactDOM.render(
11 |     <Comments
12 |       video={video}
13 |       buttonContainer={buttonContainer}
14 |       itemIdSubject={itemIdSubject}
15 |       basePath={basePath}
16 |     />,
17 |     root
18 |   );
19 | 
20 |   return () => {
21 |     ReactDOM.unmountComponentAtNode(root);
22 |     buttonContainer.remove();
23 |     root.remove();
24 |   };
25 | };
26 | 
27 | export default effect;
28 | 


--------------------------------------------------------------------------------
/webpack.config.mjs:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | 
 3 | /**
 4 |  * @type { import ('webpack').Configuration }
 5 |  */
 6 | const config = {
 7 |     entry: './src/index.js',
 8 |     output: {
 9 |         filename: 'index.js',
10 |         path: path.resolve('./dist'),
11 |     },
12 |     module: {
13 |         rules: [
14 |             {
15 |                 test: /\.css$/i,
16 |                 use: ['style-loader', 'css-loader'],
17 |             },
18 |             {
19 |                 test: /\.(js|jsx)$/i,
20 |                 exclude: /node_modules/,
21 |                 use: ['babel-loader'],
22 |             },
23 |         ],
24 |     },
25 |     resolve: {
26 |         extensions: ['', '.js', '.jsx'],
27 |     },
28 |     devServer: {
29 |         allowedHosts: 'all',
30 |         port: 3000,
31 |         proxy: {
32 |             '/danmaku': 'http://localhost:10086',
33 |             '/query': 'http://localhost:10086',
34 |         },
35 |         headers: {
36 |             'Access-Control-Allow-Origin': '*',
37 |         },
38 |         client: {
39 |             webSocketURL: process.env.DEV_WEBSOCKET_URL,
40 |         },
41 |     },
42 | };
43 | 
44 | export default config;
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jfdmk",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "",
 6 |   "main": "server/index.js",
 7 |   "scripts": {
 8 |     "dev:server": "dotenv -- nodemon --signal SIGINT --watch server server/index.mjs",
 9 |     "dev:frontend": "NODE_ENV=development dotenv -- webpack serve",
10 |     "start": "dotenv -- node server/index.mjs",
11 |     "build": "NODE_ENV=production webpack",
12 |     "test": "echo \"Error: no test specified\" && exit 1"
13 |   },
14 |   "keywords": [],
15 |   "author": "",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "@emotion/react": "^11.5.0",
19 |     "@emotion/styled": "^11.3.0",
20 |     "@mui/material": "^5.1.0",
21 |     "@mui/styles": "^5.1.0",
22 |     "@std4453/comment-core-library": "^0.11.1",
23 |     "axios": "^0.24.0",
24 |     "clsx": "^1.1.1",
25 |     "dotenv-cli": "^4.1.0",
26 |     "express": "^4.17.1",
27 |     "qs": "^6.10.1",
28 |     "react": "^17.0.2",
29 |     "react-dom": "^17.0.2",
30 |     "rxjs": "^7.4.0"
31 |   },
32 |   "devDependencies": {
33 |     "@babel/core": "^7.16.0",
34 |     "@babel/preset-env": "^7.16.0",
35 |     "@babel/preset-react": "^7.16.0",
36 |     "@types/webpack-dev-server": "^4.3.1",
37 |     "babel-loader": "^8.2.3",
38 |     "css-loader": "^6.5.1",
39 |     "nodemon": "^2.0.14",
40 |     "style-loader": "^3.3.1",
41 |     "webpack": "^5.64.0",
42 |     "webpack-cli": "^4.9.1",
43 |     "webpack-dev-server": "^4.4.0"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | 
 2 | name: CI
 3 | 
 4 | on:
 5 |   push:
 6 |     branches: [ master ]
 7 |     tags: [ 'v*' ]
 8 |   pull_request:
 9 |     branches: [ master ]
10 | 
11 |   # Allows you to run this workflow manually from the Actions tab
12 |   workflow_dispatch:
13 | 
14 | jobs:
15 |   build:
16 |     runs-on: ubuntu-latest
17 | 
18 |     steps:
19 |       - name: Checkout
20 |         uses: actions/checkout@v2
21 |       
22 |       - name: Docker meta
23 |         id: meta
24 |         uses: docker/metadata-action@v3
25 |         with:
26 |           images: ghcr.io/std4453/jfdmk
27 |           tags: |
28 |             type=ref,event=branch
29 |             type=ref,event=pr
30 |             type=semver,pattern={{version}}
31 |             type=semver,pattern={{major}}.{{minor}}
32 |             type=semver,pattern={{major}}
33 |             type=sha
34 | 
35 |       - name: Setup Node.js environment
36 |         uses: actions/setup-node@v2.4.1
37 |         with:
38 |           cache: yarn
39 |           cache-dependency-path: yarn.lock
40 |           
41 |       - name: Set up Docker Buildx
42 |         uses: docker/setup-buildx-action@v1
43 |         
44 |       - name: Login to GHCR
45 |         if: github.event_name != 'pull_request'
46 |         uses: docker/login-action@v1
47 |         with:
48 |           registry: ghcr.io
49 |           username: ${{ github.repository_owner }}
50 |           password: ${{ secrets.GITHUB_TOKEN }}
51 | 
52 |       - name: Install dependencies
53 |         run: yarn install --frozen-lockfile
54 | 
55 |       - name: Build app
56 |         run: yarn build
57 |       
58 |       - name: Build and push
59 |         uses: docker/build-push-action@v2
60 |         with:
61 |           context: .
62 |           push: ${{ github.event_name != 'pull_request' }}
63 |           tags: ${{ steps.meta.outputs.tags }}
64 |           labels: ${{ steps.meta.outputs.labels }}
65 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { BehaviorSubject } from "rxjs";
 2 | import commentsEffect from "./effect";
 3 | 
 4 | let unmount = null;
 5 | const baseURL = new URL(document.currentScript.src);
 6 | const basePath = `${baseURL.protocol}//${baseURL.host}`;
 7 | const itemIdSubject = new BehaviorSubject("");
 8 | 
 9 | if (Math.max(window.innerWidth, window.innerHeight) >= 1000) {
10 |   const tryMount = () => {
11 |     if (location.hash !== "#!/video") return false;
12 |     const video = document.querySelector("video");
13 |     if (!video) return false;
14 |     const page = Array.from(
15 |       document.querySelectorAll("div[id=videoOsdPage]")
16 |     ).find((el) => !el.classList.contains("hide"));
17 |     if (!page) return false;
18 |     const buttons = page.querySelector(".buttons.focuscontainer-x");
19 |     if (!buttons) return false;
20 |     const osdTimeText = buttons.querySelector(".osdTimeText");
21 |     if (!osdTimeText) return false;
22 |     if (!itemIdSubject.getValue()) return false;
23 |     if (!unmount) {
24 |       console.log("[jfdmk] initializing comments...");
25 |       unmount = commentsEffect({
26 |         video,
27 |         buttons,
28 |         osdTimeText,
29 |         itemIdSubject,
30 |         basePath,
31 |       });
32 |     }
33 |     return true;
34 |   };
35 |   const update = () => {
36 |     if (!tryMount()) {
37 |       if (unmount) {
38 |         console.log("[jfdmk] finalizing comments...");
39 |         unmount();
40 |         unmount = null;
41 |         itemIdSubject.next("");
42 |       }
43 |     }
44 |   };
45 |   setInterval(update, 250);
46 | 
47 |   // intercept fetch to get itemId
48 |   const originalFetch = window.fetch;
49 |   window.fetch = (...args) => {
50 |     const url = args[0];
51 |     {
52 |       const result = /\/Items\/([0-9a-fA-F]+)\/PlaybackInfo/.exec(url);
53 |       if (result) {
54 |         if (itemIdSubject.getValue() !== result[1]) {
55 |           itemIdSubject.next(result[1]);
56 |         }
57 |       }
58 |     }
59 |     return originalFetch(...args);
60 |   };
61 | 
62 |   console.log("[jfdmk] waiting...");
63 | }
64 | 


--------------------------------------------------------------------------------
/server/index.mjs:
--------------------------------------------------------------------------------
  1 | import express from "express";
  2 | import qs from "qs";
  3 | import axios from "axios";
  4 | import zlib from "zlib";
  5 | import { promisify } from "util";
  6 | import fs from "fs";
  7 | 
  8 | const app = express();
  9 | 
 10 | const inflate = promisify(zlib.inflateRaw);
 11 | 
 12 | app.get("/danmaku", async (req, res) => {
 13 |   res.header("access-control-allow-origin", "*");
 14 |   try {
 15 |     const { data } = await axios({
 16 |       // override local dns
 17 |       url: `https://api.bilibili.com/x/v1/dm/list.so?${qs.stringify(
 18 |         req.query
 19 |       )}`,
 20 |       responseType: "arraybuffer",
 21 |       decompress: false,
 22 |       headers: {
 23 |         host: "api.bilibili.com",
 24 |         "accept-encoding": "gzip, deflate, br",
 25 |       },
 26 |     });
 27 |     const xmlStr = await inflate(data);
 28 |     res.type("text/xml");
 29 |     res.send(xmlStr);
 30 |   } catch (e) {
 31 |     res.status(500);
 32 |     res.send("internal server error");
 33 |     console.log(e);
 34 |   }
 35 | });
 36 | 
 37 | app.use("/static", express.static("static"));
 38 | 
 39 | const readFile = promisify(fs.readFile);
 40 | 
 41 | let data = JSON.parse(await readFile("data/db.json", "utf8"));
 42 | 
 43 | fs.watchFile("data/db.json", async () => {
 44 |   try {
 45 |     console.log("db changed, loading new data");
 46 |     const newData = JSON.parse(await readFile("data/db.json", "utf8"));
 47 |     data = newData;
 48 |     console.log("db updated");
 49 |   } catch (e) {
 50 |     console.error("db reload failed", e);
 51 |   }
 52 | });
 53 | 
 54 | app.get("/query", async (req, res) => {
 55 |   res.header("access-control-allow-origin", "*");
 56 |   try {
 57 |     const {
 58 |       series: seriesName,
 59 |       season: seasonIndexStr,
 60 |       episode: episodeIndexStr,
 61 |     } = req.query;
 62 |     const seasonIndex = parseInt(seasonIndexStr);
 63 |     const episodeIndex = parseInt(episodeIndexStr);
 64 |     const season = data.seasons.find(
 65 |       ({ series, season }) => series === seriesName && season === seasonIndex
 66 |     );
 67 |     if (!season) {
 68 |       res.send({ code: 404 });
 69 |       return;
 70 |     }
 71 |     const { bilibili_ss, bilibili_from = 1, ranges } = season;
 72 |     let ss = bilibili_ss;
 73 |     let offset = bilibili_from - 1;
 74 |     if (!ss && ranges) {
 75 |       for (const {
 76 |         from = 0,
 77 |         to = episodeIndex,
 78 |         bilibili_ss,
 79 |         bilibili_from = 1,
 80 |       } of ranges) {
 81 |         if (episodeIndex >= from && episodeIndex <= to) {
 82 |           ss = bilibili_ss;
 83 |           offset = bilibili_from - from;
 84 |           break;
 85 |         }
 86 |       }
 87 |     }
 88 |     if (!ss) {
 89 |       res.send({ code: 404 });
 90 |       return;
 91 |     }
 92 |     const { data: bilibiliSeasonData } = await axios({
 93 |       url: `https://${apiEndpoint}/pgc/web/season/section?season_id=${bilibili_ss}`,
 94 |       headers: {
 95 |         host: "api.bilibili.com",
 96 |       },
 97 |     });
 98 |     if (bilibiliSeasonData.code !== 0) {
 99 |       res.send({ code: 404 });
100 |       return;
101 |     }
102 |     const {
103 |       result: {
104 |         main_section: { episodes },
105 |       },
106 |     } = bilibiliSeasonData;
107 |     const episode = episodes[episodeIndex - 1 + offset];
108 |     if (!episode) {
109 |       res.send({ code: 404 });
110 |       return;
111 |     }
112 |     const { aid, cid } = episode;
113 |     res.send({
114 |       code: 200,
115 |       query: `oid=${cid}&pid=${aid}`,
116 |     });
117 |   } catch (e) {
118 |     res.status(500);
119 |     res.send("Internal Server Error");
120 |     console.error(e);
121 |   }
122 | });
123 | 
124 | app.use("/dist", express.static("dist"));
125 | 
126 | app.listen(parseInt(process.env.PORT ?? "10086"), () => {
127 |   console.log("Server started");
128 | });
129 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # jfdmk
  2 | 
  3 | _jfdmk_ 在 [_Jellyfin_](https://jellyfin.org/) 中添加了弹幕功能。
  4 | 
  5 | 它使用 [CommentCoreLibrary](https://github.com/jabbany/CommentCoreLibrary) 作为弹幕渲染引擎，用 [Bilibili 弹幕](https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/danmaku/danmaku_xml.md) 作为数据源。
  6 | 
  7 | ## 使用
  8 | 
  9 | ### 构建数据库
 10 | 
 11 | 为了使用它，你需要创建 `data/db.json` ，内容例如：
 12 | 
 13 | ```json
 14 | {
 15 |   "seasons": [
 16 |     {
 17 |       "series": "Banished from the Hero's Party, I Decided to Live a Quiet Life in the Countryside",
 18 |       "season": 1,
 19 |       "bilibili_ss": "39461"
 20 |     }
 21 |   ]
 22 | }
 23 | ```
 24 | 
 25 | 这里的 `series` 需要与 Jellyfin 中的剧集名称 **完全一致** ，如果你按照 [我的博客](https://blog.std4453.com:444/nas-from-zero-media-part/) 配置媒体栈，它应当与 [TheTVDB](https://thetvdb.com/) 中的名称相同。
 26 | 
 27 | `season` 为 1 开始的季度编号，同样与 TheTVDB 中的数据相同。
 28 | 
 29 | 这两个字段用于匹配 bilibili 的季度，可以根据 Jellyfin 中的实际情况调整。
 30 | 
 31 | `bilibili_ss` 是 Bilibili 上对应视频的 `ss` ，你可以打开对应的番剧季度介绍页然后在 console 中输入：
 32 | 
 33 | ```js
 34 | console.log(__INITIAL_STATE__.mediaInfo.season_id);
 35 | ```
 36 | 
 37 | 默认情况下，我们假定 Jellyfin 上的剧集顺序与 bilibili 上的一一对应，如果不对应的话可以使用 `ranges` 字段进行匹配，例如：
 38 | 
 39 | ```json
 40 | {
 41 |   "seasons": [
 42 |     {
 43 |       "series": "Banished from the Hero's Party, I Decided to Live a Quiet Life in the Countryside",
 44 |       "season": 1,
 45 |       "ranges": [
 46 |         {
 47 |           "from": 2,
 48 |           "to": 6,
 49 |           "bilibili_ss": "39461",
 50 |           "bilibili_from": 3
 51 |         }
 52 |       ]
 53 |     }
 54 |   ]
 55 | }
 56 | ```
 57 | 
 58 | 这里的 `from` 、 `to` 和 `bilibili_from` 参数均为 1 开始的集数，如上的例子即表示：
 59 | 
 60 | > Jellyfin 中的第 2 ~ 6 集（包括头尾）对应 bilibili 上 ss=39461 的第 3 ~ 7 集
 61 | 
 62 | 注意：
 63 | - `bilibili_ss` 字段和 `ranges` 字段只能存在一个。
 64 | - 如果 `ranges` 中的对象不包含 `from` 字段，则视为从第一集开始。
 65 | - 如果不包含 `to` 字段，则视为 `from` 后的所有集数。
 66 | - 如果不包含 `bilibili_ss` 字段，则视为从 bilibili 的第 1 集开始。
 67 | - `ranges` 中的所有条目会从前到后匹配，直到找到第一个符合要求的。
 68 | - 相同的 `series` 和 `season` 只能存在一条，多余的会被忽略。
 69 | 
 70 | _TODO: 这一数据库内容应当可以公开，之后会考虑提供公共的数据库。_
 71 | 
 72 | ### 启动服务
 73 | 
 74 | 你可以使用 docker 镜像 `std4453/jfdmk:latest` 运行，这样的话可以跳过下面的步骤。
 75 | 
 76 | 首先你需要安装依赖：
 77 | 
 78 | ```bash
 79 | $ yarn install --production=true
 80 | ```
 81 | 
 82 | 然后需要编译前端：
 83 | 
 84 | ```bash
 85 | $ yarn build
 86 | ```
 87 | 
 88 | 现在可以启动服务器了：
 89 | 
 90 | ```bash
 91 | $ yarn start
 92 | ```
 93 | 
 94 | 默认端口为 10086，你也可以通过 `PORT` 环境变量更改端口。
 95 | 
 96 | 请注意，使用 docker 运行时， `data/db.json` 需要从外部挂载。
 97 | 
 98 | ### 修改 Jellyfin
 99 | 
100 | 最后，你需要修改 Jellyfin 的 HTML 文件，在 `index.html` 的 `</body>` 前加入：
101 | 
102 | ```html
103 | <script src="//your_jfdmk_host/dist/index.js" defer></script>
104 | ```
105 | 
106 | 刷新之后，打开对应的视频，就应该能看到弹幕了。
107 | 
108 | 如果你使用容器部署 Jellyfin，你需要修改的文件位于 `/usr/share/jellyfin/web/index.html` ，不过这样的问题在于并不能持久化，对此你可以在本地 build 包含 jfdmk 的 Jellyfin 镜像，例如：
109 | 
110 | ```bash
111 | docker build \
112 | 	-f Dockerfile.Jellyfin \
113 | 	--build-arg JELLYFIN_IMAGE=linuxserver/jellyfin:latest \
114 | 	--build-arg JFDMK_HOST=<your_jfdmk_host> \
115 | 	-t <your_scope>/jellyfin-jfdmk:latest \
116 | 	.
117 | ```
118 | 
119 | 这里的 `JELLYFIN_IMAGE` 可以替换成其他的 Jellyfin 镜像，默认是 `linuxserver/jellyfin:latest` ，以及由于 jfdmk 本体部署在其他域名下，你需要在 build 时指定它。之所以需要本地 build 而非提供公用镜像，是因为没有什么简单的动态配置手段，如果你对自己的 jfdmk 部署域名没有保密需求，你也可以配置 CI 自动 build 并 push 到 docker hub。
120 | 
121 | 镜像 build 完成之后，你可以将原先的 Jellyfin 镜像替换成 `<your_scope>/jellyfin_jfdmk:latest` 。
122 | 
123 | 注意这样 build 得到的镜像无法自动更新 Jellyfin 版本，你可以写一个脚本定期自动运行上述 build 流程。
124 | 
125 | jfdmk 只在 Web 端启用，手机端的渲染效果比较差，之后可能会启用。
126 | 
127 | ## 开发
128 | 
129 | 开发后端时使用：
130 | 
131 | ```bash
132 | $ yarn dev:server
133 | ```
134 | 
135 | 它使用 `nodemon` 监听 `server/index.js` 的变化，在变化时自动重启服务器。
136 | 
137 | 它也默认在 10086 端口上运行，注意不要和运行中的服务冲突。
138 | 
139 | 开发前端时首先需要启动后端，然后：
140 | 
141 | ```bash
142 | $ yarn dev:frontend
143 | ```
144 | 
145 | 它会在 3000 端口启动 `webpack-dev-server` ，自动打包前端代码，并反代后端请求。
146 | 
147 | 开发时你需要在 Jellyfin 中插入：
148 | 
149 | ```html
150 | <script src="//your_jfdmk_dev_host/index.js" defer></script>
151 | ```
152 | 
153 | 配置里允许从任何地址访问后端，请注意权限问题。
154 | 
155 | 为了从 Jellyfin 中访问 `webpack-dev-server` 的 WebSocket，你需要在 `.env` 中配置：
156 | 
157 | ```
158 | DEV_WEBSOCKET_URL=ws://your_jfdmk_dev_host/ws
159 | ```
160 | 
161 | 如果不进行配置，可能无法获得 HMR 支持。
162 | ## 作者
163 | 
164 | 张海川 - Haichuan Zhang - [me@std4453.com](mailto:me@std4453.com) - [Homepage](https://blog.std4453.com:444)
165 | 


--------------------------------------------------------------------------------
/src/Comments.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useMemo, useState } from "react";
  2 | import ReactDOM from "react-dom";
  3 | 
  4 | import {
  5 |   CommentManager,
  6 |   CommentProvider,
  7 |   BilibiliFormat,
  8 | } from "@std4453/comment-core-library";
  9 | import "@std4453/comment-core-library/dist/css/style.min.css";
 10 | import DanmakuButton from "./DanmakuButton";
 11 | 
 12 | import "./index.css";
 13 | 
 14 | const Comments = ({ video, buttonContainer, itemIdSubject, basePath }) => {
 15 |   const [container, setContainer] = useState(null);
 16 |   const cm = useMemo(() => {
 17 |     if (!container) return;
 18 |     return new CommentManager(container);
 19 |   }, [container]);
 20 |   useEffect(() => {
 21 |     if (!cm) return;
 22 |     cm.init();
 23 |   }, [cm]);
 24 |   useEffect(() => {
 25 |     if (!video || !cm) return;
 26 |     video.addEventListener("timeupdate", () => {
 27 |       cm.time(video.currentTime * 1000);
 28 |     });
 29 |     video.addEventListener("play", () => {
 30 |       cm.start();
 31 |     });
 32 |     video.addEventListener("playing", () => {
 33 |       cm.start();
 34 |     });
 35 |     video.addEventListener("waiting", () => {
 36 |       cm.stop();
 37 |     });
 38 |     video.addEventListener("pause", () => {
 39 |       cm.stop();
 40 |     });
 41 |     video.addEventListener("seeked", () => {
 42 |       cm.clear();
 43 |     });
 44 |   }, [cm, video]);
 45 |   useEffect(() => {
 46 |     if (!cm) return;
 47 |     const listener = () => {
 48 |       cm.width = window.innerWidth;
 49 |       cm.height = window.innerHeight;
 50 |       cm.setBounds();
 51 |     };
 52 |     window.addEventListener("resize", listener);
 53 |     return () => {
 54 |       window.removeEventListener("resize", listener);
 55 |     };
 56 |   }, [cm]);
 57 | 
 58 |   const [visible, setVisible] = useState(true);
 59 | 
 60 |   const [itemId, setItemId] = useState(itemIdSubject.getValue());
 61 |   useEffect(() => {
 62 |     const subscription = itemIdSubject.subscribe((itemId) => setItemId(itemId));
 63 |     return () => {
 64 |       subscription.unsubscribe();
 65 |     };
 66 |   }, [itemIdSubject]);
 67 | 
 68 |   useEffect(() => {
 69 |     if (!itemId || !video || !cm) return;
 70 |     (async () => {
 71 |       try {
 72 |         const data = await ApiClient.getItem(
 73 |           ApiClient.getCurrentUserId(),
 74 |           itemId
 75 |         );
 76 |         const { Type, SeriesName, ParentIndexNumber, IndexNumber } = data;
 77 |         if (Type !== "Episode") {
 78 |           throw new Error("not_found");
 79 |         }
 80 |         const resp = await fetch(
 81 |           `${basePath}/query?series=${encodeURIComponent(
 82 |             SeriesName
 83 |           )}&season=${ParentIndexNumber}&episode=${IndexNumber}`
 84 |         );
 85 |         const { code, query } = await resp.json();
 86 |         if (code !== 200) {
 87 |           throw new Error("not_found");
 88 |         }
 89 |         const provider = new CommentProvider();
 90 |         provider.addParser(
 91 |           new BilibiliFormat.XMLParser(),
 92 |           CommentProvider.SOURCE_XML
 93 |         );
 94 |         provider.addTarget(cm);
 95 |         provider.addStaticSource(
 96 |           CommentProvider.XMLProvider("GET", `${basePath}/danmaku?${query}`),
 97 |           CommentProvider.SOURCE_XML
 98 |         );
 99 |         await provider.load();
100 |         if (!video.paused) {
101 |           console.log("[jfdmk] Danmaku loaded, starting CommentManager");
102 |           cm.start();
103 |           cm.time(video.currentTime * 1000);
104 |           cm.clear();
105 |         }
106 |       } catch (e) {
107 |         if (e.message === "not_found") {
108 |           console.log(`[jfdmk] ${itemId} has no matching danmaku`);
109 |         } else {
110 |           console.error(`[jfdmk] loading danmaku failed for ${itemId}`);
111 |           console.error(e);
112 |         }
113 |       }
114 |     })();
115 |   }, [itemId, cm, video, basePath]);
116 | 
117 |   const [opacity, setOpacity] = useState(1.0);
118 |   const [speed, setSpeed] = useState(0.75);
119 |   useEffect(() => {
120 |     if (!cm) return;
121 |     cm.options.scroll.scale = 1 / speed;
122 |   }, [cm, speed]);
123 |   const [fontSize, setFontSize] = useState(1.0);
124 | 
125 |   return (
126 |     <>
127 |       <div className="abp">
128 |         <div
129 |           style={{
130 |             position: "fixed",
131 |             left: 0,
132 |             top: 0,
133 |             width: "100vw",
134 |             height: "100vh",
135 |             pointerEvents: "none",
136 |             zIndex: 1,
137 |             visibility: visible ? "visible" : "hidden",
138 |             opacity,
139 |           }}
140 |           className="container"
141 |           ref={setContainer}
142 |         ></div>
143 |       </div>
144 |       {ReactDOM.createPortal(
145 |         <DanmakuButton 
146 |           visible={visible} 
147 |           setVisible={setVisible} 
148 |           opacity={opacity}
149 |           setOpacity={setOpacity}
150 |           speed={speed}
151 |           setSpeed={setSpeed}
152 |           fontSize={fontSize}
153 |           setFontSize={setFontSize}
154 |         />,
155 |         buttonContainer
156 |       )}
157 |     </>
158 |   );
159 | };
160 | 
161 | export default Comments;
162 | 


--------------------------------------------------------------------------------
/src/DanmakuButton.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Backdrop,
  3 |   List,
  4 |   ListItem,
  5 |   ListItemText,
  6 |   Popper,
  7 |   Paper,
  8 |   Grow,
  9 |   createTheme,
 10 |   ThemeProvider,
 11 |   Slider,
 12 |   Grid,
 13 | } from "@mui/material";
 14 | import { makeStyles } from "@mui/styles";
 15 | import clsx from "clsx";
 16 | import React, { useCallback, useState } from "react";
 17 | 
 18 | const theme = createTheme({
 19 |   palette: {
 20 |     mode: "dark",
 21 |   },
 22 | });
 23 | 
 24 | const useStyles = makeStyles({
 25 |   list: {
 26 |     width: 300,
 27 |   },
 28 |   text: {
 29 |     width: 100,
 30 |   },
 31 |   slider: {
 32 |     margin: '-8px 0',
 33 |   },
 34 | });
 35 | 
 36 | const DanmakuButton = ({ 
 37 |   visible, 
 38 |   setVisible,
 39 |   opacity,
 40 |   setOpacity,
 41 |   speed,
 42 |   setSpeed,
 43 |   fontSize,
 44 |   setFontSize,
 45 | }) => {
 46 |   const [buttonEl, setButtonEl] = useState(null);
 47 |   const [open, setOpen] = useState(false);
 48 |   const handleSubtitlesClick = useCallback(() => {
 49 |     setVisible((visible) => !visible);
 50 |   }, [setVisible]);
 51 |   const handleSettingsClick = useCallback(() => {
 52 |     setOpen((open) => !open);
 53 |   }, []);
 54 |   const handleClose = useCallback(() => {
 55 |     setOpen(false);
 56 |   }, []);
 57 |   const handleOpacityChange = useCallback((event, value) => {
 58 |     setOpacity(value / 100);
 59 |   }, [setOpacity]);
 60 |   const handleSpeedChange = useCallback((event, value) => {
 61 |     setSpeed(value / 100);
 62 |   }, [setSpeed]);
 63 |   const handleFontSizeChange = useCallback((event, value) => {
 64 |     setFontSize(value / 100);
 65 |   }, [setFontSize]);
 66 | 
 67 |   const classes = useStyles();
 68 | 
 69 |   return (
 70 |     <ThemeProvider theme={theme}>
 71 |       <button
 72 |         className="paper-icon-button-light"
 73 |         onClick={handleSubtitlesClick}
 74 |       >
 75 |         <span
 76 |           className={clsx(
 77 |             "material-icons",
 78 |             visible ? "subtitles" : "subtitles_off"
 79 |           )}
 80 |         />
 81 |       </button>
 82 |       <button
 83 |         className="paper-icon-button-light"
 84 |         onClick={handleSettingsClick}
 85 |         ref={setButtonEl}
 86 |       >
 87 |         <span className={clsx("material-icons", "settings_input_component")} />
 88 |       </button>
 89 |       <Backdrop
 90 |         open={open}
 91 |         onClick={handleClose}
 92 |         style={{
 93 |           zIndex: 10,
 94 |         }}
 95 |       />
 96 |       <Popper
 97 |         open={open}
 98 |         anchorEl={buttonEl}
 99 |         style={{
100 |           zIndex: 11,
101 |         }}
102 |         transition
103 |       >
104 |         {({ TransitionProps }) => (
105 |           <Grow {...TransitionProps} timeout={250}>
106 |             <Paper
107 |               elevation={16}
108 |               sx={{
109 |                 backgroundColor: "background.paper",
110 |                 backgroundImage: "none",
111 |                 transformOrigin: "center bottom",
112 |               }}
113 |             >
114 |               <List className={classes.list}>
115 |                 <ListItem>
116 |                   <Grid container alignItems="center">
117 |                     <Grid item className={classes.text}>
118 |                       <ListItemText primary="弹幕透明度" />
119 |                     </Grid>
120 |                     <Grid item xs>
121 |                       <Slider
122 |                         min={0}
123 |                         max={100}
124 |                         valueLabelDisplay="auto"
125 |                         valueLabelFormat={(x) => `${x}%`}
126 |                         defaultValue={opacity * 100}
127 |                         onChangeCommitted={handleOpacityChange}
128 |                         className={classes.slider}
129 |                       />
130 |                     </Grid>
131 |                   </Grid>
132 |                 </ListItem>
133 |                 <ListItem>
134 |                   <Grid container alignItems="center">
135 |                     <Grid item className={classes.text}>
136 |                       <ListItemText primary="弹幕速度" />
137 |                     </Grid>
138 |                     <Grid item xs>
139 |                       <Slider
140 |                         min={20}
141 |                         max={160}
142 |                         valueLabelDisplay="auto"
143 |                         valueLabelFormat={(x) => `${(x / 100).toFixed(2)}x`}
144 |                         defaultValue={speed * 100}
145 |                         onChangeCommitted={handleSpeedChange}
146 |                         className={classes.slider}
147 |                       />
148 |                     </Grid>
149 |                   </Grid>
150 |                 </ListItem>
151 |                 <ListItem>
152 |                   <Grid container alignItems="center">
153 |                     <Grid item className={classes.text}>
154 |                       <ListItemText primary="弹幕字号" />
155 |                     </Grid>
156 |                     <Grid item xs>
157 |                       <Slider
158 |                         min={50}
159 |                         max={170}
160 |                         valueLabelDisplay="auto"
161 |                         valueLabelFormat={(x) => `${x}%`}
162 |                         defaultValue={fontSize * 100}
163 |                         onChangeCommitted={handleFontSizeChange}
164 |                         className={classes.slider}
165 |                       />
166 |                     </Grid>
167 |                   </Grid>
168 |                 </ListItem>
169 |               </List>
170 |             </Paper>
171 |           </Grow>
172 |         )}
173 |       </Popper>
174 |     </ThemeProvider>
175 |   );
176 | };
177 | 
178 | export default DanmakuButton;
179 | 


--------------------------------------------------------------------------------