You've already forked bilibili-subtitle
Compare commits
53 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e2121e83bd | ||
|
|
7583b05289 | ||
|
|
ae60303a15 | ||
|
|
5bcedf0c9d | ||
|
|
d4e5e407a4 | ||
|
|
ce2a2da6f5 | ||
|
|
368f5d721c | ||
|
|
21e2ca958c | ||
|
|
149653ffac | ||
|
|
f977b5e238 | ||
|
|
c13ef4597b | ||
|
|
65026f62af | ||
|
|
bcff8b4f90 | ||
|
|
ee1eaf9e08 | ||
|
|
cc732de8e6 | ||
|
|
cccf7e6149 | ||
|
|
30dc724ebb | ||
|
|
51a7e998b9 | ||
|
|
556ccef4b2 | ||
|
|
42b719fb98 | ||
|
|
fa66445466 | ||
|
|
d711b2abf8 | ||
|
|
47fcb1de11 | ||
|
|
be3d3624bc | ||
|
|
910b1ce6d9 | ||
|
|
0a6bda667e | ||
|
|
5a0a123af9 | ||
|
|
b481b8a55a | ||
|
|
3cede8650d | ||
|
|
69e0497081 | ||
|
|
8776186486 | ||
|
|
d31c2d7b03 | ||
|
|
1c5534fc82 | ||
|
|
44895a98a6 | ||
|
|
53d3522fd6 | ||
|
|
56bb936aaa | ||
|
|
d52a4e8378 | ||
|
|
f69bc7f040 | ||
|
|
5005806917 | ||
|
|
6928b5fa00 | ||
|
|
5ba2b9fd6d | ||
|
|
d11b517d5e | ||
|
|
2460b0b822 | ||
|
|
9bcf6ee48d | ||
|
|
2bb5f41189 | ||
|
|
e5a645611b | ||
|
|
97bd23bcc0 | ||
|
|
02aaba6a83 | ||
|
|
3e1e69f13e | ||
|
|
9384c1419a | ||
|
|
50e6579116 | ||
|
|
751961687b | ||
|
|
5ce146803e |
@@ -1,3 +1 @@
|
|||||||
VITE_ENV=web-dev
|
VITE_ENV=web-dev
|
||||||
|
|
||||||
VITE_EXTENSION_ID=nejipfbcnfhckfpmlgibfommbnahchko
|
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
NODE_ENV=production
|
NODE_ENV=production
|
||||||
|
|
||||||
VITE_ENV=chrome
|
VITE_ENV=chrome
|
||||||
VITE_EXTENSION_ID=bciglihaegkdhoogebcdblfhppoilclp
|
|
||||||
@@ -4,3 +4,4 @@ node_modules/
|
|||||||
postcss.config.cjs
|
postcss.config.cjs
|
||||||
vite.config.ts
|
vite.config.ts
|
||||||
vite-env.d.ts
|
vite-env.d.ts
|
||||||
|
manifest.config.ts
|
||||||
@@ -25,9 +25,12 @@ module.exports = {
|
|||||||
"@typescript-eslint/no-empty-interface": "warn",
|
"@typescript-eslint/no-empty-interface": "warn",
|
||||||
"@typescript-eslint/no-unused-vars": "warn",
|
"@typescript-eslint/no-unused-vars": "warn",
|
||||||
"@typescript-eslint/strict-boolean-expressions": "warn",
|
"@typescript-eslint/strict-boolean-expressions": "warn",
|
||||||
|
"@typescript-eslint/prefer-nullish-coalescing": "off",
|
||||||
|
"@typescript-eslint/no-non-null-assertion": "warn",
|
||||||
"@typescript-eslint/object-curly-spacing": "off",
|
"@typescript-eslint/object-curly-spacing": "off",
|
||||||
"@typescript-eslint/no-misused-promises": "off",
|
"@typescript-eslint/no-misused-promises": "off",
|
||||||
"@typescript-eslint/space-infix-ops": "off",
|
"@typescript-eslint/space-infix-ops": "off",
|
||||||
|
"@typescript-eslint/no-floating-promises": "off",
|
||||||
"operator-linebreak": "off",
|
"operator-linebreak": "off",
|
||||||
"@typescript-eslint/space-before-function-paren": "off",
|
"@typescript-eslint/space-before-function-paren": "off",
|
||||||
"@typescript-eslint/comma-dangle": "off"
|
"@typescript-eslint/comma-dangle": "off"
|
||||||
|
|||||||
13
README.md
13
README.md
@@ -21,7 +21,6 @@
|
|||||||
|
|
||||||
- [chrome商店](https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp)
|
- [chrome商店](https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp)
|
||||||
- [edge商店](https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan)
|
- [edge商店](https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan)
|
||||||
- [firefox商店](https://addons.mozilla.org/zh-CN/firefox/addon/bilibili-subtitle)
|
|
||||||
|
|
||||||
## 使用说明
|
## 使用说明
|
||||||
|
|
||||||
@@ -46,11 +45,15 @@ github: [IndieKKY](https://github.com/IndieKKY)
|
|||||||
node版本：18.15.0
|
node版本：18.15.0
|
||||||
包管理器：pnpm
|
包管理器：pnpm
|
||||||
|
|
||||||
- 本地调试：`pnpm run dev`，然后加载`dist`目录。
|
- 本地调试：`pnpm run dev`，然后浏览器扩展管理页面，开启开发者模式，再加载已解压的扩展程序，选择`dist`目录。
|
||||||
- 打生产包：`pnpm run build`，然后加载`dist`目录。
|
- 打生产包：`pnpm run build`，然后浏览器扩展管理页面，开启开发者模式，再加载已解压的扩展程序，选择`dist`目录。
|
||||||
|
|
||||||
注：`./push.sh`是作者自用脚本，可以忽略。
|
注：`./push.sh`是作者自用脚本，可以忽略。
|
||||||
|
|
||||||
|
提示：最新版浏览器安全方面有更新，开发调试可能有问题，会报csp错误！
|
||||||
|
暂时的解决办法是`pnpm run dev`运行起来后，手动将`dist/manifest.json`文件里的web_accessible_resources里的use_dynamic_url都修改为false，然后浏览器扩展管理页面点击重载一下，就能正常（是@crxjs/vite-plugin依赖的问题，这个依赖很长时间没更新了，这个bug也没修复，暂时没发现更好的解决办法）。
|
||||||
|
构建后正常，关键是fix.cjs里将use_dynamic_url设置为false的这个操作。
|
||||||
|
|
||||||
## 贡献指南
|
## 贡献指南
|
||||||
|
|
||||||
欢迎贡献代码或提出改进建议！如果您希望为该项目做出贡献，请遵循以下步骤：
|
欢迎贡献代码或提出改进建议！如果您希望为该项目做出贡献，请遵循以下步骤：
|
||||||
@@ -65,7 +68,3 @@ node版本：18.15.0
|
|||||||
## 许可证
|
## 许可证
|
||||||
|
|
||||||
该项目采用 **MIT 许可证**，详情请参阅许可证文件。
|
该项目采用 **MIT 许可证**，详情请参阅许可证文件。
|
||||||
|
|
||||||
## 截图
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
7
fix.cjs
7
fix.cjs
@@ -5,4 +5,11 @@ const fs = require('fs')
|
|||||||
//copy index.html to sidepanel.html
|
//copy index.html to sidepanel.html
|
||||||
fs.copyFileSync('./dist/index.html', './dist/sidepanel.html')
|
fs.copyFileSync('./dist/index.html', './dist/sidepanel.html')
|
||||||
|
|
||||||
|
//set all use_dynamic_url to false
|
||||||
|
const manifest = require('./dist/manifest.json')
|
||||||
|
manifest.web_accessible_resources.forEach(resource => {
|
||||||
|
resource.use_dynamic_url = false
|
||||||
|
})
|
||||||
|
fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2))
|
||||||
|
|
||||||
console.log('fix.js done');
|
console.log('fix.js done');
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh" data-theme="light">
|
<html lang="zh" data-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<title>bilibili-subtitle - 哔哩哔哩字幕</title>
|
<title>哔哔君 - 哔哩哔哩字幕列表</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||||
<link rel="icon" href="/favicon-128x128.png" sizes="128x128">
|
<link rel="icon" href="/favicon-128x128.png" sizes="128x128">
|
||||||
|
|||||||
@@ -12,9 +12,10 @@ const [major, minor, patch, label = '0'] = version
|
|||||||
.split(/[.-]/)
|
.split(/[.-]/)
|
||||||
|
|
||||||
export default defineManifest(async (env) => ({
|
export default defineManifest(async (env) => ({
|
||||||
"name": "哔哩哔哩字幕列表",
|
"name": '__MSG_appName__',
|
||||||
"description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
|
"description": '__MSG_appDescription__',
|
||||||
"version": `${major}.${minor}.${patch}`,
|
"version": `${major}.${minor}.${patch}`,
|
||||||
|
"default_locale": "zh_CN",
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"sidePanel",
|
"sidePanel",
|
||||||
@@ -56,7 +57,7 @@ export default defineManifest(async (env) => ({
|
|||||||
"resources": [
|
"resources": [
|
||||||
"index.html",
|
"index.html",
|
||||||
],
|
],
|
||||||
"use_dynamic_url": true
|
"use_dynamic_url": false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" data-theme="light">
|
<html lang="en" data-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<title>哔哩哔哩字幕列表选项</title>
|
<title>哔哔君 - 哔哩哔哩字幕列表选项</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||||
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
|
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"name": "bilibili-subtitle",
|
"name": "bilibili-subtitle",
|
||||||
"version": "1.11.0",
|
"version": "1.12.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "哔哩哔哩字幕列表",
|
"description": "哔哩哔哩字幕列表",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
@@ -15,6 +15,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@crxjs/vite-plugin": "^1.0.14",
|
"@crxjs/vite-plugin": "^1.0.14",
|
||||||
"@kky002/kky-hooks": "^1.2.1",
|
"@kky002/kky-hooks": "^1.2.1",
|
||||||
|
"@kky002/kky-message": "^0.2.0",
|
||||||
"@kky002/kky-ui": "^1.0.9",
|
"@kky002/kky-ui": "^1.0.9",
|
||||||
"@kky002/kky-util": "^1.13.13",
|
"@kky002/kky-util": "^1.13.13",
|
||||||
"@logto/react": "1.0.0-beta.13",
|
"@logto/react": "1.0.0-beta.13",
|
||||||
@@ -24,6 +25,7 @@
|
|||||||
"ahooks": "^3.7.1",
|
"ahooks": "^3.7.1",
|
||||||
"classnames": "^2.3.2",
|
"classnames": "^2.3.2",
|
||||||
"daisyui": "^2.42.1",
|
"daisyui": "^2.42.1",
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
"js-search": "^2.0.0",
|
"js-search": "^2.0.0",
|
||||||
"less": "^4.1.3",
|
"less": "^4.1.3",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
|||||||
70
pnpm-lock.yaml
generated
70
pnpm-lock.yaml
generated
@@ -14,6 +14,9 @@ importers:
|
|||||||
'@kky002/kky-hooks':
|
'@kky002/kky-hooks':
|
||||||
specifier: ^1.2.1
|
specifier: ^1.2.1
|
||||||
version: 1.2.1
|
version: 1.2.1
|
||||||
|
'@kky002/kky-message':
|
||||||
|
specifier: ^0.2.0
|
||||||
|
version: 0.2.0
|
||||||
'@kky002/kky-ui':
|
'@kky002/kky-ui':
|
||||||
specifier: ^1.0.9
|
specifier: ^1.0.9
|
||||||
version: 1.0.9
|
version: 1.0.9
|
||||||
@@ -41,6 +44,9 @@ importers:
|
|||||||
daisyui:
|
daisyui:
|
||||||
specifier: ^2.42.1
|
specifier: ^2.42.1
|
||||||
version: 2.42.1(autoprefixer@10.4.13(postcss@8.4.19))(postcss@8.4.19)
|
version: 2.42.1(autoprefixer@10.4.13(postcss@8.4.19))(postcss@8.4.19)
|
||||||
|
dayjs:
|
||||||
|
specifier: ^1.11.13
|
||||||
|
version: 1.11.13
|
||||||
js-search:
|
js-search:
|
||||||
specifier: ^2.0.0
|
specifier: ^2.0.0
|
||||||
version: 2.0.0
|
version: 2.0.0
|
||||||
@@ -307,6 +313,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==}
|
resolution: {integrity: sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
|
|
||||||
|
'@babel/runtime@7.26.9':
|
||||||
|
resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==}
|
||||||
|
engines: {node: '>=6.9.0'}
|
||||||
|
|
||||||
'@babel/template@7.25.7':
|
'@babel/template@7.25.7':
|
||||||
resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
|
resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
@@ -387,6 +397,9 @@ packages:
|
|||||||
'@kky002/kky-hooks@1.2.1':
|
'@kky002/kky-hooks@1.2.1':
|
||||||
resolution: {integrity: sha512-AJM2gm75TtkZqOPd/WX0+4h/dfjSb8HlDQLwAJsYIHRNw8MQUKu32Ih6OxhKL2l9pdPsuj+S9/lBc4Cwu4tP+Q==}
|
resolution: {integrity: sha512-AJM2gm75TtkZqOPd/WX0+4h/dfjSb8HlDQLwAJsYIHRNw8MQUKu32Ih6OxhKL2l9pdPsuj+S9/lBc4Cwu4tP+Q==}
|
||||||
|
|
||||||
|
'@kky002/kky-message@0.2.0':
|
||||||
|
resolution: {integrity: sha512-bquH4+79xHYLgVGxfDHAHQgmkbJ8Wbx6U3vBR6fA6piheMATwVPW7c2scS0BMbB9F4w23I4fZj30nRWgZrcEig==}
|
||||||
|
|
||||||
'@kky002/kky-ui@1.0.9':
|
'@kky002/kky-ui@1.0.9':
|
||||||
resolution: {integrity: sha512-pepfRcLfC1eIQ1lsSJLWNr4PgdLqFLuvQMlitJy7W668yZ7qu8yAHSjg8A20R7HB4mFkJ+B96WETalOar1e/kA==}
|
resolution: {integrity: sha512-pepfRcLfC1eIQ1lsSJLWNr4PgdLqFLuvQMlitJy7W668yZ7qu8yAHSjg8A20R7HB4mFkJ+B96WETalOar1e/kA==}
|
||||||
|
|
||||||
@@ -651,6 +664,12 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
|
||||||
|
ahooks@3.8.4:
|
||||||
|
resolution: {integrity: sha512-39wDEw2ZHvypaT14EpMMk4AzosHWt0z9bulY0BeDsvc9PqJEV+Kjh/4TZfftSsotBMq52iYIOFPd3PR56e0ZJg==}
|
||||||
|
engines: {node: '>=8.0.0'}
|
||||||
|
peerDependencies:
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
|
||||||
ajv@6.12.6:
|
ajv@6.12.6:
|
||||||
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
|
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
|
||||||
|
|
||||||
@@ -856,8 +875,8 @@ packages:
|
|||||||
autoprefixer: ^10.0.2
|
autoprefixer: ^10.0.2
|
||||||
postcss: ^8.1.6
|
postcss: ^8.1.6
|
||||||
|
|
||||||
dayjs@1.11.5:
|
dayjs@1.11.13:
|
||||||
resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
|
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
|
||||||
|
|
||||||
debug@2.6.9:
|
debug@2.6.9:
|
||||||
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
|
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
|
||||||
@@ -1557,6 +1576,10 @@ packages:
|
|||||||
js-cookie@2.2.1:
|
js-cookie@2.2.1:
|
||||||
resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
|
resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
|
||||||
|
|
||||||
|
js-cookie@3.0.5:
|
||||||
|
resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
|
||||||
|
engines: {node: '>=14'}
|
||||||
|
|
||||||
js-search@2.0.0:
|
js-search@2.0.0:
|
||||||
resolution: {integrity: sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg==}
|
resolution: {integrity: sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg==}
|
||||||
|
|
||||||
@@ -2045,6 +2068,9 @@ packages:
|
|||||||
react-fast-compare@3.2.0:
|
react-fast-compare@3.2.0:
|
||||||
resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
|
resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
|
||||||
|
|
||||||
|
react-fast-compare@3.2.2:
|
||||||
|
resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
|
||||||
|
|
||||||
react-hot-toast@2.4.0:
|
react-hot-toast@2.4.0:
|
||||||
resolution: {integrity: sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==}
|
resolution: {integrity: sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
@@ -2132,6 +2158,9 @@ packages:
|
|||||||
regenerator-runtime@0.13.9:
|
regenerator-runtime@0.13.9:
|
||||||
resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
|
resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
|
||||||
|
|
||||||
|
regenerator-runtime@0.14.1:
|
||||||
|
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
|
||||||
|
|
||||||
regexp.prototype.flags@1.4.3:
|
regexp.prototype.flags@1.4.3:
|
||||||
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
|
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
@@ -2693,6 +2722,10 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
regenerator-runtime: 0.13.9
|
regenerator-runtime: 0.13.9
|
||||||
|
|
||||||
|
'@babel/runtime@7.26.9':
|
||||||
|
dependencies:
|
||||||
|
regenerator-runtime: 0.14.1
|
||||||
|
|
||||||
'@babel/template@7.25.7':
|
'@babel/template@7.25.7':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/code-frame': 7.25.7
|
'@babel/code-frame': 7.25.7
|
||||||
@@ -2813,6 +2846,14 @@ snapshots:
|
|||||||
lodash-es: 4.17.21
|
lodash-es: 4.17.21
|
||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
|
|
||||||
|
'@kky002/kky-message@0.2.0':
|
||||||
|
dependencies:
|
||||||
|
'@kky002/kky-util': 1.13.13
|
||||||
|
ahooks: 3.8.4(react@18.2.0)
|
||||||
|
lodash-es: 4.17.21
|
||||||
|
qs: 6.11.0
|
||||||
|
react: 18.2.0
|
||||||
|
|
||||||
'@kky002/kky-ui@1.0.9':
|
'@kky002/kky-ui@1.0.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
@@ -3114,7 +3155,7 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@types/js-cookie': 2.2.7
|
'@types/js-cookie': 2.2.7
|
||||||
ahooks-v3-count: 1.0.0
|
ahooks-v3-count: 1.0.0
|
||||||
dayjs: 1.11.5
|
dayjs: 1.11.13
|
||||||
intersection-observer: 0.12.2
|
intersection-observer: 0.12.2
|
||||||
js-cookie: 2.2.1
|
js-cookie: 2.2.1
|
||||||
lodash: 4.17.21
|
lodash: 4.17.21
|
||||||
@@ -3126,7 +3167,7 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@types/js-cookie': 2.2.7
|
'@types/js-cookie': 2.2.7
|
||||||
ahooks-v3-count: 1.0.0
|
ahooks-v3-count: 1.0.0
|
||||||
dayjs: 1.11.5
|
dayjs: 1.11.13
|
||||||
intersection-observer: 0.12.2
|
intersection-observer: 0.12.2
|
||||||
js-cookie: 2.2.1
|
js-cookie: 2.2.1
|
||||||
lodash: 4.17.21
|
lodash: 4.17.21
|
||||||
@@ -3135,6 +3176,19 @@ snapshots:
|
|||||||
screenfull: 5.2.0
|
screenfull: 5.2.0
|
||||||
tslib: 2.5.0
|
tslib: 2.5.0
|
||||||
|
|
||||||
|
ahooks@3.8.4(react@18.2.0):
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.26.9
|
||||||
|
dayjs: 1.11.13
|
||||||
|
intersection-observer: 0.12.2
|
||||||
|
js-cookie: 3.0.5
|
||||||
|
lodash: 4.17.21
|
||||||
|
react: 18.2.0
|
||||||
|
react-fast-compare: 3.2.2
|
||||||
|
resize-observer-polyfill: 1.5.1
|
||||||
|
screenfull: 5.2.0
|
||||||
|
tslib: 2.5.0
|
||||||
|
|
||||||
ajv@6.12.6:
|
ajv@6.12.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
fast-deep-equal: 3.1.3
|
fast-deep-equal: 3.1.3
|
||||||
@@ -3385,7 +3439,7 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- ts-node
|
- ts-node
|
||||||
|
|
||||||
dayjs@1.11.5: {}
|
dayjs@1.11.13: {}
|
||||||
|
|
||||||
debug@2.6.9:
|
debug@2.6.9:
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -4073,6 +4127,8 @@ snapshots:
|
|||||||
|
|
||||||
js-cookie@2.2.1: {}
|
js-cookie@2.2.1: {}
|
||||||
|
|
||||||
|
js-cookie@3.0.5: {}
|
||||||
|
|
||||||
js-search@2.0.0: {}
|
js-search@2.0.0: {}
|
||||||
|
|
||||||
js-tokens@4.0.0: {}
|
js-tokens@4.0.0: {}
|
||||||
@@ -4695,6 +4751,8 @@ snapshots:
|
|||||||
|
|
||||||
react-fast-compare@3.2.0: {}
|
react-fast-compare@3.2.0: {}
|
||||||
|
|
||||||
|
react-fast-compare@3.2.2: {}
|
||||||
|
|
||||||
react-hot-toast@2.4.0(csstype@3.1.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
|
react-hot-toast@2.4.0(csstype@3.1.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
|
||||||
dependencies:
|
dependencies:
|
||||||
goober: 2.1.12(csstype@3.1.2)
|
goober: 2.1.12(csstype@3.1.2)
|
||||||
@@ -4787,6 +4845,8 @@ snapshots:
|
|||||||
|
|
||||||
regenerator-runtime@0.13.9: {}
|
regenerator-runtime@0.13.9: {}
|
||||||
|
|
||||||
|
regenerator-runtime@0.14.1: {}
|
||||||
|
|
||||||
regexp.prototype.flags@1.4.3:
|
regexp.prototype.flags@1.4.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
call-bind: 1.0.2
|
call-bind: 1.0.2
|
||||||
|
|||||||
11
popup.html
11
popup.html
@@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh" style="width: 500px;">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<img src="shot.jpg" style="width: 100%; object-fit: contain;"/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
8
public/_locales/zh_CN/messages.json
Normal file
8
public/_locales/zh_CN/messages.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"appName": {
|
||||||
|
"message": "哔哔君 - bilibili哔哩哔哩字幕列表"
|
||||||
|
},
|
||||||
|
"appDescription": {
|
||||||
|
"message": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/bibigpt.png
Normal file
BIN
public/bibigpt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
public/bibijun.png
Normal file
BIN
public/bibijun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 651 B |
Binary file not shown.
|
Before Width: | Height: | Size: 363 B After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 400 B After Width: | Height: | Size: 2.4 KiB |
BIN
public/favicon-64x64.png
Normal file
BIN
public/favicon-64x64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 447 B After Width: | Height: | Size: 4.2 KiB |
BIN
public/shot.jpg
BIN
public/shot.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg t="1672795365953" class="icon" viewBox="0 0 1303 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2585"
|
|
||||||
width="254.4921875" height="200"><path d="M110.964364 1023.720727c-60.509091 0-109.847273-48.872727-109.847273-108.916363V109.009455C1.117091 48.965818 50.455273 0 110.964364 0h1081.902545c60.509091 0 109.847273 48.872727 109.847273 108.916364v805.794909c0 60.043636-49.338182 108.916364-109.847273 108.916363H110.964364z m0-927.650909c-6.609455 0-12.101818 5.771636-12.101819 12.939637v805.794909c0 7.168 5.492364 13.032727 12.101819 13.032727h1081.902545c6.609455 0 12.101818-5.864727 12.101818-13.032727V109.009455c0-7.168-5.492364-13.032727-12.101818-13.032728H110.964364z" fill="#00AEEC" p-id="2586"></path><path d="M1003.054545 520.098909a51.572364 51.572364 0 0 1-50.26909 52.689455h-80.058182a51.572364 51.572364 0 0 1-50.269091-52.689455c0-29.137455 22.434909-52.782545 50.269091-52.782545h80.058182c27.834182 0 50.269091 23.645091 50.26909 52.782545zM1096.610909 270.149818c0 28.858182-22.341818 52.410182-49.989818 52.410182H232.541091a51.293091 51.293091 0 0 1-50.082909-52.410182c0-29.044364 22.434909-52.503273 50.082909-52.503273h814.08c27.648 0 50.082909 23.458909 50.082909 52.503273zM768.744727 520.098909c0 28.858182-22.341818 52.410182-50.082909 52.410182H232.541091a51.293091 51.293091 0 0 1-50.082909-52.410182c0-29.044364 22.434909-52.503273 50.082909-52.503273H718.661818c27.648 0 50.082909 23.458909 50.082909 52.503273zM1096.610909 735.976727c0 29.044364-22.341818 52.503273-49.989818 52.503273H560.500364a51.293091 51.293091 0 0 1-50.082909-52.503273c0-28.951273 22.341818-52.410182 50.082909-52.410182h486.120727c27.648 0 50.082909 23.458909 50.082909 52.410182z" fill="#00AEEC" p-id="2587"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 867 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 413 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB |
@@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh" data-theme="light">
|
<html lang="zh" data-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<title>哔哩哔哩字幕列表</title>
|
<title>哔哔君 - 哔哩哔哩字幕列表</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||||
<link rel="icon" href="/favicon-128x128.png" sizes="128x128">
|
<link rel="icon" href="/favicon-128x128.png" sizes="128x128">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import OptionsPage from './pages/OptionsPage'
|
|||||||
import {handleJson} from '@kky002/kky-util'
|
import {handleJson} from '@kky002/kky-util'
|
||||||
import {useLocalStorage} from '@kky002/kky-hooks'
|
import {useLocalStorage} from '@kky002/kky-hooks'
|
||||||
import {Toaster} from 'react-hot-toast'
|
import {Toaster} from 'react-hot-toast'
|
||||||
import useMessagingService from './hooks/useMessageService'
|
import useMessageService from './hooks/useMessageService'
|
||||||
import MainPage from './pages/MainPage'
|
import MainPage from './pages/MainPage'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
@@ -44,7 +44,7 @@ function App() {
|
|||||||
useLocalStorage<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp)
|
useLocalStorage<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp)
|
||||||
|
|
||||||
// services
|
// services
|
||||||
useMessagingService()
|
useMessageService()
|
||||||
|
|
||||||
return <div>
|
return <div>
|
||||||
<Toaster position={path === 'app'?'bottom-center':'top-center'}/>
|
<Toaster position={path === 'app'?'bottom-center':'top-center'}/>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import {v4} from 'uuid'
|
import {v4} from 'uuid'
|
||||||
import {handleTask, initTaskService, tasksMap} from './taskService'
|
import {handleTask, initTaskService, tasksMap} from './taskService'
|
||||||
import { MESSAGE_TO_EXTENSION_ADD_TASK, MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL, MESSAGE_TO_EXTENSION_GET_TASK, MESSAGE_TO_EXTENSION_SHOW_FLAG, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV} from '@/consts/const'
|
import { DEFAULT_USE_PORT, STORAGE_ENV} from '@/consts/const'
|
||||||
import ExtensionMessaging from '@/messaging/layer2/ExtensionMessaging'
|
import { AllExtensionMessages } from '@/message-typings'
|
||||||
import { TAG_TARGET_INJECT } from '@/messaging/const'
|
import { ExtensionMessaging, TAG_TARGET_INJECT } from '@kky002/kky-message'
|
||||||
|
|
||||||
const setBadgeOk = async (tabId: number, ok: boolean) => {
|
const setBadgeOk = async (tabId: number, ok: boolean) => {
|
||||||
await chrome.action.setBadgeText({
|
await chrome.action.setBadgeText({
|
||||||
@@ -29,12 +29,15 @@ const closeSidePanel = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const methods: {
|
const methods: {
|
||||||
[key: string]: (params: any, context: MethodContext) => Promise<any>
|
[K in AllExtensionMessages['method']]: (params: Extract<AllExtensionMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
|
||||||
} = {
|
} = {
|
||||||
[MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL]: async (params, context) => {
|
CLOSE_SIDE_PANEL: async (params, context) => {
|
||||||
closeSidePanel()
|
closeSidePanel()
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_EXTENSION_ADD_TASK]: async (params, context) => {
|
GET_TAB_ID: async (params, context) => {
|
||||||
|
return context.tabId
|
||||||
|
},
|
||||||
|
ADD_TASK: async (params, context) => {
|
||||||
// 新建任务
|
// 新建任务
|
||||||
const task: Task = {
|
const task: Task = {
|
||||||
id: v4(),
|
id: v4(),
|
||||||
@@ -49,7 +52,7 @@ const methods: {
|
|||||||
|
|
||||||
return task
|
return task
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_EXTENSION_GET_TASK]: async (params, context) => {
|
GET_TASK: async (params, context) => {
|
||||||
// 返回任务信息
|
// 返回任务信息
|
||||||
const taskId = params.taskId
|
const taskId = params.taskId
|
||||||
const task = tasksMap.get(taskId)
|
const task = tasksMap.get(taskId)
|
||||||
@@ -70,15 +73,15 @@ const methods: {
|
|||||||
task,
|
task,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_EXTENSION_SHOW_FLAG]: async (params, context) => {
|
SHOW_FLAG: async (params, context) => {
|
||||||
await setBadgeOk(context.tabId!, params.show)
|
await setBadgeOk(context.tabId!, params.show)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
// 初始化backgroundMessage
|
// 初始化backgroundMessage
|
||||||
const extensionMessaging = new ExtensionMessaging()
|
const extensionMessaging = new ExtensionMessaging(DEFAULT_USE_PORT)
|
||||||
extensionMessaging.init(methods)
|
extensionMessaging.init(methods)
|
||||||
|
|
||||||
chrome.runtime.onMessage.addListener((event: MessageData, sender: chrome.runtime.MessageSender, sendResponse: (result: any) => void) => {
|
chrome.runtime.onMessage.addListener((event: any, sender: chrome.runtime.MessageSender, sendResponse: (result: any) => void) => {
|
||||||
// debug((sender.tab != null) ? `tab ${sender.tab.url ?? ''} => ` : 'extension => ', event)
|
// debug((sender.tab != null) ? `tab ${sender.tab.url ?? ''} => ` : 'extension => ', event)
|
||||||
|
|
||||||
// legacy
|
// legacy
|
||||||
@@ -89,10 +92,8 @@ chrome.runtime.onMessage.addListener((event: MessageData, sender: chrome.runtime
|
|||||||
return true
|
return true
|
||||||
} else if (event.type === 'syncSet') { // sync.set
|
} else if (event.type === 'syncSet') { // sync.set
|
||||||
chrome.storage.sync.set(event.items).catch(console.error)
|
chrome.storage.sync.set(event.items).catch(console.error)
|
||||||
return
|
|
||||||
} else if (event.type === 'syncRemove') { // sync.remove
|
} else if (event.type === 'syncRemove') { // sync.remove
|
||||||
chrome.storage.sync.remove(event.keys).catch(console.error)
|
chrome.storage.sync.remove(event.keys).catch(console.error)
|
||||||
return
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -115,7 +116,7 @@ chrome.action.onClicked.addListener(async (tab) => {
|
|||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
closeSidePanel()
|
closeSidePanel()
|
||||||
extensionMessaging.broadcastMessageExact([tab.id!], [TAG_TARGET_INJECT], MESSAGE_TO_INJECT_TOGGLE_DISPLAY).catch(console.error)
|
extensionMessaging.sendMessage(false, tab.id!, TAG_TARGET_INJECT, 'TOGGLE_DISPLAY').catch(console.error)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react'
|
||||||
import { useAppSelector } from '../hooks/redux';
|
import { useAppSelector } from '../hooks/redux'
|
||||||
import { openOptionsPage } from '../utils/chromeUtils';
|
import { openOptionsPage } from '../utils/chromeUtils'
|
||||||
|
|
||||||
const ApiKeyReminder: React.FC = () => {
|
const ApiKeyReminder: React.FC = () => {
|
||||||
const apiKey = useAppSelector(state => state.env.envData.apiKey);
|
const apiKey = useAppSelector(state => state.env.envData.apiKey)
|
||||||
const geminiApiKey = useAppSelector(state => state.env.envData.geminiApiKey);
|
const geminiApiKey = useAppSelector(state => state.env.envData.geminiApiKey)
|
||||||
const aiType = useAppSelector(state => state.env.envData.aiType);
|
const aiType = useAppSelector(state => state.env.envData.aiType)
|
||||||
|
|
||||||
if ((aiType === 'gemini' && geminiApiKey) || (aiType !== 'gemini' && apiKey)) {
|
if ((aiType === 'gemini' && geminiApiKey) || (aiType !== 'gemini' && apiKey)) {
|
||||||
return null;
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -21,7 +21,7 @@ const ApiKeyReminder: React.FC = () => {
|
|||||||
设置 →
|
设置 →
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default ApiKeyReminder;
|
export default ApiKeyReminder
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import toast from 'react-hot-toast'
|
|||||||
import SegmentCard from './SegmentCard'
|
import SegmentCard from './SegmentCard'
|
||||||
import {
|
import {
|
||||||
ASK_ENABLED_DEFAULT,
|
ASK_ENABLED_DEFAULT,
|
||||||
|
DEFAULT_USE_PORT,
|
||||||
HEADER_HEIGHT,
|
HEADER_HEIGHT,
|
||||||
PAGE_SETTINGS,
|
PAGE_SETTINGS,
|
||||||
SEARCH_BAR_HEIGHT,
|
SEARCH_BAR_HEIGHT,
|
||||||
@@ -39,6 +40,7 @@ import Ask from './Ask'
|
|||||||
import { v4 } from 'uuid'
|
import { v4 } from 'uuid'
|
||||||
import RateExtension from '../components/RateExtension'
|
import RateExtension from '../components/RateExtension'
|
||||||
import ApiKeyReminder from './ApiKeyReminder'
|
import ApiKeyReminder from './ApiKeyReminder'
|
||||||
|
import { useMessaging } from '@kky002/kky-message'
|
||||||
|
|
||||||
const Body = () => {
|
const Body = () => {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
@@ -65,6 +67,7 @@ const Body = () => {
|
|||||||
// const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
// const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
||||||
const searchText = useAppSelector(state => state.env.searchText)
|
const searchText = useAppSelector(state => state.env.searchText)
|
||||||
const asks = useAppSelector(state => state.env.asks)
|
const asks = useAppSelector(state => state.env.asks)
|
||||||
|
const {disconnected} = useMessaging(DEFAULT_USE_PORT)
|
||||||
// const recommendIdx = useMemo(() => random(0, 3), [])
|
// const recommendIdx = useMemo(() => random(0, 3), [])
|
||||||
const showSearchInput = useMemo(() => {
|
const showSearchInput = useMemo(() => {
|
||||||
return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
|
return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
|
||||||
@@ -124,7 +127,7 @@ const Body = () => {
|
|||||||
}
|
}
|
||||||
toast.success(`已添加${segments_.length}个总结任务!`)
|
toast.success(`已添加${segments_.length}个总结任务!`)
|
||||||
}
|
}
|
||||||
}, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
|
}, [addSummarizeTask, curSummaryType, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
|
||||||
|
|
||||||
const onFoldAll = useCallback(() => {
|
const onFoldAll = useCallback(() => {
|
||||||
dispatch(setFoldAll(!foldAll))
|
dispatch(setFoldAll(!foldAll))
|
||||||
@@ -262,6 +265,10 @@ const Body = () => {
|
|||||||
{searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle /></button>}
|
{searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle /></button>}
|
||||||
</div>}
|
</div>}
|
||||||
|
|
||||||
|
{disconnected && <div className='flex flex-col justify-center items-center gap-2 text-sm bg-red-400 rounded mx-2'>
|
||||||
|
<span className='flex items-center gap-1 text-white'><AiOutlineCloseCircle className='text-white' />已断开连接</span>
|
||||||
|
</div>}
|
||||||
|
|
||||||
{/* auto scroll btn */}
|
{/* auto scroll btn */}
|
||||||
{!autoScroll && <div
|
{!autoScroll && <div
|
||||||
className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
|
className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
|
||||||
@@ -304,22 +311,22 @@ const Body = () => {
|
|||||||
{/* </button>} */}
|
{/* </button>} */}
|
||||||
{/* </div> */}
|
{/* </div> */}
|
||||||
<div className='flex flex-col'>
|
<div className='flex flex-col'>
|
||||||
{/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
|
<div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
|
||||||
{/* <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png' */}
|
<div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png'
|
||||||
{/* alt='BibiGPT logo' */}
|
alt='BibiGPT logo'
|
||||||
{/* className='w-8 h-8'/>BibiGPT */}
|
className='w-8 h-8'/>BibiGPT
|
||||||
{/* </div> */}
|
</div>
|
||||||
{/* <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span */}
|
<div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span
|
||||||
{/* className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频） */}
|
className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频）
|
||||||
{/* </div> */}
|
</div>
|
||||||
{/* <div className='flex gap-2'> */}
|
<div className='flex gap-2'>
|
||||||
{/* <a title='BibiGPT' href='https://bibigpt.co/r/bilibili' */}
|
<a title='BibiGPT' href='https://bibigpt.co/r/bilibili'
|
||||||
{/* onClick={(e) => { */}
|
onClick={(e) => {
|
||||||
{/* e.preventDefault() */}
|
e.preventDefault()
|
||||||
{/* openUrl('https://bibigpt.co/r/bilibili') */}
|
openUrl('https://bibigpt.co/r/bilibili')
|
||||||
{/* }} className='link text-sm text-accent'>✨ BibiGPT ✨</a> */}
|
}} className='link text-sm text-accent'>✨ BibiGPT ✨</a>
|
||||||
{/* </div> */}
|
</div>
|
||||||
{/* </div> */}
|
</div>
|
||||||
<div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
|
<div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
|
||||||
<div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
|
<div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
|
||||||
alt='youtube caption logo'
|
alt='youtube caption logo'
|
||||||
|
|||||||
43
src/components/DebateChat.tsx
Normal file
43
src/components/DebateChat.tsx
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { useAppSelector } from '@/hooks/redux'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const DebateChat: React.FC<DebateProps> = ({ messages }) => {
|
||||||
|
const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
{messages.map((message, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`flex mb-4 ${
|
||||||
|
message.side === 'pro' ? 'justify-start' : 'justify-end'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`max-w-[85%] rounded-2xl p-3 shadow-md relative ${
|
||||||
|
message.side === 'pro'
|
||||||
|
? 'bg-blue-100 text-blue-800 ml-2'
|
||||||
|
: 'bg-green-100 text-green-800 mr-2'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className={`${fontSize === 'large' ? 'text-sm' : 'text-xs'} font-bold mb-1`}>
|
||||||
|
{message.side === 'pro' ? '正方' : '反方'}
|
||||||
|
</p>
|
||||||
|
<p className={fontSize === 'large' ? 'text-sm' : 'text-xs'}>{message.content}</p>
|
||||||
|
<div
|
||||||
|
className={`absolute w-4 h-4 ${
|
||||||
|
message.side === 'pro'
|
||||||
|
? 'bg-blue-100 -left-2 top-2 rounded-bl-full'
|
||||||
|
: 'bg-green-100 -right-2 top-2 rounded-br-full'
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DebateChat
|
||||||
@@ -83,6 +83,7 @@ const Header = (props: {
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<div className='shrink-0 flex items-center'>
|
<div className='shrink-0 flex items-center'>
|
||||||
|
{/* <img src="bibijun.png" alt="Logo" className="w-auto h-6 ml-2 mr-1" /> */}
|
||||||
<span className='shrink-0 text-[15px] font-medium pl-[16px] pr-[14px]'>字幕列表</span>
|
<span className='shrink-0 text-[15px] font-medium pl-[16px] pr-[14px]'>字幕列表</span>
|
||||||
<MoreBtn placement={'right-start'}/>
|
<MoreBtn placement={'right-start'}/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
import React, {MouseEvent, useCallback, useContext, useRef, useState} from 'react'
|
import {MouseEvent, useCallback, useContext, useRef, useState} from 'react'
|
||||||
import {useClickAway} from 'ahooks'
|
import {useClickAway} from 'ahooks'
|
||||||
import {
|
import {
|
||||||
AiFillWechat,
|
|
||||||
BsFillChatDotsFill,
|
|
||||||
FiMoreVertical,
|
FiMoreVertical,
|
||||||
ImDownload3,
|
ImDownload3,
|
||||||
IoMdSettings,
|
IoMdSettings,
|
||||||
@@ -13,12 +11,14 @@ import {Placement} from '@popperjs/core/lib/enums'
|
|||||||
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
||||||
import {setEnvData, setTempData} from '../redux/envReducer'
|
import {setEnvData, setTempData} from '../redux/envReducer'
|
||||||
import {EventBusContext} from '../Router'
|
import {EventBusContext} from '../Router'
|
||||||
import {EVENT_EXPAND, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO} from '../consts/const'
|
import {EVENT_EXPAND} from '../consts/const'
|
||||||
import {formatSrtTime, formatTime, formatVttTime} from '../utils/util'
|
import {formatSrtTime, formatTime, formatVttTime} from '../utils/util'
|
||||||
import {downloadText, openUrl} from '@kky002/kky-util'
|
import {downloadText, openUrl} from '@kky002/kky-util'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import {getSummarize} from '../utils/bizUtil'
|
import {getSummarize} from '../utils/bizUtil'
|
||||||
import useMessage from '../messaging/layer2/useMessaging'
|
import dayjs from 'dayjs'
|
||||||
|
import { useMessage } from '@/hooks/useMessageService'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
placement: Placement
|
placement: Placement
|
||||||
}
|
}
|
||||||
@@ -68,9 +68,11 @@ const MoreBtn = (props: Props) => {
|
|||||||
const segments = useAppSelector(state => state.env.segments)
|
const segments = useAppSelector(state => state.env.segments)
|
||||||
const url = useAppSelector(state => state.env.url)
|
const url = useAppSelector(state => state.env.url)
|
||||||
const title = useAppSelector(state => state.env.title)
|
const title = useAppSelector(state => state.env.title)
|
||||||
|
const ctime = useAppSelector(state => state.env.ctime) // 时间戳，单位s
|
||||||
|
const author = useAppSelector(state => state.env.author)
|
||||||
const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
|
const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
|
||||||
|
|
||||||
const {sendInject} = useMessage()
|
const {sendInject} = useMessage(!!envData.sidePanel)
|
||||||
|
|
||||||
const downloadCallback = useCallback((download: boolean) => {
|
const downloadCallback = useCallback((download: boolean) => {
|
||||||
if (data == null) {
|
if (data == null) {
|
||||||
@@ -79,20 +81,21 @@ const MoreBtn = (props: Props) => {
|
|||||||
|
|
||||||
let fileName = title
|
let fileName = title
|
||||||
let s, suffix
|
let s, suffix
|
||||||
|
const time = ctime ? dayjs(ctime * 1000).format('YYYY-MM-DD HH:mm:ss') : '' // 2024-05-01 12:00:00
|
||||||
if (!downloadType || downloadType === 'text') {
|
if (!downloadType || downloadType === 'text') {
|
||||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
|
||||||
for (const item of data.body) {
|
for (const item of data.body) {
|
||||||
s += item.content + '\n'
|
s += item.content + '\n'
|
||||||
}
|
}
|
||||||
suffix = 'txt'
|
suffix = 'txt'
|
||||||
} else if (downloadType === 'textWithTime') {
|
} else if (downloadType === 'textWithTime') {
|
||||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
|
||||||
for (const item of data.body) {
|
for (const item of data.body) {
|
||||||
s += formatTime(item.from) + ' ' + item.content + '\n'
|
s += formatTime(item.from) + ' ' + item.content + '\n'
|
||||||
}
|
}
|
||||||
suffix = 'txt'
|
suffix = 'txt'
|
||||||
} else if (downloadType === 'article') {
|
} else if (downloadType === 'article') {
|
||||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
|
||||||
for (const item of data.body) {
|
for (const item of data.body) {
|
||||||
s += item.content + ', '
|
s += item.content + ', '
|
||||||
}
|
}
|
||||||
@@ -142,7 +145,7 @@ const MoreBtn = (props: Props) => {
|
|||||||
s = JSON.stringify(data)
|
s = JSON.stringify(data)
|
||||||
suffix = 'json'
|
suffix = 'json'
|
||||||
} else if (downloadType === 'summarize') {
|
} else if (downloadType === 'summarize') {
|
||||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
s = `${title??'无标题'}\n${url??'无链接'}\n${author??'无作者'} ${time}\n\n`
|
||||||
const [success, content] = getSummarize(title, segments, curSummaryType)
|
const [success, content] = getSummarize(title, segments, curSummaryType)
|
||||||
if (!success) return
|
if (!success) return
|
||||||
s += content
|
s += content
|
||||||
@@ -159,11 +162,11 @@ const MoreBtn = (props: Props) => {
|
|||||||
}).catch(console.error)
|
}).catch(console.error)
|
||||||
}
|
}
|
||||||
setMoreVisible(false)
|
setMoreVisible(false)
|
||||||
}, [curSummaryType, data, downloadType, segments, title, url])
|
}, [author, ctime, curSummaryType, data, downloadType, segments, title, url])
|
||||||
|
|
||||||
const downloadAudioCallback = useCallback(() => {
|
const downloadAudioCallback = useCallback(() => {
|
||||||
sendInject(MESSAGE_TO_INJECT_DOWNLOAD_AUDIO, {})
|
sendInject(null, 'DOWNLOAD_AUDIO', {})
|
||||||
}, [])
|
}, [sendInject])
|
||||||
|
|
||||||
const selectCallback = useCallback((e: any) => {
|
const selectCallback = useCallback((e: any) => {
|
||||||
dispatch(setTempData({
|
dispatch(setTempData({
|
||||||
@@ -245,7 +248,7 @@ const MoreBtn = (props: Props) => {
|
|||||||
下载音频(m4s)
|
下载音频(m4s)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='hover:bg-accent'>
|
{/* <li className='hover:bg-accent'>
|
||||||
<a className='flex items-center' onClick={(e) => {
|
<a className='flex items-center' onClick={(e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
@@ -264,7 +267,7 @@ const MoreBtn = (props: Props) => {
|
|||||||
<AiFillWechat className='w-[20px] h-[20px] text-primary/75 bg-white rounded-sm p-0.5'/>
|
<AiFillWechat className='w-[20px] h-[20px] text-primary/75 bg-white rounded-sm p-0.5'/>
|
||||||
微信公众号(IndieKKY)
|
微信公众号(IndieKKY)
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li> */}
|
||||||
{/* <li className='hover:bg-accent'> */}
|
{/* <li className='hover:bg-accent'> */}
|
||||||
{/* <a className='flex items-center' onClick={(e) => { */}
|
{/* <a className='flex items-center' onClick={(e) => { */}
|
||||||
{/* e.preventDefault() */}
|
{/* e.preventDefault() */}
|
||||||
@@ -297,6 +300,17 @@ const MoreBtn = (props: Props) => {
|
|||||||
选项
|
选项
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
{/* 官网 */}
|
||||||
|
<li className='hover:bg-accent'>
|
||||||
|
<a className='flex items-center' onClick={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
openUrl('https://www.bibijun.cc')
|
||||||
|
}}>
|
||||||
|
<img alt='哔哔君' src='/favicon-128x128.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/>
|
||||||
|
🏠 哔哔君官网
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Popover>}
|
</Popover>}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react'
|
||||||
import { FaStar } from 'react-icons/fa';
|
import { FaStar } from 'react-icons/fa'
|
||||||
import { IoMdClose } from 'react-icons/io';
|
import { IoMdClose } from 'react-icons/io'
|
||||||
import { setTempData } from '../redux/envReducer';
|
import { setTempData } from '../redux/envReducer'
|
||||||
import { useAppDispatch, useAppSelector } from '../hooks/redux';
|
import { useAppDispatch, useAppSelector } from '../hooks/redux'
|
||||||
import { openUrl } from '@kky002/kky-util';
|
import { openUrl } from '@kky002/kky-util'
|
||||||
import { isEdgeBrowser } from '../utils/util';
|
import { isEdgeBrowser } from '../utils/util'
|
||||||
|
|
||||||
const RateExtension: React.FC = () => {
|
const RateExtension: React.FC = () => {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
const [isHovered, setIsHovered] = useState(false)
|
||||||
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
||||||
|
|
||||||
const handleRateClick = () => {
|
const handleRateClick = () => {
|
||||||
@@ -21,9 +21,9 @@ const RateExtension: React.FC = () => {
|
|||||||
} else {
|
} else {
|
||||||
openUrl('https://chromewebstore.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews')
|
openUrl('https://chromewebstore.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
if (reviewed === true || reviewed === undefined) return null;
|
if (reviewed === true || reviewed === undefined) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative bg-gradient-to-r from-primary to-secondary text-primary-content p-4 rounded-lg shadow-lg text-sm transition-all duration-300 ease-in-out hover:shadow-xl">
|
<div className="relative bg-gradient-to-r from-primary to-secondary text-primary-content p-4 rounded-lg shadow-lg text-sm transition-all duration-300 ease-in-out hover:shadow-xl">
|
||||||
@@ -52,7 +52,7 @@ const RateExtension: React.FC = () => {
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
export default RateExtension;
|
export default RateExtension
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react'
|
import {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react'
|
||||||
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
||||||
import {setFloatKeyPointsSegIdx, setSegmentFold, setTempData} from '../redux/envReducer'
|
import {setFloatKeyPointsSegIdx, setSegmentFold, setTempData} from '../redux/envReducer'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import {FaClipboardList} from 'react-icons/fa'
|
import {FaClipboardList, FaComments} from 'react-icons/fa'
|
||||||
import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../consts/const'
|
import {SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../consts/const'
|
||||||
import useTranslate from '../hooks/useTranslate'
|
import useTranslate from '../hooks/useTranslate'
|
||||||
import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
|
import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
@@ -12,6 +12,7 @@ import {useInViewport} from 'ahooks'
|
|||||||
import SegmentItem from './SegmentItem'
|
import SegmentItem from './SegmentItem'
|
||||||
import {stopPopFunc} from '../utils/util'
|
import {stopPopFunc} from '../utils/util'
|
||||||
import useSubtitle from '../hooks/useSubtitle'
|
import useSubtitle from '../hooks/useSubtitle'
|
||||||
|
import DebateChat from './DebateChat'
|
||||||
|
|
||||||
const SummarizeItemOverview = (props: {
|
const SummarizeItemOverview = (props: {
|
||||||
segment: Segment
|
segment: Segment
|
||||||
@@ -113,6 +114,8 @@ const Summarize = (props: {
|
|||||||
<div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
|
<div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
|
||||||
</div>)}
|
</div>)}
|
||||||
</div>}
|
</div>}
|
||||||
|
{summary?.type === 'debate' && (summary.content != null) &&
|
||||||
|
<DebateChat messages={summary.content} />}
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col justify-center items-center'>
|
<div className='flex flex-col justify-center items-center'>
|
||||||
{segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短，无法总结.</div>}
|
{segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短，无法总结.</div>}
|
||||||
@@ -200,8 +203,14 @@ const SegmentCard = (props: {
|
|||||||
}))
|
}))
|
||||||
}, [dispatch])
|
}, [dispatch])
|
||||||
|
|
||||||
|
const onSelDebate = useCallback(() => {
|
||||||
|
dispatch(setTempData({
|
||||||
|
curSummaryType: 'debate'
|
||||||
|
}))
|
||||||
|
}, [dispatch])
|
||||||
|
|
||||||
return <div
|
return <div
|
||||||
className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1 shadow', showCurrent && 'shadow-primary')}>
|
className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1', showCurrent && 'shadow shadow-md')}>
|
||||||
<div className='relative flex justify-center min-h-[20px]'>
|
<div className='relative flex justify-center min-h-[20px]'>
|
||||||
{segments != null && segments.length > 0 &&
|
{segments != null && segments.length > 0 &&
|
||||||
<div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
|
<div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
|
||||||
@@ -215,6 +224,7 @@ const SegmentCard = (props: {
|
|||||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
|
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
|
||||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
|
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
|
||||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
|
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
|
||||||
|
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'debate' && 'tab-active')} onClick={onSelDebate}><FaComments/>辩论</a>
|
||||||
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
||||||
</div>}
|
</div>}
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -1,26 +1,4 @@
|
|||||||
export const MESSAGE_TARGET_EXTENSION = 'BilibiliExtension'
|
export const DEFAULT_USE_PORT = false
|
||||||
export const MESSAGE_TARGET_INJECT = 'BilibiliInject'
|
|
||||||
export const MESSAGE_TARGET_APP = 'BilibiliAPP'
|
|
||||||
|
|
||||||
export const MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL = 'closeSidePanel'
|
|
||||||
export const MESSAGE_TO_EXTENSION_ADD_TASK = 'addTask'
|
|
||||||
export const MESSAGE_TO_EXTENSION_GET_TASK = 'getTask'
|
|
||||||
export const MESSAGE_TO_EXTENSION_SHOW_FLAG = 'showFlag'
|
|
||||||
|
|
||||||
export const MESSAGE_TO_INJECT_TOGGLE_DISPLAY = 'toggleDisplay'
|
|
||||||
export const MESSAGE_TO_INJECT_FOLD = 'fold'
|
|
||||||
export const MESSAGE_TO_INJECT_MOVE = 'move'
|
|
||||||
export const MESSAGE_TO_INJECT_PLAY = 'play'
|
|
||||||
export const MESSAGE_TO_INJECT_DOWNLOAD_AUDIO = 'downloadAudio'
|
|
||||||
export const MESSAGE_TO_INJECT_GET_VIDEO_STATUS = 'getVideoStatus'
|
|
||||||
export const MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO = 'getVideoElementInfo'
|
|
||||||
export const MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO = 'refreshVideoInfo'
|
|
||||||
export const MESSAGE_TO_INJECT_UPDATETRANSRESULT = 'updateTransResult'
|
|
||||||
export const MESSAGE_TO_INJECT_HIDE_TRANS = 'hideTrans'
|
|
||||||
export const MESSAGE_TO_INJECT_GET_SUBTITLE = 'getSubtitle'
|
|
||||||
|
|
||||||
export const MESSAGE_TO_APP_SET_INFOS = 'setInfos'
|
|
||||||
export const MESSAGE_TO_APP_SET_VIDEO_INFO = 'setVideoInfo'
|
|
||||||
|
|
||||||
export const EVENT_EXPAND = 'expand'
|
export const EVENT_EXPAND = 'expand'
|
||||||
|
|
||||||
@@ -35,6 +13,7 @@ export const PROMPT_TYPE_TRANSLATE = 'translate'
|
|||||||
export const PROMPT_TYPE_SUMMARIZE_OVERVIEW = 'summarize_overview'
|
export const PROMPT_TYPE_SUMMARIZE_OVERVIEW = 'summarize_overview'
|
||||||
export const PROMPT_TYPE_SUMMARIZE_KEYPOINT = 'summarize_keypoint'
|
export const PROMPT_TYPE_SUMMARIZE_KEYPOINT = 'summarize_keypoint'
|
||||||
export const PROMPT_TYPE_SUMMARIZE_QUESTION = 'summarize_question'
|
export const PROMPT_TYPE_SUMMARIZE_QUESTION = 'summarize_question'
|
||||||
|
export const PROMPT_TYPE_SUMMARIZE_DEBATE = 'summarize_debate'
|
||||||
export const PROMPT_TYPE_SUMMARIZE_BRIEF = 'summarize_brief'
|
export const PROMPT_TYPE_SUMMARIZE_BRIEF = 'summarize_brief'
|
||||||
export const PROMPT_TYPE_ASK = 'ask'
|
export const PROMPT_TYPE_ASK = 'ask'
|
||||||
export const PROMPT_TYPES = [{
|
export const PROMPT_TYPES = [{
|
||||||
@@ -52,6 +31,9 @@ export const PROMPT_TYPES = [{
|
|||||||
}, {
|
}, {
|
||||||
name: '问题',
|
name: '问题',
|
||||||
type: PROMPT_TYPE_SUMMARIZE_QUESTION,
|
type: PROMPT_TYPE_SUMMARIZE_QUESTION,
|
||||||
|
}, {
|
||||||
|
name: '辩论',
|
||||||
|
type: PROMPT_TYPE_SUMMARIZE_DEBATE,
|
||||||
}, {
|
}, {
|
||||||
name: '提问',
|
name: '提问',
|
||||||
type: PROMPT_TYPE_ASK,
|
type: PROMPT_TYPE_ASK,
|
||||||
@@ -82,6 +64,12 @@ export const SUMMARIZE_TYPES = {
|
|||||||
downloadName: '💡常见问题💡',
|
downloadName: '💡常见问题💡',
|
||||||
promptType: PROMPT_TYPE_SUMMARIZE_QUESTION,
|
promptType: PROMPT_TYPE_SUMMARIZE_QUESTION,
|
||||||
},
|
},
|
||||||
|
debate: {
|
||||||
|
name: '辩论',
|
||||||
|
desc: '辩论',
|
||||||
|
downloadName: '💡辩论💡',
|
||||||
|
promptType: PROMPT_TYPE_SUMMARIZE_DEBATE,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const PROMPT_DEFAULTS = {
|
export const PROMPT_DEFAULTS = {
|
||||||
@@ -199,6 +187,42 @@ Provide an example to illustrate the expected output:
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
\`\`\`
|
\`\`\`
|
||||||
|
`,
|
||||||
|
[PROMPT_TYPE_SUMMARIZE_DEBATE]: `You are a helpful assistant skilled at generating debates based on video subtitles.
|
||||||
|
|
||||||
|
## Context
|
||||||
|
|
||||||
|
The video's title: '''{{title}}'''.
|
||||||
|
The video's subtitles:
|
||||||
|
|
||||||
|
'''
|
||||||
|
{{segment}}
|
||||||
|
'''
|
||||||
|
|
||||||
|
## Command
|
||||||
|
|
||||||
|
Please play the roles of both the affirmative and negative sides to discuss the author's viewpoint.
|
||||||
|
The conversation should consist of 10 rounds(5 sentences from the affirmative side, 5 sentences from the negative side.).
|
||||||
|
The tone should be straightforward.
|
||||||
|
|
||||||
|
Answer in language '{{language}}'.
|
||||||
|
|
||||||
|
## Output format
|
||||||
|
|
||||||
|
Provide an example to illustrate the expected output:
|
||||||
|
|
||||||
|
\`\`\`json
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"side": "pro",
|
||||||
|
"content": "xxx"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"side": "con",
|
||||||
|
"content": "xxx"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
\`\`\`
|
||||||
`,
|
`,
|
||||||
[PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
|
[PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
|
||||||
Answer in language '{{language}}'.
|
Answer in language '{{language}}'.
|
||||||
@@ -269,6 +293,9 @@ for (const model of MODELS) {
|
|||||||
export const LANGUAGES = [{
|
export const LANGUAGES = [{
|
||||||
code: 'en',
|
code: 'en',
|
||||||
name: 'English',
|
name: 'English',
|
||||||
|
}, {
|
||||||
|
code: 'ja',
|
||||||
|
name: '日本語',
|
||||||
}, {
|
}, {
|
||||||
code: 'ena',
|
code: 'ena',
|
||||||
name: 'American English',
|
name: 'American English',
|
||||||
@@ -302,6 +329,39 @@ export const LANGUAGES = [{
|
|||||||
}, {
|
}, {
|
||||||
code: 'Italian',
|
code: 'Italian',
|
||||||
name: 'Italiano',
|
name: 'Italiano',
|
||||||
|
}, {
|
||||||
|
code: 'ko',
|
||||||
|
name: '한국어',
|
||||||
|
}, {
|
||||||
|
code: 'hi',
|
||||||
|
name: 'हिन्दी',
|
||||||
|
}, {
|
||||||
|
code: 'tr',
|
||||||
|
name: 'Türkçe',
|
||||||
|
}, {
|
||||||
|
code: 'nl',
|
||||||
|
name: 'Nederlands',
|
||||||
|
}, {
|
||||||
|
code: 'pl',
|
||||||
|
name: 'Polski',
|
||||||
|
}, {
|
||||||
|
code: 'sv',
|
||||||
|
name: 'Svenska',
|
||||||
|
}, {
|
||||||
|
code: 'vi',
|
||||||
|
name: 'Tiếng Việt',
|
||||||
|
}, {
|
||||||
|
code: 'th',
|
||||||
|
name: 'ไทย',
|
||||||
|
}, {
|
||||||
|
code: 'id',
|
||||||
|
name: 'Bahasa Indonesia',
|
||||||
|
}, {
|
||||||
|
code: 'el',
|
||||||
|
name: 'Ελληνικά',
|
||||||
|
}, {
|
||||||
|
code: 'he',
|
||||||
|
name: 'עברית',
|
||||||
}]
|
}]
|
||||||
export const LANGUAGES_MAP: {[key: string]: typeof LANGUAGES[number]} = {}
|
export const LANGUAGES_MAP: {[key: string]: typeof LANGUAGES[number]} = {}
|
||||||
for (const language of LANGUAGES) {
|
for (const language of LANGUAGES) {
|
||||||
|
|||||||
@@ -1,31 +1,35 @@
|
|||||||
import { setCurFetched, setCurInfo, setData, setInfos, setTitle, setUrl } from '@/redux/envReducer'
|
import { setAuthor, setCtime, setCurFetched, setCurInfo, setData, setInfos, setTitle, setUrl } from '@/redux/envReducer'
|
||||||
import { useMemo } from 'react'
|
import { useAppDispatch, useAppSelector } from './redux'
|
||||||
import { useAppDispatch } from './redux'
|
import { AllAPPMessages, AllExtensionMessages, AllInjectMessages } from '@/message-typings'
|
||||||
import { MESSAGE_TO_APP_SET_INFOS, MESSAGE_TO_APP_SET_VIDEO_INFO } from '@/consts/const'
|
import { useMessaging, useMessagingService } from '@kky002/kky-message'
|
||||||
import useMessagingService from '@/messaging/layer2/useMessagingService'
|
import { useMemoizedFn } from 'ahooks'
|
||||||
|
|
||||||
const useMessageService = () => {
|
const useMessageService = () => {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
|
const envData = useAppSelector((state) => state.env.envData)
|
||||||
|
|
||||||
// methods
|
// methods
|
||||||
const methods: {
|
const methodsFunc: () => {
|
||||||
[key: string]: (params: any, context: MethodContext) => Promise<any>
|
[K in AllAPPMessages['method']]: (params: Extract<AllAPPMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
|
||||||
} = useMemo(() => ({
|
} = useMemoizedFn(() => ({
|
||||||
[MESSAGE_TO_APP_SET_INFOS]: async (params: any, context: MethodContext) => {
|
SET_INFOS: async (params, context: MethodContext) => {
|
||||||
dispatch(setInfos(params.infos))
|
dispatch(setInfos(params.infos))
|
||||||
dispatch(setCurInfo(undefined))
|
dispatch(setCurInfo(undefined))
|
||||||
dispatch(setCurFetched(false))
|
dispatch(setCurFetched(false))
|
||||||
dispatch(setData(undefined))
|
dispatch(setData(undefined))
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_APP_SET_VIDEO_INFO]: async (params: any, context: MethodContext) => {
|
SET_VIDEO_INFO: async (params, context: MethodContext) => {
|
||||||
dispatch(setInfos(params.infos))
|
dispatch(setInfos(params.infos))
|
||||||
dispatch(setUrl(params.url))
|
dispatch(setUrl(params.url))
|
||||||
dispatch(setTitle(params.title))
|
dispatch(setTitle(params.title))
|
||||||
|
dispatch(setCtime(params.ctime))
|
||||||
|
dispatch(setAuthor(params.author))
|
||||||
console.debug('video title: ', params.title)
|
console.debug('video title: ', params.title)
|
||||||
},
|
},
|
||||||
}), [dispatch])
|
}))
|
||||||
|
|
||||||
useMessagingService(methods)
|
useMessagingService(!!envData.sidePanel, methodsFunc)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default useMessageService
|
export default useMessageService
|
||||||
|
export const useMessage = useMessaging<AllExtensionMessages, AllInjectMessages>
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
import {useAppDispatch, useAppSelector} from './redux'
|
import {useAppDispatch, useAppSelector} from './redux'
|
||||||
import React, {useCallback} from 'react'
|
import React, {useCallback} from 'react'
|
||||||
import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
|
import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
|
||||||
import {MESSAGE_TO_INJECT_MOVE} from '../consts/const'
|
import { useMessage } from './useMessageService'
|
||||||
import useMessage from '../messaging/layer2/useMessaging'
|
|
||||||
const useSubtitle = () => {
|
const useSubtitle = () => {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
|
const envData = useAppSelector(state => state.env.envData)
|
||||||
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
||||||
const reviewAction = useAppSelector(state => state.env.reviewAction)
|
const reviewAction = useAppSelector(state => state.env.reviewAction)
|
||||||
const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
|
const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
|
||||||
const {sendInject} = useMessage()
|
const {sendInject} = useMessage(!!envData.sidePanel)
|
||||||
|
|
||||||
const move = useCallback((time: number, togglePause: boolean) => {
|
const move = useCallback((time: number, togglePause: boolean) => {
|
||||||
sendInject(MESSAGE_TO_INJECT_MOVE, {time, togglePause})
|
sendInject(null, 'MOVE', {time, togglePause})
|
||||||
|
|
||||||
// review action
|
// review action
|
||||||
if (reviewed === undefined && !reviewAction) {
|
if (reviewed === undefined && !reviewAction) {
|
||||||
@@ -20,7 +20,7 @@ const useSubtitle = () => {
|
|||||||
reviewActions: (reviewActions ?? 0) + 1
|
reviewActions: (reviewActions ?? 0) + 1
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}, [dispatch, reviewAction, reviewActions, reviewed])
|
}, [dispatch, reviewAction, reviewActions, reviewed, sendInject])
|
||||||
|
|
||||||
const scrollIntoView = useCallback((ref: React.RefObject<HTMLDivElement>) => {
|
const scrollIntoView = useCallback((ref: React.RefObject<HTMLDivElement>) => {
|
||||||
ref.current?.scrollIntoView({behavior: 'smooth', block: 'center'})
|
ref.current?.scrollIntoView({behavior: 'smooth', block: 'center'})
|
||||||
|
|||||||
@@ -16,11 +16,10 @@ import {
|
|||||||
setTempData,
|
setTempData,
|
||||||
} from '../redux/envReducer'
|
} from '../redux/envReducer'
|
||||||
import {EventBusContext} from '../Router'
|
import {EventBusContext} from '../Router'
|
||||||
import {EVENT_EXPAND, GEMINI_TOKENS, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE, MESSAGE_TO_INJECT_GET_VIDEO_STATUS, MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO, MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO, MESSAGE_TO_INJECT_HIDE_TRANS, MESSAGE_TO_INJECT_UPDATETRANSRESULT, TOTAL_HEIGHT_DEF} from '../consts/const'
|
import {EVENT_EXPAND, GEMINI_TOKENS, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE} from '../consts/const'
|
||||||
import {useAsyncEffect, useInterval} from 'ahooks'
|
import {useAsyncEffect, useInterval} from 'ahooks'
|
||||||
import {getModelMaxTokens, getWholeText} from '../utils/bizUtil'
|
import {getModelMaxTokens, getWholeText} from '../utils/bizUtil'
|
||||||
import {MESSAGE_TO_INJECT_GET_SUBTITLE} from '../consts/const'
|
import { useMessage } from './useMessageService'
|
||||||
import useMessage from '../messaging/layer2/useMessaging'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Service是单例，类似后端的服务概念
|
* Service是单例，类似后端的服务概念
|
||||||
@@ -44,7 +43,7 @@ const useSubtitleService = () => {
|
|||||||
const autoTranslate = useAppSelector(state => state.env.autoTranslate)
|
const autoTranslate = useAppSelector(state => state.env.autoTranslate)
|
||||||
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
||||||
const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
|
const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
|
||||||
const {sendInject} = useMessage()
|
const {sendInject} = useMessage(!!envData.sidePanel)
|
||||||
|
|
||||||
// 如果reviewActions达到15次，则设置reviewed为false
|
// 如果reviewActions达到15次，则设置reviewed为false
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -75,11 +74,11 @@ const useSubtitleService = () => {
|
|||||||
dispatch(setCurInfo(infos[0]))
|
dispatch(setCurInfo(infos[0]))
|
||||||
dispatch(setCurFetched(false))
|
dispatch(setCurFetched(false))
|
||||||
}
|
}
|
||||||
}, [curInfo, dispatch, envData.autoExpand, envReady, fold, infos])
|
}, [curInfo, dispatch, envData.autoExpand, envReady, fold, infos, envData.sidePanel])
|
||||||
// 获取
|
// 获取
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (curInfo && !curFetched) {
|
if (curInfo && !curFetched) {
|
||||||
sendInject(MESSAGE_TO_INJECT_GET_SUBTITLE, {info: curInfo}).then(data => {
|
sendInject(null, 'GET_SUBTITLE', {info: curInfo}).then(data => {
|
||||||
data?.body?.forEach((item: TranscriptItem, idx: number) => {
|
data?.body?.forEach((item: TranscriptItem, idx: number) => {
|
||||||
item.idx = idx
|
item.idx = idx
|
||||||
})
|
})
|
||||||
@@ -87,16 +86,21 @@ const useSubtitleService = () => {
|
|||||||
dispatch(setCurFetched(true))
|
dispatch(setCurFetched(true))
|
||||||
dispatch(setData(data))
|
dispatch(setData(data))
|
||||||
|
|
||||||
console.log('subtitle', data)
|
console.debug('subtitle', data)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [curFetched, curInfo])
|
}, [curFetched, curInfo, dispatch, sendInject])
|
||||||
|
|
||||||
useAsyncEffect(async () => {
|
useAsyncEffect(async () => {
|
||||||
// 初始获取列表
|
// 初始获取列表
|
||||||
sendInject(MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO, {force: true})
|
if (envReady) {
|
||||||
// 初始获取设置信息
|
sendInject(null, 'REFRESH_VIDEO_INFO', {force: true})
|
||||||
sendInject(MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO, {}).then(info => {
|
}
|
||||||
|
}, [envReady, sendInject])
|
||||||
|
|
||||||
|
useAsyncEffect(async () => {
|
||||||
|
// 更新设置信息
|
||||||
|
sendInject(null, 'GET_VIDEO_ELEMENT_INFO', {}).then(info => {
|
||||||
dispatch(setNoVideo(info.noVideo))
|
dispatch(setNoVideo(info.noVideo))
|
||||||
if (envData.sidePanel) {
|
if (envData.sidePanel) {
|
||||||
// get screen height
|
// get screen height
|
||||||
@@ -105,7 +109,7 @@ const useSubtitleService = () => {
|
|||||||
dispatch(setTotalHeight(Math.min(Math.max(info.totalHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX)))
|
dispatch(setTotalHeight(Math.min(Math.max(info.totalHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX)))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}, [envData.sidePanel])
|
}, [envData.sidePanel, infos, sendInject])
|
||||||
|
|
||||||
// 更新当前位置
|
// 更新当前位置
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -192,7 +196,7 @@ const useSubtitleService = () => {
|
|||||||
|
|
||||||
// 每0.5秒更新当前视频时间
|
// 每0.5秒更新当前视频时间
|
||||||
useInterval(() => {
|
useInterval(() => {
|
||||||
sendInject(MESSAGE_TO_INJECT_GET_VIDEO_STATUS, {}).then(status => {
|
sendInject(null, 'GET_VIDEO_STATUS', {}).then(status => {
|
||||||
dispatch(setCurrentTime(status.currentTime))
|
dispatch(setCurrentTime(status.currentTime))
|
||||||
})
|
})
|
||||||
}, 500)
|
}, 500)
|
||||||
@@ -200,17 +204,17 @@ const useSubtitleService = () => {
|
|||||||
// show translated text in the video
|
// show translated text in the video
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hideOnDisableAutoTranslate && !autoTranslate) {
|
if (hideOnDisableAutoTranslate && !autoTranslate) {
|
||||||
sendInject(MESSAGE_TO_INJECT_HIDE_TRANS, {})
|
sendInject(null, 'HIDE_TRANS', {})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const transResult = curIdx?transResults[curIdx]:undefined
|
const transResult = curIdx?transResults[curIdx]:undefined
|
||||||
if (transResult?.code === '200' && transResult.data) {
|
if (transResult?.code === '200' && transResult.data) {
|
||||||
sendInject(MESSAGE_TO_INJECT_UPDATETRANSRESULT, {result: transResult.data})
|
sendInject(null, 'UPDATE_TRANS_RESULT', {result: transResult.data})
|
||||||
} else {
|
} else {
|
||||||
sendInject(MESSAGE_TO_INJECT_HIDE_TRANS, {})
|
sendInject(null, 'HIDE_TRANS', {})
|
||||||
}
|
}
|
||||||
}, [autoTranslate, curIdx, hideOnDisableAutoTranslate, transResults])
|
}, [autoTranslate, curIdx, hideOnDisableAutoTranslate, sendInject, transResults])
|
||||||
}
|
}
|
||||||
|
|
||||||
export default useSubtitleService
|
export default useSubtitleService
|
||||||
|
|||||||
@@ -16,8 +16,6 @@ import {
|
|||||||
import {
|
import {
|
||||||
LANGUAGE_DEFAULT,
|
LANGUAGE_DEFAULT,
|
||||||
LANGUAGES_MAP,
|
LANGUAGES_MAP,
|
||||||
MESSAGE_TO_EXTENSION_ADD_TASK,
|
|
||||||
MESSAGE_TO_EXTENSION_GET_TASK,
|
|
||||||
PROMPT_DEFAULTS,
|
PROMPT_DEFAULTS,
|
||||||
PROMPT_TYPE_ASK,
|
PROMPT_TYPE_ASK,
|
||||||
PROMPT_TYPE_TRANSLATE,
|
PROMPT_TYPE_TRANSLATE,
|
||||||
@@ -31,7 +29,7 @@ import toast from 'react-hot-toast'
|
|||||||
import {useMemoizedFn} from 'ahooks/es'
|
import {useMemoizedFn} from 'ahooks/es'
|
||||||
import {extractJsonArray, extractJsonObject, getModel} from '../utils/bizUtil'
|
import {extractJsonArray, extractJsonObject, getModel} from '../utils/bizUtil'
|
||||||
import {formatTime} from '../utils/util'
|
import {formatTime} from '../utils/util'
|
||||||
import useMessaging from '@/messaging/layer2/useMessaging'
|
import { useMessage } from './useMessageService'
|
||||||
const useTranslate = () => {
|
const useTranslate = () => {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
const data = useAppSelector(state => state.env.data)
|
const data = useAppSelector(state => state.env.data)
|
||||||
@@ -45,7 +43,7 @@ const useTranslate = () => {
|
|||||||
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
const reviewed = useAppSelector(state => state.env.tempData.reviewed)
|
||||||
const reviewAction = useAppSelector(state => state.env.reviewAction)
|
const reviewAction = useAppSelector(state => state.env.reviewAction)
|
||||||
const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
|
const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
|
||||||
const {sendExtension} = useMessaging()
|
const {sendExtension} = useMessage(!!envData.sidePanel)
|
||||||
/**
|
/**
|
||||||
* 获取下一个需要翻译的行
|
* 获取下一个需要翻译的行
|
||||||
* 会检测冷却
|
* 会检测冷却
|
||||||
@@ -137,11 +135,11 @@ const useTranslate = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
dispatch(addTransResults(result))
|
dispatch(addTransResults(result))
|
||||||
const task = await sendExtension(MESSAGE_TO_EXTENSION_ADD_TASK, {taskDef})
|
const task = await sendExtension(null, 'ADD_TASK', {taskDef})
|
||||||
dispatch(addTaskId(task.id))
|
dispatch(addTaskId(task.id))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [data?.body, envData, language.name, title, dispatch])
|
}, [data?.body, envData, language.name, title, dispatch, sendExtension])
|
||||||
|
|
||||||
const addSummarizeTask = useCallback(async (type: SummaryType, segment: Segment) => {
|
const addSummarizeTask = useCallback(async (type: SummaryType, segment: Segment) => {
|
||||||
// review action
|
// review action
|
||||||
@@ -207,10 +205,10 @@ const useTranslate = () => {
|
|||||||
console.debug('addSummarizeTask', taskDef)
|
console.debug('addSummarizeTask', taskDef)
|
||||||
dispatch(setSummaryStatus({segmentStartIdx: segment.startIdx, type, status: 'pending'}))
|
dispatch(setSummaryStatus({segmentStartIdx: segment.startIdx, type, status: 'pending'}))
|
||||||
dispatch(setLastSummarizeTime(Date.now()))
|
dispatch(setLastSummarizeTime(Date.now()))
|
||||||
const task = await sendExtension(MESSAGE_TO_EXTENSION_ADD_TASK, {taskDef})
|
const task = await sendExtension(null, 'ADD_TASK', {taskDef})
|
||||||
dispatch(addTaskId(task.id))
|
dispatch(addTaskId(task.id))
|
||||||
}
|
}
|
||||||
}, [dispatch, envData, summarizeLanguage.name, title])
|
}, [dispatch, envData, reviewAction, reviewActions, reviewed, sendExtension, summarizeLanguage.name, title])
|
||||||
|
|
||||||
const addAskTask = useCallback(async (id: string, segment: Segment, question: string) => {
|
const addAskTask = useCallback(async (id: string, segment: Segment, question: string) => {
|
||||||
if (segment.text.length >= SUMMARIZE_THRESHOLD) {
|
if (segment.text.length >= SUMMARIZE_THRESHOLD) {
|
||||||
@@ -264,10 +262,10 @@ const useTranslate = () => {
|
|||||||
id,
|
id,
|
||||||
status: 'pending'
|
status: 'pending'
|
||||||
}))
|
}))
|
||||||
const task = await sendExtension(MESSAGE_TO_EXTENSION_ADD_TASK, {taskDef})
|
const task = await sendExtension(null, 'ADD_TASK', {taskDef})
|
||||||
dispatch(addTaskId(task.id))
|
dispatch(addTaskId(task.id))
|
||||||
}
|
}
|
||||||
}, [dispatch, envData, summarizeLanguage.name, title])
|
}, [dispatch, envData, sendExtension, summarizeLanguage.name, title])
|
||||||
|
|
||||||
const handleTranslate = useMemoizedFn((task: Task, content: string) => {
|
const handleTranslate = useMemoizedFn((task: Task, content: string) => {
|
||||||
let map: {[key: string]: string} = {}
|
let map: {[key: string]: string} = {}
|
||||||
@@ -332,7 +330,7 @@ const useTranslate = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const getTask = useCallback(async (taskId: string) => {
|
const getTask = useCallback(async (taskId: string) => {
|
||||||
const taskResp = await sendExtension(MESSAGE_TO_EXTENSION_GET_TASK, {taskId})
|
const taskResp = await sendExtension(null, 'GET_TASK', {taskId})
|
||||||
if (taskResp.code === 'ok') {
|
if (taskResp.code === 'ok') {
|
||||||
console.debug('getTask', taskResp.task)
|
console.debug('getTask', taskResp.task)
|
||||||
const task: Task = taskResp.task
|
const task: Task = taskResp.task
|
||||||
@@ -357,7 +355,7 @@ const useTranslate = () => {
|
|||||||
} else {
|
} else {
|
||||||
dispatch(delTaskId(taskId))
|
dispatch(delTaskId(taskId))
|
||||||
}
|
}
|
||||||
}, [dispatch, envData.aiType, handleAsk, handleSummarize, handleTranslate])
|
}, [dispatch, envData.aiType, handleAsk, handleSummarize, handleTranslate, sendExtension])
|
||||||
|
|
||||||
return {getFetch, getTask, addTask, addSummarizeTask, addAskTask}
|
return {getFetch, getTask, addTask, addSummarizeTask, addAskTask}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO, MESSAGE_TARGET_INJECT, MESSAGE_TO_APP_SET_INFOS, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV, MESSAGE_TO_EXTENSION_SHOW_FLAG } from '@/consts/const'
|
import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, STORAGE_ENV, DEFAULT_USE_PORT } from '@/consts/const'
|
||||||
import { MESSAGE_TO_INJECT_FOLD, MESSAGE_TO_INJECT_MOVE, MESSAGE_TO_APP_SET_VIDEO_INFO, MESSAGE_TO_INJECT_GET_SUBTITLE, MESSAGE_TO_INJECT_GET_VIDEO_STATUS, MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO, MESSAGE_TO_INJECT_UPDATETRANSRESULT, MESSAGE_TO_INJECT_PLAY, MESSAGE_TO_INJECT_HIDE_TRANS, MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO } from '@/consts/const'
|
import { AllExtensionMessages, AllInjectMessages, AllAPPMessages } from '@/message-typings'
|
||||||
import InjectMessaging from '@/messaging/layer2/InjectMessaging'
|
import { InjectMessaging } from '@kky002/kky-message'
|
||||||
|
|
||||||
const debug = (...args: any[]) => {
|
const debug = (...args: any[]) => {
|
||||||
console.debug('[Inject]', ...args)
|
console.debug('[Inject]', ...args)
|
||||||
@@ -30,7 +30,7 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const runtime: {
|
const runtime: {
|
||||||
injectMessaging: InjectMessaging
|
injectMessaging: InjectMessaging<AllExtensionMessages, AllInjectMessages, AllAPPMessages>
|
||||||
// lastV?: string | null
|
// lastV?: string | null
|
||||||
// lastVideoInfo?: VideoInfo
|
// lastVideoInfo?: VideoInfo
|
||||||
|
|
||||||
@@ -42,7 +42,7 @@ const debug = (...args: any[]) => {
|
|||||||
showTrans: boolean
|
showTrans: boolean
|
||||||
curTrans?: string
|
curTrans?: string
|
||||||
} = {
|
} = {
|
||||||
injectMessaging: new InjectMessaging(),
|
injectMessaging: new InjectMessaging(DEFAULT_USE_PORT),
|
||||||
fold: true,
|
fold: true,
|
||||||
videoElementHeight: TOTAL_HEIGHT_DEF,
|
videoElementHeight: TOTAL_HEIGHT_DEF,
|
||||||
showTrans: false,
|
showTrans: false,
|
||||||
@@ -98,7 +98,7 @@ const debug = (...args: any[]) => {
|
|||||||
danmukuBox?.insertBefore(iframe, danmukuBox?.firstChild)
|
danmukuBox?.insertBefore(iframe, danmukuBox?.firstChild)
|
||||||
|
|
||||||
// show badge
|
// show badge
|
||||||
runtime.injectMessaging.sendExtension(MESSAGE_TO_EXTENSION_SHOW_FLAG, {
|
runtime.injectMessaging.sendExtension('SHOW_FLAG', {
|
||||||
show: true
|
show: true
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -121,6 +121,8 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let aid: number | null = null
|
let aid: number | null = null
|
||||||
|
let ctime: number | null = null
|
||||||
|
let author: string | undefined
|
||||||
let title = ''
|
let title = ''
|
||||||
let pages: any[] = []
|
let pages: any[] = []
|
||||||
let pagesMap: Record<string, any> = {}
|
let pagesMap: Record<string, any> = {}
|
||||||
@@ -138,6 +140,7 @@ const debug = (...args: any[]) => {
|
|||||||
// fix: https://github.com/IndieKKY/bilibili-subtitle/issues/5
|
// fix: https://github.com/IndieKKY/bilibili-subtitle/issues/5
|
||||||
// 处理稍后再看的url( https://www.bilibili.com/list/watchlater?bvid=xxx&oid=xxx )
|
// 处理稍后再看的url( https://www.bilibili.com/list/watchlater?bvid=xxx&oid=xxx )
|
||||||
const pathSearchs: Record<string, string> = {}
|
const pathSearchs: Record<string, string> = {}
|
||||||
|
// eslint-disable-next-line no-return-assign
|
||||||
location.search.slice(1).replace(/([^=&]*)=([^=&]*)/g, (matchs, a, b, c) => pathSearchs[a] = b)
|
location.search.slice(1).replace(/([^=&]*)=([^=&]*)/g, (matchs, a, b, c) => pathSearchs[a] = b)
|
||||||
|
|
||||||
// bvid
|
// bvid
|
||||||
@@ -157,24 +160,28 @@ const debug = (...args: any[]) => {
|
|||||||
lastAidOrBvid = aidOrBvid
|
lastAidOrBvid = aidOrBvid
|
||||||
if (aidOrBvid) {
|
if (aidOrBvid) {
|
||||||
// aid,pages
|
// aid,pages
|
||||||
let cid
|
let cid: string | undefined
|
||||||
let subtitles
|
let subtitles
|
||||||
if (aidOrBvid.toLowerCase().startsWith('av')) { // avxxx
|
if (aidOrBvid.toLowerCase().startsWith('av')) { // avxxx
|
||||||
aid = parseInt(aidOrBvid.slice(2))
|
aid = parseInt(aidOrBvid.slice(2))
|
||||||
pages = await fetch(`https://api.bilibili.com/x/player/pagelist?aid=${aid}`, { credentials: 'include' }).then(res => res.json()).then(res => res.data)
|
pages = await fetch(`https://api.bilibili.com/x/player/pagelist?aid=${aid}`, { credentials: 'include' }).then(async res => await res.json()).then(res => res.data)
|
||||||
cid = pages[0].cid
|
cid = pages[0].cid
|
||||||
|
ctime = pages[0].ctime
|
||||||
|
author = pages[0].owner?.name
|
||||||
title = pages[0].part
|
title = pages[0].part
|
||||||
await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
|
await fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid!}`, { credentials: 'include' }).then(async res => await res.json()).then(res => {
|
||||||
subtitles = res.data.subtitle.subtitles
|
subtitles = res.data.subtitle.subtitles
|
||||||
})
|
})
|
||||||
} else { // bvxxx
|
} else { // bvxxx
|
||||||
await fetch(`https://api.bilibili.com/x/web-interface/view?bvid=${aidOrBvid}`, { credentials: 'include' }).then(res => res.json()).then(async res => {
|
await fetch(`https://api.bilibili.com/x/web-interface/view?bvid=${aidOrBvid}`, { credentials: 'include' }).then(async res => await res.json()).then(async res => {
|
||||||
title = res.data.title
|
title = res.data.title
|
||||||
aid = res.data.aid
|
aid = res.data.aid
|
||||||
cid = res.data.cid
|
cid = res.data.cid
|
||||||
|
ctime = res.data.ctime
|
||||||
|
author = res.data.owner?.name
|
||||||
pages = res.data.pages
|
pages = res.data.pages
|
||||||
})
|
})
|
||||||
await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
|
await fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid!}&cid=${cid!}`, { credentials: 'include' }).then(async res => await res.json()).then(res => {
|
||||||
subtitles = res.data.subtitle.subtitles
|
subtitles = res.data.subtitle.subtitles
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -188,10 +195,12 @@ const debug = (...args: any[]) => {
|
|||||||
debug('refreshVideoInfo: ', aid, cid, pages, subtitles)
|
debug('refreshVideoInfo: ', aid, cid, pages, subtitles)
|
||||||
|
|
||||||
// send setVideoInfo
|
// send setVideoInfo
|
||||||
runtime.injectMessaging.sendApp(MESSAGE_TO_APP_SET_VIDEO_INFO, {
|
runtime.injectMessaging.sendApp(!!sidePanel, 'SET_VIDEO_INFO', {
|
||||||
url: location.origin + location.pathname,
|
url: location.origin + location.pathname,
|
||||||
title,
|
title,
|
||||||
aid,
|
aid,
|
||||||
|
ctime,
|
||||||
|
author,
|
||||||
pages,
|
pages,
|
||||||
infos: subtitles,
|
infos: subtitles,
|
||||||
})
|
})
|
||||||
@@ -211,7 +220,7 @@ const debug = (...args: any[]) => {
|
|||||||
const p = urlSearchParams.get('p') || 1
|
const p = urlSearchParams.get('p') || 1
|
||||||
const page = pagesMap[p]
|
const page = pagesMap[p]
|
||||||
if (!page) return
|
if (!page) return
|
||||||
const cid = page.cid
|
const cid: number | null = page.cid
|
||||||
|
|
||||||
if (aid !== lastAid || cid !== lastCid) {
|
if (aid !== lastAid || cid !== lastCid) {
|
||||||
debug('refreshSubtitles', aid, cid)
|
debug('refreshSubtitles', aid, cid)
|
||||||
@@ -219,15 +228,18 @@ const debug = (...args: any[]) => {
|
|||||||
lastAid = aid
|
lastAid = aid
|
||||||
lastCid = cid
|
lastCid = cid
|
||||||
if (aid && cid) {
|
if (aid && cid) {
|
||||||
fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {
|
fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid}`, {
|
||||||
credentials: 'include',
|
credentials: 'include',
|
||||||
})
|
})
|
||||||
.then(res => res.json())
|
.then(async res => await res.json())
|
||||||
.then(res => {
|
.then(res => {
|
||||||
// console.log('refreshSubtitles: ', aid, cid, res)
|
// remove elements with empty subtitle_url
|
||||||
runtime.injectMessaging.sendApp(MESSAGE_TO_APP_SET_INFOS, {
|
res.data.subtitle.subtitles = res.data.subtitle.subtitles.filter((item: any) => item.subtitle_url)
|
||||||
|
if (res.data.subtitle.subtitles.length > 0) {
|
||||||
|
runtime.injectMessaging.sendApp(!!sidePanel, 'SET_INFOS', {
|
||||||
infos: res.data.subtitle.subtitles
|
infos: res.data.subtitle.subtitles
|
||||||
})
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -241,24 +253,24 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const methods: {
|
const methods: {
|
||||||
[key: string]: (params: any, context: MethodContext) => Promise<any>
|
[K in AllInjectMessages['method']]: (params: Extract<AllInjectMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
|
||||||
} = {
|
} = {
|
||||||
[MESSAGE_TO_INJECT_TOGGLE_DISPLAY]: async (params) => {
|
TOGGLE_DISPLAY: async (params) => {
|
||||||
const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
|
const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
|
||||||
if (iframe != null) {
|
if (iframe != null) {
|
||||||
iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none'
|
iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none'
|
||||||
runtime.injectMessaging.sendExtension(MESSAGE_TO_EXTENSION_SHOW_FLAG, {
|
runtime.injectMessaging.sendExtension('SHOW_FLAG', {
|
||||||
show: iframe.style.display !== 'none'
|
show: iframe.style.display !== 'none'
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
createIframe()
|
createIframe()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_FOLD]: async (params) => {
|
FOLD: async (params) => {
|
||||||
runtime.fold = params.fold
|
runtime.fold = params.fold
|
||||||
updateIframeHeight()
|
updateIframeHeight()
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_MOVE]: async (params) => {
|
MOVE: async (params) => {
|
||||||
const video = getVideoElement()
|
const video = getVideoElement()
|
||||||
if (video != null) {
|
if (video != null) {
|
||||||
video.currentTime = params.time
|
video.currentTime = params.time
|
||||||
@@ -267,14 +279,14 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_GET_SUBTITLE]: async (params) => {
|
GET_SUBTITLE: async (params) => {
|
||||||
let url = params.info.subtitle_url
|
let url = params.info.subtitle_url
|
||||||
if (url.startsWith('http://')) {
|
if (url.startsWith('http://')) {
|
||||||
url = url.replace('http://', 'https://')
|
url = url.replace('http://', 'https://')
|
||||||
}
|
}
|
||||||
return await fetch(url).then(res => res.json())
|
return await fetch(url).then(async res => await res.json())
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_GET_VIDEO_STATUS]: async (params) => {
|
GET_VIDEO_STATUS: async (params) => {
|
||||||
const video = getVideoElement()
|
const video = getVideoElement()
|
||||||
if (video != null) {
|
if (video != null) {
|
||||||
return {
|
return {
|
||||||
@@ -283,17 +295,17 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO]: async (params) => {
|
GET_VIDEO_ELEMENT_INFO: async (params) => {
|
||||||
refreshVideoElement()
|
refreshVideoElement()
|
||||||
return {
|
return {
|
||||||
noVideo: runtime.videoElement == null,
|
noVideo: runtime.videoElement == null,
|
||||||
totalHeight: runtime.videoElementHeight,
|
totalHeight: runtime.videoElementHeight,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO]: async (params) => {
|
REFRESH_VIDEO_INFO: async (params) => {
|
||||||
refreshVideoInfo(params.force)
|
refreshVideoInfo(params.force)
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_UPDATETRANSRESULT]: async (params) => {
|
UPDATE_TRANS_RESULT: async (params) => {
|
||||||
runtime.showTrans = true
|
runtime.showTrans = true
|
||||||
runtime.curTrans = params?.result
|
runtime.curTrans = params?.result
|
||||||
|
|
||||||
@@ -321,16 +333,16 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
text && (text.style.display = runtime.curTrans ? 'block' : 'none')
|
text && (text.style.display = runtime.curTrans ? 'block' : 'none')
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_HIDE_TRANS]: async (params) => {
|
HIDE_TRANS: async (params) => {
|
||||||
runtime.showTrans = false
|
runtime.showTrans = false
|
||||||
runtime.curTrans = undefined
|
runtime.curTrans = undefined
|
||||||
|
|
||||||
let text = document.getElementById('trans-result-text')
|
const text = document.getElementById('trans-result-text')
|
||||||
if (text) {
|
if (text) {
|
||||||
text.style.display = 'none'
|
text.style.display = 'none'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_PLAY]: async (params) => {
|
PLAY: async (params) => {
|
||||||
const { play } = params
|
const { play } = params
|
||||||
const video = getVideoElement()
|
const video = getVideoElement()
|
||||||
if (video != null) {
|
if (video != null) {
|
||||||
@@ -341,12 +353,12 @@ const debug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[MESSAGE_TO_INJECT_DOWNLOAD_AUDIO]: async (params) => {
|
DOWNLOAD_AUDIO: async (params) => {
|
||||||
const html = document.getElementsByTagName('html')[0].innerHTML
|
const html = document.getElementsByTagName('html')[0].innerHTML
|
||||||
const playInfo = JSON.parse(html.match(/window.__playinfo__=(.+?)<\/script/)?.[1] ?? '{}')
|
const playInfo = JSON.parse(html.match(/window.__playinfo__=(.+?)<\/script/)?.[1] ?? '{}')
|
||||||
const audioUrl = playInfo.data.dash.audio[0].baseUrl
|
const audioUrl = playInfo.data.dash.audio[0].baseUrl
|
||||||
|
|
||||||
fetch(audioUrl).then(res => res.blob()).then(blob => {
|
fetch(audioUrl).then(async res => await res.blob()).then(blob => {
|
||||||
const a = document.createElement('a')
|
const a = document.createElement('a')
|
||||||
a.href = URL.createObjectURL(blob)
|
a.href = URL.createObjectURL(blob)
|
||||||
a.download = `${title}.m4s`
|
a.download = `${title}.m4s`
|
||||||
|
|||||||
87
src/message-typings.d.ts
vendored
Normal file
87
src/message-typings.d.ts
vendored
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
import {ExtensionMessage, InjectMessage, AppMessage} from '@kky002/kky-message'
|
||||||
|
|
||||||
|
// extension
|
||||||
|
interface ExtensionCloseSidePanelMessage extends ExtensionMessage {
|
||||||
|
method: 'CLOSE_SIDE_PANEL'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtensionAddTaskMessage extends ExtensionMessage<{ taskDef: TaskDef }, Task> {
|
||||||
|
method: 'ADD_TASK'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtensionGetTaskMessage extends ExtensionMessage<{ taskId: string }, {
|
||||||
|
code: 'ok'
|
||||||
|
task: Task
|
||||||
|
} | {
|
||||||
|
code: 'not_found'
|
||||||
|
}> {
|
||||||
|
method: 'GET_TASK'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtensionShowFlagMessage extends ExtensionMessage<{ show: boolean }> {
|
||||||
|
method: 'SHOW_FLAG'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtensionGetTabIdMessage extends ExtensionMessage<{ show: boolean }> {
|
||||||
|
method: 'GET_TAB_ID'
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AllExtensionMessages = ExtensionGetTabIdMessage | ExtensionCloseSidePanelMessage | ExtensionAddTaskMessage | ExtensionGetTaskMessage | ExtensionShowFlagMessage
|
||||||
|
|
||||||
|
// inject
|
||||||
|
interface InjectToggleDisplayMessage extends InjectMessage<{}> {
|
||||||
|
method: 'TOGGLE_DISPLAY'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectFoldMessage extends InjectMessage<{ fold: boolean }> {
|
||||||
|
method: 'FOLD'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectMoveMessage extends InjectMessage<{ time: number, togglePause: boolean }> {
|
||||||
|
method: 'MOVE'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectGetSubtitleMessage extends InjectMessage<{ info: any }> {
|
||||||
|
method: 'GET_SUBTITLE'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectGetVideoStatusMessage extends InjectMessage<{}> {
|
||||||
|
method: 'GET_VIDEO_STATUS'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectGetVideoElementInfoMessage extends InjectMessage<{}> {
|
||||||
|
method: 'GET_VIDEO_ELEMENT_INFO'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectRefreshVideoInfoMessage extends InjectMessage<{ force: boolean }> {
|
||||||
|
method: 'REFRESH_VIDEO_INFO'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectUpdateTransResultMessage extends InjectMessage<{ result: string }> {
|
||||||
|
method: 'UPDATE_TRANS_RESULT'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectHideTransMessage extends InjectMessage<{}> {
|
||||||
|
method: 'HIDE_TRANS'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectPlayMessage extends InjectMessage<{ play: boolean }> {
|
||||||
|
method: 'PLAY'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InjectDownloadAudioMessage extends InjectMessage<{}> {
|
||||||
|
method: 'DOWNLOAD_AUDIO'
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AllInjectMessages = InjectToggleDisplayMessage | InjectFoldMessage | InjectMoveMessage | InjectGetSubtitleMessage | InjectGetVideoStatusMessage | InjectGetVideoElementInfoMessage | InjectRefreshVideoInfoMessage | InjectUpdateTransResultMessage | InjectHideTransMessage | InjectPlayMessage | InjectDownloadAudioMessage
|
||||||
|
|
||||||
|
// app
|
||||||
|
interface AppSetInfosMessage extends AppMessage<{ infos: any }> {
|
||||||
|
method: 'SET_INFOS'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AppSetVideoInfoMessage extends AppMessage<{ url: string, title: string, aid: number | null, ctime: number | null, author?: string, pages: any, infos: any }> {
|
||||||
|
method: 'SET_VIDEO_INFO'
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AllAPPMessages = AppSetInfosMessage | AppSetVideoInfoMessage
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
## 消息通信库封装
|
|
||||||
此消息通信库设计为通用的，后面可能会提取到单独的项目中。
|
|
||||||
|
|
||||||
### 消息端
|
|
||||||
|
|
||||||
一共分3个端：
|
|
||||||
|
|
||||||
1. 扩展端（`background.ts`）：扩展后台服务，整个浏览器最多一个实例。
|
|
||||||
2. 注入端（`inject.ts`）：会注入到网页中运行，可以访问网页元素，每个网页可能n个实例（看注入的次数），但多个实例一般是不必要的，所以尽量控制在一个实例。
|
|
||||||
3. 应用端（`App.tsx`）：会放入iframe中，然后iframe元素添加到网页上，每个iframe一个实例；或者options.html选项页面也是应用实例；或者sidepanel.html页面也是应用实例。
|
|
||||||
|
|
||||||
### 消息协议
|
|
||||||
|
|
||||||
协议分两层：
|
|
||||||
|
|
||||||
1. （底层）一层协议为`Layer1Protocol`，内部封装了port，支持双向通信（发送与接收）
|
|
||||||
2. （高层）二层协议分3个部分，基于一层协议：
|
|
||||||
1. `ExtensionMessaging`：扩展端的
|
|
||||||
2. `InjectMessaging`：注入端端
|
|
||||||
3. `useMessagingService`与`useMessaging`：应用端的
|
|
||||||
|
|
||||||
### 通信方向
|
|
||||||
|
|
||||||
通信分为6个方向：
|
|
||||||
|
|
||||||
1. 扩展端 --> 注入端
|
|
||||||
2. 扩展端 --> 应用端
|
|
||||||
3. 注入端 --> 扩展端
|
|
||||||
4. 注入端 --> 应用端
|
|
||||||
5. 应用端 --> 注入端
|
|
||||||
6. 应用端 --> 扩展端
|
|
||||||
|
|
||||||
应用端与注入端通信实现方式：通过扩展端中转。
|
|
||||||
|
|
||||||
### 通信流程
|
|
||||||
|
|
||||||
1. 注入端：通过port连接扩展端，然后发送握手信息（里面包含了此端的一些信息）
|
|
||||||
2. 应用端：同注入端。
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// 请求信息
|
|
||||||
export type L2ReqMsg = {
|
|
||||||
from: 'extension' | 'inject' | 'app'
|
|
||||||
method: string
|
|
||||||
params?: any
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应信息
|
|
||||||
export type L2ResMsg<L2Res = any> = {
|
|
||||||
code: number
|
|
||||||
msg?: string
|
|
||||||
data?: L2Res
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MESSAGE_TO_EXTENSION_HANDSHAKE = '_handshake'
|
|
||||||
export const MESSAGE_TO_EXTENSION_ROUTE = '_route'
|
|
||||||
|
|
||||||
export const TAG_TARGET_INJECT = 'target:inject'
|
|
||||||
export const TAG_TARGET_APP = 'target:app'
|
|
||||||
@@ -1,114 +0,0 @@
|
|||||||
// 请求信息
|
|
||||||
type ReqMsg<L1Req = any, L1Res = any> = {
|
|
||||||
id: string
|
|
||||||
// 类型
|
|
||||||
type: 'req' | 'res'
|
|
||||||
// 请求
|
|
||||||
req?: L1Req
|
|
||||||
// 响应
|
|
||||||
res?: RespMsg<L1Res>
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应信息
|
|
||||||
type RespMsg<T = any> = {
|
|
||||||
code: number
|
|
||||||
data?: T
|
|
||||||
msg?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理函数
|
|
||||||
type Handler<L1Req = any, L1Res = any> = (req: L1Req) => Promise<L1Res>
|
|
||||||
|
|
||||||
// 创建一个 Layer1Protocol 类，用于持久监听 port 并通过消息 ID 处理响应，支持超时
|
|
||||||
class Layer1Protocol<L1Req = any, L1Res = any> {
|
|
||||||
private port: chrome.runtime.Port
|
|
||||||
private timeout: number
|
|
||||||
private requests: Map<string, { resolve: (value: L1Res) => void, reject: (reason?: any) => void, timer: number }>
|
|
||||||
private handler: Handler<L1Req, L1Res>
|
|
||||||
|
|
||||||
constructor(handler: Handler<L1Req, L1Res>, port: chrome.runtime.Port, autoDispose = true, timeout = 30000) { // 默认超时 30 秒
|
|
||||||
this.port = port;
|
|
||||||
this.timeout = timeout;
|
|
||||||
this.requests = new Map();
|
|
||||||
this.handler = handler
|
|
||||||
|
|
||||||
// 开始监听
|
|
||||||
this.port.onMessage.addListener(this._messageListener);
|
|
||||||
if (autoDispose) {
|
|
||||||
this.port.onDisconnect.addListener(this.dispose);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成唯一 ID（简单示例，可以使用更复杂的生成策略）
|
|
||||||
private _generateUniqueId() {
|
|
||||||
return crypto.randomUUID()
|
|
||||||
}
|
|
||||||
|
|
||||||
private _messageListener = (msg: ReqMsg<L1Req, L1Res>) => {
|
|
||||||
const { id, type, req, res } = msg;
|
|
||||||
if (type === 'req') {
|
|
||||||
this.handler(req!).then(res => {
|
|
||||||
const response: RespMsg<L1Res> = {
|
|
||||||
code: 200,
|
|
||||||
data: res
|
|
||||||
}
|
|
||||||
this.port.postMessage({ id, type: 'res', res: response });
|
|
||||||
}).catch(error => {//业务错误
|
|
||||||
const response: RespMsg<L1Res> = {
|
|
||||||
code: 500,
|
|
||||||
msg: error instanceof Error ? error.message : String(error),
|
|
||||||
}
|
|
||||||
this.port.postMessage({ id, type: 'res', res: response });
|
|
||||||
});
|
|
||||||
} else if (type === 'res') {
|
|
||||||
if (this.requests.has(id)) {
|
|
||||||
const { resolve, reject, timer } = this.requests.get(id)!;
|
|
||||||
// 清除超时定时器
|
|
||||||
clearTimeout(timer);
|
|
||||||
// 移除消息 ID
|
|
||||||
this.requests.delete(id);
|
|
||||||
// 通过 ID 找到对应的 Promise 并 resolve
|
|
||||||
if (res!.code === 200) {
|
|
||||||
resolve(res!.data!);
|
|
||||||
} else {//业务错误
|
|
||||||
reject(new Error(`${res!.code}: ${res!.msg || 'Unknown error'}`));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.error('unknown response message id: ', id)
|
|
||||||
}
|
|
||||||
} else {//语法格式错误
|
|
||||||
console.error('unknown message type: ', type)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
this.port.onMessage.removeListener(this._messageListener);
|
|
||||||
if (this.port.onDisconnect) {
|
|
||||||
this.port.onDisconnect.removeListener(this.dispose);
|
|
||||||
}
|
|
||||||
this.requests.forEach(({ timer }) => clearTimeout(timer));
|
|
||||||
this.requests.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用 Promise 发送消息并等待响应，支持超时
|
|
||||||
sendMessage(req: L1Req): Promise<L1Res> {
|
|
||||||
const id = this._generateUniqueId();
|
|
||||||
|
|
||||||
return new Promise<L1Res>((resolve, reject) => {
|
|
||||||
// 设置一个超时定时器
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
// 超时后执行 reject 并从 Map 中删除
|
|
||||||
this.requests.delete(id);
|
|
||||||
reject(new Error(`Request timed out after ${this.timeout / 1000} seconds`));
|
|
||||||
}, this.timeout);
|
|
||||||
|
|
||||||
// 将 resolve 和 timer 函数与消息 ID 绑定，存入 Map
|
|
||||||
this.requests.set(id, { resolve, reject, timer });
|
|
||||||
|
|
||||||
// 发送消息，并附带 ID
|
|
||||||
this.port.postMessage({ id, type: 'req', req });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Layer1Protocol
|
|
||||||
@@ -1,133 +0,0 @@
|
|||||||
import Layer1Protocol from '../layer1/Layer1Protocol'
|
|
||||||
import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE } from '../const'
|
|
||||||
|
|
||||||
type PortContext<L2ReqMsg, L2ResMsg> = {
|
|
||||||
id: string
|
|
||||||
name: string //暂时没什么用
|
|
||||||
port: chrome.runtime.Port
|
|
||||||
l1protocol: Layer1Protocol<L2ReqMsg, L2ResMsg>
|
|
||||||
ready: boolean
|
|
||||||
|
|
||||||
tabId?: number // 所属tab
|
|
||||||
tags?: string[] // 标签，用来筛选消息发送目标
|
|
||||||
}
|
|
||||||
|
|
||||||
type L2MethodHandler<L2ReqMsg, L2ResMsg> = (params: any, context: MethodContext, portContext: PortContext<L2ReqMsg, L2ResMsg>) => Promise<any>
|
|
||||||
type L2MethodHandlers<L2ReqMsg, L2ResMsg> = {
|
|
||||||
[key: string]: L2MethodHandler<L2ReqMsg, L2ResMsg>
|
|
||||||
}
|
|
||||||
|
|
||||||
class ExtensionMessaging {
|
|
||||||
portIdToPort: Map<string, PortContext<L2ReqMsg, L2ResMsg>> = new Map()
|
|
||||||
methods?: L2MethodHandlers<L2ReqMsg, L2ResMsg>
|
|
||||||
|
|
||||||
debug = (...args: any[]) => {
|
|
||||||
console.debug('[Extension Messaging]', ...args)
|
|
||||||
}
|
|
||||||
|
|
||||||
init = (methods: L2MethodHandlers<L2ReqMsg, L2ResMsg>) => {
|
|
||||||
const innerMethods: L2MethodHandlers<L2ReqMsg, L2ResMsg> = {
|
|
||||||
[MESSAGE_TO_EXTENSION_HANDSHAKE]: async (params: any, context: MethodContext, portContext: PortContext<L2ReqMsg, L2ResMsg>) => {
|
|
||||||
const tags = params.tags
|
|
||||||
let tabId = params.tabId
|
|
||||||
|
|
||||||
//get current tabId
|
|
||||||
if (tabId == null) {
|
|
||||||
const tabs = await chrome.tabs.query({
|
|
||||||
active: true,
|
|
||||||
currentWindow: true,
|
|
||||||
})
|
|
||||||
tabId = tabs[0]?.id
|
|
||||||
}
|
|
||||||
|
|
||||||
portContext.tabId = tabId
|
|
||||||
portContext.tags = tags
|
|
||||||
portContext.ready = true
|
|
||||||
},
|
|
||||||
[MESSAGE_TO_EXTENSION_ROUTE]: async (params: any, context: MethodContext) => {
|
|
||||||
return this.broadcastMessageExact([context.tabId!], params.tags, params.method, params.params)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
this.methods = { ...innerMethods, ...methods }
|
|
||||||
|
|
||||||
chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => {
|
|
||||||
this.debug('onConnect', port)
|
|
||||||
|
|
||||||
const id = crypto.randomUUID()
|
|
||||||
const name = port.name
|
|
||||||
// 创建消息处理器
|
|
||||||
const l1protocol = new Layer1Protocol<L2ReqMsg, L2ResMsg>(async (req: L2ReqMsg) => {
|
|
||||||
const { tabId } = portContext
|
|
||||||
const method = this.methods?.[req.method]
|
|
||||||
if (method != null) {
|
|
||||||
return method(req.params, {
|
|
||||||
from: req.from,
|
|
||||||
event: req,
|
|
||||||
tabId,
|
|
||||||
// sender: portContext.port.sender,
|
|
||||||
}, portContext).then(data => ({
|
|
||||||
code: 200,
|
|
||||||
data,
|
|
||||||
})).catch(err => {
|
|
||||||
console.error(err)
|
|
||||||
return {
|
|
||||||
code: 500,
|
|
||||||
msg: err.message,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
code: 501,
|
|
||||||
msg: 'Unknown method: ' + req.method,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, port)
|
|
||||||
// 创建portContext
|
|
||||||
const portContext: PortContext<L2ReqMsg, L2ResMsg> = { id, name, port, l1protocol, ready: false }
|
|
||||||
this.portIdToPort.set(id, portContext)
|
|
||||||
|
|
||||||
// 监听断开连接
|
|
||||||
port.onDisconnect.addListener(() => {
|
|
||||||
this.debug('onDisconnect', id)
|
|
||||||
this.portIdToPort.delete(id)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//tags 如果为null，则不检查tags，如果为空数组，则不会发送消息
|
|
||||||
//返回：最后一个响应(因此如果只发送给一个tab，则返回的是该tab的响应)
|
|
||||||
broadcastMessageExact = async (tabIds: number[], tags: string[] | null, method: string, params?: any) => {
|
|
||||||
// 如果tags为空数组，则不会发送消息
|
|
||||||
if (tags != null && tags.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let res: L2ResMsg | undefined
|
|
||||||
for (const portContext of this.portIdToPort.values()) {
|
|
||||||
//check tabId
|
|
||||||
if (tabIds.includes(portContext.tabId!)) {
|
|
||||||
//check tags
|
|
||||||
if (tags == null || tags.some(tag => portContext.tags?.includes(tag))) {
|
|
||||||
try {
|
|
||||||
res = await portContext.l1protocol.sendMessage({ method, params, from: 'extension' })
|
|
||||||
} catch (e) {
|
|
||||||
console.error('send message to port error', portContext.id, e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return res?.data
|
|
||||||
}
|
|
||||||
|
|
||||||
broadcastMessage = async (ignoreTabIds: number[] | undefined | null, tags: string[], method: string, params?: any) => {
|
|
||||||
const tabs = await chrome.tabs.query({
|
|
||||||
discarded: false,
|
|
||||||
})
|
|
||||||
const tabIds: number[] = tabs.map(tab => tab.id).filter(tabId => tabId != null) as number[]
|
|
||||||
const filteredTabIds: number[] = tabIds.filter(tabId => !ignoreTabIds?.includes(tabId))
|
|
||||||
await this.broadcastMessageExact(filteredTabIds, tags, method, params)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ExtensionMessaging
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
import Layer1Protocol from '../layer1/Layer1Protocol'
|
|
||||||
import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE, TAG_TARGET_APP, TAG_TARGET_INJECT } from '../const'
|
|
||||||
|
|
||||||
class InjectMessaging {
|
|
||||||
port?: chrome.runtime.Port
|
|
||||||
l1protocol?: Layer1Protocol<L2ReqMsg, L2ResMsg>
|
|
||||||
//类实例
|
|
||||||
methods?: {
|
|
||||||
[key: string]: (params: any, context: MethodContext) => Promise<L2ResMsg>
|
|
||||||
}
|
|
||||||
|
|
||||||
debug = (...args: any[]) => {
|
|
||||||
console.debug('[Inject Messaging]', ...args)
|
|
||||||
}
|
|
||||||
|
|
||||||
messageHandler = async (req: L2ReqMsg): Promise<L2ResMsg> => {
|
|
||||||
this.debug(`[${req.from}] ${req.method}`, JSON.stringify(req))
|
|
||||||
|
|
||||||
// check event target
|
|
||||||
// if (req.target !== MESSAGE_TARGET_INJECT) return Promise.resolve({
|
|
||||||
// success: false,
|
|
||||||
// code: 501,
|
|
||||||
// message: 'Target Error: ' + req.target,
|
|
||||||
// })
|
|
||||||
|
|
||||||
const method = this.methods?.[req.method]
|
|
||||||
if (method != null) {
|
|
||||||
return method(req.params, {
|
|
||||||
from: req.from,
|
|
||||||
event: req,
|
|
||||||
// sender,
|
|
||||||
}).then(data => {
|
|
||||||
// debug(`${source} <= `, event.method, JSON.stringify(data))
|
|
||||||
return {
|
|
||||||
code: 200,
|
|
||||||
data,
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.error(err)
|
|
||||||
let msg
|
|
||||||
if (err instanceof Error) {
|
|
||||||
msg = err.message
|
|
||||||
} else if (typeof err === 'string') {
|
|
||||||
msg = err
|
|
||||||
} else {
|
|
||||||
msg = 'error: ' + JSON.stringify(err)
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
code: 500,
|
|
||||||
msg,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
code: 501,
|
|
||||||
msg: 'Unknown method: ' + req.method,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
init(methods: {
|
|
||||||
[key: string]: (params: any, context: MethodContext) => Promise<any>
|
|
||||||
}) {
|
|
||||||
this.methods = methods
|
|
||||||
this.port = chrome.runtime.connect(import.meta.env.VITE_EXTENSION_ID, {
|
|
||||||
name: 'bilibili-inject',
|
|
||||||
})
|
|
||||||
this.l1protocol = new Layer1Protocol<L2ReqMsg, L2ResMsg>(this.messageHandler, this.port)
|
|
||||||
//握手
|
|
||||||
this.l1protocol.sendMessage({
|
|
||||||
from: 'inject',
|
|
||||||
method: MESSAGE_TO_EXTENSION_HANDSHAKE,
|
|
||||||
params: {
|
|
||||||
type: 'inject',
|
|
||||||
tags: [TAG_TARGET_INJECT],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
sendExtension = async <T = any>(method: string, params?: any): Promise<T> => {
|
|
||||||
return await this.l1protocol!.sendMessage({
|
|
||||||
from: 'inject',
|
|
||||||
method,
|
|
||||||
params: params ?? {},
|
|
||||||
}).then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
return res.data as T
|
|
||||||
} else {
|
|
||||||
throw new Error(res.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
sendApp = async <T>(method: string, params: any): Promise<T> => {
|
|
||||||
if (method === 'setVideoInfo') {
|
|
||||||
console.log('sendApp>>>', method, params)
|
|
||||||
}
|
|
||||||
return this.sendExtension(MESSAGE_TO_EXTENSION_ROUTE, {
|
|
||||||
tags: [TAG_TARGET_APP],
|
|
||||||
method,
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InjectMessaging
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import { msgWaiter } from './useMessagingService'
|
|
||||||
import { useCallback } from 'react'
|
|
||||||
import Layer1Protocol from '../layer1/Layer1Protocol'
|
|
||||||
import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_ROUTE, TAG_TARGET_INJECT } from '../const'
|
|
||||||
|
|
||||||
const useMessaging = () => {
|
|
||||||
const sendExtension = useCallback(async <T = any>(method: string, params?: any) => {
|
|
||||||
// wait
|
|
||||||
const pmh = await msgWaiter.wait() as Layer1Protocol<L2ReqMsg, L2ResMsg>
|
|
||||||
// send message
|
|
||||||
const res = await pmh.sendMessage({
|
|
||||||
from: 'app',
|
|
||||||
method,
|
|
||||||
params: params ?? {},
|
|
||||||
})
|
|
||||||
if (res.code === 200) {
|
|
||||||
return res.data as T
|
|
||||||
} else {
|
|
||||||
throw new Error(res.msg)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const sendInject = useCallback(async <T = any>(method: string, params?: any): Promise<T> => {
|
|
||||||
return await sendExtension(MESSAGE_TO_EXTENSION_ROUTE, {
|
|
||||||
tags: [TAG_TARGET_INJECT],
|
|
||||||
method,
|
|
||||||
params: params ?? {},
|
|
||||||
})
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return {
|
|
||||||
sendExtension,
|
|
||||||
sendInject
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useMessaging
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
import { useCallback, useMemo } from 'react'
|
|
||||||
import { Waiter } from '@kky002/kky-util'
|
|
||||||
import Layer1Protocol from '../layer1/Layer1Protocol'
|
|
||||||
import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, TAG_TARGET_APP } from '../const'
|
|
||||||
|
|
||||||
const debug = (...args: any[]) => {
|
|
||||||
console.debug('[App Messaging]', ...args)
|
|
||||||
}
|
|
||||||
|
|
||||||
let l1protocolInit: boolean = false
|
|
||||||
let l1protocol: Layer1Protocol<L2ReqMsg, L2ResMsg> | undefined
|
|
||||||
// let postInjectMessage: (method: string, params: PostMessagePayload) => Promise<PostMessageResponse> | undefined
|
|
||||||
|
|
||||||
export const msgWaiter = new Waiter<Layer1Protocol<L2ReqMsg, L2ResMsg>>(() => ({
|
|
||||||
finished: l1protocolInit,
|
|
||||||
data: l1protocol!,
|
|
||||||
}), 100, 15000)
|
|
||||||
|
|
||||||
const useMessagingService = (methods?: {
|
|
||||||
[key: string]: (params: any, context: MethodContext) => Promise<any>
|
|
||||||
}) => {
|
|
||||||
const messageHandler = useCallback(async (req: L2ReqMsg): Promise<L2ResMsg> => {
|
|
||||||
debug(`[${req.from}] ${req.method}`, JSON.stringify(req))
|
|
||||||
|
|
||||||
// // check event target
|
|
||||||
// if (req.target !== MESSAGE_TARGET_APP) return {
|
|
||||||
// code: 501,
|
|
||||||
// msg: 'Target Error: ' + req.target,
|
|
||||||
// }
|
|
||||||
|
|
||||||
const method = methods?.[req.method]
|
|
||||||
if (method != null) {
|
|
||||||
return method(req.params, {
|
|
||||||
from: req.from,
|
|
||||||
event: req,
|
|
||||||
}).then(data => {
|
|
||||||
// debug(`${source} <= `, event.method, JSON.stringify(data))
|
|
||||||
return {
|
|
||||||
code: 200,
|
|
||||||
data,
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.error(err)
|
|
||||||
let msg
|
|
||||||
if (err instanceof Error) {
|
|
||||||
msg = err.message
|
|
||||||
} else if (typeof err === 'string') {
|
|
||||||
msg = err
|
|
||||||
} else {
|
|
||||||
msg = 'error: ' + JSON.stringify(err)
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
code: 500,
|
|
||||||
msg,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
code: 501,
|
|
||||||
msg: 'Unknown method: ' + req.method,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [methods])
|
|
||||||
|
|
||||||
const port = useMemo(() => {
|
|
||||||
return chrome.runtime.connect(import.meta.env.VITE_EXTENSION_ID, {
|
|
||||||
name: 'bilibili-app',
|
|
||||||
})
|
|
||||||
}, [])
|
|
||||||
l1protocol = useMemo(() => {
|
|
||||||
if (messageHandler && port) {
|
|
||||||
const pmh = new Layer1Protocol<L2ReqMsg, L2ResMsg>(messageHandler, port)
|
|
||||||
|
|
||||||
//get tabId from url params
|
|
||||||
let tabIdStr = window.location.search.split('tabId=')[1]
|
|
||||||
let tabId = tabIdStr ? parseInt(tabIdStr) : undefined
|
|
||||||
// 初始化
|
|
||||||
pmh.sendMessage({
|
|
||||||
from: 'app',
|
|
||||||
method: MESSAGE_TO_EXTENSION_HANDSHAKE,
|
|
||||||
params: {
|
|
||||||
tabId,
|
|
||||||
tags: [TAG_TARGET_APP],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
l1protocolInit = true
|
|
||||||
|
|
||||||
return pmh
|
|
||||||
}
|
|
||||||
}, [messageHandler, port])
|
|
||||||
}
|
|
||||||
|
|
||||||
export default useMessagingService
|
|
||||||
@@ -3,25 +3,25 @@ import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
|||||||
import Header from '../components/Header'
|
import Header from '../components/Header'
|
||||||
import Body from '../components/Body'
|
import Body from '../components/Body'
|
||||||
import useSubtitleService from '../hooks/useSubtitleService'
|
import useSubtitleService from '../hooks/useSubtitleService'
|
||||||
import {EVENT_EXPAND, MESSAGE_TO_INJECT_FOLD} from '../consts/const'
|
import {EVENT_EXPAND} from '../consts/const'
|
||||||
import {EventBusContext} from '../Router'
|
import {EventBusContext} from '../Router'
|
||||||
import useTranslateService from '../hooks/useTranslateService'
|
import useTranslateService from '../hooks/useTranslateService'
|
||||||
import {setTheme} from '../utils/bizUtil'
|
import {setTheme} from '../utils/bizUtil'
|
||||||
import useSearchService from '../hooks/useSearchService'
|
import useSearchService from '../hooks/useSearchService'
|
||||||
import useMessage from '../messaging/layer2/useMessaging'
|
|
||||||
import {setFold} from '../redux/envReducer'
|
import {setFold} from '../redux/envReducer'
|
||||||
|
import { useMessage } from '@/hooks/useMessageService'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
const fold = useAppSelector(state => state.env.fold)
|
const fold = useAppSelector(state => state.env.fold)
|
||||||
|
const envData = useAppSelector(state => state.env.envData)
|
||||||
const eventBus = useContext(EventBusContext)
|
const eventBus = useContext(EventBusContext)
|
||||||
const totalHeight = useAppSelector(state => state.env.totalHeight)
|
const totalHeight = useAppSelector(state => state.env.totalHeight)
|
||||||
const {sendInject} = useMessage()
|
const {sendInject} = useMessage(!!envData.sidePanel)
|
||||||
const envData = useAppSelector(state => state.env.envData)
|
|
||||||
|
|
||||||
const foldCallback = useCallback(() => {
|
const foldCallback = useCallback(() => {
|
||||||
dispatch(setFold(!fold))
|
dispatch(setFold(!fold))
|
||||||
sendInject(MESSAGE_TO_INJECT_FOLD, {fold: !fold})
|
sendInject(null, 'FOLD', {fold: !fold})
|
||||||
}, [dispatch, fold, sendInject])
|
}, [dispatch, fold, sendInject])
|
||||||
|
|
||||||
// handle event
|
// handle event
|
||||||
|
|||||||
@@ -1,20 +1,17 @@
|
|||||||
import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
|
import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
|
||||||
import {setEnvData, setTempData} from '../redux/envReducer'
|
import {setEnvData} from '../redux/envReducer'
|
||||||
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
||||||
import {
|
import {
|
||||||
ASK_ENABLED_DEFAULT,
|
ASK_ENABLED_DEFAULT,
|
||||||
CUSTOM_MODEL_TOKENS,
|
CUSTOM_MODEL_TOKENS,
|
||||||
DEFAULT_SERVER_URL_OPENAI,
|
DEFAULT_SERVER_URL_OPENAI,
|
||||||
GEMINI_TOKENS,
|
GEMINI_TOKENS,
|
||||||
HEADER_HEIGHT,
|
|
||||||
LANGUAGE_DEFAULT,
|
LANGUAGE_DEFAULT,
|
||||||
LANGUAGES,
|
LANGUAGES,
|
||||||
MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL,
|
|
||||||
MODEL_DEFAULT,
|
MODEL_DEFAULT,
|
||||||
MODEL_MAP,
|
MODEL_MAP,
|
||||||
MODEL_TIP,
|
MODEL_TIP,
|
||||||
MODELS,
|
MODELS,
|
||||||
PAGE_MAIN,
|
|
||||||
PROMPT_DEFAULTS,
|
PROMPT_DEFAULTS,
|
||||||
PROMPT_TYPES,
|
PROMPT_TYPES,
|
||||||
SUMMARIZE_LANGUAGE_DEFAULT,
|
SUMMARIZE_LANGUAGE_DEFAULT,
|
||||||
@@ -29,17 +26,23 @@ import classNames from 'classnames'
|
|||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import {useBoolean, useEventTarget} from 'ahooks'
|
import {useBoolean, useEventTarget} from 'ahooks'
|
||||||
import {useEventChecked} from '@kky002/kky-hooks'
|
import {useEventChecked} from '@kky002/kky-hooks'
|
||||||
import useMessaging from '@/messaging/layer2/useMessaging'
|
import { FaChevronDown, FaChevronUp, FaGripfire } from 'react-icons/fa'
|
||||||
|
import { useMessage } from '@/hooks/useMessageService'
|
||||||
|
|
||||||
const Section = (props: {
|
const OptionCard = ({ title, children, defaultExpanded = true }: { title: React.ReactNode, children: React.ReactNode, defaultExpanded?: boolean }) => {
|
||||||
title: ShowElement
|
const [isExpanded, setIsExpanded] = useState(defaultExpanded)
|
||||||
htmlFor?: string
|
|
||||||
} & PropsWithChildren) => {
|
return (
|
||||||
const {title, htmlFor, children} = props
|
<div className="card bg-base-200 shadow-xl mb-4">
|
||||||
return <div className='flex flex-col gap-1'>
|
<div className="card-body p-4">
|
||||||
<label className='font-medium desc-lighter text-sm' htmlFor={htmlFor}>{title}</label>
|
<h2 className="card-title flex justify-between cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
|
||||||
<div className='flex flex-col gap-1 rounded py-2 px-2 bg-base-200/75'>{children}</div>
|
{title}
|
||||||
|
{isExpanded ? <FaChevronUp /> : <FaChevronDown />}
|
||||||
|
</h2>
|
||||||
|
{isExpanded && <div className="mt-4">{children}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const FormItem = (props: {
|
const FormItem = (props: {
|
||||||
@@ -48,20 +51,22 @@ const FormItem = (props: {
|
|||||||
htmlFor?: string
|
htmlFor?: string
|
||||||
} & PropsWithChildren) => {
|
} & PropsWithChildren) => {
|
||||||
const {title, tip, htmlFor, children} = props
|
const {title, tip, htmlFor, children} = props
|
||||||
return <div className='flex items-center gap-2'>
|
return (
|
||||||
<div className={classNames('basis-3/12 justify-end flex-center', tip && 'tooltip tooltip-right z-[100] underline underline-offset-2 decoration-dashed')} data-tip={tip}>
|
<div className='flex items-center gap-4 mb-2'>
|
||||||
<label className='font-medium desc' htmlFor={htmlFor}>{title}</label>
|
<div className={classNames('w-1/3 text-right', tip && 'tooltip tooltip-right z-50')} data-tip={tip}>
|
||||||
|
<label className={classNames('font-medium', tip && 'border-b border-dotted border-current pb-[2px]')} htmlFor={htmlFor}>{title}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className='basis-9/12 flex items-center'>
|
<div className='w-2/3'>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const OptionsPage = () => {
|
const OptionsPage = () => {
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
const envData = useAppSelector(state => state.env.envData)
|
const envData = useAppSelector(state => state.env.envData)
|
||||||
const {sendExtension} = useMessaging()
|
const {sendExtension} = useMessage(false)
|
||||||
const {value: sidePanelValue, onChange: setSidePanelValue} = useEventChecked(envData.sidePanel)
|
const {value: sidePanelValue, onChange: setSidePanelValue} = useEventChecked(envData.sidePanel)
|
||||||
const {value: autoInsertValue, onChange: setAutoInsertValue} = useEventChecked(!envData.manualInsert)
|
const {value: autoInsertValue, onChange: setAutoInsertValue} = useEventChecked(!envData.manualInsert)
|
||||||
const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
|
const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
|
||||||
@@ -143,7 +148,7 @@ const OptionsPage = () => {
|
|||||||
askEnabled: askEnabledValue,
|
askEnabled: askEnabledValue,
|
||||||
}))
|
}))
|
||||||
toast.success('保存成功')
|
toast.success('保存成功')
|
||||||
sendExtension(MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL)
|
sendExtension(null, 'CLOSE_SIDE_PANEL')
|
||||||
// 3秒后关闭
|
// 3秒后关闭
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.close()
|
window.close()
|
||||||
@@ -202,9 +207,9 @@ const OptionsPage = () => {
|
|||||||
setAiTypeValue('gemini')
|
setAiTypeValue('gemini')
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return <div className='flex justify-center'>
|
return (
|
||||||
<div className="w-2/3 max-w-[600px] flex flex-col gap-3 p-2">
|
<div className='container mx-auto max-w-3xl p-4'>
|
||||||
<Section title='通用配置'>
|
<OptionCard title="通用配置">
|
||||||
<FormItem title='侧边栏' htmlFor='sidePanel' tip='字幕列表是否显示在侧边栏'>
|
<FormItem title='侧边栏' htmlFor='sidePanel' tip='字幕列表是否显示在侧边栏'>
|
||||||
<input id='sidePanel' type='checkbox' className='toggle toggle-primary' checked={sidePanelValue}
|
<input id='sidePanel' type='checkbox' className='toggle toggle-primary' checked={sidePanelValue}
|
||||||
onChange={setSidePanelValue}/>
|
onChange={setSidePanelValue}/>
|
||||||
@@ -219,62 +224,63 @@ const OptionsPage = () => {
|
|||||||
</FormItem>}
|
</FormItem>}
|
||||||
<FormItem title='主题'>
|
<FormItem title='主题'>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button onClick={onSelTheme1} className={classNames('btn btn-xs no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
|
<button onClick={onSelTheme1} className={classNames('btn btn-sm no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
|
||||||
<button onClick={onSelTheme2} className={classNames('btn btn-xs no-animation', themeValue === 'light'?'btn-active':'')}>浅色</button>
|
<button onClick={onSelTheme2} className={classNames('btn btn-sm no-animation', themeValue === 'light'?'btn-active':'')}>浅色</button>
|
||||||
<button onClick={onSelTheme3} className={classNames('btn btn-xs no-animation', themeValue === 'dark'?'btn-active':'')}>深色</button>
|
<button onClick={onSelTheme3} className={classNames('btn btn-sm no-animation', themeValue === 'dark'?'btn-active':'')}>深色</button>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem title='字体大小'>
|
<FormItem title='字体大小'>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button onClick={onSelFontSize1} className={classNames('btn btn-xs no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}>普通</button>
|
<button onClick={onSelFontSize1} className={classNames('btn btn-sm no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}>普通</button>
|
||||||
<button onClick={onSelFontSize2} className={classNames('btn btn-xs no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
|
<button onClick={onSelFontSize2} className={classNames('btn btn-sm no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem title='AI类型' tip='OPENAI质量更高'>
|
<FormItem title='AI类型' tip='OPENAI质量更高'>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button onClick={onSelOpenai} className={classNames('btn btn-xs no-animation', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
|
<button onClick={onSelOpenai} className={classNames('btn btn-sm', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
|
||||||
<button onClick={onSelGemini} className={classNames('btn btn-xs no-animation', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
|
<button onClick={onSelGemini} className={classNames('btn btn-sm', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Section>
|
</OptionCard>
|
||||||
|
|
||||||
{(!aiTypeValue || aiTypeValue === 'openai') && <Section title='openai配置'>
|
<OptionCard title="AI 配置">
|
||||||
<FormItem title='ApiKey' htmlFor='apiKey'>
|
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='ApiKey' htmlFor='apiKey'>
|
||||||
<input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx'
|
<input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx'
|
||||||
value={apiKeyValue} onChange={onChangeApiKeyValue}/>
|
value={apiKeyValue} onChange={onChangeApiKeyValue}/>
|
||||||
</FormItem>
|
</FormItem>}
|
||||||
<FormItem title='服务器' htmlFor='serverUrl'>
|
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='服务器' htmlFor='serverUrl'>
|
||||||
<input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
|
<input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
|
||||||
placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
|
placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
|
||||||
onChange={e => setServerUrlValue(e.target.value)}/>
|
onChange={e => setServerUrlValue(e.target.value)}/>
|
||||||
</FormItem>
|
</FormItem>}
|
||||||
<div>
|
{(!aiTypeValue || aiTypeValue === 'openai') && <div>
|
||||||
<div className='desc text-xs text-center'>
|
<div className='desc text-sm text-center'>
|
||||||
<div className='flex justify-center font-semibold'>【官方地址】</div>
|
<div className='flex justify-center font-semibold'>【官方地址】</div>
|
||||||
<div>官方网址：<a className='link link-primary' href='https://platform.openai.com/' target='_blank'
|
<div>官方网址：<a className='link link-primary' href='https://platform.openai.com/' target='_blank'
|
||||||
rel="noreferrer">点击访问</a></div>
|
rel="noreferrer">点击访问</a></div>
|
||||||
<div>服务器地址：<a className='link link-primary'
|
<div>服务器地址：<a className='link link-primary'
|
||||||
onClick={() => setServerUrlValue(DEFAULT_SERVER_URL_OPENAI)}
|
onClick={() => setServerUrlValue(DEFAULT_SERVER_URL_OPENAI)}
|
||||||
rel='noreferrer'>点击设置</a></div>
|
rel='noreferrer'>点击设置</a></div>
|
||||||
{/* <div className='flex justify-center font-semibold'>【第三方代理】</div> */}
|
<div className='flex justify-center font-semibold'>【第三方国内代理】</div>
|
||||||
{/* <div>代理网址：<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM' */}
|
<div>代理网址：<a className='link link-primary' href='https://api.kksj.org/register?aff=ucVc'
|
||||||
{/* target='_blank' */}
|
target='_blank'
|
||||||
{/* rel="noreferrer">点击访问</a></div> */}
|
rel="noreferrer">点击访问</a></div>
|
||||||
{/* <div>服务器地址：<a className='link link-primary' */}
|
<div>服务器地址：<a className='link link-primary'
|
||||||
{/* onClick={() => setServerUrlValue('https://api.openai-up.com')} */}
|
onClick={() => setServerUrlValue('https://api.kksj.org')}
|
||||||
{/* rel='noreferrer'>点击设置</a></div> */}
|
rel='noreferrer'>点击设置</a></div>
|
||||||
{/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
|
<div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前0.9人民币可充值1美元(约官方价格1/8)<FaGripfire/></div>
|
||||||
|
<div className='text-amber-600 flex justify-center items-center'><FaGripfire/>国内可访问，无需🪜<FaGripfire/></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>}
|
||||||
<FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
|
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
|
||||||
<select id='modelSel' className="select select-sm select-bordered" value={modelValue}
|
<select id='modelSel' className="select select-sm select-bordered" value={modelValue}
|
||||||
onChange={onChangeModelValue}>
|
onChange={onChangeModelValue}>
|
||||||
{MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
|
{MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
|
||||||
</select>
|
</select>
|
||||||
</FormItem>
|
</FormItem>}
|
||||||
<div className='desc text-xs'>
|
{(!aiTypeValue || aiTypeValue === 'openai') && <div className='desc text-sm'>
|
||||||
{MODEL_TIP}
|
{MODEL_TIP}
|
||||||
</div>
|
</div>}
|
||||||
{modelValue === 'custom' && <FormItem title='模型名' htmlFor='customModel'>
|
{modelValue === 'custom' && <FormItem title='模型名' htmlFor='customModel'>
|
||||||
<input id='customModel' type='text' className='input input-sm input-bordered w-full' placeholder='llama2'
|
<input id='customModel' type='text' className='input input-sm input-bordered w-full' placeholder='llama2'
|
||||||
value={customModelValue} onChange={onChangeCustomModelValue}/>
|
value={customModelValue} onChange={onChangeCustomModelValue}/>
|
||||||
@@ -285,26 +291,23 @@ const OptionsPage = () => {
|
|||||||
value={customModelTokensValue}
|
value={customModelTokensValue}
|
||||||
onChange={e => setCustomModelTokensValue(e.target.value ? parseInt(e.target.value) : undefined)}/>
|
onChange={e => setCustomModelTokensValue(e.target.value ? parseInt(e.target.value) : undefined)}/>
|
||||||
</FormItem>}
|
</FormItem>}
|
||||||
</Section>}
|
{aiTypeValue === 'gemini' && <FormItem title='ApiKey' htmlFor='geminiApiKey'>
|
||||||
|
|
||||||
{aiTypeValue === 'gemini' && <Section title='gemini配置'>
|
|
||||||
<FormItem title='ApiKey' htmlFor='geminiApiKey'>
|
|
||||||
<input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
|
<input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
|
||||||
value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
|
value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
|
||||||
</FormItem>
|
</FormItem>}
|
||||||
<div>
|
{aiTypeValue === 'gemini' && <div>
|
||||||
<div className='desc text-xs'>
|
<div className='desc text-sm'>
|
||||||
<div>官方网址：<a className='link link-primary' href='https://makersuite.google.com/app/apikey'
|
<div>官方网址：<a className='link link-primary' href='https://makersuite.google.com/app/apikey'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
rel="noreferrer">Google AI Studio</a> (目前免费)
|
rel="noreferrer">Google AI Studio</a> (目前免费)
|
||||||
</div>
|
</div>
|
||||||
<div className='text-xs text-error flex items-center'><IoWarning className='text-sm text-warning'/>谷歌模型安全要求比较高，有些视频可能无法生成总结!
|
<div className='text-sm text-error flex items-center'><IoWarning className='text-sm text-warning'/>谷歌模型安全要求比较高，有些视频可能无法生成总结!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>}
|
||||||
</Section>}
|
</OptionCard>
|
||||||
|
|
||||||
<Section title={<div className='flex items-center'>
|
<OptionCard title={<div className='flex items-center'>
|
||||||
翻译配置
|
翻译配置
|
||||||
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
|
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
|
||||||
<IoWarning className='text-sm text-warning'/>
|
<IoWarning className='text-sm text-warning'/>
|
||||||
@@ -323,24 +326,24 @@ const OptionsPage = () => {
|
|||||||
<FormItem title='翻译条数' tip='每次翻译条数'>
|
<FormItem title='翻译条数' tip='每次翻译条数'>
|
||||||
<div className='flex-1 flex flex-col'>
|
<div className='flex-1 flex flex-col'>
|
||||||
<input type="range" min={TRANSLATE_FETCH_MIN} max={TRANSLATE_FETCH_MAX} step={TRANSLATE_FETCH_STEP} value={fetchAmountValue} className="range range-primary" onChange={onFetchAmountChange} />
|
<input type="range" min={TRANSLATE_FETCH_MIN} max={TRANSLATE_FETCH_MAX} step={TRANSLATE_FETCH_STEP} value={fetchAmountValue} className="range range-primary" onChange={onFetchAmountChange} />
|
||||||
<div className="w-full flex justify-between text-xs px-2">
|
<div className="w-full flex justify-between text-sm px-2">
|
||||||
{transFetchAmountList.map(amount => <span key={amount}>{amount}</span>)}
|
{transFetchAmountList.map(amount => <span key={amount}>{amount}</span>)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem title='翻译显示'>
|
<FormItem title='翻译显示'>
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button onClick={onSel1} className={classNames('btn btn-xs no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}>原文为主</button>
|
<button onClick={onSel1} className={classNames('btn btn-sm no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}>原文为主</button>
|
||||||
<button onClick={onSel2} className={classNames('btn btn-xs no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}>翻译为主</button>
|
<button onClick={onSel2} className={classNames('btn btn-sm no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}>翻译为主</button>
|
||||||
<button onClick={onSel3} className={classNames('btn btn-xs no-animation', transDisplayValue === 'target'?'btn-active':'')}>仅翻译</button>
|
<button onClick={onSel3} className={classNames('btn btn-sm no-animation', transDisplayValue === 'target'?'btn-active':'')}>仅翻译</button>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem title='隐藏翻译' tip='取消自动翻译时,隐藏已翻译内容' htmlFor='hideOnDisableAutoTranslate'>
|
<FormItem title='隐藏翻译' tip='取消自动翻译时,隐藏已翻译内容' htmlFor='hideOnDisableAutoTranslate'>
|
||||||
<input id='hideOnDisableAutoTranslate' type='checkbox' className='toggle toggle-primary' checked={hideOnDisableAutoTranslateValue}
|
<input id='hideOnDisableAutoTranslate' type='checkbox' className='toggle toggle-primary' checked={hideOnDisableAutoTranslateValue}
|
||||||
onChange={onChangeHideOnDisableAutoTranslate}/>
|
onChange={onChangeHideOnDisableAutoTranslate}/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Section>
|
</OptionCard>
|
||||||
<Section title={<div className='flex items-center'>
|
<OptionCard title={<div className='flex items-center'>
|
||||||
总结配置
|
总结配置
|
||||||
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
|
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
|
||||||
<IoWarning className='text-sm text-warning'/>
|
<IoWarning className='text-sm text-warning'/>
|
||||||
@@ -363,17 +366,17 @@ const OptionsPage = () => {
|
|||||||
<div className='flex-1 flex flex-col'>
|
<div className='flex-1 flex flex-col'>
|
||||||
<input id='words' type='number' className='input input-sm input-bordered w-full' placeholder={`默认为上限x${WORDS_RATE}`} value={wordsValue??''} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
|
<input id='words' type='number' className='input input-sm input-bordered w-full' placeholder={`默认为上限x${WORDS_RATE}`} value={wordsValue??''} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
|
||||||
{/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
|
{/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
|
||||||
{/* <div className="w-full flex justify-between text-xs px-2"> */}
|
{/* <div className="w-full flex justify-between text-sm px-2"> */}
|
||||||
{/* {wordsList.map(words => <span key={words}>{words}</span>)} */}
|
{/* {wordsList.map(words => <span key={words}>{words}</span>)} */}
|
||||||
{/* </div> */}
|
{/* </div> */}
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<div className='desc text-xs'>
|
<div className='desc text-sm'>
|
||||||
当前选择的模型的分段字数上限是<span className='font-semibold font-mono'>{aiTypeValue === 'gemini'?GEMINI_TOKENS:(MODEL_MAP[modelValue??MODEL_DEFAULT]?.tokens??'未知')}</span>
|
当前选择的模型的分段字数上限是<span className='font-semibold font-mono'>{aiTypeValue === 'gemini'?GEMINI_TOKENS:(MODEL_MAP[modelValue??MODEL_DEFAULT]?.tokens??'未知')}</span>
|
||||||
（太接近上限总结会报错）
|
（太接近上限总结会报错）
|
||||||
</div>
|
</div>
|
||||||
</Section>
|
</OptionCard>
|
||||||
<Section title={<div className='flex items-center'>
|
<OptionCard title={<div className='flex items-center'>
|
||||||
搜索配置
|
搜索配置
|
||||||
</div>}>
|
</div>}>
|
||||||
<FormItem title='启用搜索' htmlFor='searchEnabled' tip='是否启用字幕搜索功能'>
|
<FormItem title='启用搜索' htmlFor='searchEnabled' tip='是否启用字幕搜索功能'>
|
||||||
@@ -384,23 +387,23 @@ const OptionsPage = () => {
|
|||||||
<input id='cnSearchEnabled' type='checkbox' className='toggle toggle-primary' checked={cnSearchEnabledValue}
|
<input id='cnSearchEnabled' type='checkbox' className='toggle toggle-primary' checked={cnSearchEnabledValue}
|
||||||
onChange={setCnSearchEnabledValue}/>
|
onChange={setCnSearchEnabledValue}/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Section>
|
</OptionCard>
|
||||||
<Section title={<div className='flex items-center'>
|
<OptionCard title={<div className='flex items-center'>
|
||||||
提问配置
|
提问配置
|
||||||
</div>}>
|
</div>}>
|
||||||
<FormItem title='启用提问' htmlFor='askEnabled' tip='是否启用字幕提问功能'>
|
<FormItem title='启用提问' htmlFor='askEnabled' tip='是否启用字幕提问功能'>
|
||||||
<input id='askEnabled' type='checkbox' className='toggle toggle-primary' checked={askEnabledValue}
|
<input id='askEnabled' type='checkbox' className='toggle toggle-primary' checked={askEnabledValue}
|
||||||
onChange={setAskEnabledValue}/>
|
onChange={setAskEnabledValue}/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Section>
|
</OptionCard>
|
||||||
|
|
||||||
<Section title='提示词配置'>
|
<OptionCard title='提示词配置'>
|
||||||
<div className='flex justify-center'>
|
<div className='flex justify-center'>
|
||||||
<a className='text-xs link link-primary' onClick={togglePromptsFold}>点击{promptsFold ? '展开' : '折叠'}</a>
|
<a className='text-sm link link-primary' onClick={togglePromptsFold}>点击{promptsFold ? '展开' : '折叠'}</a>
|
||||||
</div>
|
</div>
|
||||||
{!promptsFold && PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
|
{!promptsFold && PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
|
||||||
<div>{item.name}</div>
|
<div>{item.name}</div>
|
||||||
<div className='link text-xs' onClick={() => {
|
<div className='link text-sm' onClick={() => {
|
||||||
setPromptsValue({
|
setPromptsValue({
|
||||||
...promptsValue,
|
...promptsValue,
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
@@ -417,20 +420,14 @@ const OptionsPage = () => {
|
|||||||
})
|
})
|
||||||
}}/>
|
}}/>
|
||||||
</FormItem>)}
|
</FormItem>)}
|
||||||
</Section>
|
</OptionCard>
|
||||||
|
|
||||||
<div className='flex justify-center gap-5'>
|
<div className='flex flex-col justify-center items-center gap-5 mt-6'>
|
||||||
<button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>
|
<button className='btn btn-primary btn-wide' onClick={onSave}>保存</button>
|
||||||
<button className='btn btn-sm' onClick={onCancel}>取消</button>
|
<button className='btn btn-wide' onClick={onCancel}>取消</button>
|
||||||
{/* <button className='btn btn-sm' onClick={() => {
|
|
||||||
dispatch(setTempData({
|
|
||||||
reviewed: undefined,
|
|
||||||
// reviewActions: 0
|
|
||||||
}))
|
|
||||||
}}>重置</button> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default OptionsPage
|
export default OptionsPage
|
||||||
|
|||||||
@@ -32,7 +32,8 @@ interface EnvState {
|
|||||||
segments?: Segment[]
|
segments?: Segment[]
|
||||||
url?: string
|
url?: string
|
||||||
title?: string
|
title?: string
|
||||||
|
ctime?: number | null
|
||||||
|
author?: string
|
||||||
taskIds?: string[]
|
taskIds?: string[]
|
||||||
transResults: { [key: number]: TransResult }
|
transResults: { [key: number]: TransResult }
|
||||||
lastTransTime?: number
|
lastTransTime?: number
|
||||||
@@ -271,6 +272,12 @@ export const slice = createSlice({
|
|||||||
setTitle: (state, action: PayloadAction<string | undefined>) => {
|
setTitle: (state, action: PayloadAction<string | undefined>) => {
|
||||||
state.title = action.payload
|
state.title = action.payload
|
||||||
},
|
},
|
||||||
|
setCtime: (state, action: PayloadAction<number | null | undefined>) => {
|
||||||
|
state.ctime = action.payload
|
||||||
|
},
|
||||||
|
setAuthor: (state, action: PayloadAction<string | undefined>) => {
|
||||||
|
state.author = action.payload
|
||||||
|
},
|
||||||
setInfos: (state, action: PayloadAction<any[]>) => {
|
setInfos: (state, action: PayloadAction<any[]>) => {
|
||||||
state.infos = action.payload
|
state.infos = action.payload
|
||||||
},
|
},
|
||||||
@@ -342,6 +349,8 @@ export const {
|
|||||||
addAskInfo,
|
addAskInfo,
|
||||||
delAskInfo,
|
delAskInfo,
|
||||||
mergeAskInfo,
|
mergeAskInfo,
|
||||||
|
setCtime,
|
||||||
|
setAuthor,
|
||||||
} = slice.actions
|
} = slice.actions
|
||||||
|
|
||||||
export default slice.reducer
|
export default slice.reducer
|
||||||
|
|||||||
30
src/typings.d.ts
vendored
30
src/typings.d.ts
vendored
@@ -1,22 +1,5 @@
|
|||||||
type MessageFrom = 'extension' | 'inject' | 'app'
|
|
||||||
|
|
||||||
interface MessageData {
|
|
||||||
from: MessageFrom
|
|
||||||
target: string
|
|
||||||
method: string
|
|
||||||
params?: any
|
|
||||||
[key: string]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MessageResult {
|
|
||||||
success: boolean
|
|
||||||
code: number
|
|
||||||
message?: string
|
|
||||||
data?: any
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MethodContext {
|
interface MethodContext {
|
||||||
from: MessageFrom
|
from: 'extension' | 'inject' | 'app'
|
||||||
event: any
|
event: any
|
||||||
tabId?: number
|
tabId?: number
|
||||||
// sender?: chrome.runtime.MessageSender | null
|
// sender?: chrome.runtime.MessageSender | null
|
||||||
@@ -168,4 +151,13 @@ interface BriefSummary extends Summary {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type SummaryStatus = 'init' | 'pending' | 'done'
|
type SummaryStatus = 'init' | 'pending' | 'done'
|
||||||
type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question'
|
type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question' | 'debate'
|
||||||
|
|
||||||
|
interface DebateMessage {
|
||||||
|
side: 'pro' | 'con'
|
||||||
|
content: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DebateProps {
|
||||||
|
messages: DebateMessage[]
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import {APP_DOM_ID, CUSTOM_MODEL_TOKENS, MODEL_DEFAULT, MODEL_MAP, SUMMARIZE_TYP
|
|||||||
import {isDarkMode} from '@kky002/kky-util'
|
import {isDarkMode} from '@kky002/kky-util'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import {findIndex} from 'lodash-es'
|
import {findIndex} from 'lodash-es'
|
||||||
|
|
||||||
export const debug = (...args: any[]) => {
|
export const debug = (...args: any[]) => {
|
||||||
console.debug('[APP]', ...args)
|
console.debug('[APP]', ...args)
|
||||||
}
|
}
|
||||||
@@ -82,6 +81,9 @@ export const isSummaryEmpty = (summary: Summary) => {
|
|||||||
} else if (summary.type === 'question') {
|
} else if (summary.type === 'question') {
|
||||||
const content: any[] = summary.content??[]
|
const content: any[] = summary.content??[]
|
||||||
return content.length === 0
|
return content.length === 0
|
||||||
|
} else if (summary.type === 'debate') {
|
||||||
|
const content: Array<{ side: string, content: string }> = summary.content ?? []
|
||||||
|
return content.length === 0
|
||||||
}
|
}
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
@@ -108,6 +110,11 @@ export const getSummaryStr = (summary: Summary) => {
|
|||||||
s += content.map(item => {
|
s += content.map(item => {
|
||||||
return item.q + '\n' + item.a + '\n'
|
return item.q + '\n' + item.a + '\n'
|
||||||
}).join('\n')
|
}).join('\n')
|
||||||
|
} else if (summary.type === 'debate') {
|
||||||
|
const content: Array<{ side: string, content: string }> = summary.content ?? []
|
||||||
|
s += content.map(item => {
|
||||||
|
return (item.side === 'pro'?'正方：':'反方：') + item.content + '\n'
|
||||||
|
}).join('\n')
|
||||||
}
|
}
|
||||||
return s
|
return s
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export const openOptionsPage = () => {
|
export const openOptionsPage = () => {
|
||||||
if (chrome.runtime.openOptionsPage) {
|
if (chrome.runtime.openOptionsPage) {
|
||||||
chrome.runtime.openOptionsPage();
|
chrome.runtime.openOptionsPage()
|
||||||
} else {
|
} else {
|
||||||
window.open(chrome.runtime.getURL('options.html'));
|
window.open(chrome.runtime.getURL('options.html'))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import {SyntheticEvent} from 'react'
|
import {SyntheticEvent} from 'react'
|
||||||
|
|
||||||
export const isEdgeBrowser = () => {
|
export const isEdgeBrowser = () => {
|
||||||
const userAgent = navigator.userAgent.toLowerCase();
|
const userAgent = navigator.userAgent.toLowerCase()
|
||||||
return userAgent.includes('edg/') && !userAgent.includes('edge/');
|
return userAgent.includes('edg/') && !userAgent.includes('edge/')
|
||||||
}
|
}
|
||||||
|
|
||||||
export const formatTime = (time: number) => {
|
export const formatTime = (time: number) => {
|
||||||
|
|||||||
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@@ -1,7 +1,6 @@
|
|||||||
/// <reference types="vite/client" />
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
interface ImportMetaEnv {
|
interface ImportMetaEnv {
|
||||||
readonly VITE_EXTENSION_ID: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ImportMeta {
|
interface ImportMeta {
|
||||||
|
|||||||
Reference in New Issue
Block a user