add jukebox

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

@@ -0,0 +1,136 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+import { FormControl } from '@angular/forms';
+
+import { ConfirmDialog } from '../../ui/confirm/confirm.component';
+import { JukeboxService } from 'src/app/services/jukebox.service';
+import { I18nService } from '../../services/i18n.service';
+import { Data } from '@angular/router';
+
+@Component({
+  selector: 'app-jukebox',
+  templateUrl: './jukebox.component.html',
+  styleUrls: [ './jukebox.component.scss' ]
+})
+export class JukeboxComponent implements OnInit {
+
+  timeout: number = 0;
+  timer;
+  searchResult: any;
+  active: boolean = false;
+  wait: boolean = false;
+  forbidden: boolean = false;
+  unavailable: boolean = false;
+  searchDisabled = true;
+  searchFormControl = new FormControl();
+
+  constructor(
+    public dialog: MatDialog,
+    private snackBar: MatSnackBar,
+    private i18n: I18nService,
+    private jukeboxService: JukeboxService) { }
+
+  ngOnInit(): void {
+    this.check();
+
+    this.searchFormControl.valueChanges.subscribe(value => {
+      this.searchDisabled = false;
+    })
+  }
+
+  check() {
+    this.timeout = 0;
+    this.wait = false;
+    this.forbidden = false;
+    this.unavailable = false;
+    this.jukeboxService.check().subscribe((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.timer = setInterval(() => {
+          this.timeout--;
+          if (this.timeout == 0) {
+            clearInterval(this.timer);
+            this.check();
+          }
+        }, 1000)
+      }
+    })
+  }
+
+  search() {
+    this.searchDisabled = true;
+    this.jukeboxService.search(this.searchFormControl.value).subscribe((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);
+      }
+    })
+  }
+
+  getImageUrl(track: any) {
+    let url = "";
+    let width;
+    if (track.album && track.album.images) {
+      for (let image of track.album.images) {
+        if (!width || width > image.width) {
+          url = image.url;
+        }
+      }
+    }
+    return url;
+  }
+
+  queue(track: any) {
+    const dialogRef = this.dialog.open(ConfirmDialog, {
+      data: {
+        'label': 'jukebox.addToQueue.confirm',
+        'args': [ track.artists[ 0 ].name, track.name ]
+      }
+    })
+
+    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)
+
+          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
+          });
+        })
+      }
+    });
+  }
+
+}