Merge pull request #466 from hydralauncher/feat/splash-screen-for-updates

Feat: splash screen for updates

src/locales/en/translation.json

@@ -176,5 +176,11 @@
   },
   "modal": {
     "close": "Close button"
+  },
+  "splash": {
+    "downloading_version": "Downloading version {{version}}",
+    "searching_updates": "Searching for updates",
+    "update_found": "Update {{version}} found",
+    "restarting_and_applying": "Restarting and applying update"
   }
 }

src/locales/pt/translation.json

@@ -176,5 +176,11 @@
   },
   "modal": {
     "close": "Botão de fechar"
+  },
+  "splash": {
+    "downloading_version": "Baixando versão {{version}}",
+    "searching_updates": "Buscando atualizações",
+    "update_found": "Versão {{version}} encontrada",
+    "restarting_and_applying": "Reiniciando e aplicando atualização"
   }
 }

src/main/constants.ts

@@ -22,7 +22,7 @@ export const defaultDownloadsPath = app.getPath("downloads");
 
 export const databasePath = path.join(
   app.getPath("appData"),
-  app.getName(),
+  "hydra",
   "hydra.db"
 );
 

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

@@ -0,0 +1,48 @@
+import { AppUpdaterEvents } from "@types";
+import { registerEvent } from "../register-event";
+import updater, { ProgressInfo, UpdateInfo } from "electron-updater";
+import { WindowManager } from "@main/services";
+import { app } from "electron";
+
+const { autoUpdater } = updater;
+
+const sendEvent = (event: AppUpdaterEvents) => {
+  WindowManager.splashWindow?.webContents.send("autoUpdaterEvent", event);
+};
+
+const mockValuesForDebug = async () => {
+  sendEvent({ type: "update-downloaded" });
+};
+
+const checkForUpdates = async (_event: Electron.IpcMainInvokeEvent) => {
+  autoUpdater
+    .addListener("error", () => {
+      sendEvent({ type: "error" });
+    })
+    .addListener("checking-for-update", () => {
+      sendEvent({ type: "checking-for-updates" });
+    })
+    .addListener("update-not-available", () => {
+      sendEvent({ type: "update-not-available" });
+    })
+    .addListener("update-available", (info: UpdateInfo) => {
+      sendEvent({ type: "update-available", info });
+    })
+    .addListener("update-downloaded", () => {
+      sendEvent({ type: "update-downloaded" });
+    })
+    .addListener("download-progress", (info: ProgressInfo) => {
+      sendEvent({ type: "download-progress", info });
+    })
+    .addListener("update-cancelled", () => {
+      sendEvent({ type: "update-cancelled" });
+    });
+
+  if (app.isPackaged) {
+    autoUpdater.checkForUpdates();
+  } else {
+    await mockValuesForDebug();
+  }
+};
+
+registerEvent("checkForUpdates", checkForUpdates);

src/main/events/autoupdater/continue-to-main-window.ts

@@ -0,0 +1,12 @@
+import { WindowManager } from "@main/services";
+import { registerEvent } from "../register-event";
+import updater from "electron-updater";
+
+const { autoUpdater } = updater;
+
+const continueToMainWindow = async (_event: Electron.IpcMainInvokeEvent) => {
+  autoUpdater.removeAllListeners();
+  WindowManager.prepareMainWindowAndCloseSplash();
+};
+
+registerEvent("continueToMainWindow", continueToMainWindow);

src/main/events/autoupdater/restart-and-install-update.ts

@@ -0,0 +1,17 @@
+import { app } from "electron";
+import { registerEvent } from "../register-event";
+import updater from "electron-updater";
+import { WindowManager } from "@main/services";
+
+const { autoUpdater } = updater;
+
+const restartAndInstallUpdate = async (_event: Electron.IpcMainInvokeEvent) => {
+  if (app.isPackaged) {
+    autoUpdater.quitAndInstall(true, true);
+  } else {
+    autoUpdater.removeAllListeners();
+    WindowManager.prepareMainWindowAndCloseSplash();
+  }
+};
+
+registerEvent("restartAndInstallUpdate", restartAndInstallUpdate);

src/main/events/index.ts

