WIP: Implemented game download functionality

frontend/src/app/components/game-detail-view/game-detail-view.component.html

@@ -1,26 +1,32 @@
 <div fxLayout="row" fxLayoutAlign="center" style="margin-top: 16px;">
   <div fxLayout="column" fxFlex="0 1 70" fxLayoutGap="16px" fxFlex.lt-xl="95">
-    <div fxLayout="row" fxLayoutGap="16px" style="background: aqua">
+    <div fxLayout="row" fxLayoutGap="16px">
       <img src="v1/images/{{game.coverId}}" alt="Game cover">
-      <div fxFlex="30" fxLayout="column" id="game-details" style="background: darkolivegreen">
+      <div fxFlex="30" fxLayout="column" id="game-details">
         <h2>{{game.title}}</h2>
         <p id="game-summary">{{game.summary}}</p>
       </div>
-      <div fxLayout="column" fxFlex style="background: coral">
-
+      <div fxLayout="column" fxFlex>
+        <button mat-raised-button (click)="downloadGame()">
+          Download
+        </button>
       </div>
     </div>
     <div fxLayout="column" fxLayoutGap="16px">
-      <h2>Screenshots</h2>
-      <div fxLayout="row wrap" fxLayoutGap="8px">
-        <div *ngFor="let screenshotId of game.screenshotIds">
-          <game-screenshot [screenshotId]="screenshotId"></game-screenshot>
+      <div *ngIf="game.screenshotIds !== undefined && game.screenshotIds.length > 0">
+        <h2>Screenshots</h2>
+        <div fxLayout="row wrap" fxLayoutGap="8px">
+          <div *ngFor="let screenshotId of game.screenshotIds">
+            <game-screenshot [screenshotId]="screenshotId"></game-screenshot>
+          </div>
         </div>
       </div>
-      <h2>Videos</h2>
-      <div fxLayout="row wrap" fxLayoutGap="8px">
-        <div *ngFor="let videoId of game.videoIds">
-          <game-video [videoId]="videoId" [width]="555" [height]="312"></game-video>
+      <div *ngIf="game.videoIds !== undefined && game.videoIds.length > 0">
+        <h2>Videos</h2>
+        <div fxLayout="row wrap" fxLayoutGap="8px">
+          <div *ngFor="let videoId of game.videoIds">
+            <game-video [videoId]="videoId" [width]="555" [height]="312"></game-video>
+          </div>
         </div>
       </div>
     </div>

frontend/src/app/components/game-detail-view/game-detail-view.component.ts

@@ -3,6 +3,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
 import {GamesService} from "../../services/games.service";
 import {HttpErrorResponse} from "@angular/common/http";
+import {takeWhile} from "rxjs";
 
 @Component({
   selector: 'app-game-detail-view',
@@ -33,4 +34,8 @@ export class GameDetailViewComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  downloadGame(): void {
+    this.gamesService.downloadGame(this.game.slug);
+  }
+
 }

frontend/src/app/components/header/header.component.ts

@@ -18,8 +18,8 @@ export class HeaderComponent {
 
   reloadLibrary(): void {
     this.libraryService.scanLibrary().pipe(timeInterval()).subscribe({
-      next: value => this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval / 1000)} seconds.`),
-      error: error => this.snackBar.open(`Error while scanning library: ${error}`)
+      next: value => this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval / 1000)} seconds.`, undefined, {duration: 2000}),
+      error: error => this.snackBar.open(`Error while scanning library: ${error}`, undefined, {duration: 5000})
     })
   }
 

frontend/src/app/services/games.service.ts

@@ -23,6 +23,10 @@ export class GamesService implements GamesApi {
     return this.http.get<DetectedGameDto>(`${this.apiPath}/game/${slug}`);
   }
 
+  downloadGame(slug: String): void {
+    window.open(`v1/${this.apiPath}/game/${slug}/download`, '_top');
+  }
+
   getGameOverviews(): Observable<GameOverviewDto[]> {
     return this.http.get<GameOverviewDto[]>(`${this.apiPath}/game-overviews`);
   }