UPDATE: "Launcher" Auto Download Box Design / Information (#2074)

launcher/public/output.css

@@ -1091,6 +1091,10 @@ video {
   grid-column-start: 14;
 }
 
+.col-start-16{
+  grid-column-start: 16;
+}
+
 .col-start-17{
   grid-column-start: 17;
 }
@@ -1539,6 +1543,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-40{
+  margin-top: 10rem;
+}
+
 .mt-5{
   margin-top: 1.25rem;
 }
@@ -1612,6 +1620,10 @@ video {
   height: 33.333333%;
 }
 
+.h-1\/6{
+  height: 16.666667%;
+}
+
 .h-10{
   height: 2.5rem;
 }
@@ -1656,6 +1668,10 @@ video {
   height: 75%;
 }
 
+.h-3\/6{
+  height: 50%;
+}
+
 .h-32{
   height: 8rem;
 }
@@ -2106,6 +2122,10 @@ video {
   width: 66.666667%;
 }
 
+.w-2\/4{
+  width: 50%;
+}
+
 .w-20{
   width: 5rem;
 }
@@ -3865,6 +3885,11 @@ video {
   background-color: rgb(96 152 121 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#70E763\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#A0A0A0\]{
   --tw-bg-opacity: 1;
   background-color: rgb(160 160 160 / var(--tw-bg-opacity));
@@ -3875,6 +3900,11 @@ video {
   background-color: rgb(209 187 158 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#EB5353\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#F7C566\]{
   --tw-bg-opacity: 1;
   background-color: rgb(247 197 102 / var(--tw-bg-opacity));

launcher/src/StereumUpdater.js

@@ -7,22 +7,29 @@ export class StereumUpdater {
     this.updateWindow = null;
     this.logger = logger;
     this.createWindow = createWindow;
+    this.newVersion = null;
   }
 
   checkForUpdates() {
     app.showExitPrompt = true;
     this.updater.checkForUpdates();
   }
 
+  getNewLauncherVersion() {
+    return this.newVersion;
+  }
+
   initUpdater() {
     this.updater.logger = this.logger;
     this.updater.logger.transports.file.level = "debug";
+    this.updater.autoDownload = false;
 
     this.updater.on("checking-for-update", () => {
       this.logger.info("Stereum is checking for updates.");
     });
 
-    this.updater.on("update-available", async () => {
+    this.updater.on("update-available", async (data) => {
+      this.newVersion = data.version;
       this.updateWindow = await this.createWindow("update");
       if (this.updateWindow) this.updateWindow.webContents.send("UpdateEvents", { message: "Update available.", type: "available" });
       this.logger.info("Update available.");
@@ -48,6 +55,7 @@ export class StereumUpdater {
       app.showExitPrompt = false;
       if (this.updateWindow)
         this.updateWindow.webContents.send("UpdateEvents", { message: "Update downloaded. " + data.version, type: "downloaded" });
+      this.newVersion = null;
       this.updater.quitAndInstall();
       this.logger.info("Update downloaded.", data);
     });
@@ -63,6 +71,18 @@ export class StereumUpdater {
     });
   }
 
+  async downloadUpdate() {
+    this.updater.downloadUpdate();
+    this.logger.info("Downloading update...");
+  }
+
+  async ignoreUpdate(win) {
+    app.showExitPrompt = false;
+    await win.close();
+    this.createWindow();
+    this.logger.info("Update ignored.");
+  }
+
   async runDebug() {
     async function Sleep(ms) {
       return new Promise((resolve) => setTimeout(resolve, ms));

launcher/src/background.js

@@ -752,6 +752,18 @@ ipcMain.handle("fetchCsmAlerts", async () => {
   return await monitoring.fetchCsmAlerts();
 });
 
+ipcMain.handle("ignoreUpdate", async (event) => {
+  return await stereumUpdater.ignoreUpdate(event.sender);
+});
+
+ipcMain.handle("updateLauncher", async () => {
+  return stereumUpdater.downloadUpdate();
+});
+
+ipcMain.handle("getNewLauncherVersion", async () => {
+  return stereumUpdater.getNewLauncherVersion();
+});
+
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: "app", privileges: { secure: true, standard: true } }]);
 

launcher/src/components/UI/server-management/components/modals/UpdateModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <custom-modal
+    icon=" /animation/launcher-update/update-loading-modal.gif"
+    icon-size="w-[30%]"
+    bg-color="bg-[#336666]"
+    :main-title="`${t('updateModal.updateTitle', { version: version })} `"
+    confirm-text=""
+    @close-window="closeWindow"
+  >
+    <template #content>
+      <div class="update-content-parent w-full h-full grid grid-cols-24 grid-rows-12 items-center">
+        <span class="col-start-5 col-end-21 row-start-2 row-end-4 text-md text-center text-gray-300">{{ t("updateModal.updateQ") }}</span>
+        <div
+          class="btn-modal col-start-3 col-end-10 row-start-8 row-span-4 h-full rounded-2xl px-2 font-semibold text-xl text-gray-700 bg-[#70E763] flex items-center justify-center uppercase cursor-pointer"
+          @click="submitUpdate"
+        >
+          <span>{{ t("updateModal.acc") }}</span>
+        </div>
+        <div
+          class="btn-modal col-start-16 col-end-23 row-start-8 row-span-4 h-full rounded-2xl px-2 font-semibold text-xl text-gray-100 bg-[#EB5353] flex items-center justify-center uppercase cursor-pointer"
+          @click="closeWindow"
+        >
+          <span>{{ t("updateModal.deny") }}</span>
+        </div>
+      </div>
+    </template>
+  </custom-modal>
+</template>
+
+<script setup>
+import CustomModal from "../../../node-page/components/modals/CustomModal.vue";
+import i18n from "@/includes/i18n";
+const t = i18n.global.t;
+defineProps({
+  version: String,
+});
+
+const emit = defineEmits(["update", "close-window"]);
+
+const submitUpdate = () => {
+  emit("update");
+};
+
+const closeWindow = () => {
+  emit("close-window");
+};
+</script>
+
+<style scoped>
+.btn-modal:active {
+  box-shadow: 1px 1px 10px 1px #171717 inset;
+}
+.btn-modal:active span {
+  transform: scale(0.9);
+}
+</style>

launcher/src/languages/en.json

@@ -1058,5 +1058,12 @@
   },
   "otpModal": {
     "newPass": "Type in your new Password"
+  },
+  "updateModal": {
+    "updateTitle": "Update {version} available",
+    "updateQ": "Do you want to update now?",
+    "acc": "accept",
+    "deny": "deny",
+    "updateTo": "Updating Stereum Launcher to {version}"
   }
 }

launcher/src/pages/UpdateHandler.vue

@@ -1,64 +1,71 @@
 <template>
-  <div class="update-parent">
-    <div class="loading-icon">
-      <img src="/animation/launcher-update/update-loading.gif" />
+  <div class="update-parent rounded-lg w-full h-full flex flex-col justify-center items-center bg-[#336666]">
+    <div class="update-page-title w-full h-1/6 flex justify-center items-center text-gray-50 text-3xl font-semibold">
+      <span>{{ t("updateModal.updateTo", { version: updateState.version }) }} </span>
     </div>
-    <div class="update-text">
-      <span>{{ `${updateState.message}${updateState.MBps ? " " + updateState.MBps.toFixed(2) + " MBps" : ""}` }}</span>
+    <div class="loading-icon w-full flex justify-center items-center h-3/6">
+      <img src="/animation/launcher-update/update-loading.gif" class="w-2/4 mt-40" />
     </div>
-    <div v-if="updateState.state === 'downloading'" id="progressbar">
-      <div :style="{ width: updateState.percent }"></div>
+
+    <div class="progressbar-box flex justify-center items-center w-full h-1/6">
+      <div v-if="updateState.state === 'downloading'" id="progressbar" class="w-full">
+        <div :style="{ width: updateState.percent }"></div>
+      </div>
+    </div>
+    <div class="update-text h-1/6 w-full flex justify-center items-center text-2xl text-gray-50 font-semibold">
+      <span>{{ `${updateState.message}${updateState.MBps ? "" + updateState.MBps.toFixed(2) + " MBps" : ""}` }}</span>
     </div>
+    <UpdateModal v-if="updateModel" :version="serviceStore?.launcherVersion" @update="runUpdate" @close-window="closeUpdateModal" />
   </div>
 </template>
-<script>
+<script setup>
+import UpdateModal from "../components/UI/server-management/components/modals/UpdateModal.vue";
 import ControlService from "@/store/ControlService";
-export default {
-  data() {
-    return {
-      updateState: {
-        state: "",
-        message: "Starting Update...",
-      },
-    };
-  },
-  mounted() {
-    ControlService.addListener("UpdateEvents", this.updateHandler);
-  },
-  unmounted() {
-    ControlService.removeListener("UpdateEvents", this.updateHandler);
-  },
-  methods: {
-    updateHandler(event, data) {
-      this.updateState.MBps = data.data?.MBps;
-      this.updateState.percent = data.data?.percent + "%";
-      this.updateState.state = data.type;
-      this.updateState.message = data.message;
-    },
-  },
+import { ref, onMounted, onUnmounted } from "vue";
+import { useServices } from "@/store/services";
+import i18n from "@/includes/i18n";
+const t = i18n.global.t;
+
+const updateState = ref({
+  state: "",
+  message: "Starting Update...",
+  MBps: 0,
+  percent: "0%",
+  version: "-",
+});
+
+const serviceStore = useServices();
+const updateModel = ref(true);
+
+onMounted(() => {
+  ControlService.getNewLauncherVersion().then((version) => {
+    updateState.value.version = version;
+  });
+  ControlService.addListener("UpdateEvents", updateHandler);
+});
+
+onUnmounted(() => {
+  ControlService.removeListener("UpdateEvents", updateHandler);
+});
+
+const closeUpdateModal = () => {
+  updateModel.value = false;
+  ControlService.ignoreUpdate();
+};
+
+const runUpdate = () => {
+  updateModel.value = false;
+  ControlService.updateLauncher();
+};
+
+const updateHandler = (event, data) => {
+  updateState.value.MBps = data.data?.MBps;
+  updateState.value.percent = data.data?.percent + "%";
+  updateState.value.state = data.type;
+  updateState.value.message = data.message;
 };
 </script>
-<style>
-.update-parent {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: grey;
-}
-.loading-icon {
-  display: flex;
-  align-items: center;
-}
-.loading-icon img {
-  margin-top: -300px;
-  margin-bottom: -550px;
-}
-.update-text {
-  font-size: 30px;
-  font-weight: bold;
-}
+<style scoped>
 #progressbar {
   width: 80%;
   background-color: black;
@@ -71,5 +78,6 @@ export default {
   height: 20px;
   border-radius: 10px;
   transition: all 1s linear;
+  width: 10%;
 }
 </style>

launcher/src/store/ControlService.js

@@ -686,6 +686,18 @@ class ControlService extends EventEmitter {
   async fetchCsmAlerts() {
     return this.promiseIpc.send("fetchCsmAlerts");
   }
+
+  async ignoreUpdate() {
+    return this.promiseIpc.send("ignoreUpdate");
+  }
+
+  async updateLauncher() {
+    return this.promiseIpc.send("updateLauncher");
+  }
+
+  async getNewLauncherVersion() {
+    return this.promiseIpc.send("getNewLauncherVersion");
+  }
 }
 if (!instance) {
   instance = new ControlService(window.electron);

launcher/src/store/servers.js

@@ -35,6 +35,7 @@ export const useServers = defineStore("servers", {
       isRemoveModalActive: false,
       isRemoveProcessing: false,
       selectedAvatar: null,
+      updateHandlerModal: true,
 
       avatars: [
         { id: 1, img: "/avatar/server_selection_1.png" },