From 3062b88f4aed97a7c6586587c64b853d22169dda Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 20 May 2024 13:17:55 -0300
Subject: [PATCH] feat: progress bar and trying to animate

---
 .../events/autoupdater/check-for-updates.ts   |  4 +-
 src/main/services/window-manager.ts           |  4 +-
 src/renderer/src/pages/splash/splash.css.ts   | 41 +++++++++++++++++--
 src/renderer/src/pages/splash/splash.tsx      | 27 +++++++-----
 4 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/src/main/events/autoupdater/check-for-updates.ts b/src/main/events/autoupdater/check-for-updates.ts
index 76bac878..fc4f7d20 100644
--- a/src/main/events/autoupdater/check-for-updates.ts
+++ b/src/main/events/autoupdater/check-for-updates.ts
@@ -65,11 +65,11 @@ const checkForUpdates = async (_event: Electron.IpcMainInvokeEvent) => {
           total: total,
           delta: 123,
           transferred: (total * i) / 5,
-          percent: (total * i) / 5 / total,
+          percent: ((total * i) / 5 / total) * 100,
           bytesPerSecond: 4568,
         },
       });
-      await sleep(500);
+      await sleep(1000);
     }
 
     sendEvent({ type: "update-downloaded" });
diff --git a/src/main/services/window-manager.ts b/src/main/services/window-manager.ts
index c583aedc..261abcc8 100644
--- a/src/main/services/window-manager.ts
+++ b/src/main/services/window-manager.ts
@@ -57,8 +57,8 @@ export class WindowManager {
     if (this.splashWindow) return;
 
     this.splashWindow = new BrowserWindow({
-      width: 400,
-      height: 400,
+      width: 380,
+      height: 380,
       frame: false,
       alwaysOnTop: false,
       webPreferences: {
diff --git a/src/renderer/src/pages/splash/splash.css.ts b/src/renderer/src/pages/splash/splash.css.ts
index cae94a51..0f8cf028 100644
--- a/src/renderer/src/pages/splash/splash.css.ts
+++ b/src/renderer/src/pages/splash/splash.css.ts
@@ -1,12 +1,11 @@
 import { style } from "@vanilla-extract/css";
-import { SPACING_UNIT } from "../../theme.css";
+import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const main = style({
   width: "100%",
   height: "100%",
   display: "flex",
   flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
   padding: `${SPACING_UNIT * 3}px`,
   flex: "1",
   overflowY: "auto",
@@ -14,5 +13,41 @@ export const main = style({
 });
 
 export const splashIcon = style({
-  width: "250px",
+  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 progressBarContainer = style({
+  width: "100%",
+  height: "18px",
+  borderRadius: "24px",
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "center",
+  backgroundColor: vars.color.darkBackground,
+  border: `solid 1px ${vars.color.border}`,
+  overflow: "hidden",
+});
+
+export const progressBarFill = style({
+  position: "absolute",
+  transition: "width 0.1s",
+  height: "100%",
+  left: 0,
+  background: vars.color.background,
+});
+
+export const progressBarText = style({
+  zIndex: 2,
 });
diff --git a/src/renderer/src/pages/splash/splash.tsx b/src/renderer/src/pages/splash/splash.tsx
index 64d7001b..40407a57 100644
--- a/src/renderer/src/pages/splash/splash.tsx
+++ b/src/renderer/src/pages/splash/splash.tsx
@@ -16,14 +16,9 @@ export default function Splash() {
     console.log("subscribing");
     const unsubscribe = window.electron.onAutoUpdaterEvent(
       (event: AppUpdaterEvents) => {
-        console.log("event from screen: " + event.type);
         setStatus(event);
+
         switch (event.type) {
-          case "download-progress":
-            console.log(event.info);
-            break;
-          case "checking-for-updates":
-            break;
           case "error":
             window.electron.continueToMainWindow();
             break;
@@ -55,14 +50,24 @@ export default function Splash() {
       case "download-progress":
         return (
           <>
-            <p>Baixando atualização {newVersion}</p>
-            <p>{status.info.percent.toFixed(2)} %</p>
+            <p>Baixando versão {newVersion}</p>
+            <div className={styles.progressBarContainer}>
+              <div
+                className={styles.progressBarFill}
+                style={{ width: `${status.info.percent}%` }}
+              ></div>
+              <span className={styles.progressBarText}>
+                {status.info.percent.toFixed(2)} %
+              </span>
+            </div>
           </>
         );
       case "checking-for-updates":
         return <p>Buscando atualizações</p>;
       case "update-available":
-        return <p>Atualização {status.info.version} encontrada</p>;
+        return <p>Versão {status.info.version} encontrada</p>;
+      case "update-downloaded":
+        return <p>Reiniciando e aplicando atualização</p>;
       default:
         return <></>;
     }
@@ -70,8 +75,8 @@ export default function Splash() {
 
   return (
     <main className={styles.main}>
-      <img src={icon} className={styles.splashIcon} alt="" />
-      {renderSwitch()}
+      <img src={icon} className={styles.splashIcon} alt="Hydra Logo" />
+      <section className={styles.updateInfoSection}>{renderSwitch()}</section>
     </main>
   );
 }