listen to music in admin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vgmq",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/core/http/admin-game-http.service.ts

@@ -87,4 +87,9 @@ export class AdminGameHttpService {
         catchError((httpErrorResponse: HttpErrorResponse): Observable<never> => throwError(httpErrorResponse.error))
       )
   }
+  listen(id: number): Observable<Blob> {
+    return this.http.get(`${this.apiEndpoint}/admin/game-to-music/${id}`, {
+      responseType: 'blob',
+    })
+  }
 }

src/app/modules/admin/modules/games/components/game-show/components/music-row/music-row.component.html

@@ -26,8 +26,13 @@
     </div>
   </ng-container>
   <ng-template #musicRowButtons>
+    <button *ngIf="!src" class="btn btn-sm btn-primary" (click)="listen()">
+      listen
+      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" *ngIf="listenLoading"></span>
+    </button>
+    <audio *ngIf="src" [src]="src" controls></audio>
     <ng-container *ngIf="!edit; else editMusicButtons">
-      <button class="btn btn-sm btn-primary" (click)="createFormGroup()">edit</button>
+      <button class="btn btn-sm btn-info" (click)="createFormGroup()">edit</button>
       <button class="btn btn-sm btn-danger" (click)="delete()">delete</button>
     </ng-container>
     <ng-template #editMusicButtons>

src/app/modules/admin/modules/games/components/game-show/components/music-row/music-row.component.ts

@@ -5,6 +5,7 @@ import { finalize } from 'rxjs/operators'
 import { DateTime } from 'luxon'
 import { ApiErrorInterface } from '../../../../../../../../shared/models/api-error.interface'
 import { AdminGameHttpService } from '../../../../../../../../core/http/admin-game-http.service'
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser'
 
 @Component({
   selector: '[musicRow]',
@@ -18,8 +19,10 @@ export class MusicRowComponent implements OnInit {
   loading = false
   duration?: Date
   formErrorMessage?: string
+  src?: SafeUrl
+  listenLoading = false
 
-  constructor(private gameHttpService: AdminGameHttpService) {}
+  constructor(private gameHttpService: AdminGameHttpService, private dom: DomSanitizer) {}
 
   ngOnInit(): void {
     this.duration = DateTime.fromSeconds(this.gameMusic.music.duration).toJSDate()
@@ -51,12 +54,12 @@ export class MusicRowComponent implements OnInit {
     this.gameHttpService
       .saveMusic(this.gameMusic.music, this.formGroup.value)
       .pipe(finalize(() => (this.loading = false)))
-      .subscribe(
-        (res) => {
+      .subscribe({
+        next: (res) => {
           this.gameMusic.music = res
           this.edit = false
         },
-        (error: ApiErrorInterface) => {
+        error: (error: ApiErrorInterface) => {
           if (Array.isArray(error.message)) {
             error.message.map((err) => {
               const formControl = this.formGroup.get(err.property)
@@ -68,8 +71,8 @@ export class MusicRowComponent implements OnInit {
           } else {
             this.formErrorMessage = error.message
           }
-        }
-      )
+        },
+      })
   }
 
   delete(): void {
@@ -81,4 +84,19 @@ export class MusicRowComponent implements OnInit {
         this.remove.emit()
       })
   }
+
+  listen(): void {
+    this.listenLoading = true
+    this.gameHttpService.listen(this.gameMusic.id).subscribe((res) => {
+      const reader = new FileReader()
+      reader.onload = (e): void => {
+        this.listenLoading = false
+        const srcUrl = e.target.result
+        if (typeof srcUrl === 'string') {
+          this.src = this.dom.bypassSecurityTrustUrl(srcUrl)
+        }
+      }
+      reader.readAsDataURL(res)
+    })
+  }
 }

src/app/modules/admin/modules/games/components/game-show/game-show.component.html

@@ -37,7 +37,7 @@ <h1>{{ game.name }}</h1>
       ></span>
       <span class="text-danger" *ngIf="toggleErrorMessage">{{ toggleErrorMessage }}</span>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-8">
       <h2>Musics</h2>
       <div [formGroup]="musicUploadForm" class="form-group">
         <label for="exampleFormControlFile1">add musics</label>
@@ -82,7 +82,7 @@ <h2>Musics</h2>
         </tbody>
       </table>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <table class="table table-dark table-striped">
         <thead class="thead-dark">
           <tr>