Merge pull request #81 from eric2788/develop

v2.0.2 - second update

.github/workflows/build-test.yml

@@ -166,7 +166,7 @@ jobs:
  if-no-files-found: ignore
  - name: Upload Results To R2
  if: failure() && steps.test.conclusion == 'failure'
- uses: eric2788/r2-upload-action@master
+ uses: eric2788/r2-upload-action@concurrent
  id: upload
  continue-on-error: true
  with:

README.md

@@ -48,10 +48,12 @@
 ## ➵ 使用方式
 
 1. [下载](#-下载)本扩展。
-2. 点击扩展图标进入设定页面，并根据你的偏好进入设定。完成后，然后按下保存设定。
+2. 点击扩展图标进入设定页面，并根据你的偏好进行设定。完成后，按下保存设定。
 3. 进入B站任一直播间即可开始使用。
 
-详情可参阅 [使用指南](https://cdn.jsdelivr.net/gh/eric2788/bilibili-vup-stream-enhancer@web/tutorials/index.md)
+> 本扩展的所有功能基本上可以到设定页面自行探索和试用，便不再加篇章一一赘述。
+>
+> 不过考虑到有些功能可能比较难以察觉，故写了篇 [使用指南](https://eric2788.github.io/bilibili-vup-stream-enhancer/tutorials) (仅限难以察觉的功能)。
 
 ## ➵ 贡献
 

docs/background.md

@@ -126,6 +126,7 @@ const menus = [
 - 把内容脚本的弹幕数据发送到扩展页面
 - 把内容脚本的同传字幕发送到扩展页面
 - 扩展页面的重启指令发送到内容脚本
+- 发送预编译的视频数据到扩展页面
 
 例子如下:
 ```ts

docs/settings.md

@@ -156,7 +156,7 @@ function App(): JSX.Element {
 - 使用 [`getSettingStorage`](/src/utils/storage.ts) 函数:
 
 ```ts
-const helloWorldSettings = getSettingStorage('settings.helloWorld')
+const helloWorldSettings = await getSettingStorage('settings.helloWorld')
 ```
 
 > 此方式返回的数据本身包含设定结构，因此无需手动标注类型。

package.json

@@ -35,7 +35,7 @@
  "dexie": "^3.2.7",
  "dexie-react-hooks": "^1.1.7",
  "hash-wasm": "^4.11.0",
- "hls.js": "^1.5.7",
+ "hls.js": "^1.5.8",
  "media-chrome": "^2.2.5",
  "mpegts.js": "^1.7.3",
  "n-danmaku": "^2.2.1",

src/background/functions/index.ts

@@ -1,6 +1,7 @@
 import boostWebSocketHook from './boostWebsocketHook'
 import getBLiveCachedData from './getBLiveCachedData'
 import getWindowVariable from './getWindowVariable'
+import invokeLivePlayer from "./p2pLivePlayer"
 
 export interface InjectableFunction<T extends InjectableFunctionType> {
  name: T
@@ -18,7 +19,8 @@ export type InjectableFunctionReturnType<T extends InjectableFunctionType> = Ret
 const functions = {
  getWindowVariable,
  getBLiveCachedData,
- boostWebSocketHook
+ boostWebSocketHook,
+ invokeLivePlayer
 }
 
 

src/background/functions/p2pLivePlayer.ts

@@ -0,0 +1,13 @@
+
+
+function invokeLivePlayer(name: string, ...args: any[]): any {
+ const self = window as any
+ if (!self.$P2PLivePlayer) {
+ console.warn('P2PLivePlayer not found')
+ return undefined
+ }
+ return self.$P2PLivePlayer[name](...args)
+}
+
+
+export default invokeLivePlayer

src/background/messages/get-stream-urls.ts

@@ -8,14 +8,16 @@ export type RequestBody = {
  roomId: number | string
 }
 
-export type StreamUrls = {
+export type StreamUrl = {
  desc: string
  url: string
  type: PlayerType
  codec: string
  track: string
  quality: number
-}[]
+}
+
+export type StreamUrls = StreamUrl[]
 
 export type ResponseBody = {
  error?: string

src/database/tables/stream.d.ts

@@ -3,11 +3,11 @@ import { CommonSchema } from '~database'
 
 declare module '~database' {
  interface IndexedDatabase {
- streams: Table<Streams, number>
+ streams: Table<Stream, number>
  }
 }
 
-interface Streams extends CommonSchema {
+interface Stream extends CommonSchema {
  content: Blob
  order: number
 }

src/features/recorder/components/ProgressText.tsx

@@ -0,0 +1,48 @@
+import type { ProgressEvent } from "@ffmpeg/ffmpeg/dist/esm/types"
+import { Spinner, Progress } from "@material-tailwind/react"
+import { useState } from "react"
+import TailwindScope from "~components/TailwindScope"
+import type { FFMpegHooks } from "~hooks/ffmpeg"
+import { useAsyncEffect } from "~hooks/life-cycle"
+
+
+function ProgressText({ ffmpeg }: { ffmpeg: Promise<FFMpegHooks> }) {
+
+ const [progress, setProgress] = useState<ProgressEvent>(null)
+
+ useAsyncEffect(
+ async () => {
+ const ff = await ffmpeg
+ ff.onProgress(setProgress)
+ },
+ async () => { },
+ (err) => {
+ console.error('unexpected: ', err)
+ },
+ [ffmpeg])
+
+ if (!progress) {
+ return `编译视频中...`
+ }
+
+ const progressValid = progress.progress > 0 && progress.progress <= 1
+
+ return (
+ <TailwindScope>
+ <div className="flex justify-center flex-col space-y-2">
+ <div className="flex flex-row items-center space-x-2">
+ <div>
+ <Spinner className="h-5 w-5" />
+ </div>
+ <div>
+ {`编译视频中... ${progressValid ? `(${Math.round(progress.progress * 10000) / 100}%)` : ''}`}
+ </div>
+ </div>
+ {progressValid && <Progress color="blue" value={progress.progress * 100} />}
+ </div>
+ </TailwindScope>
+ )
+
+}
+
+export default ProgressText

src/features/recorder/components/RecorderButton.tsx

@@ -36,7 +36,9 @@ function RecorderButton(props: RecorderButtonProps): JSX.Element {
 
  if (recording) {
  if (timer === duration * 60) return // if reached duration, stop increasing timer
- setTimer(timer + 1)
+ if (recorder.current.ticking) { // only ticking recorder will increase timer
+ setTimer(timer + 1)
+ }
  } else {
  setTimer(0)
  }