background image

src/components/background/AppBackground.tsx

@@ -4,11 +4,15 @@ import { usePatternBackground } from "@/components/background/PatternBackgroundP
 import { THEME_BG_ELEMENT_ID } from "@/lib/helpers/themeCache";
 import { useLayoutEffect } from "react";
 
+const THEME_BG_IMG_ID = "cached-theme-bg-img";
+const THEME_BG_OVERLAY_ID = "cached-theme-bg-overlay";
+
 export default function AppBackground() {
-  const { isPattern, backgroundStyle } = usePatternBackground();
+  const { isPattern, backgroundStyle, isCustomImage, customImageSettings } =
+    usePatternBackground();
 
   useLayoutEffect(() => {
-    if (!isPattern) {
+    if (!isPattern && !isCustomImage) {
       document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
       return;
     }
@@ -25,8 +29,53 @@ export default function AppBackground() {
       document.body.appendChild(element);
     }
 
-    Object.assign(element.style, backgroundStyle as Record<string, string>);
-  }, [backgroundStyle, isPattern]);
+    if (isPattern) {
+      element.style.overflow = "";
+      document.getElementById(THEME_BG_IMG_ID)?.remove();
+      document.getElementById(THEME_BG_OVERLAY_ID)?.remove();
+      Object.assign(element.style, backgroundStyle as Record<string, string>);
+      return;
+    }
+
+    if (isCustomImage && customImageSettings) {
+      const { bgUrl, bgBlur, bgOpacity, bgOverlay } = customImageSettings;
+
+      element.style.backgroundColor = "";
+      element.style.backgroundImage = "";
+      element.style.overflow = "hidden";
+
+      let imgLayer = document.getElementById(THEME_BG_IMG_ID);
+      if (!imgLayer) {
+        imgLayer = document.createElement("div");
+        imgLayer.id = THEME_BG_IMG_ID;
+        imgLayer.style.position = "absolute";
+        imgLayer.style.inset = "-40px";
+        imgLayer.style.backgroundSize = "cover";
+        imgLayer.style.backgroundPosition = "center";
+        imgLayer.style.backgroundRepeat = "no-repeat";
+        element.appendChild(imgLayer);
+      }
+
+      imgLayer.style.backgroundImage = `url("${bgUrl}")`;
+      imgLayer.style.filter = bgBlur ? `blur(${bgBlur}px)` : "";
+      imgLayer.style.opacity =
+        bgOpacity != null ? String(bgOpacity / 100) : "1";
+
+      let overlayLayer = document.getElementById(THEME_BG_OVERLAY_ID);
+      if (!overlayLayer) {
+        overlayLayer = document.createElement("div");
+        overlayLayer.id = THEME_BG_OVERLAY_ID;
+        overlayLayer.style.position = "absolute";
+        overlayLayer.style.inset = "0";
+        element.appendChild(overlayLayer);
+      }
+
+      const overlayOpacity =
+        bgOverlay != null ? Number(bgOverlay) / 100 : 0;
+      overlayLayer.style.backgroundColor =
+        overlayOpacity > 0 ? `rgba(0,0,0,${overlayOpacity})` : "";
+    }
+  }, [backgroundStyle, isPattern, isCustomImage, customImageSettings]);
 
   return null;
 }