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)
         }