Function AppBackground

frontend/app/app-bg.tsx:19–62

()

}>;

export function AppBackground() {
    const bgRef = useRef<HTMLDivElement>(null);
    const tabId = useAtomValue(atoms.staticTabId);
    const [tabData] = useWaveObjectValue<Tab>(WOS.makeORef("tab", tabId));
    const env = useWaveEnv<AppBgEnv>();
    const tabBg = useAtomValue(env.getTabMetaKeyAtom(tabId, "tab:background"));
    const configBg = useAtomValue(env.getConfigBackgroundAtom(tabBg));
    const resolvedMeta: Omit<BackgroundConfigType, "display:name"> = tabBg && configBg ? configBg : tabData?.meta;
    const style: CSSProperties = computeBgStyleFromMeta(resolvedMeta, 0.5) ?? {};
    const getAvgColor = useCallback(
        debounce(30, () => {
            if (
                bgRef.current &&
                PLATFORM !== PlatformMacOS &&
                bgRef.current &&
                "windowControlsOverlay" in window.navigator
            ) {
                const titlebarRect: Dimensions = (window.navigator.windowControlsOverlay as any).getTitlebarAreaRect();
                const bgRect = bgRef.current.getBoundingClientRect();
                if (titlebarRect && bgRect) {
                    const windowControlsLeft = titlebarRect.width - titlebarRect.height;
                    const windowControlsRect: Dimensions = {
                        top: titlebarRect.top,
                        left: windowControlsLeft,
                        height: titlebarRect.height,
                        width: bgRect.width - bgRect.left - windowControlsLeft,
                    };
                    getApi().updateWindowControlsOverlay(windowControlsRect);
                }
            }
        }),
        [bgRef, style]
    );
    useLayoutEffect(getAvgColor, [getAvgColor]);
    useResizeObserver(bgRef, getAvgColor);

    return (
        <div
            ref={bgRef}
            className="pointer-events-none absolute top-0 left-0 w-full h-full z-[var(--zindex-app-background)]"
            style={style}
        />
    );
}