Function BackgroundStudio

src/tools/background-studio/BackgroundStudio.jsx:129–658

({ toolSelector })

BackgroundRenderer.displayName = 'BackgroundRenderer';

export default function BackgroundStudio({ toolSelector }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const [mobileControlsOpen, setMobileControlsOpen] = useState(false);
  const isMobile = useBreakpointValue({ base: true, lg: false });

  const [localProps, setLocalProps] = useState({});
  const [renderKey, setRenderKey] = useState(0);
  const [isRecording, setIsRecording] = useState(false);
  const [recordingProgress, setRecordingProgress] = useState(0);
  const [canvasBg, setCanvasBg] = useState('#120F17');
  const debounceTimer = useRef(null);
  const previewRef = useRef(null);
  const mediaRecorderRef = useRef(null);
  const recordingAnimationRef = useRef(null);
  const recordingIntervalRef = useRef(null);
  const recordingTimeoutRef = useRef(null);

  const backgroundId = searchParams.get('bg') || 'silk';

  const background = useMemo(() => {
    return getBackgroundById(backgroundId) || BACKGROUNDS[0];
  }, [backgroundId]);

  const customProps = useMemo(() => {
    if (!background?.props) return {};
    const parsed = {};
    for (const propDef of background.props) {
      const value = searchParams.get(propDef.name);
      if (value !== null) {
        if (propDef.type === 'number') {
          parsed[propDef.name] = Number(value);
        } else if (propDef.type === 'boolean') {
          parsed[propDef.name] = value === 'true';
        } else if (propDef.type === 'colorArray') {
          parsed[propDef.name] = value.split(',').map(c => (c.startsWith('#') ? c : `#${c}`));
        } else if (propDef.type === 'color') {
          parsed[propDef.name] = value.startsWith('#') ? value : `#${value}`;
        } else if (propDef.type === 'rgbArray') {
          parsed[propDef.name] = value.split(',').map(Number);
        } else {
          parsed[propDef.name] = value;
        }
      }
    }
    return parsed;
  }, [background, searchParams]);

  const baseProps = useMemo(() => {
    const defaults = getDefaultProps(background);
    return { ...defaults, ...customProps };
  }, [background, customProps]);

  const props = useMemo(() => {
    return { ...baseProps, ...localProps };
  }, [baseProps, localProps]);

  useEffect(() => {
    setLocalProps({});