Split feature settings and Fixed nested object mutation with state pr…

…oxy not functioning (#40)

.github/workflows/build.yml

@@ -15,7 +15,7 @@ jobs:
         steps:
             - uses: actions/checkout@v2
             - name: Setup Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4.0.1
               with:
                   node-version: 20
             - name: Install dependencies
@@ -27,4 +27,4 @@ jobs:
               uses: actions/upload-artifact@v2
               with:
                   name: ${{ matrix.browser }}-mv3.zip
-                  path: dist/
+                  path: build/

.github/workflows/publish.yml

@@ -11,7 +11,7 @@ jobs:
         steps:
             - uses: actions/checkout@v2
             - name: Setup Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4.0.1
               with:
                   node-version: 20
             - name: Install dependencies
@@ -23,7 +23,7 @@ jobs:
               uses: actions/upload-artifact@v2
               with:
                   name: ${{ matrix.browser }}-mv3.zip
-                  path: dist/
+                  path: build/
     publish:
         runs-on: ubuntu-latest
         needs: build
@@ -32,7 +32,7 @@ jobs:
             - name: Download Artifacts
               uses: actions/download-artifact@v2
               with:
-                  path: dist/
+                  path: build/
             # publish with BPP
             - name: Browser Platform Publish
               uses: PlasmoHQ/bpp@v3
@@ -46,5 +46,5 @@ jobs:
             - name: Download Artifacts
               uses: actions/download-artifact@v2
               with:
-                  path: dist/
+                  path: build/
             # sign and export xpi without publish to store

README.md

@@ -4,7 +4,7 @@
 
 ## ➵ 下载
 
-[火狐及更新记录](https://github.com/eric2788/bilibili-jimaku-filter/releases)
+[火狐及更新记录](https://github.com/eric2788/bilibili-vup-stream-enhancer/releases)
 
 [Edge](https://microsoftedge.microsoft.com/addons/detail/ehdhihncinoejihhmhpdoeloadihnfio)
 
@@ -24,4 +24,4 @@
 
 [NGA帖文](https://ngabbs.com/read.php?tid=24434809)
 
-[问题回报和功能请求帖](https://github.com/eric2788/bilibili-jimaku-filter/issues)
+[问题回报和功能请求帖](https://github.com/eric2788/bilibili-vup-stream-enhancer/issues)

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "bilibili-jimaku-filter",
-  "displayName": "Bilibili jimaku filter",
+  "name": "bilibili-vup-stream-enhancer",
+  "displayName": "Bilibili Vup Stream Enhancer",
   "version": "2.0",
   "description": "管人观众专用直播增强扩展",
   "author": "Eric Lam <[email protected]>",
@@ -82,7 +82,6 @@
     "browser_specific_settings": {
       "gecko": {
         "id": "{041b8202-e9d4-4a78-a9da-465c749ed26c}",
-        "update_url": "https://eric2788.github.io/bilibili-jimaku-filter/updates.json",
         "strict_min_version": "78.0"
       }
     },

src/background/context-menus/add-black-list.ts

@@ -16,7 +16,7 @@ export default async function (info: chrome.contextMenus.OnClickData, tab?: chro
 
     if (!roomId) {
         console.warn(`unknown room id (${url.pathname})`)
-        await sendInternal('notify', {
+        return await sendInternal('notify', {
             title: '添加失败',
             message: `未知的直播间: ${url.pathname}`
         })

src/background/context-menus/index.ts

@@ -10,11 +10,13 @@ const rClickMap: {
     [index: string]: (info: chrome.contextMenus.OnClickData, tab?: chrome.tabs.Tab) => Promise<void>
 } = {}
 
-for (const menu of menus) {
+
+chrome.runtime.onInstalled.addListener(() => {
+    for (const menu of menus) {
     const { properties, default: consume } = menu
     rClickMap[properties.id] = consume
     contextMenus.create(properties)
-}
+}})
 
 contextMenus.onClicked.addListener((info, tab) => {
     const consume = rClickMap[info.menuItemId]

src/background/forwards/danmaku.ts

@@ -7,6 +7,7 @@ export type ResponseBody = {
     text: string
     color: string
     pos: 'scroll' | 'top' | 'bottom'
+    room: string
 }
 
 
@@ -15,6 +16,7 @@ export type ForwardBody = {
     text: string
     color: number
     position: number
+    room: string
 }
 
 const handler: ForwardHandler<ForwardBody, ResponseBody> = (req) => {
@@ -32,6 +34,7 @@ const handler: ForwardHandler<ForwardBody, ResponseBody> = (req) => {
     return {
         ...req,
         body: {
+            room: req.body.room,
             uname: req.body.uname,
             text: req.body.text,
             color: `#${req.body.color.toString(16)}`,

src/background/messages/check-update.ts

@@ -6,7 +6,7 @@ export const browser = process.env.PLASMO_BROWSER || 'chrome'
 
 export async function notifyUpdate(version: string): Promise<void> {
     await sendInternal('notify', {
-        title: 'bilibili-jimaku-filter 有可用的更新',
+        title: 'bilibili-vup-stream-enhancer 有可用的更新',
         message: `新版本 v${version || 'SNAPSHOT'}`,
         buttons: [
             {
@@ -17,7 +17,7 @@ export async function notifyUpdate(version: string): Promise<void> {
                 title: '查看更新日誌',
                 clicked: () => {
                     chrome.tabs.create({
-                        url: `https://github.com/eric2788/bilibili-jimaku-filter/releases/tag/${version}`
+                        url: `https://github.com/eric2788/bilibili-vup-stream-enhancer/releases/tag/${version}`
                     })
                 }
             }
@@ -53,7 +53,7 @@ const handler: PlasmoMessaging.MessageHandler<RequestBody> = async (req, res) =>
         await notifyUpdate(version)
     } else if (status === 'no_update') {
         await sendInternal('notify', {
-            title: 'bilibili-jimaku-filter 已是最新版本',
+            title: 'bilibili-vup-stream-enhancer 已是最新版本',
             message: `當前版本 v${version || 'SNAPSHOT'}`
         })
     } else {

src/background/messages/fetch-developer.ts

@@ -2,7 +2,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { sendInternal } from '~background/messages'
 import { setSettingStorage } from '~utils/storage'
 
-const developerLink = `https://cdn.jsdelivr.net/gh/eric2788/bilibili-jimaku-filter@web/cdn/developer.json`
+const developerLink = `https://cdn.jsdelivr.net/gh/eric2788/bilibili-vup-stream-enhancer@web/cdn/developer.json`
 
 
 export type RequestBody = {}

src/background/update-listener.ts

@@ -11,13 +11,13 @@ chrome.runtime.onInstalled.addListener(async (data: chrome.runtime.InstalledDeta
         try {
             await sendInternal('fetch-developer')
             await sendInternal('notify', {
-                title: 'bilibili-jimaku-filter 已安裝',
+                title: 'bilibili-vup-stream-enhancer 已安裝',
                 message: '成功从远端获取最新设定'
             })
         } catch (err: Error | any) {
             console.error(err)
             await sendInternal('notify', {
-                title: 'bilibili-jimaku-filter 已安裝',
+                title: 'bilibili-vup-stream-enhancer 已安裝',
                 message: '获取远端最新设定失败，将使用本地版本'
             })
         }
@@ -26,7 +26,7 @@ chrome.runtime.onInstalled.addListener(async (data: chrome.runtime.InstalledDeta
     } else if (data.reason === 'update') {
 
         await sendInternal('notify', {
-            title: 'bilibili-jimaku-filter 已更新',
+            title: 'bilibili-vup-stream-enhancer 已更新',
             message: `已更新到版本 v${version}`,
         })
 

src/components/OfflineRecordsProvider.tsx

@@ -3,7 +3,6 @@ import PromiseHandler from '~components/PromiseHandler';
 import db, { type RecordType, type TableType } from '~database';
 import type { FeatureType } from "~features";
 import type { Settings } from "~settings";
-import { sleep } from '~utils/misc';
 
 
 export type OfflineRecordsProviderProps<T extends TableType> = {

src/contents/main/App.tsx → src/contents/index/App.tsx

@@ -14,10 +14,7 @@ function App(): JSX.Element {
 
   const { info, settings } = useContext(StreamInfoContext)
 
-  const {
-    "settings.display": displaySettings,
-    "settings.features": featureSettings,
-  } = settings
+  const { "settings.display": displaySettings } = settings
 
   // 狀態為離綫時，此處不需要顯示按鈕
   // 離綫下載按鈕交給 feature UI 處理

src/contents/main/components/ButtonList.tsx → src/contents/index/components/ButtonList.tsx

@@ -16,9 +16,9 @@ function ButtonList(): JSX.Element {
     }
 
     const { settings, info } = streamInfo
-    const { "settings.display": displaySettings, "settings.features": featureSettings } = settings
+    const { "settings.display": displaySettings, "settings.features": { common: { enabledPip, monitorWindow }} } = settings
 
-    const { createPopupWindow } = usePopupWindow(featureSettings.enabledPip, {
+    const { createPopupWindow } = usePopupWindow(enabledPip, {
         width: 700,
         height: 450
     })
@@ -40,7 +40,7 @@ function ButtonList(): JSX.Element {
                 <Button variant="outlined" size="lg" className="text-lg" onClick={openSettings}>进入设置</Button>}
             {displaySettings.restartButton &&
                 <Button variant="outlined" size="lg" className="text-lg" onClick={restart}>重新启动</Button>}
-            {featureSettings.monitorWindow &&
+            {monitorWindow &&
                 <Button variant="outlined" size="lg" className="text-lg" onClick={openMonitor}>打开监控式视窗</Button>}
         </div>
     )

src/contents/main/components/Footer.tsx → src/contents/index/components/Footer.tsx

@@ -14,7 +14,7 @@ function Footer(): JSX.Element {
             </Typography>
             <hr className="py-3 border-black dark:border-gray-700" />
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 justify-items-center">
-                <FooterButton title="查看源代码" onClick={url('https://github.com/eric2788/bilibili-jimaku-filter')}>
+                <FooterButton title="查看源代码" onClick={url('https://github.com/eric2788/bilibili-vup-stream-enhancer')}>
                     <svg className="h-10 w-10 text-black" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.866-.014-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.532 1.03 1.532 1.03.891 1.529 2.341 1.089 2.91.833.091-.646.349-1.086.635-1.337-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.03-2.682-.103-.253-.447-1.27.098-2.646 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 7.07c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.547 1.376.203 2.394.1 2.646.64.699 1.026 1.591 1.026 2.682 0 3.841-2.337 4.687-4.565 4.934.359.31.678.919.678 1.852 0 1.335-.012 2.415-.012 2.741 0 .267.18.577.688.479C19.138 20.164 22 16.418 22 12c0-5.523-4.477-10-10-10z"></path>
                     </svg>

src/contents/main/index.tsx → src/contents/index/index.tsx

@@ -116,7 +116,7 @@ export const render: PlasmoRender<any> = async ({ anchor, createRootContainer },
     await transactions(app.start)
 
   } catch (err: Error | any) {
-    console.error(`渲染 bilibili-jimaku-filter 元素時出現錯誤: `, err)
+    console.error(`渲染 bilibili-vup-stream-enhancer 元素時出現錯誤: `, err)
     return
   }
 

src/contents/main/mounter.tsx → src/contents/index/mounter.tsx

@@ -1,19 +1,19 @@
-import BLiveThemeProvider from "~components/BLiveThemeProvider"
-import type { FeatureType } from "~features"
-import { Fragment } from "react"
 import type { PlasmoCSUIAnchor } from "plasmo"
-import type { Settings } from "~settings"
-import type { StreamInfo } from "~api/bilibili"
 import { createRoot, type Root } from "react-dom/client"
+import { toast } from "sonner/dist"
+import type { StreamInfo } from "~api/bilibili"
+import { sendForward } from "~background/forwards"
+import BLiveThemeProvider from "~components/BLiveThemeProvider"
+import StreamInfoContext from "~contexts/StreamInfoContexts"
+import type { FeatureType } from "~features"
 import features from "~features"
-import { getFullSettingStroage } from "~utils/storage"
+import type { Settings } from "~settings"
+import { shouldInit } from "~settings"
 import { getStreamInfoByDom } from "~utils/bilibili"
 import { injectAdapter } from "~utils/inject"
-import { sendMessager } from "~utils/messaging"
-import { shouldInit } from "~settings"
-import { toast } from "sonner/dist"
+import { addBLiveMessageCommandListener, sendMessager } from "~utils/messaging"
+import { getFullSettingStroage } from "~utils/storage"
 import App from "./App"
-import StreamInfoContext from "~contexts/StreamInfoContexts"
 
 interface RootMountable {
     feature: FeatureType
@@ -107,7 +107,7 @@ function createApp(roomId: string, plasmo: PlasmoSpec, info: StreamInfo): App {
 
     // this root is main root
     let root: Root = null
-
+    let removeListener: VoidFunction = null
     return {
         async start(): Promise<void> {
 
@@ -183,13 +183,27 @@ function createApp(roomId: string, plasmo: PlasmoSpec, info: StreamInfo): App {
             await Promise.all(mounters.filter(m => enabled.includes(m.feature)).map(m => m.mount(settings)))
             console.info('渲染元素完成')
 
+            // TODO: change to use global data
+            removeListener = 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, room: info.room })
+            })
+
         },
         stop: async () => {
             if (root === null) {
                 console.warn('root is null, maybe not mounted yet')
                 return
             }
 
+            if (removeListener) {
+                removeListener()
+            }
+
             // unhook adapters
             console.info('開始移除適配器....')
             const unhooking = sendMessager('hook-adapter', { command: 'unhook' })

src/database/index.ts

@@ -16,7 +16,7 @@ export type RecordType<T extends TableType> = IndexedDatabase[T] extends Table<i
 
 export class IndexedDatabase extends Dexie {
     public constructor() {
-        super("bilibili-jimaku-filter")
+        super("bilibili-vup-stream-enhancer")
         migrate(this)
     }
 }

src/features/index.ts

@@ -1,8 +1,8 @@
 import * as jimaku from './jimaku'
 import * as superchat from './superchat'
 
-import type { Settings } from '~settings'
 import type { StreamInfo } from '~api/bilibili'
+import type { Settings } from '~settings'
 
 export type FeatureHookRender = (settings: Readonly<Settings>, info: StreamInfo) => Promise<(React.ReactPortal | React.ReactNode)[] | undefined>
 
@@ -16,8 +16,8 @@ export interface FeatureHandler {
 }
 
 const features = {
-    'jimaku': jimaku,
-    'superchat': superchat
+    jimaku, 
+    superchat
 }
 
 

src/features/jimaku/components/ButtonArea.tsx

@@ -45,7 +45,7 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
                     下载字幕记录
                 </JimakuButton>
             }
-            {info.status === 'online' && features.jimakuPopupWindow &&
+            {info.status === 'online' && features.jimaku.jimakuPopupWindow &&
                 <JimakuButton
                     onClick={createPopupWindow(`jimaku.html`, {
                         roomId: info.room,