From dcb5430b6ce2630f4a62098598db6d7eec8d53be Mon Sep 17 00:00:00 2001
From: eric2788 <tsukiko852@gmail.com>
Date: Sun, 14 Jan 2024 00:24:47 +0800
Subject: [PATCH] =?UTF-8?q?fixed=20[MV3]=20=E5=9C=A8=E5=A4=A7=E6=B5=B7?=
 =?UTF-8?q?=E6=8A=A5=E7=9B=B4=E6=92=AD=E6=88=BF=E9=97=B4=E4=B8=8B=E6=AD=A3?=
 =?UTF-8?q?=E5=B8=B8=E8=BF=90=E4=BD=9C=20#43,=20added=20scrollbar=20and=20?=
 =?UTF-8?q?max-height=20for=20each=20feature=20fragment=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bilibili.ts                           |  8 ++-
 src/components/PromiseHandler.tsx             |  4 +-
 src/contents/index/App.tsx                    | 13 ++++-
 src/contents/index/components/ButtonList.tsx  |  8 +--
 src/contents/index/components/Footer.tsx      |  2 +-
 src/contents/index/mounter.tsx                | 26 +++++----
 src/features/jimaku/components/ButtonArea.tsx | 57 ++++++++++++-------
 .../jimaku/components/ButtonSwitchList.tsx    | 31 ++++++++++
 src/features/jimaku/components/JimakuArea.tsx | 29 +++++-----
 .../jimaku/components/JimakuCaptureLayer.tsx  |  1 -
 .../superchat/components/SuperChatArea.tsx    |  4 +-
 .../components/SuperChatFloatingButton.tsx    |  2 +-
 src/features/superchat/index.tsx              |  4 +-
 src/settings/features/jimaku.tsx              | 44 --------------
 src/settings/features/superchat.tsx           | 21 -------
 src/settings/fragments/developer.tsx          |  2 +-
 src/settings/fragments/features.tsx           |  4 +-
 src/settings/fragments/listings.tsx           |  7 +--
 src/tabs/stream.tsx                           | 12 ++--
 src/utils/bilibili.ts                         |  1 +
 src/utils/misc.ts                             |  1 +
 21 files changed, 135 insertions(+), 146 deletions(-)
 create mode 100644 src/features/jimaku/components/ButtonSwitchList.tsx
 delete mode 100644 src/settings/features/jimaku.tsx
 delete mode 100644 src/settings/features/superchat.tsx

diff --git a/src/api/bilibili.ts b/src/api/bilibili.ts
index e4317d6e..7ae7b642 100644
--- a/src/api/bilibili.ts
+++ b/src/api/bilibili.ts
@@ -5,7 +5,7 @@ import type { NeptuneIsMyWaifu } from "~background/functions/getBLiveCachedData"
 import func from '~utils/func'
 import { identifyVup } from './vtb-moe'
 import { sendMessager } from '~utils/messaging'