@@ -27,6 +27,9 @@ import "./torrenting/start-game-download";
 import "./user-preferences/get-user-preferences";
 import "./user-preferences/update-user-preferences";
 import "./user-preferences/auto-launch";
+import "./autoupdater/check-for-updates";
+import "./autoupdater/restart-and-install-update";
+import "./autoupdater/continue-to-main-window";
 
 ipcMain.handle("ping", () => "pong");
 ipcMain.handle("getVersion", () => app.getVersion());

src/main/index.ts

@@ -3,11 +3,10 @@ import updater from "electron-updater";
 import i18n from "i18next";
 import path from "node:path";
 import { electronApp, optimizer } from "@electron-toolkit/utils";
-import { resolveDatabaseUpdates, WindowManager } from "@main/services";
+import { logger, resolveDatabaseUpdates, WindowManager } from "@main/services";
 import { dataSource } from "@main/data-source";
 import * as resources from "@locales";
 import { userPreferencesRepository } from "@main/repository";
-
 const { autoUpdater } = updater;
 
 autoUpdater.setFeedURL({
@@ -16,6 +15,8 @@ autoUpdater.setFeedURL({
   repo: "hydra",
 });
 
+autoUpdater.logger = logger;
+
 const gotTheLock = app.requestSingleInstanceLock();
 if (!gotTheLock) app.quit();
 
@@ -63,12 +64,8 @@ app.whenReady().then(() => {
       where: { id: 1 },
     });
 
-    WindowManager.createMainWindow();
+    WindowManager.createSplashScreen();
     WindowManager.createSystemTray(userPreferences?.language || "en");
-
-    WindowManager.mainWindow?.on("ready-to-show", () => {
-      autoUpdater.checkForUpdatesAndNotify();
-    });
   });
 });
 

src/main/services/repack-tracker/online-fix.ts

@@ -148,9 +148,10 @@ export const getNewRepacksFromOnlineFix = async (
   );
 
   if (!newRepacks.length) return;
-  if (page === totalPages) return;
 
   await savePage(newRepacks);
 
+  if (page === totalPages) return;
+
   return getNewRepacksFromOnlineFix(existingRepacks, page + 1, cookieJar);
 };

src/main/services/repack-tracker/xatab.ts

@@ -111,9 +111,10 @@ export const getNewRepacksFromXatab = async (
   );
 
   if (!newRepacks.length) return;
-  if (page === totalPages) return;
 
   await savePage(newRepacks);
 
+  if (page === totalPages) return;
+
   return getNewRepacksFromXatab(existingRepacks, page + 1);
 };

src/main/services/window-manager.ts

