Merge pull request #1708 from hydralauncher/fix/HYD-828

fix: ensure achievement notification preview has same styles as actual notification [HYD-828]

Author: zamitto

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",

src/locales/en/translation.json

@@ -379,7 +379,8 @@
     "platinum": "Platinum",
     "hidden": "Hidden",
     "test_notification": "Test notification",
-    "notification_preview": "Achievement Notification Preview"
+    "notification_preview": "Achievement Notification Preview",
+    "enable_friend_start_game_notifications": "When a friend starts playing a game"
   },
   "notifications": {
     "download_complete": "Download complete",

src/locales/pt-BR/translation.json

@@ -365,7 +365,8 @@
     "platinum": "Platina",
     "hidden": "Oculta",
     "test_notification": "Testar notificação",
-    "notification_preview": "Prévia da Notificação de Conquistas"
+    "notification_preview": "Prévia da Notificação de Conquistas",
+    "enable_friend_start_game_notifications": "Quando um amigo iniciar um jogo"
   },
   "notifications": {
     "download_complete": "Download concluído",

src/main/events/library/open-game-installer-path.ts

@@ -12,16 +12,14 @@ const openGameInstallerPath = async (
 ) => {
   const download = await downloadsSublevel.get(levelKeys.game(shop, objectId));
 
-  if (!download || !download.folderName || !download.downloadPath) return true;
+  if (!download?.folderName || !download.downloadPath) return;
 
   const gamePath = path.join(
     download.downloadPath ?? (await getDownloadsPath()),
-    download.folderName!
+    download.folderName
   );
 
   shell.showItemInFolder(gamePath);
-
-  return true;
 };
 
 registerEvent("openGameInstallerPath", openGameInstallerPath);

src/main/services/window-manager.ts

@@ -395,7 +395,16 @@ export class WindowManager {
     this.notificationWindow?.webContents.send(
       "on-achievement-unlocked",
       userPreferences.achievementCustomNotificationPosition ?? "top-left",
-      [generateAchievementCustomNotificationTest(t, language)]
+      [
+        generateAchievementCustomNotificationTest(t, language),
+        generateAchievementCustomNotificationTest(t, language, {
+          isRare: true,
+          isHidden: true,
+        }),
+        generateAchievementCustomNotificationTest(t, language, {
+          isPlatinum: true,
+        }),
+      ]
     );
   }
 
@@ -460,9 +469,8 @@ export class WindowManager {
         }
       });
 
-      editorWindow.webContents.on("before-input-event", (event, input) => {
+      editorWindow.webContents.on("before-input-event", (_event, input) => {
         if (input.key === "F12") {
-          event.preventDefault();
           this.mainWindow?.webContents.toggleDevTools();
         }
       });

src/main/services/ws/events/friend-game-session.ts

@@ -1,15 +1,25 @@
 import type { FriendGameSession } from "@main/generated/envelope";
+import { db, levelKeys } from "@main/level";
 import { HydraApi } from "@main/services/hydra-api";
 import { publishFriendStartedPlayingGameNotification } from "@main/services/notifications";
-import { GameStats } from "@types";
+import type { GameStats, UserPreferences, UserProfile } from "@types";
 
 export const friendGameSessionEvent = async (payload: FriendGameSession) => {
+  const userPreferences = await db.get<string, UserPreferences | null>(
+    levelKeys.userPreferences,
+    {
+      valueEncoding: "json",
+    }
+  );
+
+  if (userPreferences?.friendStartGameNotificationsEnabled === false) return;
+
   const [friend, gameStats] = await Promise.all([
-    HydraApi.get(`/users/${payload.friendId}`),
+    HydraApi.get<UserProfile>(`/users/${payload.friendId}`),
     HydraApi.get<GameStats>(
       `/games/stats?objectId=${payload.objectId}&shop=steam`
     ),
-  ]);
+  ]).catch(() => [null, null]);
 
   if (friend && gameStats) {
     publishFriendStartedPlayingGameNotification(friend, gameStats);

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

@@ -31,7 +31,7 @@ export function AchievementNotificationItem({
         [`${baseClassName}--platinum`]: achievement.isPlatinum,
       })}
     >
-      {achievement.points && (
+      {achievement.points !== undefined && (
         <div className="achievement-notification__chip">
           <HydraIcon className="achievement-notification__chip__icon" />
           <span className="achievement-notification__chip__label">

src/renderer/src/declaration.d.ts

@@ -139,10 +139,7 @@ declare global {
     verifyExecutablePathInUse: (executablePath: string) => Promise<Game>;
     getLibrary: () => Promise<LibraryGame[]>;
     openGameInstaller: (shop: GameShop, objectId: string) => Promise<boolean>;
-    openGameInstallerPath: (
-      shop: GameShop,
-      objectId: string
-    ) => Promise<boolean>;
+    openGameInstallerPath: (shop: GameShop, objectId: string) => Promise<void>;
     openGameExecutablePath: (shop: GameShop, objectId: string) => Promise<void>;
     openGame: (
       shop: GameShop,

src/renderer/src/pages/settings/settings-general.tsx

@@ -38,6 +38,7 @@ export function SettingsGeneral() {
     downloadNotificationsEnabled: false,
     repackUpdatesNotificationsEnabled: false,
     friendRequestNotificationsEnabled: false,
+    friendStartGameNotificationsEnabled: true,
     achievementNotificationsEnabled: true,
     achievementCustomNotificationsEnabled: true,
     achievementCustomNotificationPosition:
@@ -111,6 +112,8 @@ export function SettingsGeneral() {
           userPreferences.achievementCustomNotificationPosition ?? "top-left",
         friendRequestNotificationsEnabled:
           userPreferences.friendRequestNotificationsEnabled ?? false,
+        friendStartGameNotificationsEnabled:
+          userPreferences.friendStartGameNotificationsEnabled ?? true,
         language: language ?? "en",
       }));
     }
@@ -248,6 +251,17 @@ export function SettingsGeneral() {
         }
       />
 
+      <CheckboxField
+        label={t("enable_friend_start_game_notifications")}
+        checked={form.friendStartGameNotificationsEnabled}
+        onChange={() =>
+          handleChange({
+            friendStartGameNotificationsEnabled:
+              !form.friendStartGameNotificationsEnabled,
+          })
+        }
+      />
+
       <CheckboxField
         label={t("enable_achievement_notifications")}
         checked={form.achievementNotificationsEnabled}

src/renderer/src/pages/theme-editor/theme-editor.tsx

@@ -11,6 +11,9 @@ import { injectCustomCss } from "@renderer/helpers";
 import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
 import { generateAchievementCustomNotificationTest } from "@shared";
 import { CollapsedMenu } from "@renderer/components/collapsed-menu/collapsed-menu";
+import app from "../../app.scss?inline";
+import styles from "../../components/achievements/notification/achievement-notification.scss?inline";
+import root from "react-shadow";
 
 const notificationVariations = {
   default: "default",
@@ -36,14 +39,15 @@ export default function ThemeEditor() {
   const [notificationAlignment, setNotificationAlignment] =
     useState<AchievementCustomNotificationPosition>("top-left");
 
+  const [shadowRootRef, setShadowRootRef] = useState<HTMLElement | null>(null);
+
   const achievementPreview = useMemo(() => {
     return {
-      achievement: {
-        ...generateAchievementCustomNotificationTest(t, i18n.language),
+      achievement: generateAchievementCustomNotificationTest(t, i18n.language, {
         isRare: notificationVariation === "rare",
         isHidden: notificationVariation === "hidden",
         isPlatinum: notificationVariation === "platinum",
-      },
+      }),
       position: notificationAlignment,
     };
   }, [t, i18n.language, notificationVariation, notificationAlignment]);
@@ -58,22 +62,28 @@ export default function ThemeEditor() {
         if (loadedTheme) {
           setTheme(loadedTheme);
           setCode(loadedTheme.code);
+          if (shadowRootRef) {
+            injectCustomCss(loadedTheme.code, shadowRootRef);
+          }
         }
       });
     }
-  }, [themeId]);
+  }, [themeId, shadowRootRef]);
 
   const handleSave = useCallback(async () => {
     if (theme) {
       await window.electron.updateCustomTheme(theme.id, code);
       setHasUnsavedChanges(false);
       setIsClosingNotifications(true);
       setTimeout(() => {
-        injectCustomCss(code);
+        if (shadowRootRef) {
+          injectCustomCss(code, shadowRootRef);
+        }
+
         setIsClosingNotifications(false);
       }, 450);
     }
-  }, [code, theme]);
+  }, [code, theme, shadowRootRef]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -185,11 +195,18 @@ export default function ThemeEditor() {
             />
 
             <div className="theme-editor__notification-preview-wrapper">
-              <AchievementNotificationItem
-                position={achievementPreview.position}
-                achievement={achievementPreview.achievement}
-                isClosing={isClosingNotifications}
-              />
+              <root.div>
+                <style type="text/css">
+                  {app} {styles}
+                </style>
+                <section ref={(ref) => setShadowRootRef(ref)}>
+                  <AchievementNotificationItem
+                    position={achievementPreview.position}
+                    achievement={achievementPreview.achievement}
+                    isClosing={isClosingNotifications}
+                  />
+                </section>
+              </root.div>
             </div>
           </div>
         </CollapsedMenu>