jukebox

src/app/app-routing.module.ts

@@ -37,7 +37,7 @@ import { JukeboxComponent } from './pages/jukebox/jukebox.compontent';
 const routes: Routes = [
   { path: 'profile/:username', component: UserComponent, canActivate: [ AuthUpdateGuard ] },
   { path: 'edit-profile', component: ProfileComponent, canActivate: [ AuthenticatedGuard ] },
-  { path: 'partey/jukebox', component: JukeboxComponent, canActivate: [ AuthenticatedGuard ] },
+  { path: 'jukebox', component: JukeboxComponent, canActivate: [ AuthenticatedGuard ] },
   { path: 'partey/manage', component: ParteyComponent, canActivate: [ AuthenticatedGuard ] },
   {
     path: '', component: MainComponent, children: [
@@ -73,6 +73,7 @@ const routes: Routes = [
       { path: 'jitsi', component: JitsiComponent, canActivate: [ AuthenticatedGuard ] },
       { path: 'partey', component: ParteyComponent, canActivate: [ AuthenticatedGuard ] },
       { path: 'partey/timeslots', component: ParteyTimeslotsComponent, canActivate: [ AuthenticatedGuard ] },
+      { path: 'partey/jukebox', component: JukeboxComponent, canActivate: [ AuthenticatedGuard ] },
       { path: 'minetest/accounts', component: MinetestAccountsComponent, canActivate: [ AuthenticatedGuard ] },
       { path: 'dividertest', component: DividertestComponent },
       { path: 'urlshortener', component: UrlShortenerComponent, canActivate: [ AuthenticatedGuard ] },

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

@@ -4,7 +4,19 @@
       <mat-card-header>
         <mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
       </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>
+        <mat-divider></mat-divider>
+        <br />
         <mat-form-field>
           <input matInput [formControl]="searchFormControl" placeholder="{{'jukebox.search' | i18n}}">
         </mat-form-field>
@@ -21,7 +33,7 @@
   <p *ngIf="timeout">{{'jukebox.timeout' | i18n:timeout}}</p>
 
   <div *ngIf="searchResult && searchResult.items">
-    <mat-card class="track" *ngFor="let track of searchResult.items" (click)="queue(track)">
+    <mat-card class="track" *ngFor="let track of searchResult.items; let i = index" (click)="queue(track)">
       <mat-card-title-group>
         <img *ngIf="getImageUrl(track)" mat-card-sm-image [src]="getImageUrl(track)">
         <mat-card-title>{{track.name}}</mat-card-title>
@@ -32,10 +44,14 @@
         </mat-card-subtitle>
       </mat-card-title-group>
     </mat-card>
+
+    <mat-card *ngIf="searchResult && ((searchResult.offset + searchResult.limit) < searchResult.total)">
+      <mat-card-actions>
+        <button mat-button (click)="searchMore()"> {{'jukebox.search.more' | i18n}}</button>
+      </mat-card-actions>
+    </mat-card>
   </div>
 
-  <button *ngIf="searchResult && ((searchResult.offset + searchResult.limit) < searchResult.total)" mat-button
-    (click)="searchMore()"> {{'jukebox.search.more' | i18n}}</button>
 </div>
 
 <mat-card class="accent" *ngIf="wait">
@@ -72,4 +88,4 @@
   </mat-card-content>
   <mat-card-actions>
   </mat-card-actions>
-</mat-card>
+</mat-card>

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

@@ -20,6 +20,7 @@ export class JukeboxComponent implements OnInit {
   timeout: number = 0;
   timer;
   searchResult: any;
+  currentTrack: any;
   active: boolean = false;
   wait: boolean = false;
   forbidden: boolean = false;
@@ -47,6 +48,10 @@ export class JukeboxComponent implements OnInit {
     this.forbidden = false;
     this.unavailable = false;
     this.jukeboxService.check().subscribe((response) => {
+      if (response) {
+        this.currentTrack = response;
+      }
+
       this.active = true;
     }, (error) => {
       this.active = false;