-import { w_rid } from '~utils/bilibili'
+import { isThemePage, w_rid } from '~utils/bilibili'
 
 export type StreamInfo = {
     room: string
@@ -15,7 +15,8 @@ export type StreamInfo = {
     username: string
     isVtuber: boolean
     status: 'online' | 'offline'
-    liveTime: number
+    liveTime: number,
+    isTheme: boolean 
 }
 
 export async function getStreamInfo(room: string): Promise<StreamInfo> {
@@ -28,7 +29,8 @@ export async function getStreamInfo(room: string): Promise<StreamInfo> {
         username: data.anchor_info.base_info.uname,
         isVtuber: data.room_info.parent_area_id !== 9, // 分區辨識
         status: data.room_info.live_status === 1 ? 'online' : 'offline',
-        liveTime: data.room_info.live_start_time
+        liveTime: data.room_info.live_start_time,
+        isTheme: isThemePage() // 目前尚未知道如何在 API 中取得
     }
 }
 
diff --git a/src/components/PromiseHandler.tsx b/src/components/PromiseHandler.tsx
index b52971ca..45cef921 100644
--- a/src/components/PromiseHandler.tsx
+++ b/src/components/PromiseHandler.tsx
@@ -23,7 +23,7 @@ function DefaultErrorMessage({ error }: { error: Error | any }): JSX.Element {
     }, [error])
 
     return (
-        <div className="flex justify-center items-center text-center h-full w-full">
+        <div className="flex justify-center items-center text-center h-screen w-full">
             <div className="text-red-500">
                 <Typography variant="h5" color="red" className="semi-bold">加载错误:</Typography>
                 <span className="text-[17px]">{error.message}</span>
@@ -34,7 +34,7 @@ function DefaultErrorMessage({ error }: { error: Error | any }): JSX.Element {
 
 function DefaultLoading(): JSX.Element {
     return (
-        <div className="flex justify-center items-center w-full h-full">
+        <div className="flex justify-center items-center w-full h-screen">
             <Spinner />
         </div>
     )
diff --git a/src/contents/index/App.tsx b/src/contents/index/App.tsx
index 9b7bf5b7..00a4ef85 100644
--- a/src/contents/index/App.tsx
+++ b/src/contents/index/App.tsx
@@ -12,7 +12,15 @@ import Header from "./components/Header";
 
 function App(): JSX.Element {
 
-  const { info, settings } = useContext(StreamInfoContext)
+  const streamInfo = useContext(StreamInfoContext)
+
+  // i don't know why the hell this got rendered at the top level during HMR, should be the bug for plasmo
+  if (!streamInfo) {
+    console.warn('plasmo framework bug: streamInfo is undefined')
+    return <></>
+  }
+
+  const { info, settings } = streamInfo
 
   const { "settings.display": displaySettings } = settings
 
@@ -23,13 +31,12 @@ function App(): JSX.Element {
   }
 
   const screenStatus = useWebScreenChange(settings['settings.developer'].classes)
+  const { bool: open, setFalse: closeDrawer, toggle } = useToggle(false)
 
   if (screenStatus !== 'normal' && !displaySettings.supportWebFullScreen) {
     return <></>
   }
 
-  const { bool: open, setFalse: closeDrawer, toggle } = useToggle(false)
-
   return (
     <Fragment>
       <FloatingMenuButton toggle={toggle} />
diff --git a/src/contents/index/components/ButtonList.tsx b/src/contents/index/components/ButtonList.tsx
index a101cf99..e3979c15 100644
--- a/src/contents/index/components/ButtonList.tsx
+++ b/src/contents/index/components/ButtonList.tsx
@@ -9,11 +9,6 @@ import { sendMessager } from "~utils/messaging"
 function ButtonList(): JSX.Element {
 
     const streamInfo = useContext(StreamInfoContext)
-
-    if (!streamInfo) {
-        console.warn('BJF App is not ready.')
-        return <></>
-    }
     
     const { settings, info } = streamInfo
     const { "settings.display": displaySettings, "settings.features": { common: { enabledPip, monitorWindow }} } = settings
@@ -42,6 +37,9 @@ function ButtonList(): JSX.Element {
                 <Button variant="outlined" size="lg" className="text-lg" onClick={restart}>重新启动</Button>}
             {monitorWindow &&
                 <Button variant="outlined" size="lg" className="text-lg" onClick={openMonitor}>打开监控式视窗</Button>}
+            {(info.isTheme && displaySettings.themeToNormalButton) && 
+                <Button variant="outlined" size="lg" className="text-lg" onClick={() => window.open(`https://live.bilibili.com/blanc/${info.room}`)}>返回非海报界面</Button>    
+            }
         </div>
     )
 }
diff --git a/src/contents/index/components/Footer.tsx b/src/contents/index/components/Footer.tsx
index 03ac39b6..04f4e784 100644
--- a/src/contents/index/components/Footer.tsx
+++ b/src/contents/index/components/Footer.tsx
@@ -10,7 +10,7 @@ function Footer(): JSX.Element {
     return (
         <footer>
             <Typography variant="small">
-                Bilibili Jimaku Filter - vup观众直播增强扩展
+                Bilibili Vup Stream Enhancer - vup观众直播增强扩展
             </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">
diff --git a/src/contents/index/mounter.tsx b/src/contents/index/mounter.tsx
index ab9cf512..8e7a64b6 100644
--- a/src/contents/index/mounter.tsx
+++ b/src/contents/index/mounter.tsx
@@ -218,17 +218,21 @@ function createApp(roomId: string, plasmo: PlasmoSpec, info: StreamInfo): App {
             }
 
             // unhook adapters
-            console.info('開始移除適配器....')
-            const unhooking = sendMessager('hook-adapter', { command: 'unhook' })
-            toast.dismiss()
-            toast.promise(unhooking, {
-                loading: '正在移除直播监听挂接...',
-                success: '移除成功',
-                error: (err) => '移除失敗: ' + err,
-                position: 'top-left'
-            })
-            await unhooking
-            console.info('移除適配器完成')
+            if (info.status === 'online') {
+                console.info('開始移除適配器....')
+                const unhooking = sendMessager('hook-adapter', { command: 'unhook' })
+                toast.dismiss()
+                toast.promise(unhooking, {
+                    loading: '正在移除直播监听挂接...',
+                    success: '移除成功',
+                    error: (err) => '移除失敗: ' + err,
+                    position: 'top-left'
+                })
+                await unhooking
+                console.info('移除適配器完成')
+            } else {
+                console.info('直播尚未開始或已下線，無需移除適配器')
+            }
 
             // 卸載功能元素
             console.info('開始卸載元素....')
diff --git a/src/features/jimaku/components/ButtonArea.tsx b/src/features/jimaku/components/ButtonArea.tsx
index a4a5a7e1..7056b3d7 100644
--- a/src/features/jimaku/components/ButtonArea.tsx
+++ b/src/features/jimaku/components/ButtonArea.tsx
@@ -1,10 +1,12 @@
-import { useContext } from "react";
+import { Fragment, useContext, useState } from "react";
 import JimakuFeatureContext from "~contexts/JimakuFeatureContext";
 import StreamInfoContext from "~contexts/StreamInfoContexts";
 import { useRecords } from "~hooks/records";
 import { usePopupWindow } from "~hooks/window";
 import JimakuButton from './JimakuButton';
 import type { Jimaku } from "./JimakuLine";
+import { createPortal } from "react-dom";
+import ButtonSwitchList from "./ButtonSwitchList";
 
 export type ButtonAreaProps = {
     clearJimaku: VoidFunction
@@ -18,6 +20,7 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
 
     const { order } = jimakuZone
     const { enabledRecording } = settings["settings.features"]
+    const { elements: { upperButtonArea } } = settings['settings.developer']
 
     const { createPopupWindow } = usePopupWindow(true, { width: 500 })
 
@@ -30,28 +33,38 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
         reverse: order === 'top'
     })
 
+    const [show, setShow] = useState(!info.isTheme)
+
     return (
-        <div style={{ backgroundColor: btnStyle.backgroundListColor }} className="text-center overflow-x-auto flex justify-center gap-3">
-            <JimakuButton onClick={deleteRecords}>
-                删除所有字幕记录
-            </JimakuButton>
-            {(enabledRecording.includes('jimaku') || info.status === 'online') &&
-                <JimakuButton onClick={downloadRecords}>
-                    下载字幕记录
-                </JimakuButton>
-            }
-            {info.status === 'online' && jimakuPopupWindow &&
-                <JimakuButton
-                    onClick={createPopupWindow(`jimaku.html`, {
-                        roomId: info.room,
-                        title: info.title,
-                        owner: info.username
-                    })}
-                >
-                    弹出同传视窗
-                </JimakuButton>
-            }
-        </div>
+        <Fragment>
+            {show && (
+                <div style={{ backgroundColor: btnStyle.backgroundListColor }} className="text-center overflow-x-auto flex justify-center gap-3">
+                    <JimakuButton onClick={deleteRecords}>
+                        删除所有字幕记录
+                    </JimakuButton>
+                    {(enabledRecording.includes('jimaku') || info.status === 'online') &&
+                        <JimakuButton onClick={downloadRecords}>
+                            下载字幕记录
+                        </JimakuButton>
+                    }
+                    {info.status === 'online' && jimakuPopupWindow &&
+                        <JimakuButton
+                            onClick={createPopupWindow(`jimaku.html`, {
+                                roomId: info.room,
+                                title: info.title,
+                                owner: info.username
+                            })}
+                        >
+                            弹出同传视窗
+                        </JimakuButton>
+                    }
+                </div>
+            )}
+            {info.isTheme && document.querySelector(upperButtonArea) !== null && createPortal(
+                <ButtonSwitchList switched={show} onClick={() => setShow(!show)} />,
+                document.querySelector(upperButtonArea)
+            )}
+        </Fragment>
     )
 }
 
diff --git a/src/features/jimaku/components/ButtonSwitchList.tsx b/src/features/jimaku/components/ButtonSwitchList.tsx
new file mode 100644
index 00000000..4c2c887c
--- /dev/null
+++ b/src/features/jimaku/components/ButtonSwitchList.tsx
@@ -0,0 +1,31 @@
+import { Fragment } from "react"
+
+
+export type ButtonSwitchListProps = {
+    onClick: VoidFunction
+    switched: boolean
+}
+
+function ButtonSwitchList(props: ButtonSwitchListProps): JSX.Element {
+
+    const { onClick, switched } = props
+
+
+    return (
+        <Fragment>
+            <button
+                style={{
+                    backgroundColor: switched ? '#4CAF50' : '#f44336',
+                    color: 'white'
+                }}
+                onClick={onClick}
+                className="px-[5px] ml-[5px] py-[3px] rounded-md hover:brightness-90 shadow-md transition-all duration-300 ease-in-out"
+            >
+                切换字幕按钮列表
+            </button>
+        </Fragment>
+    )
+}
+
+
+export default ButtonSwitchList
\ No newline at end of file
diff --git a/src/features/jimaku/components/JimakuArea.tsx b/src/features/jimaku/components/JimakuArea.tsx
index d3efb066..8e81e513 100644
--- a/src/features/jimaku/components/JimakuArea.tsx
+++ b/src/features/jimaku/components/JimakuArea.tsx
@@ -1,18 +1,17 @@
 import { Fragment, useContext, useEffect, useMemo, useState } from 'react';
 
+import styled from '@emotion/styled';
+import { Rnd } from 'react-rnd';
 import ConditionalWrapper from '~components/ConditionalWrapper';
+import JimakuFeatureContext from '~contexts/JimakuFeatureContext';
+import StreamInfoContext from '~contexts/StreamInfoContexts';
+import { useWebScreenChange } from '~hooks/bilibili';
+import { useTeleport } from '~hooks/teleport';
+import type { JimakuSchema } from '~settings/features/jimaku/components/JimakuFragment';
+import { rgba } from '~utils/misc';
 import type { Jimaku } from "./JimakuLine";
 import JimakuList from './JimakuList';
 import JimakuVisibleButton from './JimakuVisibleButton';
-import { Rnd } from 'react-rnd';
-import type { Settings } from "~settings";
-import { rgba } from '~utils/misc';
-import styled from '@emotion/styled';
-import { useTeleport } from '~hooks/teleport';
-import { useWebScreenChange } from '~hooks/bilibili';
-import StreamInfoContext from '~contexts/StreamInfoContexts';
-import JimakuFeatureContext from '~contexts/JimakuFeatureContext';
-import type { JimakuSchema } from '~settings/features/jimaku/components/JimakuFragment';
 
 const createJimakuScope = (jimakuStyle: JimakuSchema) => styled.div`
 
@@ -58,7 +57,7 @@ export type JimakuAreaProps = {
 
 function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
 
-    const { settings } = useContext(StreamInfoContext)
+    const { settings, info: { isTheme } } = useContext(StreamInfoContext)
     const { jimakuZone: jimakuStyle } = useContext(JimakuFeatureContext)
 
     const dev = settings['settings.developer']
@@ -68,7 +67,9 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
     useEffect(() => {
         // make danmaku chat list peer with video 
         const chatListArea = document.querySelector('div#aside-area-vm') as HTMLDivElement
-        chatListArea.style.marginBottom = `${jimakuStyle.backgroundHeight + 30}px`
+        if (!isTheme) {
+            chatListArea.style.marginBottom = `${jimakuStyle.backgroundHeight + 30}px`
+        }
         return () => {
             document.querySelector('div#jimaku-full-area')?.remove()
             delete chatListArea.style.marginBottom
@@ -83,7 +84,7 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
         placement: (parent, child) => {
             parent.insertAdjacentElement('afterend', child)
         },
-        shouldPlace: (status) => status !== 'normal'
+        shouldPlace: (status) => status !== 'normal' || isTheme
     })
 
     const subTitleStyle: React.CSSProperties = {
@@ -96,7 +97,7 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
 
     const [visible, setVisible] = useState(true)
 
-    if (screenStatus !== 'normal') {
+    if (screenStatus !== 'normal' || isTheme) {
         subTitleStyle.position = 'absolute'
         subTitleStyle.cursor = 'move'
         subTitleStyle.width = '100%'
@@ -110,7 +111,7 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
                 <Area>
                     <ConditionalWrapper
                         as={Rnd}
-                        condition={screenStatus !== 'normal'}
+                        condition={screenStatus !== 'normal' || isTheme}
                         bounds={dev.elements.webPlayer}
                         style={{ zIndex: 9999, display: visible ? 'block' : 'none' }}
                         minHeight={100}
diff --git a/src/features/jimaku/components/JimakuCaptureLayer.tsx b/src/features/jimaku/components/JimakuCaptureLayer.tsx
index 3bb4f38f..0ba8563f 100644
--- a/src/features/jimaku/components/JimakuCaptureLayer.tsx
+++ b/src/features/jimaku/components/JimakuCaptureLayer.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useCallback, useContext, useRef, useState } from 'react';
 import { getTimeStamp, randomString, toStreamingTime } from '~utils/misc';
 
-import { useInterval } from '@react-hooks-library/core';
 import { sendForward } from '~background/forwards';
 import StreamInfoContext from '~contexts/StreamInfoContexts';
 import db from '~database';
diff --git a/src/features/superchat/components/SuperChatArea.tsx b/src/features/superchat/components/SuperChatArea.tsx
index 29db6388..2171ce57 100644
--- a/src/features/superchat/components/SuperChatArea.tsx
+++ b/src/features/superchat/components/SuperChatArea.tsx
@@ -34,10 +34,10 @@ function SuperChatArea(props: SuperChatAreaProps): JSX.Element {
     return (
         <div className="p-[5px] pt-[5px] rounded-md inline-block">
             <section className="px-[5px] flex justify-center items-center gap-2">
-                <button style={{backgroundColor: buttonColor}} onClick={downloadRecords} className="hover:brightness-95 dark:bg-gray-700 dark:hover:bg-gray-800 text-white font-bold py-2 px-4 rounded-sm">
+                <button style={{backgroundColor: buttonColor}} onClick={downloadRecords} className="hover:brightness-90 dark:bg-gray-700 dark:hover:bg-gray-800 text-white font-bold py-2 px-4 rounded-sm">
                     导出醒目留言记录
                 </button>
-                <button style={{backgroundColor: buttonColor}} onClick={deleteRecords} className="hover:brightness-95 dark:bg-gray-700 dark:hover:bg-gray-800 text-white font-bold py-2 px-4 rounded-sm">
+                <button style={{backgroundColor: buttonColor}} onClick={deleteRecords} className="hover:brightness-90 dark:bg-gray-700 dark:hover:bg-gray-800 text-white font-bold py-2 px-4 rounded-sm">
                     刪除所有醒目留言记录
                 </button>
             </section>
diff --git a/src/features/superchat/components/SuperChatFloatingButton.tsx b/src/features/superchat/components/SuperChatFloatingButton.tsx
index b495f8bc..fb76595f 100644
--- a/src/features/superchat/components/SuperChatFloatingButton.tsx
+++ b/src/features/superchat/components/SuperChatFloatingButton.tsx
@@ -21,7 +21,7 @@ function SuperChatFloatingButton({ children }: SuperChatFloatingButtonProps): JS
     return (
         <ShadowRoot>
             <style>{styleText}</style>
-            <DraggableFloatingButton style={{ backgroundColor: floatingButtonColor }} onClick={e => show({ event: e })} className='hover:brightness-95 duration-150 dark:bg-gray-700 dark:hover:bg-gray-800 text-white'>
+            <DraggableFloatingButton style={{ backgroundColor: floatingButtonColor }} onClick={e => show({ event: e })} className='hover:brightness-90 duration-150 dark:bg-gray-700 dark:hover:bg-gray-800 text-white'>
                 <div className="group-hover:animate-pulse">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-10 h-10">
                         <path strokeLinecap="round" strokeLinejoin="round" d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
diff --git a/src/features/superchat/index.tsx b/src/features/superchat/index.tsx
index 6f12db91..c5b15370 100644
--- a/src/features/superchat/index.tsx
+++ b/src/features/superchat/index.tsx
@@ -63,9 +63,9 @@ const handler: FeatureHookRender = async (settings, info) => {
         >
             {(records) => {
                 const offlineRecords = [...superchats, ...records.map((r) => ({ ...r, id: r.scId, persist: true }))]
-                return (
+                return offlineRecords.length ? (
                     <SuperChatCaptureLayer offlineRecords={offlineRecords} />
-                )
+                ) : null
             }}
         </OfflineRecordsProvider>
     ]
diff --git a/src/settings/features/jimaku.tsx b/src/settings/features/jimaku.tsx
deleted file mode 100644
index 22724d8a..00000000
--- a/src/settings/features/jimaku.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { type ChangeEvent, Fragment } from "react"
-import type { FeatureSettingsDefinition } from "."
-import type { StateProxy } from "~hooks/binding"
-import ExperienmentFeatureIcon from "~settings/components/ExperientmentFeatureIcon"
-import SwitchListItem from "~settings/components/SwitchListItem"
-
-
-export const title: string = '同传弹幕过滤'
-
-export const define: FeatureSettingsDefinition= {
-    offlineTable: 'jimakus'
-}
-
-export type FeatureSettingSchema = {
-    noNativeVtuber: boolean
-    jimakuPopupWindow: boolean
-}
-
-export const defaultSettings: Readonly<FeatureSettingSchema> = {
-    noNativeVtuber: false,
-    jimakuPopupWindow: false
-}
-
-
-function JimakuFeatureSettings({ state, useHandler }: StateProxy<FeatureSettingSchema>): JSX.Element {
-
-    const checker = useHandler<ChangeEvent<HTMLInputElement>, boolean>(e => e.target.checked)
-
-    return (
-        <Fragment>
-            <SwitchListItem
-                label="过滤国内虚拟主播"
-                hint="此功能目前处于测试阶段, 因此无法过滤所有的国V"
-                value={state.noNativeVtuber}
-                onChange={checker('noNativeVtuber')}
-                marker={<ExperienmentFeatureIcon />}
-            />
-            <SwitchListItem label="启用同传弹幕彈出式视窗" hint="使用弹出式视窗时必须开着直播间才能运行" value={state.jimakuPopupWindow} onChange={checker('jimakuPopupWindow')} />
-        </Fragment>
-    )
-}
-
-
-export default JimakuFeatureSettings
\ No newline at end of file
diff --git a/src/settings/features/superchat.tsx b/src/settings/features/superchat.tsx
deleted file mode 100644
index b84914c3..00000000
--- a/src/settings/features/superchat.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { FeatureSettingsDefinition } from "."
-
-export const title: string = '醒目留言'
-
-export const define: FeatureSettingsDefinition = {
-    offlineTable: 'superchats'
-}
-
-export type FeatureSettingSchema = {}
-
-export const defaultSettings: Readonly<FeatureSettingSchema> = {}
-
-
-function SuperchatFeatureSettings(): JSX.Element {
-    return (
-        <></>
-    )
-}
-
-
-export default SuperchatFeatureSettings
\ No newline at end of file
diff --git a/src/settings/fragments/developer.tsx b/src/settings/fragments/developer.tsx
index 504adc35..7f168167 100644
--- a/src/settings/fragments/developer.tsx
+++ b/src/settings/fragments/developer.tsx
@@ -36,7 +36,7 @@ export type SettingSchema = {
 
 export const defaultSettings: Readonly<SettingSchema> = {
     elements: {
-        upperButtonArea: '.rows-ctnr', // 上方按钮界面元素
+        upperButtonArea: '.lower-row .left-ctnr', // 上方按钮界面元素
         webPlayer: '.web-player-danmaku', // 播放器元素
         danmakuArea: '.danmaku-item-container', // 弹幕容器元素
         userName: '.room-owner-username', // 用户 ID 元素
diff --git a/src/settings/fragments/features.tsx b/src/settings/fragments/features.tsx
index c13d547b..dcbf505d 100644
--- a/src/settings/fragments/features.tsx
+++ b/src/settings/fragments/features.tsx
@@ -126,11 +126,11 @@ function FeatureSettings({ state, useHandler }: StateProxy<SettingSchema>): JSX.
                 </List>
             </div>
             {...featureTypes.map((f: FeatureType) => {
-
                 // mechanism same as src/settings/components/SettingFragment.tsx
                 type F = typeof f
                 const setting = settings[f] as FeatureSettings[F]
                 const Component = setting.default as React.FC<StateProxy<FeatureSettingSchema<FeatureSettings[F]>>>
+                console.info(state)
                 const props = asStateProxy(useBinding(state[f], true))
 
                 return (
@@ -143,7 +143,7 @@ function FeatureSettings({ state, useHandler }: StateProxy<SettingSchema>): JSX.
                             </div>
                         } crossOrigin={'annoymous'} checked={state.enabledFeatures.includes(f)} onChange={e => toggle(f)} />
                         <Collapse open={state.enabledFeatures.includes(f)}>
-                            <div className="px-5 py-5 grid max-md:grid-cols-1 md:grid-cols-2 gap-10">
+                            <div className="px-5 mt-5 pb-5 grid max-md:grid-cols-1 md:grid-cols-2 gap-10 overflow-y-auto max-h-[70vh] bjf-scrollbar">
                                 <List className='col-span-2 border border-[#808080] rounded-md'>
                                     {setting.define.offlineTable !== false && (
                                         <SwitchListItem
diff --git a/src/settings/fragments/listings.tsx b/src/settings/fragments/listings.tsx
index 1dfa1baa..8232be84 100644
--- a/src/settings/fragments/listings.tsx
+++ b/src/settings/fragments/listings.tsx
@@ -30,12 +30,7 @@ export type SettingSchema = {
 export const defaultSettings: Readonly<SettingSchema> = {
     tongchuanMans: [],
     tongchuanBlackList: [],
-    blackListRooms: [
-        {
-            room: '1',
-            addedDate: '2021/1/1'
-        }
-    ],
+    blackListRooms: [],
     useAsWhiteListRooms: false
 }
 
diff --git a/src/tabs/stream.tsx b/src/tabs/stream.tsx
index 4fee4e8f..a5b4cc52 100644
--- a/src/tabs/stream.tsx
+++ b/src/tabs/stream.tsx
@@ -216,17 +216,19 @@ function App(): JSX.Element {
             <PromiseHandler promise={getStreamUrls}>
                 <PromiseHandler.Error>
                     {error => (
-                        <div className="flex justify-center items-center text-center h-full w-full">
-                            <div className="text-red-500">
+                        <div className="flex flex-col justify-center items-center text-center h-screen w-full gap-5 text-red-500">
+                            <div>
                                 <Typography variant="h5" color="red" className="semi-bold">加载错误:</Typography>
-                                <span className="text-[17px]">{error.message}</span>
-                                <Button color="red" onClick={() => location.reload()}>重试</Button>
                             </div>
+                            <div>
+                                <span className="text-[17px]">{error.message}</span><br />
+                            </div>
+                            <Button color="red" size='sm' className='text-lg' onClick={() => location.reload()}>重试</Button>
                         </div>
                     )}
                 </PromiseHandler.Error>
                 <PromiseHandler.Loading>
-                    <div className="flex justify-center items-center text-center h-full w-full">
+                    <div className="flex justify-center items-center text-center h-screen w-full">
                         <div className="text-gray-500">
                             <Typography variant="h5" color="gray" className="semi-bold animate-pulse">加载中...</Typography>
                         </div>
diff --git a/src/utils/bilibili.ts b/src/utils/bilibili.ts
index 9175c578..dfa6546e 100644
--- a/src/utils/bilibili.ts
+++ b/src/utils/bilibili.ts
@@ -109,6 +109,7 @@ export function parseJimaku(danmaku: string, regex: string) {
     return name && danmaku ? `${name}: ${danmaku}` : danmaku
 }
 
+// TODO: this become secondary function, primary function use fetch room info instead
 export function isThemePage(): boolean {
     return location.pathname.indexOf('blanc') > -1 && location.search.indexOf('liteVersion') > -1
 }
diff --git a/src/utils/misc.ts b/src/utils/misc.ts
index d67c258a..270d05e0 100644
--- a/src/utils/misc.ts
+++ b/src/utils/misc.ts
@@ -91,6 +91,7 @@ export function randomNumber(length: number = 20): number {
 // assign default value without coping the object
 // also works with nested object
 export function assignDefaults<T extends object>(data: T, defaults: T): T {
+    if (Array.isArray(data)) return data
     const newData = { ...data }
     Object.keys(defaults).forEach((key) => {
         if (newData[key] === undefined) {