migration

src/app/pages/jukebox/jukebox.compontent.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -15,18 +15,20 @@ import { Data } from '@angular/router';
   templateUrl: './jukebox.component.html',
   styleUrls: [ './jukebox.component.scss' ]
 })
-export class JukeboxComponent implements OnInit {
+export class JukeboxComponent implements OnInit, OnDestroy {
 
   timeout: number = 0;
   timer;
   searchResult: any;
   currentTrack: any;
+  checking: boolean = false;
   active: boolean = false;
   wait: boolean = false;
   forbidden: boolean = false;
   unavailable: boolean = false;
   searchDisabled = true;
   searchFormControl = new FormControl();
+  automaticCheck;
 
   constructor(
     public dialog: MatDialog,
@@ -37,61 +39,84 @@ export class JukeboxComponent implements OnInit {
   ngOnInit(): void {
     this.check();
 
-    this.searchFormControl.valueChanges.subscribe(value => {
-      this.searchDisabled = false;
+    this.searchFormControl.valueChanges.subscribe({
+      next: (value) => {
+        this.searchDisabled = false;
+      }
     })
+
+    this.automaticCheck = setInterval(() => {
+      this.check();
+    }, 15000);
+  }
+
+  ngOnDestroy(): void {
+    if (this.automaticCheck) {
+      clearInterval(this.automaticCheck);
+    }
   }
 
   check() {
     this.timeout = 0;
     this.wait = false;
+    this.checking = true;
     this.forbidden = false;
     this.unavailable = false;
-    this.jukeboxService.check().subscribe((response) => {
-      if (response) {
-        this.currentTrack = response;
-      }
-
-      this.active = true;
-    }, (error) => {
-      this.active = false;
-      if (error.status == 403) {
-        this.forbidden = true;
-      } else if (error.status == 410) {
-        this.unavailable = true;
-      } else if (error.status == 402) {
-        this.wait = true;
-        this.timeout = 60 - error.error;
-
-        this.jukeboxService.current().subscribe((response) => {
+    this.jukeboxService.check().subscribe({
+      next: (response) => {
+        if (response) {
           this.currentTrack = response;
-        });
+        }
+        this.active = true;
+        this.checking = false;
+      },
+      error: (error) => {
+        this.active = false;
+        if (error.status == 403) {
+          this.forbidden = true;
+        } else if (error.status == 410) {
+          this.unavailable = true;
+        } else if (error.status == 402) {
+          this.wait = true;
+          this.timeout = 60 - error.error;
 
-        this.timer = setInterval(() => {
-          this.timeout--;
-          if (this.timeout == 0) {
-            clearInterval(this.timer);
-            this.check();
-          }
-        }, 1000)
+          this.jukeboxService.current().subscribe({
+            next: (response) => {
+              this.currentTrack = response;
+            }
+          });
+
+          this.timer = setInterval(() => {
+            this.timeout--;
+            if (this.timeout == 0) {
+              clearInterval(this.timer);
+              this.check();
+            }
+          }, 1000)
+        }
+        this.checking = false;
       }
     })
   }
 
   search() {
     this.searchDisabled = true;
-    this.jukeboxService.search(this.searchFormControl.value).subscribe((data: any) => {
-      this.searchResult = data.tracks;
+    this.jukeboxService.search(this.searchFormControl.value).subscribe({
+      next: (data: any) => {
+        this.searchResult = data.tracks;
+      }
     })
   }
 
   searchMore() {
     this.searchDisabled = true;
-    this.jukeboxService.searchOffset(this.searchFormControl.value, this.searchResult.offset + this.searchResult.limit).subscribe((data: any) => {
-      this.searchResult.offset = data.tracks.offset;
-      this.searchResult.total = data.tracks.total;
-      for (let track of data.tracks.items) {
-        this.searchResult.items.push(track);
+    this.jukeboxService.searchOffset(this.searchFormControl.value, this.searchResult.offset + this.searchResult.limit).subscribe({
+      next: (data: any) => {
+        this.searchResult.offset = data.tracks.offset;
+        this.searchResult.total = data.tracks.total;
+        for (let track of data.tracks.items) {
+          this.searchResult.items.push(track);
+        }
       }
     })
   }
@@ -117,28 +142,33 @@ export class JukeboxComponent implements OnInit {
       }
     })
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.jukeboxService.queue(track.uri).subscribe(() => {
-          this.active = false;
-          this.wait = true;
-          this.timeout = 60;
-          this.timer = setInterval(() => {
-            this.timeout--;
-            if (this.timeout == 0) {
-              clearInterval(this.timer);
-              this.check();
-            }
-          }, 1000)
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.jukeboxService.queue(track.uri).subscribe({
+            next: () => {
+              this.active = false;
+              this.wait = true;
+              this.timeout = 60;
+              this.timer = setInterval(() => {
+                this.timeout--;
+                if (this.timeout == 0) {
+                  clearInterval(this.timer);
+                  this.check();
+                }
+              }, 1000)
 
-          this.snackBar.open(this.i18n.get("jukebox.addToQueue.success", []), this.i18n.get("close", []), {
-            duration: 3000
-          });
-        }, (error) => {
-          this.snackBar.open(this.i18n.get("jukebox.addToQueue.error", []), this.i18n.get("close", []), {
-            duration: 3000
-          });
-        })
+              this.snackBar.open(this.i18n.get("jukebox.addToQueue.success", []), this.i18n.get("close", []), {
+                duration: 3000
+              });
+            },
+            error: (error) => {
+              this.snackBar.open(this.i18n.get("jukebox.addToQueue.error", []), this.i18n.get("close", []), {
+                duration: 3000
+              });
+            }
+          })
+        }
       }
     });
   }