Merge pull request #1703 from hydralauncher/fix/HYD-827

fix: shadow dom to isolate achievements window and custom css refactor

Author: zamitto

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",
@@ -69,6 +69,7 @@
     "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
+    "react-shadow": "^20.6.0",
     "react-tooltip": "^5.28.0",
     "sound-play": "^1.1.0",
     "steam-shortcut-editor": "https://github.com/hydralauncher/steam-shortcut-editor",

src/main/events/themes/toggle-custom-theme.ts

@@ -1,5 +1,6 @@
 import { themesSublevel } from "@main/level";
 import { registerEvent } from "../register-event";
+import { WindowManager } from "@main/services";
 
 const toggleCustomTheme = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -17,6 +18,8 @@ const toggleCustomTheme = async (
     isActive,
     updatedAt: new Date(),
   });
+
+  WindowManager.notificationWindow?.webContents.send("on-custom-theme-updated");
 };
 
 registerEvent("toggleCustomTheme", toggleCustomTheme);

src/main/events/themes/update-custom-theme.ts

@@ -20,8 +20,10 @@ const updateCustomTheme = async (
   });
 
   if (theme.isActive) {
-    WindowManager.mainWindow?.webContents.send("css-injected", code);
-    WindowManager.notificationWindow?.webContents.send("css-injected", code);
+    WindowManager.mainWindow?.webContents.send("on-custom-theme-updated");
+    WindowManager.notificationWindow?.webContents.send(
+      "on-custom-theme-updated"
+    );
   }
 };
 

src/main/services/window-manager.ts

