improved script loading (#1167)

UnchartedBull · Nov 10, 2020 · f623a9e · f623a9e
1 parent c90814d
commit f623a9e
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 56 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -7,6 +7,10 @@
       [ngClass]="{ 'loading-dots': status === 'connecting' || status === 'initializing' }"
       >{{ status }}</span
     >
+    <span class="splash-screen__hint" *ngIf="showConnectionHint">
+      Initializing is taking longer than usual. Please make sure that your printer is connected.<br />
+      Trying again every 15 seconds.
+    </span>
   </div>
   <router-outlet (activate)="activated = true"></router-outlet>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -36,6 +36,7 @@ export class AppComponent implements OnInit {
 
   public activated = false;
   public status = 'connecting';
+  public showConnectionHint = false;
 
   public ngOnInit(): void {
     this.initialize();
@@ -78,23 +79,27 @@ export class AppComponent implements OnInit {
 
   private waitForOctoprint() {
     this.electronService.ipcRenderer.on('octoprintReady', (_, octoprintReady: boolean) => {
-      if (octoprintReady) {
-        this.initializeOctoprintService();
-        this.status = 'initializing';
-      } else {
-        this.notificationService
-          .setWarning(
-            'Connection to OctoPrint timed out!',
-            'Make sure that OctoPrint is up and running, then close this card to try again.',
-          )
-          .then(this.checkOctoprintPort.bind(this));
-        this.status = 'no connection';
-      }
-      this.changeDetector.detectChanges();
+      this.ngZone.run(() => {
+        if (octoprintReady) {
+          this.initializeOctoprintService();
+          this.status = 'initializing';
+        } else {
+          this.notificationService
+            .setWarning(
+              'Connection to OctoPrint timed out!',
+              'Make sure that OctoPrint is up and running, then close this card to try again.',
+            )
+            .then(this.checkOctoprintPort.bind(this));
+          this.status = 'no connection';
+        }
+        this.changeDetector.detectChanges();
+      });
     });
 
     this.electronService.ipcRenderer.on('waitPortError', (_, error: Error) => {
-      this.notificationService.setError('System Error - please restart', error.message);
+      this.ngZone.run(() => {
+        this.notificationService.setError('System Error - please restart', error.message);
+      });
     });
 
     this.checkOctoprintPort();
@@ -111,23 +116,26 @@ export class AppComponent implements OnInit {
   }
 
   private initializeOctoprintService() {
+    const showPrinterConnectedTimeout = setTimeout(() => {
+      this.showConnectionHint = true;
+    }, 30000);
     this.octoprintScriptService
-      .initialize(this.configService.getURL(''))
+      .initialize(this.configService.getURL(''), this.configService.getAccessKey())
       .then(() => {
         this.octoprintScriptService.authenticate(this.configService.getAccessKey());
-        this.ngZone.run(() => {
-          if (this.configService.isTouchscreen()) {
-            this.router.navigate(['/main-screen']);
-          } else {
-            this.router.navigate(['/main-screen-no-touch']);
-          }
-        });
+        if (this.configService.isTouchscreen()) {
+          this.router.navigate(['/main-screen']);
+        } else {
+          this.router.navigate(['/main-screen-no-touch']);
+        }
       })
       .catch(() => {
+        console.log('REJECTED');
         this.notificationService.setError(
           "Can't get OctoPrint script!",
           'Please restart your machine. If the error persists open a new issue on GitHub.',
         );
-      });
+      })
+      .finally(() => clearTimeout(showPrinterConnectedTimeout));
   }
 }
diff --git a/src/app/config/no-config/no-config.component.ts b/src/app/config/no-config/no-config.component.ts
@@ -85,7 +85,7 @@ export class NoConfigComponent implements OnInit {
 
   private async loadOctoprintClient() {
     this.octoprintScriptService
-      .initialize(`http://${this.config.octoprint.urlSplit.url}:${this.config.octoprint.urlSplit.port}/api/`)
+      .downloadScript(`http://${this.config.octoprint.urlSplit.url}:${this.config.octoprint.urlSplit.port}/api/`)
       .then(() => {
         this.OctoPrint = this.octoprintScriptService.getInstance();
         this.changePage(0.5);

diff --git a/src/app/files.service.ts b/src/app/files.service.ts
@@ -30,7 +30,7 @@ export class FilesService {
         this.httpGETRequest.unsubscribe();
         this.notificationService.setError("Can't retrieve folder!", 'Operation timed out. Please try again.');
         reject();
-      }, 6000);
+      }, 10000);
       folderPath = folderPath === '/' ? '' : folderPath;
       if (this.httpGETRequest) {
         this.httpGETRequest.unsubscribe();

diff --git a/src/app/octoprint-script.service.ts b/src/app/octoprint-script.service.ts
@@ -1,43 +1,46 @@
 import { Injectable } from '@angular/core';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const OctoPrint: any;
 
 @Injectable()
 export class OctoprintScriptService {
   public loaded = false;
-  private octoprintURL: string;
+  private checkInterval = 1000;
+  private numberDownloadFailed = 0;
+
+  async initialize(octoprintURL: string, apiKey: string): Promise<void> {
+    return new Promise(resolve => {
+      this.tryDownload(octoprintURL, apiKey, resolve);
+    });
+  }
+
+  tryDownload(octoprintURL: string, apiKey: string, resolve: () => void): void {
+    this.downloadScript(octoprintURL)
+      .then(() => {
+        this.authenticate(apiKey);
+        console.clear();
+        resolve();
+      })
+      .catch(() => {
+        if (this.numberDownloadFailed < 30) {
+          this.numberDownloadFailed++;
+        } else if (this.numberDownloadFailed === 30) {
+          this.checkInterval = 15000;
+        }
+        setTimeout(this.tryDownload.bind(this), this.checkInterval, octoprintURL, apiKey, resolve);
+      });
+  }
 
-  async initialize(octoprintURL: string): Promise<void> {
-    // script loading might fail try 3 times in total, probably can be cleaned up in the future
+  downloadScript(octoprintURL: string): Promise<void> {
     return new Promise((resolve, reject) => {
-      this.octoprintURL = octoprintURL.replace('api/', '');
       const octoprintStaticURL = octoprintURL.replace('/api/', '/static/');
-      setTimeout(() => {
-        this.loadScript(`${octoprintStaticURL}webassets/packed_client.js`)
-          .then(() => {
-            OctoPrint.options.baseurl = this.octoprintURL;
-            resolve();
-          })
-          .catch(() => {
-            setTimeout(() => {
-              this.loadScript(`${octoprintStaticURL}webassets/packed_client.js`)
-                .then(() => {
-                  OctoPrint.options.baseurl = this.octoprintURL;
-                  resolve();
-                })
-                .catch(() => {
-                  setTimeout(() => {
-                    this.loadScript(`${octoprintStaticURL}webassets/packed_client.js`)
-                      .then(() => {
-                        OctoPrint.options.baseurl = this.octoprintURL;
-                        resolve();
-                      })
-                      .catch(() => reject());
-                  }, 10000);
-                });
-            }, 5000);
-          });
-      }, 2500);
+      this.loadScript(`${octoprintStaticURL}webassets/packed_client.js`)
+        .then(() => {
+          OctoPrint.options.baseurl = octoprintURL;
+          resolve();
+        })
+        .catch(() => reject());
     });
   }
 

diff --git a/src/styles.scss b/src/styles.scss
@@ -165,9 +165,18 @@ app-root {
     text-align: center;
     display: block;
     font-size: 5vw;
-    margin-top: 25vh;
+    margin-top: 20vh;
     opacity: 0.7;
   }
+
+  &__hint {
+    display: block;
+    text-align: center;
+    font-size: 0.5rem;
+    margin-top: 7vh;
+    opacity: 0.5;
+    line-height: 150%;
+  }
 }
 
 .loading-dots:after {