current track on wait

src/app/pages/jukebox/jukebox.component.html

@@ -59,6 +59,16 @@
     <mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
     <mat-card-subtitle>{{'jukebox.wait' | i18n}}</mat-card-subtitle>
   </mat-card-header>
+  <mat-card-title-group *ngIf="currentTrack">
+    <img *ngIf="getImageUrl(currentTrack)" mat-card-sm-image [src]="getImageUrl(currentTrack)">
+    <mat-card-title><small>{{'jukebox.current' | i18n}}</small></mat-card-title>
+    <mat-card-title>{{currentTrack.name}}</mat-card-title>
+    <mat-card-subtitle>
+      <span *ngFor="let artist of currentTrack.artists; let i = index">
+        {{artist.name}}<span *ngIf="(i+1) < currentTrack.artists.length">, </span>
+      </span>
+    </mat-card-subtitle>
+  </mat-card-title-group>
   <mat-card-content>
     <p *ngIf="timeout">{{'jukebox.timeout' | i18n:timeout}}</p>
   </mat-card-content>

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

@@ -62,6 +62,11 @@ export class JukeboxComponent implements OnInit {
       } else if (error.status == 402) {
         this.wait = true;
         this.timeout = 60 - error.error;
+
+        this.jukeboxService.current().subscribe((response) => {
+          this.currentTrack = response;
+        });
+
         this.timer = setInterval(() => {
           this.timeout--;
           if (this.timeout == 0) {

src/app/services/jukebox.service.ts

@@ -22,6 +22,10 @@ export class JukeboxService {
     searchOffset(query: string, offset: number) {
         return this.http.get(environment.apiUrl + "/jukebox/search?q=" + query + "&offset=" + offset);
     }
+    
+    current() {
+        return this.http.get(environment.apiUrl + "/jukebox/current");
+    }
 
     queue(uri: string) {
         return this.http.post(environment.apiUrl + "/jukebox/queue?uri=" + uri, "");