From a4dcebba7c2804dcb0149db7c742755a16364bc9 Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Mon, 10 Oct 2022 19:02:24 +0200 Subject: [PATCH 01/17] LoadingIcon improvement MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • the loading progress bar. • title attr now shows the status --- renderer/src/loadingicon.js | 43 +++++++++++++++++++++++++++++++++--- renderer/src/modules/core.js | 42 +++++++++++++++++++++++------------ 2 files changed, 68 insertions(+), 17 deletions(-) diff --git a/renderer/src/loadingicon.js b/renderer/src/loadingicon.js index 41d06bd2..cad65cb4 100644 --- a/renderer/src/loadingicon.js +++ b/renderer/src/loadingicon.js @@ -6,15 +6,30 @@ const css = `/* BEGIN V2 LOADER */ } #bd-loading-icon { position: fixed; - bottom:5px; - right:5px; - z-index: 2147483647; + bottom: 10px; + right: 5px; + z-index: 2147483646; display: block; width: 20px; height: 20px; background-size: 100% 100%; animation: bd-loading-animation 1.5s ease-in-out infinite; } +#bd-loading-progress { + position: fixed; + bottom: 5px; + right:5px; + z-index: 2147483647; + width: 20px; + height: 3px; + background-color: var(--header-primary); + overflow: hidden; +} +#bd-loading-progress-bar { + background-color: #3E82E5; + width: 0%; + height: 100%; +} @keyframes bd-loading-animation { 0% { opacity: 0.05; } @@ -32,14 +47,36 @@ loadingIcon.id = "bd-loading-icon"; loadingIcon.className = "bd-loaderv2"; loadingIcon.title = "BetterDiscord is loading..."; +const loadingProgressBar = document.createElement('div'); +loadingProgressBar.id = "bd-loading-progress-bar"; +const loadingProgress = document.createElement('div'); +loadingProgress.appendChild(loadingProgressBar); +loadingProgress.id = "bd-loading-progress"; + export default class { + + static setInitStatus(percent, status = "") { + return new Promise( + rs => { + if (percent > 100) percent = 100; + if (percent < 0) percent = 0; + loadingProgressBar.style.width = percent + "%"; + if (status) loadingIcon.title = status; + // 60 fps, rendering wait + setTimeout(rs, 1000/60) + } + ) + } + static show() { document.body.appendChild(iconStyle); document.body.appendChild(loadingIcon); + document.body.appendChild(loadingProgress); } static hide() { if (iconStyle) iconStyle.remove(); if (loadingIcon) loadingIcon.remove(); + if (loadingProgress) loadingProgress.remove(); } } \ No newline at end of file diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index b64018f1..429dfc38 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -27,54 +27,68 @@ export default new class Core { Config.userData = process.env.DISCORD_USER_DATA; Config.dataPath = process.env.BETTERDISCORD_DATA_PATH; + /**loading steps count*/ + // Load css early Logger.log("Startup", "Injecting BD Styles"); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); - + await LoadingIcon.setInitStatus(1/15*100, "Injecting BD Styles"); + Logger.log("Startup", "Initializing DataStore"); DataStore.initialize(); - + await LoadingIcon.setInitStatus(2/15*100, "Initializing DataStore"); + Logger.log("Startup", "Initializing LocaleManager"); LocaleManager.initialize(); - + await LoadingIcon.setInitStatus(3/15*100, "Initializing LocaleManager"); + Logger.log("Startup", "Getting update information"); this.checkForUpdate(); - + await LoadingIcon.setInitStatus(4/15*100, "Getting update information"); + Logger.log("Startup", "Initializing Settings"); Settings.initialize(); - + await LoadingIcon.setInitStatus(5/15*100, "Initializing Settings"); + Logger.log("Startup", "Initializing DOMManager"); DOMManager.initialize(); - + await LoadingIcon.setInitStatus(6/15*100, "Initializing DOMManager"); + Logger.log("Startup", "Waiting for connection..."); await this.waitForConnection(); - + await LoadingIcon.setInitStatus(7/15*100, "Waiting for connection..."); + Logger.log("Startup", "Initializing Editor"); await Editor.initialize(); - + await LoadingIcon.setInitStatus(8/15*100, "Initializing Editor"); + Logger.log("Startup", "Initializing Builtins"); for (const module in Builtins) { Builtins[module].initialize(); } - + await LoadingIcon.setInitStatus(9/15*100, "Initializing Builtins"); + Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; const pluginErrors = PluginManager.initialize(); - + await LoadingIcon.setInitStatus(10/15*100); + Logger.log("Startup", "Loading Themes"); // const themeErrors = []; const themeErrors = ThemeManager.initialize(); - + await LoadingIcon.setInitStatus(11/15*100); + Logger.log("Startup", "Initializing AddonUpdater"); AddonUpdater.initialize(); - + await LoadingIcon.setInitStatus(12/15*100); + Logger.log("Startup", "Removing Loading Icon"); LoadingIcon.hide(); - + // Show loading errors Logger.log("Startup", "Collecting Startup Errors"); Modals.showAddonErrors({plugins: pluginErrors, themes: themeErrors}); - + const previousVersion = DataStore.getBDData("version"); if (Config.version > previousVersion) { const md = [Changelog.description]; From 599b91768aa8bb6f4b61972d48ccc1427e98cd84 Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Mon, 10 Oct 2022 19:22:06 +0200 Subject: [PATCH 02/17] Final changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Code • Import --- renderer/src/index.js | 4 +-- renderer/src/{loadingicon.js => loading.js} | 1 - renderer/src/modules/core.js | 30 ++++++++++----------- 3 files changed, 17 insertions(+), 18 deletions(-) rename renderer/src/{loadingicon.js => loading.js} (99%) diff --git a/renderer/src/index.js b/renderer/src/index.js index 21208310..46350e3c 100644 --- a/renderer/src/index.js +++ b/renderer/src/index.js @@ -1,6 +1,6 @@ import require from "./polyfill"; // eslint-disable-line no-unused-vars import secure from "./secure"; -import LoadingIcon from "./loadingicon"; +import LoadingInterface from "./loading"; import BetterDiscord from "./modules/core"; import BdApi from "./modules/pluginapi"; @@ -10,5 +10,5 @@ window.BdApi = BdApi; window.global = window; // Add loading icon at the bottom right -LoadingIcon.show(); +LoadingInterface.show(); BetterDiscord.startup(); \ No newline at end of file diff --git a/renderer/src/loadingicon.js b/renderer/src/loading.js similarity index 99% rename from renderer/src/loadingicon.js rename to renderer/src/loading.js index cad65cb4..05671700 100644 --- a/renderer/src/loadingicon.js +++ b/renderer/src/loading.js @@ -54,7 +54,6 @@ loadingProgress.appendChild(loadingProgressBar); loadingProgress.id = "bd-loading-progress"; export default class { - static setInitStatus(percent, status = "") { return new Promise( rs => { diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 429dfc38..14d8f845 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -13,7 +13,7 @@ import DataStore from "./datastore"; import DiscordModules from "./discordmodules"; import Strings from "./strings"; import IPC from "./ipc"; -import LoadingIcon from "../loadingicon"; +import LoadingInterface from "../loading"; import Styles from "../styles/index.css"; import Editor from "./editor"; import AddonUpdater from "./addonupdater"; @@ -32,58 +32,58 @@ export default new class Core { // Load css early Logger.log("Startup", "Injecting BD Styles"); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); - await LoadingIcon.setInitStatus(1/15*100, "Injecting BD Styles"); + await LoadingInterface.setInitStatus(1/15*100, "Injecting BD Styles"); Logger.log("Startup", "Initializing DataStore"); DataStore.initialize(); - await LoadingIcon.setInitStatus(2/15*100, "Initializing DataStore"); + await LoadingInterface.setInitStatus(2/15*100, "Initializing DataStore"); Logger.log("Startup", "Initializing LocaleManager"); LocaleManager.initialize(); - await LoadingIcon.setInitStatus(3/15*100, "Initializing LocaleManager"); + await LoadingInterface.setInitStatus(3/15*100, "Initializing LocaleManager"); Logger.log("Startup", "Getting update information"); this.checkForUpdate(); - await LoadingIcon.setInitStatus(4/15*100, "Getting update information"); + await LoadingInterface.setInitStatus(4/15*100, "Getting update information"); Logger.log("Startup", "Initializing Settings"); Settings.initialize(); - await LoadingIcon.setInitStatus(5/15*100, "Initializing Settings"); + await LoadingInterface.setInitStatus(5/15*100, "Initializing Settings"); Logger.log("Startup", "Initializing DOMManager"); DOMManager.initialize(); - await LoadingIcon.setInitStatus(6/15*100, "Initializing DOMManager"); + await LoadingInterface.setInitStatus(6/15*100, "Initializing DOMManager"); Logger.log("Startup", "Waiting for connection..."); await this.waitForConnection(); - await LoadingIcon.setInitStatus(7/15*100, "Waiting for connection..."); + await LoadingInterface.setInitStatus(7/15*100, "Waiting for connection..."); Logger.log("Startup", "Initializing Editor"); await Editor.initialize(); - await LoadingIcon.setInitStatus(8/15*100, "Initializing Editor"); + await LoadingInterface.setInitStatus(8/15*100, "Initializing Editor"); Logger.log("Startup", "Initializing Builtins"); for (const module in Builtins) { Builtins[module].initialize(); } - await LoadingIcon.setInitStatus(9/15*100, "Initializing Builtins"); + await LoadingInterface.setInitStatus(9/15*100, "Initializing Builtins"); Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; const pluginErrors = PluginManager.initialize(); - await LoadingIcon.setInitStatus(10/15*100); + await LoadingInterface.setInitStatus(10/15*100, "Loading Plugins"); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; const themeErrors = ThemeManager.initialize(); - await LoadingIcon.setInitStatus(11/15*100); + await LoadingInterface.setInitStatus(11/15*100, "Loading Themes"); Logger.log("Startup", "Initializing AddonUpdater"); AddonUpdater.initialize(); - await LoadingIcon.setInitStatus(12/15*100); + await LoadingInterface.setInitStatus(12/15*100, "Initializing AddonUpdater"); - Logger.log("Startup", "Removing Loading Icon"); - LoadingIcon.hide(); + Logger.log("Startup", "Removing Loading Interface"); + LoadingInterface.hide(); // Show loading errors Logger.log("Startup", "Collecting Startup Errors"); From fd392318728d68a669ac882f29ec2cab14090037 Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Mon, 10 Oct 2022 21:58:57 +0200 Subject: [PATCH 03/17] spaces rollback --- renderer/src/modules/core.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index ac620c8b..67a8de26 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -39,7 +39,7 @@ export default new class Core { Logger.log("Startup", "Initializing LocaleManager"); LocaleManager.initialize(); - await LoadingInterface.setInitStatus(3/15*100, "Initializing LocaleManager"); + await LoadingInterface.setInitStatus(3/15*100, "Initializing LocaleManager"); Logger.log("Startup", "Getting update information"); this.checkForUpdate(); @@ -62,7 +62,7 @@ export default new class Core { await LoadingInterface.setInitStatus(8/15*100, "Initializing Editor"); Logger.log("Startup", "Initializing Builtins"); - Modals.initialize(); + Modals.initialize(); for (const module in Builtins) { Builtins[module].initialize(); } From 3e413cfbb0db7403a6cd26fe01a65adba4b9227a Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Mon, 10 Oct 2022 22:45:07 +0200 Subject: [PATCH 04/17] Broken Updater import fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • stepsCount has added --- renderer/src/modules/core.js | 37 ++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 67a8de26..c1993c3d 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -15,7 +15,7 @@ import IPC from "./ipc"; import LoadingInterface from "../loading"; import Styles from "../styles/index.css"; import Editor from "./editor"; -import Updater from "./updater"; +import {PluginUpdater, ThemeUpdater, CoreUpdater} from "./updater"; export default new class Core { async startup() { @@ -27,60 +27,65 @@ export default new class Core { Config.dataPath = process.env.BETTERDISCORD_DATA_PATH; /**loading steps count*/ + const stepsCount = 14; // Load css early Logger.log("Startup", "Injecting BD Styles"); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); - await LoadingInterface.setInitStatus(1/15*100, "Injecting BD Styles"); + await LoadingInterface.setInitStatus(1/stepsCount*100, "Injecting BD Styles"); Logger.log("Startup", "Initializing DataStore"); DataStore.initialize(); - await LoadingInterface.setInitStatus(2/15*100, "Initializing DataStore"); + await LoadingInterface.setInitStatus(2/stepsCount*100, "Initializing DataStore"); Logger.log("Startup", "Initializing LocaleManager"); LocaleManager.initialize(); - await LoadingInterface.setInitStatus(3/15*100, "Initializing LocaleManager"); + await LoadingInterface.setInitStatus(3/stepsCount*100, "Initializing LocaleManager"); Logger.log("Startup", "Getting update information"); - this.checkForUpdate(); - await LoadingInterface.setInitStatus(4/15*100, "Getting update information"); + CoreUpdater.checkForUpdate() + await LoadingInterface.setInitStatus(4/stepsCount*100, "Getting update information"); Logger.log("Startup", "Initializing Settings"); Settings.initialize(); - await LoadingInterface.setInitStatus(5/15*100, "Initializing Settings"); + await LoadingInterface.setInitStatus(5/stepsCount*100, "Initializing Settings"); Logger.log("Startup", "Initializing DOMManager"); DOMManager.initialize(); - await LoadingInterface.setInitStatus(6/15*100, "Initializing DOMManager"); + await LoadingInterface.setInitStatus(6/stepsCount*100, "Initializing DOMManager"); Logger.log("Startup", "Waiting for connection..."); await this.waitForConnection(); - await LoadingInterface.setInitStatus(7/15*100, "Waiting for connection..."); + await LoadingInterface.setInitStatus(7/stepsCount*100, "Waiting for connection..."); Logger.log("Startup", "Initializing Editor"); await Editor.initialize(); - await LoadingInterface.setInitStatus(8/15*100, "Initializing Editor"); + await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Editor"); Logger.log("Startup", "Initializing Builtins"); Modals.initialize(); for (const module in Builtins) { Builtins[module].initialize(); } - await LoadingInterface.setInitStatus(9/15*100, "Initializing Builtins"); + await LoadingInterface.setInitStatus(9/stepsCount*100, "Initializing Builtins"); Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; const pluginErrors = PluginManager.initialize(); - await LoadingInterface.setInitStatus(10/15*100, "Loading Plugins"); + await LoadingInterface.setInitStatus(10/stepsCount*100, "Loading Plugins"); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; const themeErrors = ThemeManager.initialize(); - await LoadingInterface.setInitStatus(11/15*100, "Loading Themes"); + await LoadingInterface.setInitStatus(11/stepsCount*100, "Loading Themes"); - Logger.log("Startup", "Initializing AddonUpdater"); - AddonUpdater.initialize(); - await LoadingInterface.setInitStatus(12/15*100, "Initializing AddonUpdater"); + Logger.log("Startup", "Initializing PluginUpdater"); + PluginUpdater.initialize(); + await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing ThemeUpdater"); + + Logger.log("Startup", "Initializing ThemeUpdater"); + ThemeUpdater.initialize(); + await LoadingInterface.setInitStatus(13/stepsCount*100, "Initializing ThemeUpdater"); Logger.log("Startup", "Removing Loading Interface"); LoadingInterface.hide(); From d20b491900504a4d9cd47654825e809d17ba6a30 Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Tue, 11 Oct 2022 12:23:15 +0200 Subject: [PATCH 05/17] Updater - another fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • The "Updates" tab is now displayed --- renderer/src/modules/core.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index c1993c3d..a146a4ee 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -15,7 +15,7 @@ import IPC from "./ipc"; import LoadingInterface from "../loading"; import Styles from "../styles/index.css"; import Editor from "./editor"; -import {PluginUpdater, ThemeUpdater, CoreUpdater} from "./updater"; +import Updater, {CoreUpdater} from "./updater"; export default new class Core { async startup() { @@ -41,10 +41,6 @@ export default new class Core { Logger.log("Startup", "Initializing LocaleManager"); LocaleManager.initialize(); await LoadingInterface.setInitStatus(3/stepsCount*100, "Initializing LocaleManager"); - - Logger.log("Startup", "Getting update information"); - CoreUpdater.checkForUpdate() - await LoadingInterface.setInitStatus(4/stepsCount*100, "Getting update information"); Logger.log("Startup", "Initializing Settings"); Settings.initialize(); @@ -79,13 +75,13 @@ export default new class Core { const themeErrors = ThemeManager.initialize(); await LoadingInterface.setInitStatus(11/stepsCount*100, "Loading Themes"); - Logger.log("Startup", "Initializing PluginUpdater"); - PluginUpdater.initialize(); - await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing ThemeUpdater"); - - Logger.log("Startup", "Initializing ThemeUpdater"); - ThemeUpdater.initialize(); - await LoadingInterface.setInitStatus(13/stepsCount*100, "Initializing ThemeUpdater"); + Logger.log("Startup", "Initializing Updater"); + Updater.initialize(); + await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing Updater"); + + Logger.log("Startup", "Getting update information"); + CoreUpdater.checkForUpdate() + await LoadingInterface.setInitStatus(4/stepsCount*100, "Getting update information"); Logger.log("Startup", "Removing Loading Interface"); LoadingInterface.hide(); From 4da76ddea6a5c74073bb25b6ba8e03a1a722ba07 Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Thu, 13 Oct 2022 12:01:44 +0200 Subject: [PATCH 06/17] BD icon light theme supported --- renderer/src/loading.js | 5 ++++- renderer/src/modules/core.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/renderer/src/loading.js b/renderer/src/loading.js index 05671700..b32cdede 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -1,9 +1,12 @@ const css = `/* BEGIN V2 LOADER */ /* =============== */ -#bd-loading-icon { +.theme-dark #bd-loading-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); } +.theme-light #bd-loading-icon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); +} #bd-loading-icon { position: fixed; bottom: 10px; diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index a146a4ee..0b603640 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -81,7 +81,7 @@ export default new class Core { Logger.log("Startup", "Getting update information"); CoreUpdater.checkForUpdate() - await LoadingInterface.setInitStatus(4/stepsCount*100, "Getting update information"); + await LoadingInterface.setInitStatus(13/stepsCount*100, "Getting update information"); Logger.log("Startup", "Removing Loading Interface"); LoadingInterface.hide(); From 1a76789c1d3755027c51dd97ac848e029fb7db4b Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Thu, 13 Oct 2022 15:07:30 +0200 Subject: [PATCH 07/17] Status Labels List MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Attribute "title" have been removed. --- renderer/src/loading.js | 111 +++++++++++++++++++++++++++-------- renderer/src/modules/core.js | 1 + 2 files changed, 88 insertions(+), 24 deletions(-) diff --git a/renderer/src/loading.js b/renderer/src/loading.js index b32cdede..4a835802 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -1,6 +1,15 @@ +/**The maximum number of status labels in the list at load time.*/ +const maxLabels = 4; const css = `/* BEGIN V2 LOADER */ /* =============== */ +#bd-loading { + position: absolute; + right: 5px; + bottom: 5px; + transition: 1s; +} + .theme-dark #bd-loading-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); } @@ -21,7 +30,7 @@ const css = `/* BEGIN V2 LOADER */ #bd-loading-progress { position: fixed; bottom: 5px; - right:5px; + right: 5px; z-index: 2147483647; width: 20px; height: 3px; @@ -34,6 +43,28 @@ const css = `/* BEGIN V2 LOADER */ height: 100%; } +#bd-loading-status-list { + position: absolute; + bottom: 7px; + right: 30px; + z-index: 2147483645; +} +.bd-loading-status-container { + white-space: nowrap; + text-align: right; + font-weight: 600; + color: var(--header-primary); + transition: 0.2s; +} +${ + (()=>{ + /**if `maxLabels == 4`: `'2', '3', 'n+4'`*/ + let opacityReduceNth = new Array(maxLabels - 1).fill('temp').map((_, i) => (i == maxLabels - 2 ? 'n+' : '') + (i + 2).toString()) + + return opacityReduceNth.map((nth, i) => `.bd-loading-status-container:nth-last-child(${nth}) { opacity: ${1 - (i + 1) * (1 / maxLabels)}; }`).join('\n') + })() +} + @keyframes bd-loading-animation { 0% { opacity: 0.05; } 50% { opacity: 0.6; } @@ -42,43 +73,75 @@ const css = `/* BEGIN V2 LOADER */ /* =============== */ /* END V2 LOADER */`; -const iconStyle = document.createElement("style"); -iconStyle.textContent = css; +const IconStyle = document.createElement("style"); +IconStyle.textContent = css; -const loadingIcon = document.createElement("div"); -loadingIcon.id = "bd-loading-icon"; -loadingIcon.className = "bd-loaderv2"; -loadingIcon.title = "BetterDiscord is loading..."; +const Icon = document.createElement("div"); +Icon.id = "bd-loading-icon"; +Icon.className = "bd-loaderv2"; -const loadingProgressBar = document.createElement('div'); -loadingProgressBar.id = "bd-loading-progress-bar"; -const loadingProgress = document.createElement('div'); -loadingProgress.appendChild(loadingProgressBar); -loadingProgress.id = "bd-loading-progress"; +const ProgressBar = document.createElement("div"); +ProgressBar.id = "bd-loading-progress-bar"; +const Progress = document.createElement("div"); +Progress.appendChild(ProgressBar); +Progress.id = "bd-loading-progress"; + +const StatusListContainer = document.createElement("div"); +StatusListContainer.id = "bd-loading-status-list"; + + +const Container = document.createElement("div"); +Container.id = "bd-loading"; +Container.appendChild(IconStyle); +Container.appendChild(Icon); +Container.appendChild(Progress); +Container.appendChild(StatusListContainer); export default class { - static setInitStatus(percent, status = "") { + + /** + * Sets the value of the progress bar, adds status to the list about status. + * @param {*} percent Doesn't change the progress if not a number. + * @param {string} status Doesn't add the label if not a string. + * @param {boolean} clear Previous labels will be deleted before adding a new one (`status`). + * @returns + */ + static setInitStatus(percent = null, status = "", clear = false) { return new Promise( rs => { - if (percent > 100) percent = 100; - if (percent < 0) percent = 0; - loadingProgressBar.style.width = percent + "%"; - if (status) loadingIcon.title = status; + if(isFinite(percent)) { + if (percent > 100) percent = 100; + if (percent < 0) percent = 0; + ProgressBar.style.width = percent + "%"; + }; + if(clear) { + StatusListContainer.innerHTML = ""; + }; + if (typeof status == "string") { + let StatusContainer = document.createElement("div"); + StatusContainer.className = "bd-loading-status-container"; + StatusContainer.innerHTML = status; + StatusListContainer.append(StatusContainer); + + if (StatusListContainer.childElementCount > 3) { + let Needless = StatusListContainer.querySelectorAll("#bd-loading-status-list > :nth-last-child(n+4)"); + Needless.forEach(n => setTimeout(() => n?.remove?.(), 200)); + } + }; // 60 fps, rendering wait - setTimeout(rs, 1000/60) + setTimeout(rs, 1000/60); } ) } static show() { - document.body.appendChild(iconStyle); - document.body.appendChild(loadingIcon); - document.body.appendChild(loadingProgress); + document.body.appendChild(Container); } static hide() { - if (iconStyle) iconStyle.remove(); - if (loadingIcon) loadingIcon.remove(); - if (loadingProgress) loadingProgress.remove(); + if (Container) { + Container.style.opacity = 0; + setTimeout(() => Container.remove(), 1000); + }; } } \ No newline at end of file diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 0b603640..aa465799 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -84,6 +84,7 @@ export default new class Core { await LoadingInterface.setInitStatus(13/stepsCount*100, "Getting update information"); Logger.log("Startup", "Removing Loading Interface"); + await LoadingInterface.setInitStatus(100, "Done"); LoadingInterface.hide(); // Show loading errors From 51d6a70b312e0bcced531930d26318370d5c602a Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Thu, 13 Oct 2022 15:49:54 +0200 Subject: [PATCH 08/17] Done MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Code styling • Improvements --- renderer/src/loading.js | 26 +++++++++++++------------- renderer/src/modules/core.js | 26 +++++++++++++------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/renderer/src/loading.js b/renderer/src/loading.js index 4a835802..a780f042 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -1,13 +1,16 @@ -/**The maximum number of status labels in the list at load time.*/ -const maxLabels = 4; +/**Determines where the extra starts.*/ +const extraLabels = 6; const css = `/* BEGIN V2 LOADER */ /* =============== */ #bd-loading { + z-index: 2147483647; position: absolute; - right: 5px; - bottom: 5px; + right: 0; + bottom: 0; transition: 1s; + width: 100%; + height: 100%; } .theme-dark #bd-loading-icon { @@ -20,7 +23,6 @@ const css = `/* BEGIN V2 LOADER */ position: fixed; bottom: 10px; right: 5px; - z-index: 2147483646; display: block; width: 20px; height: 20px; @@ -31,7 +33,6 @@ const css = `/* BEGIN V2 LOADER */ position: fixed; bottom: 5px; right: 5px; - z-index: 2147483647; width: 20px; height: 3px; background-color: var(--header-primary); @@ -47,7 +48,6 @@ const css = `/* BEGIN V2 LOADER */ position: absolute; bottom: 7px; right: 30px; - z-index: 2147483645; } .bd-loading-status-container { white-space: nowrap; @@ -56,12 +56,12 @@ const css = `/* BEGIN V2 LOADER */ color: var(--header-primary); transition: 0.2s; } -${ +${// reduce labels opacity (()=>{ /**if `maxLabels == 4`: `'2', '3', 'n+4'`*/ - let opacityReduceNth = new Array(maxLabels - 1).fill('temp').map((_, i) => (i == maxLabels - 2 ? 'n+' : '') + (i + 2).toString()) + let opacityReduceNth = new Array(extraLabels - 1).fill('temp').map((_, i) => (i == extraLabels - 2 ? 'n+' : '') + (i + 2).toString()); - return opacityReduceNth.map((nth, i) => `.bd-loading-status-container:nth-last-child(${nth}) { opacity: ${1 - (i + 1) * (1 / maxLabels)}; }`).join('\n') + return opacityReduceNth.map((nth, i) => `.bd-loading-status-container:nth-last-child(${nth}) { opacity: ${1 - (i + 1) * (1 / extraLabels)}; }`).join('\n'); })() } @@ -103,7 +103,7 @@ export default class { * Sets the value of the progress bar, adds status to the list about status. * @param {*} percent Doesn't change the progress if not a number. * @param {string} status Doesn't add the label if not a string. - * @param {boolean} clear Previous labels will be deleted before adding a new one (`status`). + * @param {boolean} clear Previous labels will be deleted before adding a new one `status`. * @returns */ static setInitStatus(percent = null, status = "", clear = false) { @@ -123,8 +123,8 @@ export default class { StatusContainer.innerHTML = status; StatusListContainer.append(StatusContainer); - if (StatusListContainer.childElementCount > 3) { - let Needless = StatusListContainer.querySelectorAll("#bd-loading-status-list > :nth-last-child(n+4)"); + if (StatusListContainer.childElementCount > extraLabels - 1) { + let Needless = StatusListContainer.querySelectorAll(`#bd-loading-status-list > :nth-last-child(n+${extraLabels})`); Needless.forEach(n => setTimeout(() => n?.remove?.(), 200)); } }; diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index aa465799..036119ab 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -31,60 +31,60 @@ export default new class Core { // Load css early Logger.log("Startup", "Injecting BD Styles"); - DOMManager.injectStyle("bd-stylesheet", Styles.toString()); await LoadingInterface.setInitStatus(1/stepsCount*100, "Injecting BD Styles"); + DOMManager.injectStyle("bd-stylesheet", Styles.toString()); Logger.log("Startup", "Initializing DataStore"); + await LoadingInterface.setInitStatus(2/stepsCount*100, "Initializing DataStore..."); DataStore.initialize(); - await LoadingInterface.setInitStatus(2/stepsCount*100, "Initializing DataStore"); Logger.log("Startup", "Initializing LocaleManager"); + await LoadingInterface.setInitStatus(3/stepsCount*100, "Initializing LocaleManager..."); LocaleManager.initialize(); - await LoadingInterface.setInitStatus(3/stepsCount*100, "Initializing LocaleManager"); Logger.log("Startup", "Initializing Settings"); + await LoadingInterface.setInitStatus(5/stepsCount*100, "Initializing Settings..."); Settings.initialize(); - await LoadingInterface.setInitStatus(5/stepsCount*100, "Initializing Settings"); Logger.log("Startup", "Initializing DOMManager"); + await LoadingInterface.setInitStatus(6/stepsCount*100, "Initializing DOMManager..."); DOMManager.initialize(); - await LoadingInterface.setInitStatus(6/stepsCount*100, "Initializing DOMManager"); Logger.log("Startup", "Waiting for connection..."); - await this.waitForConnection(); await LoadingInterface.setInitStatus(7/stepsCount*100, "Waiting for connection..."); + await this.waitForConnection(); Logger.log("Startup", "Initializing Editor"); + await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Editor..."); await Editor.initialize(); - await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Editor"); Logger.log("Startup", "Initializing Builtins"); + await LoadingInterface.setInitStatus(9/stepsCount*100, "Initializing Builtins..."); Modals.initialize(); for (const module in Builtins) { Builtins[module].initialize(); } - await LoadingInterface.setInitStatus(9/stepsCount*100, "Initializing Builtins"); Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; + await LoadingInterface.setInitStatus(10/stepsCount*100, "Loading Plugins..."); const pluginErrors = PluginManager.initialize(); - await LoadingInterface.setInitStatus(10/stepsCount*100, "Loading Plugins"); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; + await LoadingInterface.setInitStatus(11/stepsCount*100, "Loading Themes..."); const themeErrors = ThemeManager.initialize(); - await LoadingInterface.setInitStatus(11/stepsCount*100, "Loading Themes"); Logger.log("Startup", "Initializing Updater"); + await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing Updater..."); Updater.initialize(); - await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing Updater"); Logger.log("Startup", "Getting update information"); + await LoadingInterface.setInitStatus(13/stepsCount*100, "Getting update information..."); CoreUpdater.checkForUpdate() - await LoadingInterface.setInitStatus(13/stepsCount*100, "Getting update information"); Logger.log("Startup", "Removing Loading Interface"); - await LoadingInterface.setInitStatus(100, "Done"); + await LoadingInterface.setInitStatus(100, "Done", true); LoadingInterface.hide(); // Show loading errors From 82e5e0281390e83cf8f87b8710d35cbf2f950d3a Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Sat, 15 Oct 2022 16:47:21 +0200 Subject: [PATCH 09/17] Update core.js --- renderer/src/modules/core.js | 39 ++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 036119ab..e498f1a3 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -15,7 +15,7 @@ import IPC from "./ipc"; import LoadingInterface from "../loading"; import Styles from "../styles/index.css"; import Editor from "./editor"; -import Updater, {CoreUpdater} from "./updater"; +import Updater from "./updater"; export default new class Core { async startup() { @@ -31,66 +31,65 @@ export default new class Core { // Load css early Logger.log("Startup", "Injecting BD Styles"); - await LoadingInterface.setInitStatus(1/stepsCount*100, "Injecting BD Styles"); + await LoadingInterface.setInitStatus(1/stepsCount*100, "Injecting BD Styles..."); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); - + Logger.log("Startup", "Initializing DataStore"); await LoadingInterface.setInitStatus(2/stepsCount*100, "Initializing DataStore..."); DataStore.initialize(); - + Logger.log("Startup", "Initializing LocaleManager"); await LoadingInterface.setInitStatus(3/stepsCount*100, "Initializing LocaleManager..."); LocaleManager.initialize(); - + Logger.log("Startup", "Initializing Settings"); await LoadingInterface.setInitStatus(5/stepsCount*100, "Initializing Settings..."); Settings.initialize(); - + Logger.log("Startup", "Initializing DOMManager"); await LoadingInterface.setInitStatus(6/stepsCount*100, "Initializing DOMManager..."); DOMManager.initialize(); - + Logger.log("Startup", "Waiting for connection..."); await LoadingInterface.setInitStatus(7/stepsCount*100, "Waiting for connection..."); await this.waitForConnection(); - + Logger.log("Startup", "Initializing Editor"); await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Editor..."); await Editor.initialize(); - + + Logger.log("Startup", "Initializing Modals"); + await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Modals..."); + await Modals.initialize(); + Logger.log("Startup", "Initializing Builtins"); await LoadingInterface.setInitStatus(9/stepsCount*100, "Initializing Builtins..."); - Modals.initialize(); for (const module in Builtins) { Builtins[module].initialize(); } - + Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; await LoadingInterface.setInitStatus(10/stepsCount*100, "Loading Plugins..."); const pluginErrors = PluginManager.initialize(); - + Logger.log("Startup", "Loading Themes"); // const themeErrors = []; await LoadingInterface.setInitStatus(11/stepsCount*100, "Loading Themes..."); const themeErrors = ThemeManager.initialize(); - + Logger.log("Startup", "Initializing Updater"); await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing Updater..."); Updater.initialize(); - - Logger.log("Startup", "Getting update information"); - await LoadingInterface.setInitStatus(13/stepsCount*100, "Getting update information..."); - CoreUpdater.checkForUpdate() - + Logger.log("Startup", "Removing Loading Interface"); await LoadingInterface.setInitStatus(100, "Done", true); LoadingInterface.hide(); - + // Show loading errors Logger.log("Startup", "Collecting Startup Errors"); Modals.showAddonErrors({plugins: pluginErrors, themes: themeErrors}); - + const previousVersion = DataStore.getBDData("version"); if (Config.version !== previousVersion) { Modals.showChangelogModal(Changelog); From 48edbda4314c3e658b58b0886d203cc7cb69c048 Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Tue, 13 Dec 2022 18:48:09 +0100 Subject: [PATCH 10/17] setInitStatus params the function now takes an object parameter percent -> progress + hiddenProgress --- renderer/src/loading.js | 30 ++++++++++++++++++++---------- renderer/src/modules/core.js | 26 +++++++++++++------------- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/renderer/src/loading.js b/renderer/src/loading.js index a780f042..b46d65f0 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -101,21 +101,31 @@ export default class { /** * Sets the value of the progress bar, adds status to the list about status. - * @param {*} percent Doesn't change the progress if not a number. - * @param {string} status Doesn't add the label if not a string. - * @param {boolean} clear Previous labels will be deleted before adding a new one `status`. - * @returns + * @param {object} options Object + * @param {*} [options.progress] Doesn't change the progress if not a number. + * @param {boolean} [options.hiddenProgress] The progress bar will be hidden if is true. + * @param {*} [options.status] Doesn't add the label if not a string. + * @param {boolean} [options.clear] Previous labels will be deleted before adding a new one `status`. */ - static setInitStatus(percent = null, status = "", clear = false) { + static setInitStatus(options = {}) { + if(typeof options != 'object' || Array.isArray(options)) { + options = {}; + } + const {progress, status, clear, hiddenProgress} = options; return new Promise( rs => { - if(isFinite(percent)) { - if (percent > 100) percent = 100; - if (percent < 0) percent = 0; - ProgressBar.style.width = percent + "%"; + if(hiddenProgress) { + ProgressBar.style.display = "none"; + } else { + ProgressBar.style.display = "block"; + }; + if(Number.isFinite(progress)) { + if (progress > 100) progress = 100; + if (progress < 0) progress = 0; + ProgressBar.style.width = progress + "%"; }; if(clear) { - StatusListContainer.innerHTML = ""; + StatusListContainer.innerHTML = ""; }; if (typeof status == "string") { let StatusContainer = document.createElement("div"); diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index e498f1a3..0ecb5b3c 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -31,59 +31,59 @@ export default new class Core { // Load css early Logger.log("Startup", "Injecting BD Styles"); - await LoadingInterface.setInitStatus(1/stepsCount*100, "Injecting BD Styles..."); + await LoadingInterface.setInitStatus({ progress: 1/stepsCount*100, status: "Injecting BD Styles..."}); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); Logger.log("Startup", "Initializing DataStore"); - await LoadingInterface.setInitStatus(2/stepsCount*100, "Initializing DataStore..."); + await LoadingInterface.setInitStatus({ progress: 2/stepsCount*100, status: "Initializing DataStore..."}); DataStore.initialize(); Logger.log("Startup", "Initializing LocaleManager"); - await LoadingInterface.setInitStatus(3/stepsCount*100, "Initializing LocaleManager..."); + await LoadingInterface.setInitStatus({ progress: 3/stepsCount*100, status: "Initializing LocaleManager..."}); LocaleManager.initialize(); Logger.log("Startup", "Initializing Settings"); - await LoadingInterface.setInitStatus(5/stepsCount*100, "Initializing Settings..."); + await LoadingInterface.setInitStatus({ progress: 5/stepsCount*100, status: "Initializing Settings..."}); Settings.initialize(); Logger.log("Startup", "Initializing DOMManager"); - await LoadingInterface.setInitStatus(6/stepsCount*100, "Initializing DOMManager..."); + await LoadingInterface.setInitStatus({ progress: 6/stepsCount*100, status: "Initializing DOMManager..."}); DOMManager.initialize(); Logger.log("Startup", "Waiting for connection..."); - await LoadingInterface.setInitStatus(7/stepsCount*100, "Waiting for connection..."); + await LoadingInterface.setInitStatus({ progress: 7/stepsCount*100, status: "Waiting for connection..."}); await this.waitForConnection(); Logger.log("Startup", "Initializing Editor"); - await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Editor..."); + await LoadingInterface.setInitStatus({ progress: 8/stepsCount*100, status: "Initializing Editor..."}); await Editor.initialize(); Logger.log("Startup", "Initializing Modals"); - await LoadingInterface.setInitStatus(8/stepsCount*100, "Initializing Modals..."); + await LoadingInterface.setInitStatus({ progress: 8/stepsCount*100, status: "Initializing Modals..."}); await Modals.initialize(); Logger.log("Startup", "Initializing Builtins"); - await LoadingInterface.setInitStatus(9/stepsCount*100, "Initializing Builtins..."); + await LoadingInterface.setInitStatus({ progress: 9/stepsCount*100, status: "Initializing Builtins..."}); for (const module in Builtins) { Builtins[module].initialize(); } Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; - await LoadingInterface.setInitStatus(10/stepsCount*100, "Loading Plugins..."); + await LoadingInterface.setInitStatus({ progress: 10/stepsCount*100, status: "Loading Plugins..."}); const pluginErrors = PluginManager.initialize(); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; - await LoadingInterface.setInitStatus(11/stepsCount*100, "Loading Themes..."); + await LoadingInterface.setInitStatus({ progress: 11/stepsCount*100, status: "Loading Themes..."}); const themeErrors = ThemeManager.initialize(); Logger.log("Startup", "Initializing Updater"); - await LoadingInterface.setInitStatus(12/stepsCount*100, "Initializing Updater..."); + await LoadingInterface.setInitStatus({ progress: 12/stepsCount*100, status: "Initializing Updater..."}); Updater.initialize(); Logger.log("Startup", "Removing Loading Interface"); - await LoadingInterface.setInitStatus(100, "Done", true); + await LoadingInterface.setInitStatus({ progress: 100, status: "Done" }); LoadingInterface.hide(); // Show loading errors From 9f71250c0cd47ab2c6e681ea0dcb70c67139be1c Mon Sep 17 00:00:00 2001 From: Mopsgamer Date: Tue, 13 Dec 2022 22:12:51 +0100 Subject: [PATCH 11/17] Addon loading subprogress -clear param -hiddenProgress param +subprogress param +substatus param +showProgress func +showSubProgress func +hideProgress func +hideSubProgress func --- renderer/src/loading.js | 99 +++++++++++++++++++--------- renderer/src/modules/addonmanager.js | 16 +++-- renderer/src/modules/core.js | 28 ++++---- 3 files changed, 93 insertions(+), 50 deletions(-) diff --git a/renderer/src/loading.js b/renderer/src/loading.js index b46d65f0..d0d7ad8c 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -1,5 +1,3 @@ -/**Determines where the extra starts.*/ -const extraLabels = 6; const css = `/* BEGIN V2 LOADER */ /* =============== */ @@ -21,7 +19,7 @@ const css = `/* BEGIN V2 LOADER */ } #bd-loading-icon { position: fixed; - bottom: 10px; + bottom: 15px; right: 5px; display: block; width: 20px; @@ -31,7 +29,7 @@ const css = `/* BEGIN V2 LOADER */ } #bd-loading-progress { position: fixed; - bottom: 5px; + bottom: 10px; right: 5px; width: 20px; height: 3px; @@ -43,27 +41,44 @@ const css = `/* BEGIN V2 LOADER */ width: 0%; height: 100%; } +#bd-loading-subprogress { + display: none; + position: fixed; + bottom: 6px; + right: 5px; + width: 20px; + height: 1px; + background-color: var(--header-primary); + overflow: hidden; +} +#bd-loading-subprogress-bar { + background-color: #3E82E5; + width: 0%; + height: 100%; +} #bd-loading-status-list { position: absolute; - bottom: 7px; + bottom: 16px; right: 30px; } -.bd-loading-status-container { +#bd-loading-substatus { + position: absolute; + bottom: 3px; + right: 30px; + white-space: nowrap; + text-align: right; + color: var(--header-primary); + font-size: 12px; +} + +.bd-loading-status { white-space: nowrap; text-align: right; font-weight: 600; color: var(--header-primary); transition: 0.2s; } -${// reduce labels opacity - (()=>{ - /**if `maxLabels == 4`: `'2', '3', 'n+4'`*/ - let opacityReduceNth = new Array(extraLabels - 1).fill('temp').map((_, i) => (i == extraLabels - 2 ? 'n+' : '') + (i + 2).toString()); - - return opacityReduceNth.map((nth, i) => `.bd-loading-status-container:nth-last-child(${nth}) { opacity: ${1 - (i + 1) * (1 / extraLabels)}; }`).join('\n'); - })() -} @keyframes bd-loading-animation { 0% { opacity: 0.05; } @@ -86,57 +101,63 @@ const Progress = document.createElement("div"); Progress.appendChild(ProgressBar); Progress.id = "bd-loading-progress"; +const SubProgressBar = document.createElement("div"); +SubProgressBar.id = "bd-loading-subprogress-bar"; +const SubProgress = document.createElement("div"); +SubProgress.appendChild(SubProgressBar); +SubProgress.id = "bd-loading-subprogress"; + const StatusListContainer = document.createElement("div"); StatusListContainer.id = "bd-loading-status-list"; +const SubStatusContainer = document.createElement("div"); +SubStatusContainer.id = "bd-loading-substatus"; const Container = document.createElement("div"); Container.id = "bd-loading"; Container.appendChild(IconStyle); Container.appendChild(Icon); Container.appendChild(Progress); +Container.appendChild(SubProgress); Container.appendChild(StatusListContainer); +Container.appendChild(SubStatusContainer); export default class { /** * Sets the value of the progress bar, adds status to the list about status. * @param {object} options Object - * @param {*} [options.progress] Doesn't change the progress if not a number. - * @param {boolean} [options.hiddenProgress] The progress bar will be hidden if is true. + * @param {*} [options.progress] 0-100. Doesn't change the progress if not a number. + * @param {*} [options.subprogress] 0-100. Doesn't change the progress if not a number. * @param {*} [options.status] Doesn't add the label if not a string. - * @param {boolean} [options.clear] Previous labels will be deleted before adding a new one `status`. + * @param {*} [options.substatus] Doesn't add the label if not a string. */ static setInitStatus(options = {}) { if(typeof options != 'object' || Array.isArray(options)) { options = {}; } - const {progress, status, clear, hiddenProgress} = options; + const {progress, subprogress, status, substatus} = options; return new Promise( rs => { - if(hiddenProgress) { - ProgressBar.style.display = "none"; - } else { - ProgressBar.style.display = "block"; - }; if(Number.isFinite(progress)) { if (progress > 100) progress = 100; if (progress < 0) progress = 0; ProgressBar.style.width = progress + "%"; }; - if(clear) { - StatusListContainer.innerHTML = ""; + if(Number.isFinite(subprogress)) { + if (subprogress > 100) subprogress = 100; + if (subprogress < 0) subprogress = 0; + SubProgressBar.style.width = subprogress + "%"; }; if (typeof status == "string") { let StatusContainer = document.createElement("div"); - StatusContainer.className = "bd-loading-status-container"; + StatusContainer.className = "bd-loading-status"; StatusContainer.innerHTML = status; + StatusListContainer.innerHTML = ""; StatusListContainer.append(StatusContainer); - - if (StatusListContainer.childElementCount > extraLabels - 1) { - let Needless = StatusListContainer.querySelectorAll(`#bd-loading-status-list > :nth-last-child(n+${extraLabels})`); - Needless.forEach(n => setTimeout(() => n?.remove?.(), 200)); - } + }; + if (typeof substatus == "string") { + SubStatusContainer.innerText = substatus; }; // 60 fps, rendering wait setTimeout(rs, 1000/60); @@ -144,6 +165,22 @@ export default class { ) } + static showProgress() { + Progress.style.display = "block"; + } + + static hideProgress() { + Progress.style.display = "none"; + } + + static showSubProgress() { + SubProgress.style.display = "block"; + } + + static hideSubProgress() { + SubProgress.style.display = "none"; + } + static show() { document.body.appendChild(Container); } diff --git a/renderer/src/modules/addonmanager.js b/renderer/src/modules/addonmanager.js index f361f116..9cba8d56 100644 --- a/renderer/src/modules/addonmanager.js +++ b/renderer/src/modules/addonmanager.js @@ -5,6 +5,7 @@ import DataStore from "./datastore"; import AddonError from "../structs/addonerror"; import Toasts from "../ui/toasts"; import DiscordModules from "./discordmodules"; +import LoadingInterface from "../loading"; import Strings from "./strings"; import AddonEditor from "../ui/misc/addoneditor"; import FloatingWindows from "../ui/floatingwindows"; @@ -85,7 +86,7 @@ export default class AddonManager { Logger.warn(this.name, `Duplicate files found: ${filename} and ${newFilename}`); return; } - + // Rename the file and let it go on try { fs.renameSync(absolutePath, path.resolve(this.addonFolder, newFilename)); @@ -210,7 +211,7 @@ export default class AddonManager { } return e; } - + const error = this.initializeAddon(addon); if (error) { @@ -222,7 +223,7 @@ export default class AddonManager { if (shouldToast) Toasts.success(Strings.Addons.wasUnloaded.format({name: addon.name, version: addon.version})); this.emit("loaded", addon); - + if (!this.state[addon.id]) return this.state[addon.id] = false; return this.startAddon(addon); } @@ -298,12 +299,17 @@ export default class AddonManager { for (const name of results.removed) this.unloadAddon(name); } - loadAllAddons() { + async loadAllAddons() { this.loadState(); const errors = []; const files = fs.readdirSync(this.addonFolder); for (const filename of files) { + await LoadingInterface.setInitStatus({ substatus: filename, subprogress: files.indexOf(filename) / files.length * 100 }); + if(files.indexOf(filename) != files.length - 1) + LoadingInterface.showSubProgress(); + else + LoadingInterface.hideSubProgress(); const absolutePath = path.resolve(this.addonFolder, filename); const stats = fs.statSync(absolutePath); if (!stats || !stats.isFile()) continue; @@ -322,7 +328,7 @@ export default class AddonManager { Logger.warn("AddonManager", `Duplicate files found: ${filename} and ${newFilename}`); continue; } - + // Rename the file and let it go on fs.renameSync(absolutePath, path.resolve(this.addonFolder, newFilename)); } diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 0ecb5b3c..a8165e47 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -31,55 +31,55 @@ export default new class Core { // Load css early Logger.log("Startup", "Injecting BD Styles"); - await LoadingInterface.setInitStatus({ progress: 1/stepsCount*100, status: "Injecting BD Styles..."}); + await LoadingInterface.setInitStatus({ progress: 1 / stepsCount * 100, status: "Injecting BD Styles..." }); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); Logger.log("Startup", "Initializing DataStore"); - await LoadingInterface.setInitStatus({ progress: 2/stepsCount*100, status: "Initializing DataStore..."}); + await LoadingInterface.setInitStatus({ progress: 2 / stepsCount * 100, status: "Initializing DataStore..." }); DataStore.initialize(); Logger.log("Startup", "Initializing LocaleManager"); - await LoadingInterface.setInitStatus({ progress: 3/stepsCount*100, status: "Initializing LocaleManager..."}); + await LoadingInterface.setInitStatus({ progress: 3 / stepsCount * 100, status: "Initializing LocaleManager..." }); LocaleManager.initialize(); Logger.log("Startup", "Initializing Settings"); - await LoadingInterface.setInitStatus({ progress: 5/stepsCount*100, status: "Initializing Settings..."}); + await LoadingInterface.setInitStatus({ progress: 5 / stepsCount * 100, status: "Initializing Settings..." }); Settings.initialize(); Logger.log("Startup", "Initializing DOMManager"); - await LoadingInterface.setInitStatus({ progress: 6/stepsCount*100, status: "Initializing DOMManager..."}); + await LoadingInterface.setInitStatus({ progress: 6 / stepsCount * 100, status: "Initializing DOMManager..." }); DOMManager.initialize(); Logger.log("Startup", "Waiting for connection..."); - await LoadingInterface.setInitStatus({ progress: 7/stepsCount*100, status: "Waiting for connection..."}); + await LoadingInterface.setInitStatus({ progress: 7 / stepsCount * 100, status: "Waiting for connection..." }); await this.waitForConnection(); Logger.log("Startup", "Initializing Editor"); - await LoadingInterface.setInitStatus({ progress: 8/stepsCount*100, status: "Initializing Editor..."}); + await LoadingInterface.setInitStatus({ progress: 8 / stepsCount * 100, status: "Initializing Editor..." }); await Editor.initialize(); Logger.log("Startup", "Initializing Modals"); - await LoadingInterface.setInitStatus({ progress: 8/stepsCount*100, status: "Initializing Modals..."}); + await LoadingInterface.setInitStatus({ progress: 8 / stepsCount * 100, status: "Initializing Modals..." }); await Modals.initialize(); Logger.log("Startup", "Initializing Builtins"); - await LoadingInterface.setInitStatus({ progress: 9/stepsCount*100, status: "Initializing Builtins..."}); + await LoadingInterface.setInitStatus({ progress: 9 / stepsCount * 100, status: "Initializing Builtins..." }); for (const module in Builtins) { Builtins[module].initialize(); } Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; - await LoadingInterface.setInitStatus({ progress: 10/stepsCount*100, status: "Loading Plugins..."}); - const pluginErrors = PluginManager.initialize(); + await LoadingInterface.setInitStatus({ progress: 10 / stepsCount * 100, status: "Loading Plugins..." }); + const pluginErrors = await PluginManager.initialize(); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; - await LoadingInterface.setInitStatus({ progress: 11/stepsCount*100, status: "Loading Themes..."}); - const themeErrors = ThemeManager.initialize(); + await LoadingInterface.setInitStatus({ progress: 11 / stepsCount * 100, status: "Loading Themes..." }); + const themeErrors = await ThemeManager.initialize(); Logger.log("Startup", "Initializing Updater"); - await LoadingInterface.setInitStatus({ progress: 12/stepsCount*100, status: "Initializing Updater..."}); + await LoadingInterface.setInitStatus({ progress: 12 / stepsCount * 100, status: "Initializing Updater..." }); Updater.initialize(); Logger.log("Startup", "Removing Loading Interface"); From 5799b1a09bcd69baa09245d9614e6f73a3783011 Mon Sep 17 00:00:00 2001 From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com> Date: Sun, 23 Apr 2023 17:22:39 +0200 Subject: [PATCH 12/17] without statuses & sub-things --- renderer/src/modules/addonmanager.js | 1 - renderer/src/modules/core.js | 30 ++++++++++++++-------------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/renderer/src/modules/addonmanager.js b/renderer/src/modules/addonmanager.js index 9cba8d56..0a0a4fc1 100644 --- a/renderer/src/modules/addonmanager.js +++ b/renderer/src/modules/addonmanager.js @@ -305,7 +305,6 @@ export default class AddonManager { const files = fs.readdirSync(this.addonFolder); for (const filename of files) { - await LoadingInterface.setInitStatus({ substatus: filename, subprogress: files.indexOf(filename) / files.length * 100 }); if(files.indexOf(filename) != files.length - 1) LoadingInterface.showSubProgress(); else diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 7af08cfa..48fbd015 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -32,68 +32,68 @@ export default new class Core { // Load css early Logger.log("Startup", "Injecting BD Styles"); - await LoadingInterface.setInitStatus({ progress: 1 / stepsPercent, status: "Injecting BD Styles..." }); + await LoadingInterface.setInitStatus({ progress: 1 / stepsPercent }); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); Logger.log("Startup", "Initializing DataStore"); - await LoadingInterface.setInitStatus({ progress: 2 / stepsPercent, status: "Initializing DataStore..." }); + await LoadingInterface.setInitStatus({ progress: 2 / stepsPercent }); DataStore.initialize(); Logger.log("Startup", "Initializing LocaleManager"); - await LoadingInterface.setInitStatus({ progress: 3 / stepsPercent, status: "Initializing LocaleManager..." }); + await LoadingInterface.setInitStatus({ progress: 3 / stepsPercent }); LocaleManager.initialize(); Logger.log("Startup", "Initializing Settings"); - await LoadingInterface.setInitStatus({ progress: 4 / stepsPercent, status: "Initializing Settings..." }); + await LoadingInterface.setInitStatus({ progress: 4 / stepsPercent }); Settings.initialize(); Logger.log("Startup", "Initializing DOMManager"); - await LoadingInterface.setInitStatus({ progress: 5 / stepsPercent, status: "Initializing DOMManager..." }); + await LoadingInterface.setInitStatus({ progress: 5 / stepsPercent }); DOMManager.initialize(); Logger.log("Startup", "Waiting for connection..."); - await LoadingInterface.setInitStatus({ progress: 6 / stepsPercent, status: "Waiting for connection..." }); + await LoadingInterface.setInitStatus({ progress: 6 / stepsPercent }); await this.waitForConnection(); Logger.log("Startup", "Initializing Editor"); - await LoadingInterface.setInitStatus({ progress: 7 / stepsPercent, status: "Initializing Editor..." }); + await LoadingInterface.setInitStatus({ progress: 7 / stepsPercent }); await Editor.initialize(); Logger.log("Startup", "Initializing Modals"); - await LoadingInterface.setInitStatus({ progress: 8 / stepsPercent, status: "Initializing Modals..." }); + await LoadingInterface.setInitStatus({ progress: 8 / stepsPercent }); await Modals.initialize(); Logger.log("Startup", "Initializing Floating windows"); - await LoadingInterface.setInitStatus({ progress: 9 / stepsPercent, status: "Initializing Floating windows..." }); + await LoadingInterface.setInitStatus({ progress: 9 / stepsPercent }); FloatingWindows.initialize(); Logger.log("Startup", "Initializing Builtins"); - await LoadingInterface.setInitStatus({ progress: 10 / stepsPercent, status: "Initializing Builtins..." }); + await LoadingInterface.setInitStatus({ progress: 10 / stepsPercent }); for (const module in Builtins) { Builtins[module].initialize(); } Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; - await LoadingInterface.setInitStatus({ progress: 11 / stepsPercent, status: "Loading Plugins..." }); + await LoadingInterface.setInitStatus({ progress: 11 / stepsPercent }); const pluginErrors = await PluginManager.initialize(); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; - await LoadingInterface.setInitStatus({ progress: 12 / stepsPercent, status: "Loading Themes..." }); + await LoadingInterface.setInitStatus({ progress: 12 / stepsPercent }); const themeErrors = await ThemeManager.initialize(); Logger.log("Startup", "Initializing Updater"); - await LoadingInterface.setInitStatus({ progress: 13 / stepsPercent, status: "Initializing Updater..." }); + await LoadingInterface.setInitStatus({ progress: 13 / stepsPercent }); Updater.initialize(); Logger.log("Startup", "Removing Loading Interface"); - await LoadingInterface.setInitStatus({ progress: 14 / stepsPercent, status: "Done" }); + await LoadingInterface.setInitStatus({ progress: 14 / stepsPercent }); LoadingInterface.hide(); // Show loading errors Logger.log("Startup", "Collecting Startup Errors"); - Modals.showAddonErrors({plugins: pluginErrors, themes: themeErrors}); + Modals.showAddonErrors({ plugins: pluginErrors, themes: themeErrors }); const previousVersion = DataStore.getBDData("version"); if (Config.version !== previousVersion) { From 1d81e1427542216db241fd3467a87807edea0554 Mon Sep 17 00:00:00 2001 From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com> Date: Sun, 23 Apr 2023 17:35:00 +0200 Subject: [PATCH 13/17] jsdoc, requestAnimationFrame, destructuring --- renderer/src/loading.js | 68 ++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/renderer/src/loading.js b/renderer/src/loading.js index d0d7ad8c..31deeb2c 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -125,44 +125,42 @@ Container.appendChild(SubStatusContainer); export default class { /** - * Sets the value of the progress bar, adds status to the list about status. - * @param {object} options Object - * @param {*} [options.progress] 0-100. Doesn't change the progress if not a number. - * @param {*} [options.subprogress] 0-100. Doesn't change the progress if not a number. - * @param {*} [options.status] Doesn't add the label if not a string. - * @param {*} [options.substatus] Doesn't add the label if not a string. + * Sets the initial loading status of the application. + * @param {Object} [options={}] The options object. + * @param {number} [options.progress] The progress of the main loading bar, in percentage. + * @param {number} [options.subprogress] The progress of the sub-loading bar, in percentage. + * @param {string} [options.status] The status message to display. + * @param {string} [options.substatus] The sub-status message to display. + * @returns {Promise} A Promise that resolves when the loading status has been updated. */ static setInitStatus(options = {}) { - if(typeof options != 'object' || Array.isArray(options)) { - options = {}; + if (typeof options !== "object" || Array.isArray(options)) { + options = {}; + } + const { progress, subprogress, status, substatus } = options; + return new Promise((resolve) => { + if (Number.isFinite(progress)) { + if (progress > 100) progress = 100; + if (progress < 0) progress = 0; + ProgressBar.style.width = progress + "%"; } - const {progress, subprogress, status, substatus} = options; - return new Promise( - rs => { - if(Number.isFinite(progress)) { - if (progress > 100) progress = 100; - if (progress < 0) progress = 0; - ProgressBar.style.width = progress + "%"; - }; - if(Number.isFinite(subprogress)) { - if (subprogress > 100) subprogress = 100; - if (subprogress < 0) subprogress = 0; - SubProgressBar.style.width = subprogress + "%"; - }; - if (typeof status == "string") { - let StatusContainer = document.createElement("div"); - StatusContainer.className = "bd-loading-status"; - StatusContainer.innerHTML = status; - StatusListContainer.innerHTML = ""; - StatusListContainer.append(StatusContainer); - }; - if (typeof substatus == "string") { - SubStatusContainer.innerText = substatus; - }; - // 60 fps, rendering wait - setTimeout(rs, 1000/60); - } - ) + if (Number.isFinite(subprogress)) { + if (subprogress > 100) subprogress = 100; + if (subprogress < 0) subprogress = 0; + SubProgressBar.style.width = subprogress + "%"; + } + if (typeof status === "string") { + let StatusContainer = document.createElement("div"); + StatusContainer.className = "bd-loading-status"; + StatusContainer.innerHTML = status; + StatusListContainer.innerHTML = ""; + StatusListContainer.append(StatusContainer); + } + if (typeof substatus === "string") { + SubStatusContainer.innerText = substatus; + } + requestAnimationFrame(resolve); + }); } static showProgress() { From 91619827ad370d448d593e7ab3f5e26893e18bba Mon Sep 17 00:00:00 2001 From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com> Date: Sun, 23 Apr 2023 17:39:27 +0200 Subject: [PATCH 14/17] remove from addonmanager.js --- renderer/src/modules/addonmanager.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/renderer/src/modules/addonmanager.js b/renderer/src/modules/addonmanager.js index 0a0a4fc1..ded5e28d 100644 --- a/renderer/src/modules/addonmanager.js +++ b/renderer/src/modules/addonmanager.js @@ -5,7 +5,6 @@ import DataStore from "./datastore"; import AddonError from "../structs/addonerror"; import Toasts from "../ui/toasts"; import DiscordModules from "./discordmodules"; -import LoadingInterface from "../loading"; import Strings from "./strings"; import AddonEditor from "../ui/misc/addoneditor"; import FloatingWindows from "../ui/floatingwindows"; @@ -305,10 +304,6 @@ export default class AddonManager { const files = fs.readdirSync(this.addonFolder); for (const filename of files) { - if(files.indexOf(filename) != files.length - 1) - LoadingInterface.showSubProgress(); - else - LoadingInterface.hideSubProgress(); const absolutePath = path.resolve(this.addonFolder, filename); const stats = fs.statSync(absolutePath); if (!stats || !stats.isFile()) continue; From 2368efa46c96e1bdc236fa1e378230d25fe92cba Mon Sep 17 00:00:00 2001 From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com> Date: Sun, 23 Apr 2023 17:46:51 +0200 Subject: [PATCH 15/17] math --- renderer/src/modules/core.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 48fbd015..69f17e34 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -28,67 +28,67 @@ export default new class Core { Config.dataPath = process.env.BETTERDISCORD_DATA_PATH; /**loading steps count*/ - const stepsPercent = 14 * 100; + const stepsPercent = (step) => step / 14 * 100; // Load css early Logger.log("Startup", "Injecting BD Styles"); - await LoadingInterface.setInitStatus({ progress: 1 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(1) }); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); Logger.log("Startup", "Initializing DataStore"); - await LoadingInterface.setInitStatus({ progress: 2 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(2) }); DataStore.initialize(); Logger.log("Startup", "Initializing LocaleManager"); - await LoadingInterface.setInitStatus({ progress: 3 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(3) }); LocaleManager.initialize(); Logger.log("Startup", "Initializing Settings"); - await LoadingInterface.setInitStatus({ progress: 4 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(4) }); Settings.initialize(); Logger.log("Startup", "Initializing DOMManager"); - await LoadingInterface.setInitStatus({ progress: 5 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(5) }); DOMManager.initialize(); Logger.log("Startup", "Waiting for connection..."); - await LoadingInterface.setInitStatus({ progress: 6 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(6) }); await this.waitForConnection(); Logger.log("Startup", "Initializing Editor"); - await LoadingInterface.setInitStatus({ progress: 7 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(7) }); await Editor.initialize(); Logger.log("Startup", "Initializing Modals"); - await LoadingInterface.setInitStatus({ progress: 8 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(8) }); await Modals.initialize(); Logger.log("Startup", "Initializing Floating windows"); - await LoadingInterface.setInitStatus({ progress: 9 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(9) }); FloatingWindows.initialize(); Logger.log("Startup", "Initializing Builtins"); - await LoadingInterface.setInitStatus({ progress: 10 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(10) }); for (const module in Builtins) { Builtins[module].initialize(); } Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; - await LoadingInterface.setInitStatus({ progress: 11 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(11) }); const pluginErrors = await PluginManager.initialize(); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; - await LoadingInterface.setInitStatus({ progress: 12 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(12) }); const themeErrors = await ThemeManager.initialize(); Logger.log("Startup", "Initializing Updater"); - await LoadingInterface.setInitStatus({ progress: 13 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(13) }); Updater.initialize(); Logger.log("Startup", "Removing Loading Interface"); - await LoadingInterface.setInitStatus({ progress: 14 / stepsPercent }); + await LoadingInterface.setInitStatus({ progress: stepsPercent(14) }); LoadingInterface.hide(); // Show loading errors From 680d08c4afcd9fa855d21c2616af1c29cd6ed119 Mon Sep 17 00:00:00 2001 From: Lev <79159094+Mopsgamer@users.noreply.github.com> Date: Mon, 9 Oct 2023 22:30:05 +0200 Subject: [PATCH 16/17] rewrite --- renderer/src/index.js | 3 - renderer/src/loading.js | 302 +++++++++++++------------------- renderer/src/modules/core.js | 48 +++-- renderer/src/styles/loading.css | 107 +++++++++++ 4 files changed, 255 insertions(+), 205 deletions(-) create mode 100644 renderer/src/styles/loading.css diff --git a/renderer/src/index.js b/renderer/src/index.js index 407e889b..b6ca0d8f 100644 --- a/renderer/src/index.js +++ b/renderer/src/index.js @@ -1,6 +1,5 @@ import require from "./polyfill"; // eslint-disable-line no-unused-vars import secure from "./secure"; -import LoadingInterface from "./loading"; import BetterDiscord from "@modules/core"; import BdApi from "@modules/api/index"; @@ -13,6 +12,4 @@ Object.defineProperty(window, "BdApi", { }); window.global = window; -// Add loading icon at the bottom right -LoadingInterface.show(); BetterDiscord.startup(); \ No newline at end of file diff --git a/renderer/src/loading.js b/renderer/src/loading.js index 31deeb2c..7961a2c9 100644 --- a/renderer/src/loading.js +++ b/renderer/src/loading.js @@ -1,192 +1,128 @@ -const css = `/* BEGIN V2 LOADER */ -/* =============== */ +import {version} from "@modules/api/legacy"; +import DOMManager from "@modules/dommanager"; +import LoadingStyles from "@styles/loading.css"; -#bd-loading { - z-index: 2147483647; - position: absolute; - right: 0; - bottom: 0; - transition: 1s; - width: 100%; - height: 100%; +/** Don't forget to call {@link show} method. */ +class ElementManager { + + /** @type {HTMLDivElement} */ + #elementContainer; + /** @type {HTMLDivElement} */ + #element; + + /** + * @param {HTMLDivElement} element + * @param {HTMLDivElement} container + */ + constructor(element, container) { + this.#element = element; + this.#elementContainer = container; + } + + show() { + this.#elementContainer.appendChild(this.#element); + } + + hide() { + this.#element.remove(); + } } -.theme-dark #bd-loading-icon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); -} -.theme-light #bd-loading-icon { - background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); -} -#bd-loading-icon { - position: fixed; - bottom: 15px; - right: 5px; - display: block; - width: 20px; - height: 20px; - background-size: 100% 100%; - animation: bd-loading-animation 1.5s ease-in-out infinite; -} -#bd-loading-progress { - position: fixed; - bottom: 10px; - right: 5px; - width: 20px; - height: 3px; - background-color: var(--header-primary); - overflow: hidden; -} -#bd-loading-progress-bar { - background-color: #3E82E5; - width: 0%; - height: 100%; -} -#bd-loading-subprogress { - display: none; - position: fixed; - bottom: 6px; - right: 5px; - width: 20px; - height: 1px; - background-color: var(--header-primary); - overflow: hidden; -} -#bd-loading-subprogress-bar { - background-color: #3E82E5; - width: 0%; - height: 100%; +/** Don't forget to call {@link show} method. */ +class ElementValueManager extends ElementManager { + + /** @type {(value: unknown, element: HTMLDivElement) => void} */ + #changer; + + /** + * @param {HTMLDivElement} element + * @param {HTMLDivElement} container + * @param {(value: unknown, element: HTMLDivElement) => void} changer + */ + constructor(element, container, changer) { + super(element, container); + this.#changer = changer; + } + + set(value) { + this.#changer(value); + } } -#bd-loading-status-list { - position: absolute; - bottom: 16px; - right: 30px; -} -#bd-loading-substatus { - position: absolute; - bottom: 3px; - right: 30px; - white-space: nowrap; - text-align: right; - color: var(--header-primary); - font-size: 12px; +/** Element manager with all loading info elemets. Now we have note and status block with progress bar and status label. Don't forget to call {@link show} and {@link hide} methods. */ +class LoadingManager { + + /** @type {HTMLElement} */ + #elementContainer; + /** @type {HTMLDivElement} */ + #element; + + note; + status; + + constructor() { + const layout = DOMManager.createElement("div", {className: "bd-loaderv3"}); + const container = DOMManager.createElement("div", {className: "bd-loading-container", target: layout}); + + const leftside = DOMManager.createElement("div", {className: "bd-loading-left-side", target: container}); + DOMManager.createElement("div", {className: "bd-loading-icon", target: leftside}); + DOMManager.createElement("div", {className: "bd-loading-icon-note", target: leftside}, "v" + version); + + const rightside = DOMManager.createElement("div", {className: "bd-loading-right-side", target: container}); + + this.#elementContainer = document.body; + this.#element = layout; + this.status = new LoadingStatusManager(rightside); + } + + async show() { + this.#element.style.pointerEvents = "none"; + DOMManager.injectStyle("bd-loading", LoadingStyles.toString()); + this.#elementContainer.appendChild(this.#element); + await this.#element.animate([{opacity: 0}, {opacity: 1}], {duration: 500}).finished; + this.#element.style.pointerEvents = ""; + } + + async hide() { + this.#element.style.pointerEvents = "none"; + await this.#element.animate([{opacity: 1}, {opacity: 0}], {duration: 500}).finished; + this.#element.remove(); + DOMManager.removeStyle("bd-loading"); + } + } -.bd-loading-status { - white-space: nowrap; - text-align: right; - font-weight: 600; - color: var(--header-primary); - transition: 0.2s; +/** Status element manager with progress elements, e.g.: progress bar and status label. Don't forget to call {@link show} method. */ +class LoadingStatusManager extends ElementManager { + + /** @type {HTMLDivElement} */ + #elementContainer; + /** @type {HTMLDivElement} */ + #element; + /** @type {HTMLDivElement} */ + #elementProgress; + /** @type {HTMLDivElement} */ + #elementProgressBar; + /** @type {HTMLDivElement} */ + #elementStatus; + + label; + progress; + + /** @param {HTMLDivElement} container */ + constructor(container) { + const element = DOMManager.createElement("div", {className: "bd-loading-item"}); + super(element, container); + this.#elementContainer = container; + this.#element = element; + this.#elementProgress = DOMManager.createElement("div", {className: "bd-loading-progress", target: this.#element}); + this.#elementProgressBar = DOMManager.createElement("div", {className: "bd-loading-progress-bar", target: this.#elementProgress}); + this.#elementStatus = DOMManager.createElement("div", {className: "bd-loading-status", target: this.#element}); + this.label = new ElementValueManager(this.#elementStatus, this.#elementContainer, (value) => this.#elementStatus.innerText = value); + this.progress = new ElementValueManager(this.#elementProgress, this.#elementContainer, (value) => this.#elementProgressBar.style.width = Math.min(Math.max(0, value), 100) + "%"); + } + } -@keyframes bd-loading-animation { - 0% { opacity: 0.05; } - 50% { opacity: 0.6; } - 100% { opacity: 0.05; } -} -/* =============== */ -/* END V2 LOADER */`; - -const IconStyle = document.createElement("style"); -IconStyle.textContent = css; - -const Icon = document.createElement("div"); -Icon.id = "bd-loading-icon"; -Icon.className = "bd-loaderv2"; - -const ProgressBar = document.createElement("div"); -ProgressBar.id = "bd-loading-progress-bar"; -const Progress = document.createElement("div"); -Progress.appendChild(ProgressBar); -Progress.id = "bd-loading-progress"; - -const SubProgressBar = document.createElement("div"); -SubProgressBar.id = "bd-loading-subprogress-bar"; -const SubProgress = document.createElement("div"); -SubProgress.appendChild(SubProgressBar); -SubProgress.id = "bd-loading-subprogress"; - -const StatusListContainer = document.createElement("div"); -StatusListContainer.id = "bd-loading-status-list"; - -const SubStatusContainer = document.createElement("div"); -SubStatusContainer.id = "bd-loading-substatus"; - -const Container = document.createElement("div"); -Container.id = "bd-loading"; -Container.appendChild(IconStyle); -Container.appendChild(Icon); -Container.appendChild(Progress); -Container.appendChild(SubProgress); -Container.appendChild(StatusListContainer); -Container.appendChild(SubStatusContainer); - -export default class { - - /** - * Sets the initial loading status of the application. - * @param {Object} [options={}] The options object. - * @param {number} [options.progress] The progress of the main loading bar, in percentage. - * @param {number} [options.subprogress] The progress of the sub-loading bar, in percentage. - * @param {string} [options.status] The status message to display. - * @param {string} [options.substatus] The sub-status message to display. - * @returns {Promise} A Promise that resolves when the loading status has been updated. - */ - static setInitStatus(options = {}) { - if (typeof options !== "object" || Array.isArray(options)) { - options = {}; - } - const { progress, subprogress, status, substatus } = options; - return new Promise((resolve) => { - if (Number.isFinite(progress)) { - if (progress > 100) progress = 100; - if (progress < 0) progress = 0; - ProgressBar.style.width = progress + "%"; - } - if (Number.isFinite(subprogress)) { - if (subprogress > 100) subprogress = 100; - if (subprogress < 0) subprogress = 0; - SubProgressBar.style.width = subprogress + "%"; - } - if (typeof status === "string") { - let StatusContainer = document.createElement("div"); - StatusContainer.className = "bd-loading-status"; - StatusContainer.innerHTML = status; - StatusListContainer.innerHTML = ""; - StatusListContainer.append(StatusContainer); - } - if (typeof substatus === "string") { - SubStatusContainer.innerText = substatus; - } - requestAnimationFrame(resolve); - }); - } - - static showProgress() { - Progress.style.display = "block"; - } - - static hideProgress() { - Progress.style.display = "none"; - } - - static showSubProgress() { - SubProgress.style.display = "block"; - } - - static hideSubProgress() { - SubProgress.style.display = "none"; - } - - static show() { - document.body.appendChild(Container); - } - - static hide() { - if (Container) { - Container.style.opacity = 0; - setTimeout(() => Container.remove(), 1000); - }; - } -} \ No newline at end of file +const Loading = new LoadingManager(); +export default Loading; \ No newline at end of file diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 1e3aff3b..791742e5 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -14,7 +14,7 @@ import DataStore from "./datastore"; import DiscordModules from "./discordmodules"; import IPC from "./ipc"; -import LoadingInterface from "../loading"; +import Loading from "../loading"; import Editor from "./editor"; import Updater from "./updater"; @@ -33,75 +33,85 @@ export default new class Core { Config.userData = process.env.DISCORD_USER_DATA; Config.dataPath = process.env.BETTERDISCORD_DATA_PATH; - /** loading steps count */ - const stepsPercent = (step) => step / 14 * 100; + Loading.show(); + Loading.status.show(); + + let stepsCounter = 0; + const stepsMax = 14; + const increasePercent = () => stepsCounter++ / (stepsMax - 1) * 100; IPC.getSystemAccentColor().then(value => DOMManager.injectStyle("bd-os-values", `:root {--os-accent-color: ${value};}`)); // Load css early Logger.log("Startup", "Injecting BD Styles"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(1) }); + Loading.status.progress.set(increasePercent()); + Loading.status.label.set("Initialization..."); DOMManager.injectStyle("bd-stylesheet", Styles.toString()); Logger.log("Startup", "Initializing DataStore"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(2) }); + Loading.status.progress.set(increasePercent()); DataStore.initialize(); Logger.log("Startup", "Initializing LocaleManager"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(3) }); + Loading.status.progress.set(increasePercent()); LocaleManager.initialize(); Logger.log("Startup", "Initializing Settings"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(4) }); + Loading.status.progress.set(increasePercent()); Settings.initialize(); Logger.log("Startup", "Initializing DOMManager"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(5) }); + Loading.status.progress.set(increasePercent()); DOMManager.initialize(); Logger.log("Startup", "Waiting for connection..."); - await LoadingInterface.setInitStatus({ progress: stepsPercent(6) }); + Loading.status.progress.set(increasePercent()); await this.waitForConnection(); Logger.log("Startup", "Initializing Editor"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(7) }); + Loading.status.progress.set(increasePercent()); await Editor.initialize(); Logger.log("Startup", "Initializing Modals"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(8) }); + Loading.status.progress.set(increasePercent()); await Modals.initialize(); Logger.log("Startup", "Initializing Floating windows"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(9) }); + Loading.status.progress.set(increasePercent()); FloatingWindows.initialize(); Logger.log("Startup", "Initializing Builtins"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(10) }); + Loading.status.progress.set(increasePercent()); for (const module in Builtins) { Builtins[module].initialize(); } Logger.log("Startup", "Loading Plugins"); // const pluginErrors = []; - await LoadingInterface.setInitStatus({ progress: stepsPercent(11) }); + Loading.status.progress.set(increasePercent()); + Loading.status.label.set("Loading plugins..."); const pluginErrors = await PluginManager.initialize(); Logger.log("Startup", "Loading Themes"); // const themeErrors = []; - await LoadingInterface.setInitStatus({ progress: stepsPercent(12) }); + Loading.status.progress.set(increasePercent()); + Loading.status.label.set("Loading themes..."); const themeErrors = await ThemeManager.initialize(); Logger.log("Startup", "Initializing Updater"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(13) }); + Loading.status.progress.set(increasePercent()); + Loading.status.label.set("Getting things ready..."); Updater.initialize(); Logger.log("Startup", "Removing Loading Interface"); - await LoadingInterface.setInitStatus({ progress: stepsPercent(14) }); - LoadingInterface.hide(); + Loading.status.progress.set(increasePercent()); + + Loading.status.label.set("Done"); + Loading.hide(); // Show loading errors Logger.log("Startup", "Collecting Startup Errors"); - Modals.showAddonErrors({ plugins: pluginErrors, themes: themeErrors }); + Modals.showAddonErrors({plugins: pluginErrors, themes: themeErrors}); const previousVersion = DataStore.getBDData("version"); if (Config.version !== previousVersion) { diff --git a/renderer/src/styles/loading.css b/renderer/src/styles/loading.css new file mode 100644 index 00000000..73664841 --- /dev/null +++ b/renderer/src/styles/loading.css @@ -0,0 +1,107 @@ +.bd-loaderv3 { + pointer-events: none; + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: flex-end; + box-sizing: border-box; + padding: 20px; + z-index: 2147483647; + position: absolute; + right: 0; + bottom: 0; + width: 100%; + height: 100%; +} + +.bd-loading-container { + pointer-events: all; + display: flex; + flex-direction: row; + box-sizing: border-box; + gap: 5px; + background: var(--background-floating); + box-shadow: var(--elevation-high); + border-radius: 5px; + padding: 10px; + width: fit-content; + min-width: 30vh; +} + +.theme-dark .bd-loading-icon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); +} + +.theme-light .bd-loading-icon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); +} + +.bd-loading-left-side, .bd-loading-right-side { + display: flex; + flex-direction: column; + gap: 5px; + position: relative; + width: fit-content; +} + +.bd-loading-right-side { + width: 100%; +} + +.bd-loading-icon { + bottom: 15px; + right: 5px; + display: block; + width: 25px; + height: 25px; + background-size: 100% 100%; + animation: bd-loading-animation 1.5s ease-in-out infinite; +} + +.bd-loading-icon-note { + font-size: 12px; + color: var(--header-secondary); +} + +.bd-loading-item { + display: flex; + flex-direction: column; + gap: 5px; + position: relative; + width: 100%; +} + +.bd-loading-progress { + width: 100%; + height: 5px; + margin: 10px 0; + border-radius: 3px; + background-color: var(--background-secondary); + overflow: hidden; +} + +.bd-loading-progress-bar { + background-color: #3E82E5; + height: 100%; +} + +.bd-loading-status { + white-space: nowrap; + text-align: right; + font-weight: 600; + color: var(--header-primary); +} + +@keyframes bd-loading-animation { + 0% { + opacity: 0.05; + } + + 50% { + opacity: 0.6; + } + + 100% { + opacity: 0.05; + } +} \ No newline at end of file From 2a5efa0ba9631fa481e43a246b70ea9fbf345781 Mon Sep 17 00:00:00 2001 From: Lev <79159094+Mopsgamer@users.noreply.github.com> Date: Thu, 19 Oct 2023 21:37:49 +0200 Subject: [PATCH 17/17] safe percent counter --- renderer/src/modules/core.js | 138 ++++++++++++++++++----------------- 1 file changed, 71 insertions(+), 67 deletions(-) diff --git a/renderer/src/modules/core.js b/renderer/src/modules/core.js index 151e4f81..29c50001 100644 --- a/renderer/src/modules/core.js +++ b/renderer/src/modules/core.js @@ -36,79 +36,83 @@ export default new class Core { Loading.show(); Loading.status.show(); - let stepsCounter = 0; - const stepsMax = 14; - const increasePercent = () => stepsCounter++ / (stepsMax - 1) * 100; - IPC.getSystemAccentColor().then(value => DOMManager.injectStyle("bd-os-values", `:root {--os-accent-color: #${value};}`)); - // Load css early - Logger.log("Startup", "Injecting BD Styles"); - Loading.status.progress.set(increasePercent()); - Loading.status.label.set("Initialization..."); - DOMManager.injectStyle("bd-stylesheet", Styles.toString()); + let pluginErrors, themeErrors; - Logger.log("Startup", "Initializing DataStore"); - Loading.status.progress.set(increasePercent()); - DataStore.initialize(); + const clusters = [ + async () => { + Logger.log("Startup", "Injecting BD Styles"); + Loading.status.label.set("Initialization..."); + DOMManager.injectStyle("bd-stylesheet", Styles.toString()); + }, + async () => { + Logger.log("Startup", "Initializing DataStore"); + DataStore.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing LocaleManager"); + LocaleManager.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing Settings"); + Settings.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing DOMManager"); + DOMManager.initialize(); + }, + async () => { + Logger.log("Startup", "Waiting for connection..."); + await this.waitForConnection(); + }, + async () => { + Logger.log("Startup", "Initializing Editor"); + await Editor.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing Modals"); + await Modals.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing Floating windows"); + FloatingWindows.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing Builtins"); + for (const module in Builtins) { + Builtins[module].initialize(); + } + }, + async () => { + Logger.log("Startup", "Loading Plugins"); + // const pluginErrors = []; + Loading.status.label.set("Loading plugins..."); + pluginErrors = await PluginManager.initialize(); + }, + async () => { + Logger.log("Startup", "Loading Themes"); + // const themeErrors = []; + Loading.status.label.set("Loading themes..."); + themeErrors = await ThemeManager.initialize(); + }, + async () => { + Logger.log("Startup", "Initializing Updater"); + Loading.status.label.set("Getting things ready..."); + Updater.initialize(); + }, + async () => { + Logger.log("Startup", "Removing Loading Interface"); + Loading.status.label.set("Done"); + Loading.hide(); + } + ]; - Logger.log("Startup", "Initializing LocaleManager"); - Loading.status.progress.set(increasePercent()); - LocaleManager.initialize(); - - Logger.log("Startup", "Initializing Settings"); - Loading.status.progress.set(increasePercent()); - Settings.initialize(); - - Logger.log("Startup", "Initializing DOMManager"); - Loading.status.progress.set(increasePercent()); - DOMManager.initialize(); - - Logger.log("Startup", "Waiting for connection..."); - Loading.status.progress.set(increasePercent()); - await this.waitForConnection(); - - Logger.log("Startup", "Initializing Editor"); - Loading.status.progress.set(increasePercent()); - await Editor.initialize(); - - Logger.log("Startup", "Initializing Modals"); - Loading.status.progress.set(increasePercent()); - await Modals.initialize(); - - Logger.log("Startup", "Initializing Floating windows"); - Loading.status.progress.set(increasePercent()); - FloatingWindows.initialize(); - - Logger.log("Startup", "Initializing Builtins"); - Loading.status.progress.set(increasePercent()); - for (const module in Builtins) { - Builtins[module].initialize(); + for (let clusterIndex = 0; clusterIndex < clusters.length; clusterIndex++) { + Loading.status.progress.set(clusterIndex / (clusters.length - 1) * 100); + await clusters[clusterIndex](); } - Logger.log("Startup", "Loading Plugins"); - // const pluginErrors = []; - Loading.status.progress.set(increasePercent()); - Loading.status.label.set("Loading plugins..."); - const pluginErrors = await PluginManager.initialize(); - - Logger.log("Startup", "Loading Themes"); - // const themeErrors = []; - Loading.status.progress.set(increasePercent()); - Loading.status.label.set("Loading themes..."); - const themeErrors = await ThemeManager.initialize(); - - Logger.log("Startup", "Initializing Updater"); - Loading.status.progress.set(increasePercent()); - Loading.status.label.set("Getting things ready..."); - Updater.initialize(); - - Logger.log("Startup", "Removing Loading Interface"); - Loading.status.progress.set(increasePercent()); - - Loading.status.label.set("Done"); - Loading.hide(); - // Show loading errors Logger.log("Startup", "Collecting Startup Errors"); Modals.showAddonErrors({plugins: pluginErrors, themes: themeErrors});