@@ -289,6 +289,13 @@ export class WindowManager {
     const display = screen.getPrimaryDisplay();
     const { width, height } = display.workAreaSize;
 
+    if (position === "bottom-left") {
+      return {
+        x: 0,
+        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
+      };
+    }
+
     if (position === "bottom-center") {
       return {
         x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
@@ -310,13 +317,6 @@ export class WindowManager {
       };
     }
 
-    if (position === "bottom-left") {
-      return {
-        x: 0,
-        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
-      };
-    }
-
     if (position === "top-right") {
       return {
         x: width - this.NOTIFICATION_WINDOW_WIDTH,
@@ -356,6 +356,7 @@ export class WindowManager {
       maximizable: false,
       autoHideMenuBar: true,
       minimizable: false,
+      backgroundColor: "#00000000",
       focusable: false,
       skipTaskbar: true,
       frame: false,
@@ -372,8 +373,13 @@ export class WindowManager {
     // this.notificationWindow.setVisibleOnAllWorkspaces(true, {
     //   visibleOnFullScreen: true,
     // });
+
     this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
     this.loadNotificationWindowURL();
+
+    if (isStaging) {
+      this.notificationWindow.webContents.openDevTools();
+    }
   }
 
   public static async showAchievementTestNotification() {

src/preload/index.ts

@@ -462,11 +462,11 @@ contextBridge.exposeInMainWorld("electron", {
   /* Editor */
   openEditorWindow: (themeId: string) =>
     ipcRenderer.invoke("openEditorWindow", themeId),
-  onCssInjected: (cb: (cssString: string) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, cssString: string) =>
-      cb(cssString);
-    ipcRenderer.on("css-injected", listener);
-    return () => ipcRenderer.removeListener("css-injected", listener);
+  onCustomThemeUpdated: (cb: () => void) => {
+    const listener = (_event: Electron.IpcRendererEvent) => cb();
+    ipcRenderer.on("on-custom-theme-updated", listener);
+    return () =>
+      ipcRenderer.removeListener("on-custom-theme-updated", listener);
   },
   closeEditorWindow: (themeId?: string) =>
     ipcRenderer.invoke("closeEditorWindow", themeId),

src/renderer/src/app.tsx

@@ -28,7 +28,7 @@ import { downloadSourcesTable } from "./dexie";
 import { useSubscription } from "./hooks/use-subscription";
 import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
 
-import { injectCustomCss } from "./helpers";
+import { injectCustomCss, removeCustomCss } from "./helpers";
 import "./app.scss";
 
 export interface AppProps {
@@ -246,16 +246,26 @@ export function App() {
     };
   }, [updateRepacks]);
 
-  useEffect(() => {
-    const loadAndApplyTheme = async () => {
-      const activeTheme = await window.electron.getActiveCustomTheme();
+  const loadAndApplyTheme = useCallback(async () => {
+    const activeTheme = await window.electron.getActiveCustomTheme();
+    if (activeTheme?.code) {
+      injectCustomCss(activeTheme.code);
+    } else {
+      removeCustomCss();
+    }
+  }, []);
 
-      if (activeTheme?.code) {
-        injectCustomCss(activeTheme.code);
-      }
-    };
+  useEffect(() => {
     loadAndApplyTheme();
-  }, []);
+  }, [loadAndApplyTheme]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onCustomThemeUpdated(() => {
+      loadAndApplyTheme();
+    });
+
+    return () => unsubscribe();
+  }, [loadAndApplyTheme]);
 
   const playAudio = useCallback(() => {
     const audio = new Audio(achievementSound);
@@ -273,14 +283,6 @@ export function App() {
     };
   }, [playAudio]);
 
-  useEffect(() => {
-    const unsubscribe = window.electron.onCssInjected((cssString) => {
-      injectCustomCss(cssString);
-    });
-
-    return () => unsubscribe();
-  }, []);
-
   const handleToastClose = useCallback(() => {
     dispatch(closeToast());
   }, [dispatch]);

src/renderer/src/components/achievements/notification/achievement-notification.scss

@@ -141,7 +141,7 @@ $margin-bottom: 28px;
 
 .achievement-notification {
   width: 360px;
-  height: 192px;
+  height: 140px;
   display: flex;
 
   &--top-left {

src/renderer/src/components/achievements/notification/achievement-notification.tsx

@@ -3,10 +3,10 @@ import {
   AchievementNotificationInfo,
 } from "@types";
 import cn from "classnames";
-import "./achievement-notification.scss";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { EyeClosedIcon } from "@primer/octicons-react";
 import Ellipses from "@renderer/assets/icons/ellipses.png";
+import "./achievement-notification.scss";
 
 interface AchievementNotificationProps {
   position: AchievementCustomNotificationPosition;

src/renderer/src/declaration.d.ts

@@ -352,9 +352,7 @@ declare global {
 
     /* Editor */
     openEditorWindow: (themeId: string) => Promise<void>;
-    onCssInjected: (
-      cb: (cssString: string) => void
-    ) => () => Electron.IpcRenderer;
+    onCustomThemeUpdated: (cb: () => void) => () => Electron.IpcRenderer;
     closeEditorWindow: (themeId?: string) => Promise<void>;
   }
 

src/renderer/src/helpers.ts

@@ -55,35 +55,32 @@ export const buildGameAchievementPath = (
 export const darkenColor = (color: string, amount: number, alpha: number = 1) =>
   new Color(color).darken(amount).alpha(alpha).toString();
 
-export const injectCustomCss = (css: string) => {
+export const injectCustomCss = (
+  css: string,
+  target: HTMLElement = document.head
+) => {
   try {
-    const currentCustomCss = document.getElementById("custom-css");
-    if (currentCustomCss) {
-      currentCustomCss.remove();
-    }
+    target.querySelector("#custom-css")?.remove();
 
     if (css.startsWith(THEME_WEB_STORE_URL)) {
       const link = document.createElement("link");
       link.id = "custom-css";
       link.rel = "stylesheet";
       link.href = css;
-      document.head.appendChild(link);
+      target.appendChild(link);
     } else {
       const style = document.createElement("style");
       style.id = "custom-css";
       style.textContent = `
         ${css}
       `;
-      document.head.appendChild(style);
+      target.appendChild(style);
     }
   } catch (error) {
     console.error("failed to inject custom css:", error);
   }
 };
 
-export const removeCustomCss = () => {
-  const currentCustomCss = document.getElementById("custom-css");
-  if (currentCustomCss) {
-    currentCustomCss.remove();
-  }
+export const removeCustomCss = (target: HTMLElement = document.head) => {
+  target.querySelector("#custom-css")?.remove();
 };