@@ -17,6 +17,8 @@ import { IsNull, Not } from "typeorm";
 
 export class WindowManager {
   public static mainWindow: Electron.BrowserWindow | null = null;
+  public static splashWindow: Electron.BrowserWindow | null = null;
+  public static isReadyToShowMainWindow = false;
 
   private static loadURL(hash = "") {
     // HMR for renderer base on electron-vite cli.
@@ -35,13 +37,51 @@ export class WindowManager {
     }
   }
 
+  private static loadSplashURL() {
+    // 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"]) {
+      this.splashWindow?.loadURL(
+        `${process.env["ELECTRON_RENDERER_URL"]}#/splash`
+      );
+    } else {
+      this.splashWindow?.loadFile(
+        path.join(__dirname, "../renderer/index.html"),
+        {
+          hash: "splash",
+        }
+      );
+    }
+  }
+
+  public static createSplashScreen() {
+    if (this.splashWindow) return;
+
+    this.splashWindow = new BrowserWindow({
+      width: 380,
+      height: 380,
+      frame: false,
+      resizable: false,
+      backgroundColor: "#1c1c1c",
+      webPreferences: {
+        preload: path.join(__dirname, "../preload/index.mjs"),
+        sandbox: false,
+      },
+    });
+
+    this.loadSplashURL();
+    this.splashWindow.removeMenu();
+  }
+
   public static createMainWindow() {
-    // Create the browser window.
+    if (this.mainWindow || !this.isReadyToShowMainWindow) return;
+
     this.mainWindow = new BrowserWindow({
       width: 1200,
       height: 720,
       minWidth: 1024,
       minHeight: 540,
+      backgroundColor: "#1c1c1c",
       titleBarStyle: "hidden",
       ...(process.platform === "linux" ? { icon } : {}),
       trafficLightPosition: { x: 16, y: 16 },
@@ -75,6 +115,12 @@ export class WindowManager {
     });
   }
 
+  public static prepareMainWindowAndCloseSplash() {
+    this.isReadyToShowMainWindow = true;
+    this.splashWindow?.close();
+    this.createMainWindow();
+  }
+
   public static redirect(hash: string) {
     if (!this.mainWindow) this.createMainWindow();
     this.loadURL(hash);

src/preload/index.ts

@@ -7,6 +7,7 @@ import type {
   GameShop,
   TorrentProgress,
   UserPreferences,
+  AppUpdaterEvents,
 } from "@types";
 
 contextBridge.exposeInMainWorld("electron", {
@@ -112,4 +113,21 @@ contextBridge.exposeInMainWorld("electron", {
   showOpenDialog: (options: Electron.OpenDialogOptions) =>
     ipcRenderer.invoke("showOpenDialog", options),
   platform: process.platform,
+
+  /* Splash */
+  onAutoUpdaterEvent: (cb: (value: AppUpdaterEvents) => void) => {
+    const listener = (
+      _event: Electron.IpcRendererEvent,
+      value: AppUpdaterEvents
+    ) => cb(value);
+
+    ipcRenderer.on("autoUpdaterEvent", listener);
+
+    return () => {
+      ipcRenderer.removeListener("autoUpdaterEvent", listener);
+    };
+  },
+  checkForUpdates: () => ipcRenderer.invoke("checkForUpdates"),
+  restartAndInstallUpdate: () => ipcRenderer.invoke("restartAndInstallUpdate"),
+  continueToMainWindow: () => ipcRenderer.invoke("continueToMainWindow"),
 });

src/renderer/src/app.tsx

@@ -12,7 +12,7 @@ import {
 import * as styles from "./app.css";
 import { themeClass } from "./theme.css";
 
-import { useLocation, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
   setSearch,
   clearSearch,
@@ -27,7 +27,7 @@ export interface AppProps {
   children: React.ReactNode;
 }
 
-export function App({ children }: AppProps) {
+export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary } = useLibrary();
 
@@ -128,7 +128,7 @@ export function App({ children }: AppProps) {
           />
 
           <section ref={contentRef} className={styles.content}>
-            {children}
+            <Outlet />
           </section>
         </article>
       </main>

src/renderer/src/declaration.d.ts

@@ -1,4 +1,5 @@
 import type {
+  AppUpdaterEvents,
   CatalogueCategory,
   CatalogueEntry,
   Game,
@@ -90,6 +91,14 @@ declare global {
       options: Electron.OpenDialogOptions
     ) => Promise<Electron.OpenDialogReturnValue>;
     platform: NodeJS.Platform;
+
+    /* Splash */
+    onAutoUpdaterEvent: (
+      cb: (event: AppUpdaterEvents) => void
+    ) => () => Electron.IpcRenderer;
+    checkForUpdates: () => Promise<void>;
+    restartAndInstallUpdate: () => Promise<void>;
+    continueToMainWindow: () => Promise<void>;
   }
 
   interface Window {

src/renderer/src/main.tsx

@@ -27,6 +27,7 @@ import {
 import { store } from "./store";
 
 import * as resources from "@locales";
+import Splash from "./pages/splash/splash";
 
 i18n
   .use(LanguageDetector)
@@ -46,16 +47,17 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Provider store={store}>
       <HashRouter>
-        <App>
         <Routes>
+          <Route path="/splash" Component={Splash} />
+          <Route element={<App />}>
             <Route path="/" Component={Home} />
             <Route path="/catalogue" Component={Catalogue} />
             <Route path="/downloads" Component={Downloads} />
             <Route path="/game/:shop/:objectID" Component={GameDetails} />
             <Route path="/search" Component={SearchResults} />
             <Route path="/settings" Component={Settings} />
+          </Route>
         </Routes>
-        </App>
       </HashRouter>
     </Provider>
   </React.StrictMode>

src/renderer/src/pages/game-details/gallery-slider.tsx

@@ -58,9 +58,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
     if (hasMovies && mediaContainerRef.current) {
       mediaContainerRef.current.childNodes.forEach((node, index) => {
         if (node instanceof HTMLVideoElement) {
-          if (index == mediaIndex) {
-            node.play();
-          } else {
+          if (index !== mediaIndex) {
             node.pause();
           }
         }

src/renderer/src/pages/splash/splash.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { SPACING_UNIT, vars } from "../../theme.css";
+
+export const main = style({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  padding: `${SPACING_UNIT * 3}px`,
+  flex: "1",
+  overflowY: "auto",
+  alignItems: "center",
+});
+
+export const splashIcon = style({
+  width: "75%",
+});
+
+export const updateInfoSection = style({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
+  flex: "1",
+  overflowY: "auto",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export const progressBar = style({
+  WebkitAppearance: "none",
+  appearance: "none",
+  borderRadius: "4px",
+  width: "100%",
+  border: `solid 1px ${vars.color.border}`,
+  overflow: "hidden",
+  height: "18px",
+  "::-webkit-progress-value": {
+    backgroundColor: vars.color.muted,
+    transition: "width 0.2s",
+  },
+  "::-webkit-progress-bar": {
+    backgroundColor: vars.color.darkBackground,
+  },
+});
+
+export const progressBarText = style({
+  zIndex: 2,
+});

src/renderer/src/pages/splash/splash.tsx

@@ -0,0 +1,82 @@
+import icon from "@renderer/assets/icon.png";
+import * as styles from "./splash.css";
+import { themeClass } from "../../theme.css";
+
+import "../../app.css";
+import { useEffect, useState } from "react";
+import { AppUpdaterEvents } from "@types";
+import { useTranslation } from "react-i18next";
+
+document.body.classList.add(themeClass);
+
+export default function Splash() {
+  const [status, setStatus] = useState<AppUpdaterEvents | null>(null);
+  const [newVersion, setNewVersion] = useState("");
+
+  const { t } = useTranslation("splash");
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onAutoUpdaterEvent(
+      (event: AppUpdaterEvents) => {
+        setStatus(event);
+
+        switch (event.type) {
+          case "error":
+            window.electron.continueToMainWindow();
+            break;
+          case "update-available":
+            setNewVersion(event.info.version);
+            break;
+          case "update-cancelled":
+            window.electron.continueToMainWindow();
+            break;
+          case "update-downloaded":
+            window.electron.restartAndInstallUpdate();
+            break;
+          case "update-not-available":
+            window.electron.continueToMainWindow();
+            break;
+        }
+      }
+    );
+
+    window.electron.checkForUpdates();
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const renderUpdateInfo = () => {
+    switch (status?.type) {
+      case "download-progress":
+        return (
+          <>
+            <p>{t("downloading_version", { version: newVersion })}</p>
+            <progress
+              className={styles.progressBar}
+              max="100"
+              value={status.info.percent}
+            />
+          </>
+        );
+      case "checking-for-updates":
+        return <p>{t("searching_updates")}</p>;
+      case "update-available":
+        return <p>{t("update_found", { version: newVersion })}</p>;
+      case "update-downloaded":
+        return <p>{t("restarting_and_applying")}</p>;
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <main className={styles.main}>
+      <img src={icon} className={styles.splashIcon} alt="Hydra Launcher Logo" />
+      <section className={styles.updateInfoSection}>
+        {renderUpdateInfo()}
+      </section>
+    </main>
+  );
+}

src/types/index.ts

@@ -1,4 +1,5 @@
 import type { Downloader, GameStatus } from "@shared";
+import { ProgressInfo, UpdateInfo } from "electron-updater";
 
 export type GameShop = "steam" | "epic";
 export type CatalogueCategory = "recently_added" | "trending";
@@ -143,3 +144,12 @@ export interface SteamGame {
   name: string;
   clientIcon: string | null;
 }
+
+export type AppUpdaterEvents =
+  | { 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" };