fixed querySelector first not attached issue

Author: eric2788

src/features/jimaku/components/ButtonArea.tsx

@@ -12,6 +12,7 @@ import { toast } from "sonner/dist";
 import { sendMessager } from "~utils/messaging";
 import { sendForward } from "~background/forwards";
 import { sleep } from "~utils/misc";
+import { useQuerySelector } from "~hooks/dom";
 
 export type ButtonAreaProps = {
     clearJimaku: VoidFunction
@@ -50,6 +51,11 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
         sendForward('pages', 'jimaku-summarize', { roomId: info.room, jimakus: jimakus.map(j => j.text) })
     }
 
+    const upperHeaderAreaElement = useQuerySelector(upperHeaderArea)
+    if (info.isTheme && upperHeaderAreaElement === null) {
+        console.warn(`找不到上方标题界面元素 ${upperHeaderArea}，可能无法插入切換按鈕列表的按钮`)
+    }
+
     return (
         <Fragment>
             {show && (
@@ -80,11 +86,11 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
                     )}
                 </div>
             )}
-            {info.isTheme && document.querySelector(upperHeaderArea) !== null && createPortal(
+            {info.isTheme && upperHeaderAreaElement !== null && createPortal(
                 <TailwindScope>
                     <ButtonSwitchList switched={show} onClick={() => setShow(!show)} />
                 </TailwindScope>,
-                document.querySelector(upperHeaderArea)
+                upperHeaderAreaElement
             )}
         </Fragment>
     )

src/features/jimaku/components/JimakuList.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { Item, Menu, useContextMenu, type ItemParams } from 'react-contexify';
 import { toast } from 'sonner/dist';
-import { useKeepBottom } from '~hooks/keep-bottom';
+import { useKeepBottom } from '~hooks/dom';
 import { useScrollOptimizer } from '~hooks/optimizer';
 import { getSettingStorage, setSettingStorage } from '~utils/storage';
 

src/features/jimaku/components/JimakuVisibleButton.tsx

@@ -1,6 +1,7 @@
 import { createPortal } from 'react-dom'
 import styled from '@emotion/styled'
 import type { SettingSchema } from "~options/fragments/developer"
+import { useQuerySelector } from "~hooks/dom"
 
 export type JimakuVisibleButtonProps = {
     toggle: VoidFunction
@@ -21,7 +22,7 @@ const Div = styled.div`
 
 function JimakuVisibleButton({ toggle, visible, dev }: JimakuVisibleButtonProps): JSX.Element {
 
-    const element = document.querySelector(dev.elements.upperInputArea)
+    const element = useQuerySelector(dev.elements.upperInputArea)
     if (!element) {
         console.warn(`找不到元素 ${dev.elements.upperInputArea}，部分功能可能无法正常工作`)
         return null

src/features/jimaku/index.tsx

@@ -14,6 +14,7 @@ import type { FeatureHookRender } from "..";
 import JimakuCaptureLayer from './components/JimakuCaptureLayer';
 import JimakuAreaSkeleton from './components/JimakuAreaSkeleton';
 import JimakuAreaSkeletonError from './components/JimakuAreaSkeletonError';
+import { useQuerySelector } from "~hooks/dom";
 
 
 
@@ -35,7 +36,7 @@ export function App(): JSX.Element {
 
     const dev = settings['settings.developer']
 
-    const danmakuArea = document.querySelector(dev.elements.danmakuArea)
+    const danmakuArea = useQuerySelector(dev.elements.danmakuArea)
     if (!danmakuArea) {
         toast.warning(`找不到弹幕区域 ${dev.elements.danmakuArea}，部分功能可能无法正常工作`)
     }

src/features/recorder/components/RecorderButton.tsx

@@ -4,6 +4,7 @@ import { useContext, useState, type MutableRefObject } from "react"
 import TailwindScope from "~components/TailwindScope"
 import ContentContext from "~contexts/ContentContexts"
 import RecorderFeatureContext from "~contexts/RecorderFeatureContext"
+import { useQuerySelector } from "~hooks/dom"
 import { useForceRender } from "~hooks/force-update"
 import { useComputedStyle, useContrast } from "~hooks/styles"
 import type { Recorder } from "~types/media"
@@ -25,7 +26,7 @@ function RecorderButton(props: RecorderButtonProps): JSX.Element {
     const [recording, setRecording] = useState(false)
     const update = useForceRender()
     const { headInfoArea } = settings['settings.developer'].elements
-    const { backgroundImage } = useComputedStyle(document.querySelector(headInfoArea))
+    const { backgroundImage } = useComputedStyle(useQuerySelector(headInfoArea))
 
     useInterval(() => {
         if (!recorder.current) return

src/features/recorder/components/RecorderLayer.tsx

@@ -16,6 +16,7 @@ import { randomString } from '~utils/misc'
 import createRecorder from "../recorders"
 import ProgressText from "./ProgressText"
 import RecorderButton from "./RecorderButton"
+import { useQuerySelector } from "~hooks/dom"
 
 export type RecorderLayerProps = {
     urls: StreamUrls
@@ -202,7 +203,11 @@ function RecorderLayer(props: RecorderLayerProps): JSX.Element {
         screenshot()
     })
 
-    if (hiddenUI || document.querySelector(upperHeaderArea) === null) {
+    const upperHeaderAreaElement = useQuerySelector(upperHeaderArea)
+    if (hiddenUI || upperHeaderAreaElement === null) {
+        if (!hiddenUI) {
+            console.warn(upperHeaderArea, 'is not attached yet')
+        }
         return null
     }
 
@@ -212,7 +217,7 @@ function RecorderLayer(props: RecorderLayerProps): JSX.Element {
             record={clipRecord}
             screenshot={screenshot}
         />,
-        document.querySelector(upperHeaderArea)
+        upperHeaderAreaElement
     )
 
 }

src/hooks/keep-bottom.ts src/hooks/dom.ts

@@ -1,3 +1,4 @@
+import { useInterval } from "@react-hooks-library/core"
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 /**
@@ -57,4 +58,43 @@ export function useKeepBottom<E extends HTMLElement>(enabled: boolean, calculate
     }, [])
 
     return { ref: refCallback, element: ref, keepBottom }
+}
+
+
+
+
+/**
+ * Custom hook that queries the DOM for an element matching the given selector.
+ * Optionally, it can remount and re-query the DOM at a specified interval.
+ *
+ * @param {string} selector - The CSS selector to query the DOM.
+ * @param {boolean} [remount=false] - If true, the hook will re-query the DOM at the specified interval.
+ * @returns {Element | null} - The DOM element matching the selector, or null if no element is found.
+ *
+ * @example
+ * // Usage in a React component
+ * const MyComponent = () => {
+ *   const element = useQuerySelector('#my-element', true);
+ *   
+ *   useEffect(() => {
+ *     if (element) {
+ *       console.log('Element found:', element);
+ *     }
+ *   }, [element]);
+ *   
+ *   return <div>Check the console for the element.</div>;
+ * };
+ */
+export function useQuerySelector<E extends Element>(selector: string, remount: boolean = false): E | null {
+    
+    const [element, setElement] = useState<Element | null>(document.querySelector(selector))
+
+    useInterval(() => {
+        const el = document.querySelector(selector)
+        if (el) {
+            setElement(el)
+        }
+    }, 500, { paused: !remount && !!element, immediate: true })
+
+    return element as E
 }

src/hooks/styles.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 
 export function useComputedStyle(element: Element): CSSStyleDeclaration {
-    return useMemo(() => window.getComputedStyle(element), [element]);
+    return useMemo(() => element ? window.getComputedStyle(element) : {} as CSSStyleDeclaration, [element]);
 }
 
 export function useContrast(background: Element) {