Add list to media-queue (#68)

src/app/queue/queue.css

@@ -0,0 +1,3 @@
+.queue-artwork {
+    border-radius: 0 !important;
+}

src/app/queue/queue.html

@@ -1,7 +1,16 @@
 <div class="page">
-
+  <div class="media-list">
-    <button (click)="this.optionsService.values.showMediaPlayer = true">Open player</button>
+    <mat-list>
+      <mat-list-item *ngFor="let item of media.media; let i = index">
+        <img matListItemAvatar class="queue-artwork" [src]="utilities.sanitizeImageUrl(item.artwork)"/>
+        <span matListItemTitle>{{i+1}}.{{item.title}}</span>
+        <span matListItemLine>{{item.artist}}</span>
+        <span matListItemMeta class="delete-button">
+          <button (click)="remove(item)" mat-icon-button matTooltip="Remove from queue" color="grey">
+            <mat-icon>clear</mat-icon>
+          </button>
+        </span>
+      </mat-list-item>
+    </mat-list>
+  </div>
 </div>
-
-
-

src/app/queue/queue.ts

@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
 import { ApplicationState } from '../services/applicationstate';
+import { MediaItem } from '../services/interfaces';
+import { MediaService } from '../services/media';
 import { OptionsService } from '../services/options';
+import { Utilities } from '../services/utilities';
 
 @Component({
   selector: 'app-queue',
@@ -8,10 +11,14 @@ import { OptionsService } from '../services/options';
   styleUrls: ['./queue.css'],
 })
 export class QueueComponent {
-  constructor(private appState: ApplicationState, public optionsService: OptionsService) {}
+  constructor(private appState: ApplicationState, public optionsService: OptionsService, public media: MediaService, public utilities: Utilities) {}
 
   ngOnInit() {
     this.appState.updateTitle('Media Queue');
 
   }
+
+  remove(item: MediaItem) {
+    this.media.dequeue (item);
+  }
 }

src/app/services/media.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { findIndex } from 'rxjs';
 import { MediaItem } from './interfaces';
 import { OptionsService } from './options';
 
@@ -95,6 +96,14 @@ export class MediaService {
     // });
   }
 
+  dequeue (file : MediaItem) {
+    const index = this.media.findIndex((e)=>e=== file);
+    if (index === -1){
+      return
+    }
+    this.media.splice(index, 1)
+  }
+
   async start() {
     if (this.index === -1) {
       this.index = 0;