From 2cbbb3b2dfacb6f1b727cfdfe240fd27221cac28 Mon Sep 17 00:00:00 2001 From: jliddev Date: Thu, 4 Feb 2021 09:50:21 -0600 Subject: [PATCH] Add a fancy preload animation Fix some hanging promises --- wowup-electron/src/app/app.component.html | 5 +- wowup-electron/src/app/app.component.ts | 84 ++++++++++++++--------- wowup-electron/src/index.html | 2 +- wowup-electron/src/styles.scss | 17 +++++ 4 files changed, 73 insertions(+), 35 deletions(-) diff --git a/wowup-electron/src/app/app.component.html b/wowup-electron/src/app/app.component.html index f7374838..786ed249 100644 --- a/wowup-electron/src/app/app.component.html +++ b/wowup-electron/src/app/app.component.html @@ -6,7 +6,7 @@ -
- +
\ No newline at end of file diff --git a/wowup-electron/src/app/app.component.ts b/wowup-electron/src/app/app.component.ts index b8db8bb1..18ac639d 100644 --- a/wowup-electron/src/app/app.component.ts +++ b/wowup-electron/src/app/app.component.ts @@ -10,9 +10,9 @@ import { import { MatDialog } from "@angular/material/dialog"; import { TranslateService } from "@ngx-translate/core"; import { OverlayContainer } from "@angular/cdk/overlay"; -import { interval, Subscription } from "rxjs"; -import { filter, tap } from "rxjs/operators"; -import { map, join } from "lodash"; +import { from, interval, of, Subscription } from "rxjs"; +import { catchError, delay, filter, first, map, switchMap, tap } from "rxjs/operators"; +import * as _ from "lodash"; import { ALLIANCE_LIGHT_THEME, ALLIANCE_THEME, @@ -62,6 +62,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { // } public quitEnabled?: boolean; + public showPreLoad = true; constructor( private _analyticsService: AnalyticsService, @@ -80,9 +81,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { ) {} ngOnInit(): void { - const zoomFactor = parseFloat(this._preferenceStore.get(ZOOM_FACTOR_KEY) as string); + const zoomFactor = parseFloat(this._preferenceStore.get(ZOOM_FACTOR_KEY)); if (!isNaN(zoomFactor) && isFinite(zoomFactor)) { - this._electronService.setZoomFactor(zoomFactor); + this._electronService.setZoomFactor(zoomFactor).catch((e) => console.error(e)); } this.overlayContainer.getContainerElement().classList.add(this.wowUpService.currentTheme); @@ -105,10 +106,21 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { this._electronService.on(IPC_MENU_ZOOM_OUT_CHANNEL, this.onMenuZoomOut); this._electronService.on(IPC_MENU_ZOOM_RESET_CHANNEL, this.onMenuZoomReset); - this._electronService.getAppOptions().then((appOptions) => { - this.quitEnabled = appOptions.quit; - this._cdRef.detectChanges(); - }); + from(this._electronService.getAppOptions()) + .pipe( + first(), + delay(3000), + map((appOptions) => { + this.showPreLoad = false; + this.quitEnabled = appOptions.quit; + this._cdRef.detectChanges(); + }), + catchError((err) => { + console.error(err); + return of(undefined); + }) + ) + .subscribe(); this._electronService.powerMonitor$.pipe(filter((evt) => !!evt)).subscribe((evt) => { console.log("Stopping auto update..."); @@ -116,22 +128,30 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { this._autoUpdateInterval = undefined; if (evt === IPC_POWER_MONITOR_RESUME || evt === IPC_POWER_MONITOR_UNLOCK) { - this.initializeAutoUpdate(); + this.initializeAutoUpdate().catch((e) => console.error(e)); } }); } ngAfterViewInit(): void { - this.createAppMenu(); - this.createSystemTray(); - - if (this._analyticsService.shouldPromptTelemetry) { - this.openDialog(); - } else { - this._analyticsService.trackStartup(); - } - - this.initializeAutoUpdate(); + from(this.createAppMenu()) + .pipe( + first(), + switchMap(() => from(this.createSystemTray())), + map(() => { + if (this._analyticsService.shouldPromptTelemetry) { + this.openDialog(); + } else { + this._analyticsService.trackStartup(); + } + }), + switchMap(() => from(this.initializeAutoUpdate())), + catchError((e) => { + console.error(e); + return of(undefined); + }) + ) + .subscribe(); } ngOnDestroy(): void { @@ -140,16 +160,16 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { this._electronService.off(IPC_MENU_ZOOM_RESET_CHANNEL, this.onMenuZoomReset); } - onMenuZoomIn = () => { - this._electronService.applyZoom(ZoomDirection.ZoomIn); + onMenuZoomIn = (): void => { + this._electronService.applyZoom(ZoomDirection.ZoomIn).catch((e) => console.error(e)); }; - onMenuZoomOut = () => { - this._electronService.applyZoom(ZoomDirection.ZoomOut); + onMenuZoomOut = (): void => { + this._electronService.applyZoom(ZoomDirection.ZoomOut).catch((e) => console.error(e)); }; - onMenuZoomReset = () => { - this._electronService.applyZoom(ZoomDirection.ZoomReset); + onMenuZoomReset = (): void => { + this._electronService.applyZoom(ZoomDirection.ZoomReset).catch((e) => console.error(e)); }; openDialog(): void { @@ -226,8 +246,8 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { } private async showFewAddonsAutoUpdated(updatedAddons: Addon[]) { - const addonNames = map(updatedAddons, (addon) => addon.name); - const addonText = join(addonNames, "\r\n"); + const addonNames = _.map(updatedAddons, (addon) => addon.name); + const addonText = _.join(addonNames, "\r\n"); const iconPath = await this._fileService.getAssetFilePath(WOWUP_LOGO_FILENAME); const translated = await this.translate .get(["APP.AUTO_UPDATE_NOTIFICATION_TITLE", "APP.AUTO_UPDATE_FEW_NOTIFICATION_BODY"], { @@ -244,15 +264,15 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { } private getAddonNames(addons: Addon[]) { - return map(addons, (addon) => addon.name); + return _.map(addons, (addon) => addon.name); } private getAddonNamesLength(addons: Addon[]) { - return join(this.getAddonNames(addons), " ").length; + return _.join(this.getAddonNames(addons), " ").length; } private onAutoUpdateNotificationClosed = () => { - this.checkQuitEnabled(); + this.checkQuitEnabled().catch((e) => console.error(e)); }; private async checkQuitEnabled() { @@ -262,7 +282,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { } console.debug("checkQuitEnabled"); - this._electronService.quitApplication(); + this._electronService.quitApplication().catch((e) => console.error(e)); } private async createAppMenu() { diff --git a/wowup-electron/src/index.html b/wowup-electron/src/index.html index 476ff268..243ce912 100644 --- a/wowup-electron/src/index.html +++ b/wowup-electron/src/index.html @@ -24,7 +24,7 @@ justify-content: center; align-items: center; "> - + diff --git a/wowup-electron/src/styles.scss b/wowup-electron/src/styles.scss index 66beca84..1fb436a7 100644 --- a/wowup-electron/src/styles.scss +++ b/wowup-electron/src/styles.scss @@ -520,3 +520,20 @@ th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-h border-width: 1px; border-style: solid; } + +@keyframes pulse { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } +}