From 9a03f3ddb5848339e6a9cf603dbe821362ef2999 Mon Sep 17 00:00:00 2001 From: Timon G Date: Thu, 22 Oct 2020 15:23:44 +0200 Subject: [PATCH] Switch to electron ngx, some performance improvements (#1109) * various improvements + switch to electron-ngx * remove electron option --- .travis.yml | 38 +++++++++---------- main.js | 3 +- package-lock.json | 30 +++++++++++---- package.json | 35 ++++++++++++++++- src/app/app.component.ts | 8 ++++ src/app/app.module.ts | 2 + src/app/app.service.ts | 34 +++++------------ src/app/bottom-bar/bottom-bar.component.scss | 1 - .../config/no-config/no-config.component.scss | 1 - .../config/no-config/no-config.component.ts | 21 +++------- src/app/control/control.component.scss | 2 - src/app/filament/filament.component.scss | 1 - src/app/filament/filament.component.ts | 4 +- src/app/files.service.ts | 2 +- src/app/files/files.component.scss | 2 - src/app/long-press.directive.ts | 4 +- src/app/main-menu/main-menu.component.scss | 8 ++-- .../notification/notification.component.scss | 1 - .../print-control.component.scss | 1 - .../printer-status.component.scss | 1 - src/app/settings/settings.component.scss | 4 +- src/app/settings/settings.component.ts | 14 ++----- src/app/standby/standby.component.ts | 2 +- src/app/update/update.component.scss | 1 - src/app/update/update.component.ts | 36 ++++++++---------- 25 files changed, 131 insertions(+), 125 deletions(-) diff --git a/.travis.yml b/.travis.yml index c1c42d0a7..99b51a93c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,30 +3,30 @@ sudo: false language: node_js node_js: - - '10' + - '12' cache: - directories: - - ./node_modules + directories: + - ./node_modules before_install: - - travis_retry sudo apt-get update - - travis_retry sudo apt-get install --no-install-recommends --no-upgrade -qq libavahi-compat-libdnssd-dev + - travis_retry sudo apt-get update + - travis_retry sudo apt-get install --no-install-recommends --no-upgrade -qq libavahi-compat-libdnssd-dev install: - - npm install + - npm install jobs: - include: - - stage: lint - if: branch = master - name: 'Linting Application ...' - script: npm run lint - - stage: build - if: type = push AND branch != master OR type = pull_request - name: 'Building Application ...' - script: npm run ng:build - - stage: build - if: type = push AND branch = master - name: 'Building Application ...' - script: npm run pack + include: + - stage: lint + if: branch = master + name: 'Linting Application ...' + script: npm run lint + - stage: build + if: type = push AND branch != master OR type = pull_request + name: 'Building Application ...' + script: npm run ng:build + - stage: build + if: type = push AND branch = master + name: 'Building Application ...' + script: npm run pack diff --git a/main.js b/main.js index 7f9906bb4..f12878ac7 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,8 @@ /* eslint-disable @typescript-eslint/no-var-requires */ /* eslint-disable import/no-commonjs */ +require('v8-compile-cache'); + const { app, BrowserWindow, ipcMain } = require('electron'); const path = require('path'); const url = require('url'); @@ -12,7 +14,6 @@ const dev = args.some(val => val === '--serve'); const activateListeners = require('./helper/listener'); app.commandLine.appendSwitch('touch-events', 'enabled'); -app.allowRendererProcessReuse = true; let window; diff --git a/package-lock.json b/package-lock.json index eadf08972..d428082ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2388,9 +2388,9 @@ "dev": true }, "@types/node": { - "version": "14.14.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.1.tgz", - "integrity": "sha512-D2/Xwp9c49JhIWq7SIrdvoYyGdq6yXkr5FTldN4rus9XljYFBul6P2epAID8xepOpL4ffcx09C05FZGK/1AIkw==" + "version": "12.19.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz", + "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w==" }, "@types/q": { "version": "1.5.4", @@ -5878,9 +5878,9 @@ }, "dependencies": { "@types/node": { - "version": "12.12.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.67.tgz", - "integrity": "sha512-R48tgL2izApf+9rYNH+3RBMbRpPeW3N8f0I9HMhggeq4UXwBDqumJ14SDs4ctTMhG11pIOduZ4z3QWGOiMc9Vg==", + "version": "12.19.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz", + "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w==", "dev": true } } @@ -9986,6 +9986,21 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ngx-electron": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ngx-electron/-/ngx-electron-2.2.0.tgz", + "integrity": "sha512-Yl7Dsnvp97k0XpIuiB54X7Ij2+zU5x0pCAYnN//VZ9tF7c6S3//OZ9dN9Et7p/zIjCV3Hg9vyw68dPJEZGk+LQ==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "ngx-spinner": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-10.0.1.tgz", @@ -14859,8 +14874,7 @@ "v8-compile-cache": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz", - "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==", - "dev": true + "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==" }, "validate-npm-package-license": { "version": "3.0.4", diff --git a/package.json b/package.json index 6be091dda..13a1fcd85 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,37 @@ "directories": { "output": "package" }, + "files": [ + "**/*", + "LICENSE.md", + "!**/*.ts", + "!*.code-workspace", + "!package.json", + "!package-lock.json", + "!CONTRIBUTING.md", + "!README.md", + "!sample.config.json", + "!angular.json", + "!karma.conf.js", + "!tsconfig.app.json", + "!tsconfig.json", + "!tsconfig.spec.json", + "!.eslintrc.js", + "!.gitignore", + "!.prettierrc", + "!.travis.yml", + "!.dependabot/", + "!.github/", + "!.vscode/", + "!src/", + "!e2e/", + "!docs/", + "!package/", + "!screenshots/", + "!scripts/", + "!themes/", + "!build/" + ], "linux": { "target": [ { @@ -85,10 +116,12 @@ "got": "^11.8.0", "jquery": "^3.5.1", "lodash": "^4.17.20", + "ngx-electron": "^2.2.0", "ngx-spinner": "^10.0.1", "progress-stream": "^2.0.0", "rxjs": "~6.6.3", "tslib": "^2.0.3", + "v8-compile-cache": "^2.1.1", "zone.js": "~0.10.3" }, "devDependencies": { @@ -98,7 +131,7 @@ "@angular/language-service": "~10.1.6", "@types/ajv": "^1.0.0", "@types/lodash": "^4.14.162", - "@types/node": "^14.14.1", + "@types/node": "12.19.0", "@typescript-eslint/eslint-plugin": "^4.0.0", "@typescript-eslint/parser": "^3.10.1", "codelyzer": "^6.0.1", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5e46d5793..d9d70e39e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import _ from 'lodash'; +import { ElectronService } from 'ngx-electron'; import { AppService } from './app.service'; import { ConfigService } from './config/config.service'; @@ -28,6 +29,7 @@ export class AppComponent implements OnInit { private octoprintScriptService: OctoprintScriptService, private notificationService: NotificationService, private router: Router, + private electronService: ElectronService, ) {} public activated = false; @@ -37,6 +39,12 @@ export class AppComponent implements OnInit { } private async initialize(): Promise { + if (!this.electronService.isElectronApp) { + this.notificationService.setWarning( + 'Non electron environment detected!', + 'The app may not work as intended. If you run an official build please open a new issue on GitHub.', + ); + } if (this.configService && this.configService.isInitialized()) { if (this.configService.isLoaded()) { if (this.configService.isValid()) { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ca825b1b4..1a6f5d9c1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { RoundProgressModule } from 'angular-svg-round-progressbar'; +import { NgxElectronModule } from 'ngx-electron'; import { NgxSpinnerModule } from 'ngx-spinner'; import { AppComponent } from './app.component'; @@ -67,6 +68,7 @@ import { URLSafePipe } from './url.pipe'; RoundProgressModule, FormsModule, FontAwesomeModule, + NgxElectronModule, NgxSpinnerModule, BrowserAnimationsModule, MatRippleModule, diff --git a/src/app/app.service.ts b/src/app/app.service.ts index b093d86ea..8bb5768f3 100644 --- a/src/app/app.service.ts +++ b/src/app/app.service.ts @@ -1,5 +1,6 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; +import { ElectronService } from 'ngx-electron'; import { ConfigService } from './config/config.service'; import { NotificationService } from './notification/notification.service'; @@ -10,8 +11,6 @@ import { NotificationService } from './notification/notification.service'; export class AppService { private updateError: string[]; private loadedFile = false; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private ipc: any; public version: string; public latestVersion: string; private latestVersionAssetsURL: string; @@ -21,20 +20,11 @@ export class AppService { private configService: ConfigService, private notificationService: NotificationService, private http: HttpClient, + private electronService: ElectronService, ) { - try { - this.ipc = window.require('electron').ipcRenderer; - this.enableVersionListener(); - this.enableCustomCSSListener(); - setTimeout(() => { - this.ipc.send('appInfo'); - }, 0); - } catch (e) { - this.notificationService.setError( - "Can't connect to backend", - 'Please restart your system. If the issue persists open an issue on GitHub.', - ); - } + this.enableVersionListener(); + this.enableCustomCSSListener(); + this.electronService.ipcRenderer.send('appInfo'); this.updateError = [ ".printer should have required property 'zBabystepGCode'", ".octodash should have required property 'previewProgressCircle'", @@ -52,20 +42,20 @@ export class AppService { } private enableVersionListener(): void { - this.ipc.on('versionInformation', (_, versionInformation: VersionInformation): void => { + this.electronService.ipcRenderer.on('versionInformation', (_, versionInformation: VersionInformation): void => { this.version = versionInformation.version; this.checkUpdate(); }); } private enableCustomCSSListener(): void { - this.ipc.on('customStyles', (_, customCSS: string): void => { + this.electronService.ipcRenderer.on('customStyles', (_, customCSS: string): void => { const css = document.createElement('style'); css.appendChild(document.createTextNode(customCSS)); document.head.append(css); }); - this.ipc.on('customStylesError', (_, customCSSError: string): void => { + this.electronService.ipcRenderer.on('customStylesError', (_, customCSSError: string): void => { this.notificationService.setError("Can't load custom styles!", customCSSError); }); } @@ -93,15 +83,11 @@ export class AppService { } public turnDisplayOff(): void { - if (this.ipc) { - this.ipc.send('screenSleep', ''); - } + this.electronService.ipcRenderer.send('screenSleep', ''); } public turnDisplayOn(): void { - if (this.ipc) { - this.ipc.send('screenWakeup', ''); - } + this.electronService.ipcRenderer.send('screenWakeup', ''); } public getUpdateError(): string[] { diff --git a/src/app/bottom-bar/bottom-bar.component.scss b/src/app/bottom-bar/bottom-bar.component.scss index 82a44ef16..cddc4e57e 100644 --- a/src/app/bottom-bar/bottom-bar.component.scss +++ b/src/app/bottom-bar/bottom-bar.component.scss @@ -26,7 +26,6 @@ &__error { color: #c23616; animation: blinker 2s linear infinite; - transform: translate3D(0, 0, 0); } } diff --git a/src/app/config/no-config/no-config.component.scss b/src/app/config/no-config/no-config.component.scss index b97ce9489..a7a17ba12 100644 --- a/src/app/config/no-config/no-config.component.scss +++ b/src/app/config/no-config/no-config.component.scss @@ -18,7 +18,6 @@ background-color: #44bd32; width: 0; transition: width 0.7s ease-in-out; - transform: translate3D(0, 0, 0); &-wrapper { background-color: #718093; diff --git a/src/app/config/no-config/no-config.component.ts b/src/app/config/no-config/no-config.component.ts index 953fac81a..a29b28448 100644 --- a/src/app/config/no-config/no-config.component.ts +++ b/src/app/config/no-config/no-config.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import { ElectronService } from 'ngx-electron'; import { NotificationService } from 'src/app/notification/notification.service'; import { OctoprintScriptService } from 'src/app/octoprint-script.service'; @@ -11,9 +12,6 @@ import { Config, ConfigService } from '../config.service'; styleUrls: ['./no-config.component.scss'], }) export class NoConfigComponent implements OnInit { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private ipc: any; - public page = 0; public totalPages = 7; @@ -36,17 +34,9 @@ export class NoConfigComponent implements OnInit { private configService: ConfigService, private router: Router, private notificationService: NotificationService, + private electronService: ElectronService, private octoprintScriptService: OctoprintScriptService, ) { - try { - this.ipc = window.require('electron').ipcRenderer; - } catch (e) { - this.notificationService.setError( - "Can't connect to backend", - 'Please restart your system. If the issue persists open an issue on GitHub.', - ); - } - this.configUpdate = this.configService.isUpdate(); if (this.configUpdate) { this.config = configService.getCurrentConfig(); @@ -59,14 +49,14 @@ export class NoConfigComponent implements OnInit { public ngOnInit(): void { this.changeProgress(); - this.ipc.on('discoveredNodes', (_, nodes: OctoprintNodes) => { + this.electronService.ipcRenderer.on('discoveredNodes', (_, nodes: OctoprintNodes) => { this.octoprintNodes = nodes; }); } public discoverOctoprintInstances(): void { this.octoprintNodes = null; - this.ipc.send('discover'); + this.electronService.ipcRenderer.send('discover'); setTimeout(() => { const searching = document.querySelector('.no-config__discovered-instances__searching'); if (searching) { @@ -157,7 +147,6 @@ export class NoConfigComponent implements OnInit { } changeFeedSpeed(amount: number): void { - console.log(amount); if (this.config.filament.feedSpeed + amount < 0) { this.config.filament.feedSpeed = 0; } else if (this.config.filament.feedSpeed + amount > 999) { @@ -204,7 +193,7 @@ export class NoConfigComponent implements OnInit { private beforeNavigation(value: number): number { switch (this.page) { case 1: - this.ipc.send('stopDiscover'); + this.electronService.ipcRenderer.send('stopDiscover'); if (value > 0) { this.loadOctoprintClient(); return 0.5; diff --git a/src/app/control/control.component.scss b/src/app/control/control.component.scss index 06674fc40..966cba729 100755 --- a/src/app/control/control.component.scss +++ b/src/app/control/control.component.scss @@ -7,7 +7,6 @@ right: 0; z-index: 50; transition: opacity ease-in-out 0.5s; - transform: translate3D(0, 0, 0); opacity: 0; background: #2a2f39; font-weight: 500; @@ -140,7 +139,6 @@ background-color: transparent; transition: all 0.3s ease-in-out; transition-property: opacity, background; - transform: translate3D(0, 0, 0); &-active { opacity: 0.9; diff --git a/src/app/filament/filament.component.scss b/src/app/filament/filament.component.scss index 7564869f7..ee9419475 100644 --- a/src/app/filament/filament.component.scss +++ b/src/app/filament/filament.component.scss @@ -7,7 +7,6 @@ background-color: #44bd32; width: 0; transition: width 0.7s ease-in-out; - transform: translate3D(0, 0, 0); &-wrapper { background-color: #718093; diff --git a/src/app/filament/filament.component.ts b/src/app/filament/filament.component.ts index 450f1dfaf..64241bcbf 100644 --- a/src/app/filament/filament.component.ts +++ b/src/app/filament/filament.component.ts @@ -16,8 +16,8 @@ export class FilamentComponent implements OnInit { private totalPages = 5; public page: number; - private timeout: number; - private timeout2: number; + private timeout: ReturnType; + private timeout2: ReturnType; public filamentSpools: FilamentSpoolList; public isLoadingSpools = true; diff --git a/src/app/files.service.ts b/src/app/files.service.ts index 0dc2f9da2..a2b723a34 100644 --- a/src/app/files.service.ts +++ b/src/app/files.service.ts @@ -13,7 +13,7 @@ import { OctoprintFilesAPI, OctoprintFolderAPI, OctoprintFolderContentAPI } from }) export class FilesService { private httpGETRequest: Subscription; - private httpGETRequestTimeout: number; + private httpGETRequestTimeout: ReturnType; private httpPOSTRequest: Subscription; private httpDELETERequest: Subscription; diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss index 96d052275..d6e22064f 100755 --- a/src/app/files/files.component.scss +++ b/src/app/files/files.component.scss @@ -137,7 +137,6 @@ backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.77); transition: opacity 0.4s ease-in-out; - transform: translate3D(0, 0, 0); z-index: 5; &__close { @@ -274,7 +273,6 @@ backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.77); transition: opacity 0.4s ease-in-out; - transform: translate3D(0, 0, 0); left: 0; top: 0; width: 100vw; diff --git a/src/app/long-press.directive.ts b/src/app/long-press.directive.ts index 3995d010c..55bc84dbd 100644 --- a/src/app/long-press.directive.ts +++ b/src/app/long-press.directive.ts @@ -6,8 +6,8 @@ import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/c export class LongPress { pressing: boolean; longPressing: boolean; - timeout: number; - interval: number; + timeout: ReturnType; + interval: ReturnType; @Input() duration = 700; @Input() frequency = 100; diff --git a/src/app/main-menu/main-menu.component.scss b/src/app/main-menu/main-menu.component.scss index 99fe96ad7..c36a4b2cc 100644 --- a/src/app/main-menu/main-menu.component.scss +++ b/src/app/main-menu/main-menu.component.scss @@ -39,16 +39,16 @@ &__1 { width: 15.5vw; - margin-bottom: -0.7vw; + margin-bottom: -1.3vw; } &__2 { - width: 14vw; + width: 13.5vw; } &__3 { - width: 11vw; - margin-bottom: 1.7vw; + width: 10.5vw; + margin-bottom: 1.6vw; } } diff --git a/src/app/notification/notification.component.scss b/src/app/notification/notification.component.scss index 87bcb2e37..3db20ecbd 100755 --- a/src/app/notification/notification.component.scss +++ b/src/app/notification/notification.component.scss @@ -7,7 +7,6 @@ left: 10vw; top: -75vh; transition: top 0.7s ease-in-out; - transform: translate3D(0, 0, 0); box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.75); z-index: 100; border-right: 1vw solid #5a6675; diff --git a/src/app/print-control/print-control.component.scss b/src/app/print-control/print-control.component.scss index 38be62b87..467ffba39 100644 --- a/src/app/print-control/print-control.component.scss +++ b/src/app/print-control/print-control.component.scss @@ -8,7 +8,6 @@ backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.77); transition: opacity 0.4s ease-in-out; - transform: translate3D(0, 0, 0); z-index: 50; opacity: 1; } diff --git a/src/app/printer-status/printer-status.component.scss b/src/app/printer-status/printer-status.component.scss index a68ce6ef5..49af3fdf2 100644 --- a/src/app/printer-status/printer-status.component.scss +++ b/src/app/printer-status/printer-status.component.scss @@ -85,7 +85,6 @@ backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.75); transition: opacity 0.4s ease-in-out; - transform: translate3D(0, 0, 0); z-index: 10; opacity: 0; diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index 2e99872bc..b3b4e5908 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -1,14 +1,13 @@ .settings { &-wrapper { - transform: translate3D(0, 0, 0); animation: fadein 0.4s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; - backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.75); + backdrop-filter: blur(8px); z-index: 20; &-fadeout { @@ -230,7 +229,6 @@ width: 54vw; display: block; padding: 2vh 2vw 2vh 4vw; - transform: translate3D(0, 0, 0); &-slideout-forward { animation: slideout-forward 0.4s ease-out; diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index bca7de3fe..1c98e5b8a 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -1,4 +1,5 @@ import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; +import { ElectronService } from 'ngx-electron'; import { AppService } from '../app.service'; import { Config, ConfigService } from '../config/config.service'; @@ -29,25 +30,16 @@ export class SettingsComponent implements OnInit { ]; private overwriteNoSave = false; private pages = []; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private ipc: any; public update = false; public constructor( private configService: ConfigService, private notificationService: NotificationService, + private electronService: ElectronService, public service: AppService, ) { this.config = this.configService.getCurrentConfig(); this.config = this.configService.revertConfigForInput(this.config); - try { - this.ipc = window.require('electron').ipcRenderer; - } catch (e) { - this.notificationService.setError( - "Can't connect to backend", - 'Please restart your system. If the issue persists open an issue on GitHub.', - ); - } } public ngOnInit(): void { @@ -102,7 +94,7 @@ export class SettingsComponent implements OnInit { this.overwriteNoSave = true; this.hideSettings(); this.configService.updateConfig(); - this.ipc.send('reload', ''); + this.electronService.ipcRenderer.send('reload', ''); } public showUpdate(): void { diff --git a/src/app/standby/standby.component.ts b/src/app/standby/standby.component.ts index c72157873..901519d0f 100644 --- a/src/app/standby/standby.component.ts +++ b/src/app/standby/standby.component.ts @@ -17,7 +17,7 @@ export class StandbyComponent implements OnInit { public connecting = false; public error = ''; private connectionRetries = 3; - private displaySleepTimeout: number; + private displaySleepTimeout: ReturnType; public constructor( private configService: ConfigService, diff --git a/src/app/update/update.component.scss b/src/app/update/update.component.scss index e675691e9..bc4a39535 100644 --- a/src/app/update/update.component.scss +++ b/src/app/update/update.component.scss @@ -16,7 +16,6 @@ background-color: #44bd32; width: 25vw; transition: width 0.7s ease-in-out; - transform: translate3D(0, 0, 0); font-size: 0.5rem; text-align: right; padding-top: 1.5vh; diff --git a/src/app/update/update.component.ts b/src/app/update/update.component.ts index 92b43263f..746d8ae46 100644 --- a/src/app/update/update.component.ts +++ b/src/app/update/update.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { ElectronService } from 'ngx-electron'; import { AppService } from '../app.service'; import { NotificationService } from '../notification/notification.service'; @@ -12,9 +13,7 @@ import { OctoprintService } from '../octoprint.service'; export class UpdateComponent implements OnInit { @Output() closeFunction = new EventEmitter(true); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private ipc: any; - private installationAnimationInterval: number; + private installationAnimationInterval: ReturnType; public updateProgress: UpdateDownloadProgress = { percentage: 0, transferred: 0, @@ -32,16 +31,8 @@ export class UpdateComponent implements OnInit { private notificationService: NotificationService, private octoprintService: OctoprintService, private changeDetector: ChangeDetectorRef, - ) { - try { - this.ipc = window.require('electron').ipcRenderer; - } catch (e) { - this.notificationService.setError( - "Can't connect to backend", - 'Please restart your system. If the issue persists open an issue on GitHub.', - ); - } - } + private electronService: ElectronService, + ) {} ngOnInit(): void { if (!this.service.latestVersion || !this.service.getLatestVersionAssetsURL()) { @@ -57,17 +48,20 @@ export class UpdateComponent implements OnInit { } private setupListeners(): void { - this.ipc.on('updateError', (_, updateError: UpdateError): void => { + this.electronService.ipcRenderer.on('updateError', (_, updateError: UpdateError): void => { this.notificationService.setError("Can't install update!", updateError.error.message); this.closeUpdateWindow(); }); - this.ipc.on('updateDownloadProgress', (_, updateDownloadProgress: UpdateDownloadProgress): void => { - this.updateProgress = updateDownloadProgress; - this.changeDetector.detectChanges(); - }); + this.electronService.ipcRenderer.on( + 'updateDownloadProgress', + (_, updateDownloadProgress: UpdateDownloadProgress): void => { + this.updateProgress = updateDownloadProgress; + this.changeDetector.detectChanges(); + }, + ); - this.ipc.on('updateDownloadFinished', (): void => { + this.electronService.ipcRenderer.on('updateDownloadFinished', (): void => { this.page = 2; this.changeDetector.detectChanges(); setTimeout(() => { @@ -79,7 +73,7 @@ export class UpdateComponent implements OnInit { }, 250); }); - this.ipc.on('updateInstalled', (): void => { + this.electronService.ipcRenderer.on('updateInstalled', (): void => { this.page = 3; this.changeDetector.detectChanges(); }); @@ -92,7 +86,7 @@ export class UpdateComponent implements OnInit { } private update(assetsURL: string): void { - this.ipc.send('update', { + this.electronService.ipcRenderer.send('update', { assetsURL: assetsURL, }); }