feat: adjust notifications code

src/main/index.ts

@@ -103,6 +103,7 @@ app.whenReady().then(async () => {
   }
 
   WindowManager.createMainWindow();
+  WindowManager.createNotificationWindow();
   WindowManager.createSystemTray(userPreferences?.language || "en");
 });
 

src/main/services/achievements/merge-achievements.ts

@@ -1,5 +1,4 @@
 import { gameAchievementRepository, gameRepository } from "@main/repository";
-import { publishNewAchievementNotification } from "../notifications";
 import type { GameShop, UnlockedAchievement } from "@types";
 import { WindowManager } from "../window-manager";
 import { HydraApi } from "../hydra-api";
@@ -76,15 +75,8 @@ export const mergeAchievements = async (
       WindowManager.notificationWindow?.setBounds({ y: 50 });
 
       setTimeout(() => {
-        WindowManager.notificationWindow?.setBounds({ y: -100 });
+        WindowManager.notificationWindow?.setBounds({ y: -9999 });
       }, 4000);
-
-      publishNewAchievementNotification(
-        game.title ?? "",
-        achievementInfo.displayName,
-        achievementInfo.icon,
-        newAchievements.length
-      );
     }
   }
 

src/main/services/notifications.ts

@@ -4,9 +4,6 @@ import { parseICO } from "icojs";
 import trayIcon from "@resources/tray-icon.png?asset";
 import { Game } from "@main/entity";
 import { gameRepository, userPreferencesRepository } from "@main/repository";
-import axios from "axios";
-import fs from "node:fs";
-import path from "node:path";
 
 const getGameIconNativeImage = async (gameId: number) => {
   try {
@@ -85,53 +82,4 @@ export const publishNotificationUpdateReadyToInstall = async (
   }).show();
 };
 
-const downloadImage = async (url: string, iconPath: string) => {
-  const response = await axios.get(url, { responseType: "stream" });
-  const writer = fs.createWriteStream(iconPath);
-  response.data.pipe(writer);
-
-  return new Promise((resolve, reject) => {
-    writer.on("finish", resolve);
-    writer.on("error", reject);
-  });
-};
-
-export const publishNewAchievementNotification = async (
-  game: string,
-  name: string,
-  iconUrl: string,
-  count: number
-) => {
-  const iconPath = path.join(
-    app.getPath("temp"),
-    iconUrl.split("/").pop() || "image.jpg"
-  );
-
-  await downloadImage(iconUrl, iconPath).catch(() => {});
-
-  if (count > 1) {
-    new Notification({
-      title: t("notification_achievement_unlocked_title", {
-        ns: "notifications",
-        game: game,
-      }),
-      body: t("notification_achievement_unlocked_body", {
-        ns: "notifications",
-        achievement: name,
-        count,
-      }),
-      icon: iconPath,
-    }).show();
-  } else {
-    new Notification({
-      title: t("notification_achievement_unlocked_title", {
-        ns: "notifications",
-        game: game,
-      }),
-      body: name,
-      icon: iconPath,
-    }).show();
-  }
-};
-
 export const publishNewFriendRequestNotification = async () => {};

src/main/services/window-manager.ts

@@ -21,7 +21,7 @@ export class WindowManager {
   public static mainWindow: Electron.BrowserWindow | null = null;
   public static notificationWindow: Electron.BrowserWindow | null = null;
 
-  private static loadURL(hash = "") {
+  private static loadMainWindowURL(hash = "") {
     // HMR for renderer base on electron-vite cli.
     // Load the remote URL for development or the local html file for production.
     if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
@@ -38,6 +38,21 @@ export class WindowManager {
     }
   }
 
+  private static loadNotificationWindowURL() {
+    if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+      this.notificationWindow?.loadURL(
+        `${process.env["ELECTRON_RENDERER_URL"]}#/achievement-notification`
+      );
+    } else {
+      this.notificationWindow?.loadFile(
+        path.join(__dirname, "../renderer/index.html"),
+        {
+          hash: "achievement-notification",
+        }
+      );
+    }
+  }
+
   public static createMainWindow() {
     if (this.mainWindow) return;
 
@@ -62,7 +77,7 @@ export class WindowManager {
       show: false,
     });
 
-    this.loadURL();
+    this.loadMainWindowURL();
     this.mainWindow.removeMenu();
 
     this.mainWindow.on("ready-to-show", () => {
@@ -81,7 +96,9 @@ export class WindowManager {
       WindowManager.mainWindow?.setProgressBar(-1);
       WindowManager.mainWindow = null;
     });
+  }
 
+  public static createNotificationWindow() {
     this.notificationWindow = new BrowserWindow({
       transparent: true,
       maximizable: false,
@@ -92,32 +109,18 @@ export class WindowManager {
       width: 240,
       height: 60,
       x: 25,
-      y: -100,
+      y: -9999,
       webPreferences: {
         preload: path.join(__dirname, "../preload/index.mjs"),
         sandbox: false,
       },
     });
-    if (!app.isPackaged)
-      WindowManager.notificationWindow?.webContents.openDevTools();
 
     this.notificationWindow.setVisibleOnAllWorkspaces(true, {
       visibleOnFullScreen: true,
     });
     this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
-
-    if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
-      this.notificationWindow.loadURL(
-        `${process.env["ELECTRON_RENDERER_URL"]}#/achievement-notification`
-      );
-    } else {
-      this.notificationWindow.loadFile(
-        path.join(__dirname, "../renderer/index.html"),
-        {
-          hash: "achievement-notification",
-        }
-      );
-    }
+    this.loadNotificationWindowURL();
   }
 
   public static openAuthWindow() {
@@ -164,7 +167,7 @@ export class WindowManager {
 
   public static redirect(hash: string) {
     if (!this.mainWindow) this.createMainWindow();
-    this.loadURL(hash);
+    this.loadMainWindowURL(hash);
 
     if (this.mainWindow?.isMinimized()) this.mainWindow.restore();
     this.mainWindow?.focus();

src/renderer/src/pages/achievement/achievement.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 export function Achievemnt() {
   const [achievementInfo, setAchievementInfo] = useState<{
@@ -6,35 +6,30 @@ export function Achievemnt() {
     icon: string;
   } | null>(null);
 
-  const [audio, setAudio] = useState<string | null>(null);
+  const audio = useMemo(() => {
+    const audio = new Audio(
+      "https://cms-public-artifacts.artlist.io/content/sfx/aac/94201_690187_Classics_-_Achievement_Unlocked_-_MASTERED_-_2496.aac"
+    );
+
+    audio.preload = "auto";
+    return audio;
+  }, []);
 
   useEffect(() => {
     const unsubscribe = window.electron.onAchievementUnlocked(
       (_object, _shop, displayName, icon) => {
-        console.log("Achievement unlocked", displayName, icon);
-        setAudio(
-          "https://us-tuna-sounds-files.voicemod.net/ade71f0d-a41b-4e3a-8097-9f1cc585745c-1646035604239.mp3"
-        );
-
         setAchievementInfo({
           displayName,
           icon,
         });
+
+        audio.play();
       }
     );
 
     return () => {
       unsubscribe();
     };
-  }, []);
-
-  useEffect(() => {
-    if (audio) {
-      const audioElement = new Audio(audio);
-      audioElement.volume = 1.0;
-      audioElement.play();
-      setAudio(null);
-    }
   }, [audio]);
 
   if (!achievementInfo) return <p>Nada</p>;