Merge pull request #529 from hydralauncher/feat/macos-test

feat: adjust auto update and tray icon for macos

requirements.txt

@@ -1,5 +0,0 @@
-libtorrent
-cx_Freeze
-cx_Logging; sys_platform == 'win32'
-lief; sys_platform == 'win32'
-pywin32; sys_platform == 'win32'

src/locales/en/translation.json

@@ -29,7 +29,8 @@
     "downloads": "Downloads",
     "search_results": "Search results",
     "settings": "Settings",
-    "version_available": "Version {{version}} available. Click here to restart and install."
+    "version_available_install": "Version {{version}} available. Click here to restart and install.",
+    "version_available_download": "Version {{version}} available. Click here to download."
   },
   "bottom_panel": {
     "no_downloads_in_progress": "No downloads in progress",

src/locales/es/translation.json

@@ -29,7 +29,8 @@
     "downloads": "Descargas",
     "search_results": "Resultados de búsqueda",
     "settings": "Ajustes",
-    "version_available": "Version {{version}} disponible. Haz clic aquí para reiniciar e instalar."
+    "version_available_install": "Version {{version}} disponible. Haz clic aquí para reiniciar e instalar.",
+    "version_available_download": "Version {{version}} disponible. Haz clic aquí para descargar."
   },
   "bottom_panel": {
     "no_downloads_in_progress": "Sin descargas en progreso",

src/locales/pt/translation.json

@@ -29,7 +29,8 @@
     "search_results": "Resultados da busca",
     "settings": "Ajustes",
     "home": "Início",
-    "version_available": "Versão {{version}} disponível. Clique aqui para reiniciar e instalar."
+    "version_available_install": "Versão {{version}} disponível. Clique aqui para reiniciar e instalar.",
+    "version_available_download": "Versão {{version}} disponível. Clique aqui para fazer o download."
   },
   "bottom_panel": {
     "no_downloads_in_progress": "Sem downloads em andamento",

src/main/events/autoupdater/check-for-updates.ts

@@ -1,4 +1,4 @@
-import { AppUpdaterEvents } from "@types";
+import { AppUpdaterEvent } from "@types";
 import { registerEvent } from "../register-event";
 import updater, { UpdateInfo } from "electron-updater";
 import { WindowManager } from "@main/services";
@@ -6,12 +6,15 @@ import { app } from "electron";
 
 const { autoUpdater } = updater;
 
-const sendEvent = (event: AppUpdaterEvents) => {
+const sendEvent = (event: AppUpdaterEvent) => {
   WindowManager.mainWindow?.webContents.send("autoUpdaterEvent", event);
 };
 
+const sendEventsForDebug = false;
+
 const mockValuesForDebug = () => {
   sendEvent({ type: "update-available", info: { version: "1.3.0" } });
+  sendEvent({ type: "update-downloaded" });
 };
 
 const checkForUpdates = async (_event: Electron.IpcMainInvokeEvent) => {
@@ -25,7 +28,7 @@ const checkForUpdates = async (_event: Electron.IpcMainInvokeEvent) => {
 
   if (app.isPackaged) {
     autoUpdater.checkForUpdates();
-  } else {
+  } else if (sendEventsForDebug) {
     mockValuesForDebug();
   }
 };

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

@@ -44,6 +44,11 @@ const openGameInstaller = async (
     return true;
   }
 
+  if (process.platform === "darwin") {
+    shell.openPath(gamePath);
+    return true;
+  }
+
   if (fs.lstatSync(gamePath).isFile()) {
     return executeGameInstaller(gamePath);
   }

src/main/services/window-manager.ts

@@ -5,6 +5,7 @@ import {
   MenuItemConstructorOptions,
   Tray,
   app,
+  nativeImage,
   shell,
 } from "electron";
 import { is } from "@electron-toolkit/utils";
@@ -88,7 +89,16 @@ export class WindowManager {
   }
 
   public static createSystemTray(language: string) {
-    const tray = new Tray(trayIcon);
+    let tray;
+
+    if (process.platform === "darwin") {
+      const macIcon = nativeImage
+        .createFromPath(trayIcon)
+        .resize({ width: 24, height: 24 });
+      tray = new Tray(macIcon);
+    } else {
+      tray = new Tray(trayIcon);
+    }
 
     const updateSystemTray = async () => {
       const games = await gameRepository.find({
@@ -149,9 +159,14 @@ export class WindowManager {
       return contextMenu;
     };
 
+    const showContextMenu = async () => {
+      const contextMenu = await updateSystemTray();
+      tray.popUpContextMenu(contextMenu);
+    };
+
     tray.setToolTip("Hydra");
 
-    if (process.platform === "win32" || process.platform === "linux") {
+    if (process.platform !== "darwin") {
       tray.addListener("click", () => {
         if (this.mainWindow) {
           if (WindowManager.mainWindow?.isMinimized())
@@ -164,10 +179,10 @@ export class WindowManager {
         this.createMainWindow();
       });
 
-      tray.addListener("right-click", async () => {
-        const contextMenu = await updateSystemTray();
-        tray.popUpContextMenu(contextMenu);
-      });
+      tray.addListener("right-click", showContextMenu);
+    } else {
+      tray.addListener("click", showContextMenu);
+      tray.addListener("right-click", showContextMenu);
     }
   }
 }

src/renderer/src/components/header/auto-update-sub-header.tsx

@@ -0,0 +1,72 @@
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
+import { SyncIcon } from "@primer/octicons-react";
+import { Link } from "../link/link";
+import * as styles from "./header.css";
+import { AppUpdaterEvent } from "@types";
+
+export const releasesPageUrl =
+  "https://github.com/hydralauncher/hydra/releases/latest";
+
+const isMac = window.electron.platform === "darwin";
+
+export function AutoUpdateSubHeader() {
+  const [showUpdateSubheader, setShowUpdateSubheader] = useState(false);
+  const [newVersion, setNewVersion] = useState("");
+
+  const { t } = useTranslation("header");
+
+  const handleClickInstallUpdate = () => {
+    window.electron.restartAndInstallUpdate();
+  };
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onAutoUpdaterEvent(
+      (event: AppUpdaterEvent) => {
+        if (event.type == "update-available") {
+          setNewVersion(event.info.version);
+
+          if (isMac) {
+            setShowUpdateSubheader(true);
+          }
+        }
+
+        if (event.type == "update-downloaded") {
+          setShowUpdateSubheader(true);
+        }
+      }
+    );
+
+    window.electron.checkForUpdates();
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  if (!showUpdateSubheader) return null;
+
+  return (
+    <header className={styles.subheader}>
+      {isMac ? (
+        <Link to={releasesPageUrl} className={styles.newVersionLink}>
+          <SyncIcon size={12} />
+          <small>
+            {t("version_available_download", { version: newVersion })}
+          </small>
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={styles.newVersionButton}
+          onClick={handleClickInstallUpdate}
+        >
+          <SyncIcon size={12} />
+          <small>
+            {t("version_available_install", { version: newVersion })}
+          </small>
+        </button>
+      )}
+    </header>
+  );
+}

src/renderer/src/components/header/header.css.ts

@@ -157,9 +157,17 @@ export const newVersionButton = style({
   justifyContent: "center",
   gap: `${SPACING_UNIT}px`,
   color: vars.color.body,
-  borderBottom: "1px solid transparent",
+  fontSize: "13px",
   ":hover": {
-    borderBottom: `1px solid ${vars.color.body}`,
+    textDecoration: "underline",
     cursor: "pointer",
   },
 });
+
+export const newVersionLink = style({
+  display: "flex",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+  color: "#8e919b",
+  fontSize: "13px",
+});

src/renderer/src/components/header/header.tsx

@@ -1,18 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import {
-  ArrowLeftIcon,
-  SearchIcon,
-  SyncIcon,
-  XIcon,
-} from "@primer/octicons-react";
+import { ArrowLeftIcon, SearchIcon, XIcon } from "@primer/octicons-react";
 
 import { useAppDispatch, useAppSelector } from "@renderer/hooks";
 
 import * as styles from "./header.css";
 import { clearSearch } from "@renderer/features";
-import { AppUpdaterEvents } from "@types";
+import { AutoUpdateSubHeader } from "./auto-update-sub-header";
 
 export interface HeaderProps {
   onSearch: (query: string) => void;
@@ -40,9 +35,6 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
 
   const [isFocused, setIsFocused] = useState(false);
 
-  const [showUpdateSubheader, setShowUpdateSubheader] = useState(false);
-  const [newVersion, setNewVersion] = useState("");
-
   const { t } = useTranslation("header");
 
   const title = useMemo(() => {
@@ -58,30 +50,6 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
     }
   }, [location.pathname, search, dispatch]);
 
-  const handleClickRestartAndUpdate = () => {
-    window.electron.restartAndInstallUpdate();
-  };
-
-  useEffect(() => {
-    const unsubscribe = window.electron.onAutoUpdaterEvent(
-      (event: AppUpdaterEvents) => {
-        if (event.type == "update-available") {
-          setNewVersion(event.info.version || "");
-        }
-
-        if (event.type == "update-downloaded") {
-          setShowUpdateSubheader(true);
-        }
-      }
-    );
-
-    window.electron.checkForUpdates();
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   const focusInput = () => {
     setIsFocused(true);
     inputRef.current?.focus();
@@ -158,18 +126,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
           </div>
         </section>
       </header>
-      {showUpdateSubheader && (
-        <header className={styles.subheader}>
-          <button
-            type="button"
-            className={styles.newVersionButton}
-            onClick={handleClickRestartAndUpdate}
-          >
-            <SyncIcon size={12} />
-            <small>{t("version_available", { version: newVersion })}</small>
-          </button>
-        </header>
-      )}
+      <AutoUpdateSubHeader />
     </>
   );
 }

src/renderer/src/declaration.d.ts

@@ -1,5 +1,5 @@
 import type {
-  AppUpdaterEvents,
+  AppUpdaterEvent,
   CatalogueCategory,
   CatalogueEntry,
   Game,
@@ -92,7 +92,7 @@ declare global {
 
     /* Auto update */
     onAutoUpdaterEvent: (
-      cb: (event: AppUpdaterEvents) => void
+      cb: (event: AppUpdaterEvent) => void
     ) => () => Electron.IpcRenderer;
     checkForUpdates: () => Promise<void>;
     restartAndInstallUpdate: () => Promise<void>;

src/types/index.ts

@@ -1,6 +1,5 @@
 import type { Aria2Status } from "aria2";
 import type { Downloader } from "@shared";
-import { ProgressInfo, UpdateInfo } from "electron-updater";
 
 export type GameShop = "steam" | "epic";
 export type CatalogueCategory = "recently_added" | "trending";
@@ -146,13 +145,8 @@ export interface SteamGame {
 }
 
 export type AppUpdaterEvent =
-  | { type: "error" }
-  | { type: "checking-for-updates" }
-  | { type: "update-not-available" }
-  | { type: "update-available"; info: UpdateInfo }
-  | { type: "update-downloaded" }
-  | { type: "download-progress"; info: ProgressInfo }
-  | { type: "update-cancelled" };
+  | { type: "update-available"; info: { version: string } }
+  | { type: "update-downloaded" };
 
 /* Events */
 export interface StartGameDownloadPayload {
@@ -230,6 +224,3 @@ export interface RealDebridUser {
   premium: number;
   expiration: string;
 }
-export type AppUpdaterEvents =
-  | { type: "update-available"; info: Partial<UpdateInfo> }
-  | { type: "update-downloaded" };

yarn.lock

@@ -5488,7 +5488,16 @@ stat-mode@^1.0.0:
   resolved "https://registry.yarnpkg.com/stat-mode/-/stat-mode-1.0.0.tgz#68b55cb61ea639ff57136f36b216a291800d1465"
   integrity sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5559,7 +5568,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6128,7 +6144,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==