finish update dialog

2024-01-22 12:37:29 +01:00 · 2024-01-22 12:37:29 +01:00 · bf8a458b5f
parent 3570582c6b
commit bf8a458b5f
7 changed files with 141 additions and 104 deletions
--- a/electron/updateCheck.js
+++ b/electron/updateCheck.js
@ -1,13 +1,16 @@
 const semver = require("semver");
 const { appVersion } = require("./appInfo");

-const repoUrl =
+const repoApiUrl =
  "https://git.ez-pp.farm/api/v1/repos/EZPPFarm/EZPPLauncher/releases?limit=1";

+const releasesUrl =
+  "https://git.ez-pp.farm/EZPPFarm/EZPPLauncher/releases/latest";
+
 module.exports = {
  updateAvailable: async () => {
    try {
-      const latestRelease = await fetch(repoUrl);
+      const latestRelease = await fetch(repoApiUrl);
      const json = await latestRelease.json();
      if (json.length <= 0) return false;
      return {
@ -18,4 +21,5 @@ module.exports = {
      return { update: false };
    }
  },
+  releasesUrl,
 };
--- a/main.js
+++ b/main.js
@ -1,5 +1,7 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, Menu, ipcMain, dialog } = require("electron");
+const { app, BrowserWindow, Menu, ipcMain, dialog, shell } = require(
+  "electron",
+);
 const path = require("path");
 const serve = require("electron-serve");
 const loadURL = serve({ directory: "public" });
@ -31,7 +33,7 @@ const richPresence = require("./electron/richPresence");
 const cryptUtil = require("./electron/cryptoUtil");
 const { getHwId } = require("./electron/hwidUtil");
 const { appName, appVersion } = require("./electron/appInfo");
-const { updateAvailable } = require("./electron/updateCheck");
+const { updateAvailable, releasesUrl } = require("./electron/updateCheck");

 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@ -319,6 +321,11 @@ function registerIPCPipes() {
    return config.all();
  });

