finished stream page (i think so!)

package.json

@@ -22,13 +22,13 @@
     "@react-hooks-library/core": "^0.5.1",
     "autoprefixer": "^10.4.16",
     "brotli-dec-wasm": "^2.1.0",
-    "danmaku": "^2.0.6",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
     "hash-wasm": "^4.11.0",
     "hls.js": "^1.4.14",
     "media-chrome": "^2.0.1",
     "mpegts.js": "^1.7.3",
+    "n-danmaku": "^2.2.1",
     "plasmo": "0.84.0",
     "react": "18.2.0",
     "react-contexify": "^6.0.0",

src/api/bilibili.ts

@@ -1,5 +1,5 @@
 import type { GetInfoByRoomResponse, SpecAreaRankResponse, StreamUrlResponse, SuperChatList, V1Response, WbiAccInfoResponse, WebInterfaceNavResponse } from "~types/bilibili"
-import { fetchSameCredentialBase, fetchSameCredentialV1, retryCatcher } from '~utils/fetch'
+import { fetchSameCredentialBase, fetchSameCredentialV1, retryCatcher, sendRequest } from '~utils/fetch'
 
 import type { NeptuneIsMyWaifu } from "~background/functions/getBLiveCachedData"
 import func from '~utils/func'
@@ -60,7 +60,9 @@ export async function ensureLogin(): Promise<boolean> {
 
 export async function ensureIsVtuber(info: StreamInfo): Promise<StreamInfo> {
     // real vtuber identification
-    const vup = await retryCatcher(() => identifyVup(info.uid), 3)
+    const vup = await retryCatcher(() => identifyVup(info.uid), 3,
+        { id: info.uid, name: info.username, locale: 'idk' } // if failed, always return is vtuber = true
+    )
 
     // if not undefined
     if (vup) {
@@ -97,7 +99,7 @@ export async function requestUserInfo(mid: string): Promise<WbiAccInfoResponse>
     const wrid = await w_rid(mid, now)
     const url = `https://api.bilibili.com/x/space/wbi/acc/info?platform=web&token=&web_location=1550101&wts=${now}&mid=${mid}&w_rid=${wrid}`
 
-    const res = await sendMessager('request', {
+    const res = await sendRequest<V1Response<WbiAccInfoResponse>>({
         url,
         options: {
             method: "GET",
@@ -107,8 +109,8 @@ export async function requestUserInfo(mid: string): Promise<WbiAccInfoResponse>
                 'Origin': 'https://space.bilibili.com'
             },
         }
-    }) as V1Response<WbiAccInfoResponse>
-
+    })
+    
     if (res.code !== 0) throw new Error(`B站API请求错误: ${res.message}`)
     return res.data
 }

src/api/vtb-moe.ts

@@ -1,9 +1,9 @@
 import type { VtbMoeDetailResponse, VtbMoeListResponse } from "~types/bilibili"
-import { sendMessager } from '~utils/messaging'
+import { sendRequest } from "~utils/fetch"
 
 export async function getVupDetail(uid: string): Promise<VtbMoeDetailResponse | undefined> {
     try {
-        return await sendMessager('request', {
+        return await sendRequest<VtbMoeDetailResponse>({
             url: `https://api.vtbs.moe/v1/detail/${uid}`,
             timeout: 5000
         })
@@ -20,11 +20,11 @@ export type VupResponse = {
 }
 
 export async function listAllVupUids(): Promise<VupResponse[]> {
-    const req = await sendMessager('request', {
+    const res = await sendRequest<VtbMoeListResponse>({
         url: 'https://vdb.vtbs.moe/json/list.json',
         timeout: 5000
-    }) as VtbMoeListResponse
-    return req.vtbs.filter(v => v.type === 'vtuber').map(v => {
+    })
+    return res.vtbs.filter(v => v.type === 'vtuber').map(v => {
         const acc = v.accounts.find(acc => acc.platform == 'bilibili')
         return acc ? {
             id: acc.id,

src/background/forwards/danmaku.ts

@@ -6,7 +6,7 @@ export type ResponseBody = {
     uname: string
     text: string
     color: string
-    pos: 'ltr' | 'rtl' | 'top' | 'bottom'
+    pos: 'scroll' | 'top' | 'bottom'
 }
 
 
@@ -19,7 +19,7 @@ export type ForwardBody = {
 
 const handler: ForwardHandler<ForwardBody, ResponseBody> = (req) => {
 
-    let pos: 'ltr' | 'rtl' | 'top' | 'bottom' = 'rtl'
+    let pos: 'scroll' | 'top' | 'bottom' = 'scroll'
     switch (req.body.position) {
         case 5:
             pos = 'top'
@@ -34,7 +34,7 @@ const handler: ForwardHandler<ForwardBody, ResponseBody> = (req) => {
         body: {
             uname: req.body.uname,
             text: req.body.text,
-            color: req.body.color.toString(16),
+            color: `#${req.body.color.toString(16)}`,
             pos,
         }
     }

src/background/messages.ts

@@ -15,19 +15,6 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { isBackgroundScript } from '~utils/file'
 import { sendMessager } from '~utils/messaging'
 
-// follow from ./messages/*.ts
-
-
-
-
-
-
-
-
-
-
-
-
 export type MessagingData = typeof messagers
 
 interface MessageData<T extends object, R = any> {

src/background/messages/fetch-developer.ts

@@ -9,6 +9,13 @@ export type RequestBody = {}
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
     const { data: developer, error } = await sendInternal('request', { url: developerLink })
+    if (error) {
+        await sendInternal('notify', {
+            title: '获取远端开发设定失败',
+            message: error,
+        })
+        return
+    }
     await setSettingStorage('settings.developer', developer)
 }
 

src/background/messages/open-window.ts

@@ -1,11 +1,11 @@
 import type { PlasmoMessaging } from "@plasmohq/messaging"
 
 export type RequestBody = chrome.windows.CreateData & {
-    tab?: string
+    tab?: string,
 }
 
 const handler: PlasmoMessaging.MessageHandler<RequestBody, any> = async (req, res) => {
-    const { url, tab, type } = req.body
+    const { url, tab } = req.body
     const result = await chrome.windows.create({
         type: 'popup',
         focused: true,

src/contents/forwarder/index.ts

@@ -18,7 +18,10 @@ if (remove) remove()
 remove = addBLiveMessageCommandListener('DANMU_MSG', (data) => {
     const uname = data.info[2][1]
     const text = data.info[1]
+    if (Array.isArray(text)) return
     const color = data.info[0][3]
     const position = data.info[0][1]
     sendForward('pages', 'danmaku', { uname, text, color, position })
-})
+})
+
+

src/contents/main/components/ButtonList.tsx

@@ -8,12 +8,19 @@ import { sendMessager } from "~utils/messaging"
 
 function ButtonList(): JSX.Element {
 
-    const { settings, info } = useContext(StreamInfoContext)
+    const streamInfo = useContext(StreamInfoContext)
+
+    if (!streamInfo) {
+        console.warn('BJF App is not ready.')
+        return <></>
+    }
+
+    const { settings, info } = streamInfo
     const { "settings.display": displaySettings, "settings.features": featureSettings } = settings
 
     const { createPopupWindow } = usePopupWindow(featureSettings.enabledPip, {
         width: 700,
-        height: 450,
+        height: 450
     })
 
     const restart = () => sendForward('background', 'redirect', { target: 'content-script', command: 'command', body: { command: 'restart' }, queryInfo: { url: location.href } })

src/hooks/window.ts

@@ -20,6 +20,10 @@ export function usePopupWindow(enabledPip: boolean, options: PopupCreateInfo) {
                 iframe.src = url
                 iframe.style.width = '100%'
                 iframe.style.height = '100%'
+                iframe.height = options.height?.toString()
+                iframe.width = options.width?.toString()
+                iframe.allow = 'autoplay; fullscreen;'
+                iframe.frameBorder = '0'
                 iframe.allowFullscreen = true
                 iframe.mozallowfullscreen = true
                 iframe.msallowfullscreen = true

src/players/flv.ts

@@ -22,7 +22,8 @@ class FlvPlayer implements StreamPlayer {
             cors: true,
             withCredentials: true
         }, {
-            autoCleanupSourceBuffer: false,
+            stashInitialSize: 1024 * 1024,
+            autoCleanupSourceBuffer: true,
             headers: {
                 'Origin': 'https://live.bilibili.com',
                 'Referer': `https://live.bilibili.com/${this.room}`

src/players/hls.ts

@@ -12,15 +12,15 @@ class HlsPlayer implements StreamPlayer {
 
     loadAndPlay(url: string, video: HTMLMediaElement): Promise<void> {
         this.player = new Hls({
-            lowLatencyMode: true
+            lowLatencyMode: true,
         })
         return new Promise((res, rej) => {
-            this.player.on(Hls.Events.MEDIA_ATTACHED, () => {
+            this.player.once(Hls.Events.MEDIA_ATTACHED, () => {
                 console.log('video and hls.js are now bound together !')
                 res()
             })
 
-            this.player.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
+            this.player.once(Hls.Events.MANIFEST_PARSED, (event, data) => {
                 console.log('manifest loaded, found ' + data.levels.length + ' quality level', data)
             })
 

src/players/index.ts

@@ -42,7 +42,7 @@ async function loadStream(roomId: string, urls: StreamUrls, video: HTMLVideoElem
             return player
         } catch (err: Error | any) {
             console.error(`Player failed to load: `, err, ', from: ', url)
-            throw new Error(`Player failed to load: ${err.message}`)
+            continue
         }
     }
     throw new Error('No player is supported')