Library - Songs, shuffle function

src/app/components/library/library-songs/library-songs.component.html

@@ -1,3 +1,20 @@
+<div class="library-bg">
+ <span class="library-title">Library</span>
+ <button
+ aria-label="Play playlist"
+ class="library-button" mat-raised-button
+ (click)="playSong()"
+ >
+ Play
+ </button>
+ <button
+ aria-label="Shuffle playlist"
+ class="library-button" mat-raised-button
+ (click)="playSong(0, true)"
+ >
+ Shuffle
+ </button>
+ </div>
 <div class="outer-container" *ngIf="!isLoading">
  <cdk-virtual-scroll-viewport itemSize="60">
  <app-song

src/app/components/library/library-songs/library-songs.component.scss

@@ -41,4 +41,25 @@
  position: absolute;
  top: calc( 50% - 50px );
  left: calc( 50% - 50px );
+}
+
+.library-bg{
+ background: rgba(255, 255, 255, 0.04);
+ margin-top: 10px;
+ height: 150px;
+
+}
+
+.library-button {
+ width: 100px;
+ margin-right: 10px;
+ opacity: 1.0;
+}
+
+.library-title {
+ font-weight: 500;
+ font-size: 38px;
+ padding-top: 15px;
+ padding-bottom: 70px;
+ display:block;
 }

src/app/components/library/library-songs/library-songs.component.ts

@@ -39,7 +39,14 @@ export class LibrarySongsComponent implements OnInit, OnDestroy {
  );
  }
 
- playSong( trackIndex: number ): void {
- this.playerService.setQueueFromItems( this.librarySongs, trackIndex ).subscribe();
+ playSong( trackIndex: number = 0, shuffle: boolean = false): void {
+ if (shuffle) {
+ this.playerService.toggleShuffleOn();
+ }
+ this.playerService.setQueueFromItems( this.librarySongs, trackIndex ).subscribe(() => {
+ if ( shuffle ) {
+ this.playerService.toggleShuffleOff();
+ }
+ });
  }
 }