+  ipcMain.handle("ezpplauncher:exitAndUpdate", async (e) => {
+    await shell.openExternal(releasesUrl);
+    app.exit();
+  });
+
  ipcMain.handle("ezpplauncher:launch", async (e) => {
    const configPatch = config.get("patch");
    patch = configPatch != undefined ? configPatch == "true" : true;
@ -580,7 +587,7 @@ function createWindow() {
  // Open the DevTools and also disable Electron Security Warning.
  if (isDev()) {
    process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = true;
-    // mainWindow.webContents.openDevTools({ mode: "detach" });
+    mainWindow.webContents.openDevTools({ mode: "detach" });
  }

  // Emitted when the window is closed.
@ -595,7 +602,7 @@ function createWindow() {
  // This helps in showing the window gracefully.
  mainWindow.once("ready-to-show", async () => {
    const updateInfo = await updateAvailable();
-    if (!updateInfo.update) {
+    if (updateInfo.update) {
      mainWindow.webContents.send("ezpplauncher:update", updateInfo.release);
    }
    mainWindow.show();
--- a/package-lock.json
+++ b/package-lock.json
@ -22,6 +22,7 @@
        "regedit-rs": "^1.0.2",
        "semver": "^7.5.4",
        "svelte-french-toast": "^1.2.0",
+        "sweetalert2": "^11.10.3",
        "systeminformation": "^5.21.22"
      },
      "devDependencies": {
@ -8484,6 +8485,15 @@
      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
      "dev": true
    },
+    "node_modules/sweetalert2": {
+      "version": "11.10.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.3.tgz",
+      "integrity": "sha512-mZYtQR7v+khyEruq0SsVUa6XIdI9Aue8s2XAIpAwdlLN1T0w7mxKEjyubiBZ3/bLbHC/wGS4wNABvXWubCizvA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
    "node_modules/systeminformation": {
      "version": "5.21.22",
      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.21.22.tgz",
--- a/package.json
+++ b/package.json
@ -49,6 +49,7 @@
    "regedit-rs": "^1.0.2",
    "semver": "^7.5.4",
    "svelte-french-toast": "^1.2.0",
+    "sweetalert2": "^11.10.3",
    "systeminformation": "^5.21.22"
  },
  "devDependencies": {
--- a/preload.js
+++ b/preload.js
@ -82,6 +82,10 @@ window.addEventListener("settings-set", async (e) => {
  await ipcRenderer.invoke("ezpplauncher:settings-set", e.detail);
 });

+window.addEventListener("updateExit", async () => {
+  await ipcRenderer.invoke("ezpplauncher:exitAndUpdate");
+});
+
 ipcRenderer.addListener("ezpplauncher:launchabort", (e, args) => {
  window.dispatchEvent(
    new CustomEvent("launch-abort"),
--- a/src/App.svelte
+++ b/src/App.svelte
@ -6,7 +6,6 @@
    DropdownHeader,
    DropdownDivider,
    Button,
-    Modal,
    Indicator,
  } from "flowbite-svelte";
  import {
@ -30,11 +29,11 @@
  import toast, { Toaster } from "svelte-french-toast";
  import type { User } from "./types/user";
  import Settings from "./pages/Settings.svelte";
+  import Swal from "sweetalert2";

  let user: User | undefined = undefined;
  let loggedIn = false;

-  let showUpdateDialog = false;
  let updateInfo: Record<string, unknown>;

  currentUser.subscribe((newUser) => {
@ -54,14 +53,17 @@
    });
  };

-  window.addEventListener("update", (e) => {
+  window.addEventListener("update", async (e) => {
    const update = (e as CustomEvent).detail;
-    setTimeout(() => {
-      showUpdateDialog = true;
-      updateInfo = update;
-
-      document.getElementById("updateDialog")?.blur();
-    }, 2000);
+    await Swal.fire({
+      html: `EZPPLauncher ${update.tag_name} is now available!<br>Click the Button bellow to download the latest release!`,
+      title: "It's your lucky day!",
+      allowOutsideClick: false,
+      allowEscapeKey: false,
+      allowEnterKey: false,
+      confirmButtonText: "Thanks!",
+    });
+    window.dispatchEvent(new CustomEvent("updateExit"));
  });

  window.addEventListener("launchStatusUpdate", (e) => {
@ -117,104 +119,104 @@

 <Toaster></Toaster>

-<!-- TODO: Update dialog-->
-
-<div class="p-2 flex flex-row justify-between items-center">
-  <div class="flex flex-row items-center animate-fadeIn opacity-0">
-    {#if $currentPage == Page.Settings}
-      <Button
-        class="dark:active:!bg-gray-900 !ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
-        color="light"
-        on:click={() => {
-          currentPage.set(Page.Launch);
-        }}
-      >
-        <ArrowLeftSolid class="outline-none border-none" size="sm" />
-      </Button>
-    {/if}
-    <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
-    <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight">
-      EZPPLauncher
-    </span>
-  </div>
-  {#if $currentPage == Page.Launch}
-    <div
-      class="flex flex-row gap-2 w-fill cursor-pointer md:order-2 animate-lsideIn opacity-0"
-    >
-      <Avatar
-        class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
-        src={loggedIn
-          ? "https://a.ez-pp.farm/" + user?.id
-          : "https://a.ez-pp.farm/0"}
-        id="avatar-menu"
-      />
-      <!-- TODO: if user has donator, display heart indicator-->
-      {#if $currentUser && $currentUser.id == 1001}
-        <Indicator
-          class="pointer-events-none"
-          color="red"
-          border
-          size="xl"
-          placement="top-right"
+{#if !updateInfo}
+  <div class="p-2 flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center animate-fadeIn opacity-0">
+      {#if $currentPage == Page.Settings}
+        <Button
+          class="dark:active:!bg-gray-900 !ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
+          color="light"
+          on:click={() => {
+            currentPage.set(Page.Launch);
+          }}
        >
-          <span class="text-red-300 text-xs font-bold">
-            <HeartSolid class="select-none pointer-events-none" size="xs" />
-          </span>
-        </Indicator>
+          <ArrowLeftSolid class="outline-none border-none" size="sm" />
+        </Button>
      {/if}
+      <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
+      <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight">
+        EZPPLauncher
+      </span>
    </div>
-    <Dropdown placement="bottom-start" triggeredBy="#avatar-menu">
-      <DropdownHeader>
-        <span class="block text-sm">{loggedIn ? user?.name : "Guest"}</span>
-        <span
-          class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
-        >
-          {loggedIn ? user?.email : "Please log in!"}
-        </span>
-      </DropdownHeader>
-      <DropdownItem
-        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-        on:click={() => {
-          if (!$launching) currentPage.set(Page.Settings);
-        }}
+    {#if $currentPage == Page.Launch}
+      <div
+        class="flex flex-row gap-2 w-fill cursor-pointer md:order-2 animate-lsideIn opacity-0"
      >
-        <UserSettingsSolid class="select-none outline-none border-none" />
-        Settings
-      </DropdownItem>
-      <DropdownDivider />
-      {#if loggedIn}
+        <Avatar
+          class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
+          src={loggedIn
+            ? "https://a.ez-pp.farm/" + user?.id
+            : "https://a.ez-pp.farm/0"}
+          id="avatar-menu"
+        />
+        <!-- TODO: if user has donator, display heart indicator-->
+        {#if $currentUser && $currentUser.id == 1001}
+          <Indicator
+            class="pointer-events-none"
+            color="red"
+            border
+            size="xl"
+            placement="top-right"
+          >
+            <span class="text-red-300 text-xs font-bold">
+              <HeartSolid class="select-none pointer-events-none" size="xs" />
+            </span>
+          </Indicator>
+        {/if}
+      </div>
+      <Dropdown placement="bottom-start" triggeredBy="#avatar-menu">
+        <DropdownHeader>
+          <span class="block text-sm">{loggedIn ? user?.name : "Guest"}</span>
+          <span
+            class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
+          >
+            {loggedIn ? user?.email : "Please log in!"}
+          </span>
+        </DropdownHeader>
        <DropdownItem
          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
          on:click={() => {
-            if (!$launching) logout();
+            if (!$launching) currentPage.set(Page.Settings);
          }}
        >
-          <ArrowRightFromBracketSolid
-            class="select-none outline-none border-none"
-          />
-          Sign out
+          <UserSettingsSolid class="select-none outline-none border-none" />
+          Settings
        </DropdownItem>
-      {:else}
-        <DropdownItem
-          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-          on:click={() => {
-            if (!$launching) currentPage.set(Page.Login);
-          }}
-        >
-          <ArrowRightToBracketSolid
-            class="select-none outline-none border-none"
-          />
-          Login
-        </DropdownItem>
-      {/if}
-    </Dropdown>
-  {/if}
-</div>
+        <DropdownDivider />
+        {#if loggedIn}
+          <DropdownItem
+            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            on:click={() => {
+              if (!$launching) logout();
+            }}
+          >
+            <ArrowRightFromBracketSolid
+              class="select-none outline-none border-none"
+            />
+            Sign out
+          </DropdownItem>
+        {:else}
+          <DropdownItem
+            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            on:click={() => {
+              if (!$launching) currentPage.set(Page.Login);
+            }}
+          >
+            <ArrowRightToBracketSolid
+              class="select-none outline-none border-none"
+            />
+            Login
+          </DropdownItem>
+        {/if}
+      </Dropdown>
+    {/if}
+  </div>

-{#if $currentPage == Page.Login}
-  <Login />
-{:else if $currentPage == Page.Settings}
-  <Settings />
-{:else}
-  <Launch />
+  {#if $currentPage == Page.Login}
+    <Login />
+  {:else if $currentPage == Page.Settings}
+    <Settings />
+  {:else}
+    <Launch />
+  {/if}
 {/if}
--- a/src/app.pcss
+++ b/src/app.pcss
@ -58,6 +58,15 @@ html .cet-titlebar .cet-control-icon svg {
    background-color: #202020 !important;
    color: #ececec !important;
  }
+
+  .swal2-container {
+    background: #202020 !important;
+  }
+
+  .swal2-container .swal2-popup {
+    background: #323232 !important;
+    color: #fff !important;
+  }
 }

 .animatedProgress div {