fixed [MV3] 在大海报直播房间下正常运作 #43, added scrollbar and max-height for eac…

…h feature fragment settings
eric2788 · Jan 13, 2024 · dcb5430 · dcb5430
1 parent 6dc846b
commit dcb5430
Show file tree

Hide file tree

Showing 21 changed files with 135 additions and 146 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
     ]