download turns/endgame video

angular.json

@@ -60,8 +60,7 @@
               "outputHashing": "all",
               "optimization": true
             },
-            "development": {
-            }
+            "development": {}
           },
           "defaultConfiguration": "development"
         },
@@ -97,6 +96,7 @@
             "scripts": [],
             "styles": [
               "src/styles/app.scss",
+              "node_modules/@videogular/ngx-videogular/fonts/videogular.css",
               "node_modules/dragula/dist/dragula.css"
             ],
             "assets": [
@@ -213,4 +213,4 @@
     ],
     "analytics": false
   }
-}
+}

package.json

@@ -28,6 +28,7 @@
     "@angular/router": "^15.0.4",
     "@angular/service-worker": "^15.0.4",
     "@nguniversal/express-engine": "^15.0.0",
+    "@videogular/ngx-videogular": "^8.0.0",
     "angulartics2": "^12.2.0",
     "bootstrap-sass": "^3.4.3",
     "core-js": "^3.27.0",
@@ -45,7 +46,7 @@
     "ngx-clipboard": "^15.1.0",
     "ngx-markdown": "^15.0.0",
     "pako": "^2.1.0",
-    "pydt-shared": "^1.8.4",
+    "pydt-shared": "^1.8.5-beta4",
     "remove-markdown": "^0.5.0",
     "rollbar": "^2.26.0",
     "rxjs": "^7.8.0",

src/app/app.module.ts

@@ -23,6 +23,10 @@ import {
   BusyService,
   MetadataCacheService,
 } from "pydt-shared";
+import { VgCoreModule } from "@videogular/ngx-videogular/core";
+import { VgControlsModule } from "@videogular/ngx-videogular/controls";
+import { VgOverlayPlayModule } from "@videogular/ngx-videogular/overlay-play";
+import { VgBufferingModule } from "@videogular/ngx-videogular/buffering";
 import { Ng2TableModule } from "../ng2-table/ng-table-module";
 import * as envVars from "../envVars";
 import { AppComponent } from "./app.component";
@@ -103,6 +107,10 @@ export const profileCacheFactory = (userService: UserService): ProfileCacheServi
     Ng2TableModule,
     routing,
     Angulartics2Module.forRoot(),
+    VgCoreModule,
+    VgControlsModule,
+    VgOverlayPlayModule,
+    VgBufferingModule,
     // https://github.com/angular/angular/issues/47455
     ServiceWorkerModule.register("pydt-service-worker.js", { enabled: environment.production }),
   ],

src/app/game/detail/stats/stats.component.html

@@ -13,3 +13,12 @@
     ></ng-table>
   </div>
 </div>
+<div *ngIf="game.gameVideoUrl" class="row">
+  <div class="col-md-12">
+    <vg-player>
+      <video [vgMedia]="media" #media id="replay" preload="auto" controls>
+          <source [src]="game.gameVideoUrl" type="video/webm">
+      </video>
+  </vg-player>
+  </div>
+</div>

src/app/game/detail/turns/turns.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, HostListener, Input, OnInit } from "@angular/core";
 import * as moment from "moment";
 import {
   Game,
@@ -13,6 +13,7 @@ import {
 import { Utility } from "../../../shared/utility";
 import { Parser } from "json2csv";
 import * as FileSaver from "file-saver";
+import { AuthService } from "../../../shared";
 
 export interface TableColumn {
   title: string;
@@ -48,6 +49,7 @@ export class GameDetailTurnsComponent implements OnInit {
     private profileCache: ProfileCacheService,
     private gameService: GameService,
     private metadataCache: MetadataCacheService,
+    private auth: AuthService,
   ) {}
 
   get civGame(): CivGame {
@@ -112,7 +114,39 @@ export class GameDetailTurnsComponent implements OnInit {
     FileSaver.saveAs(blob, `${this.game.displayName}.csv`);
   }
 
+  @HostListener("window:DownloadTurn", ["$event.detail"])
+  public async downloadTurn(turn: number): Promise<void> {
+    const resp = await this.gameService.getTurnById(this.game.gameId, turn).toPromise();
+
+    window.location.href = resp.downloadUrl;
+  }
+
   private createTableData(turns: GameTurn[], textOnly: boolean): unknown[] {
+    const canDownload = (turn: GameTurn) => {
+      if (!this.auth.getToken()) {
+        // Unauthenticated users can't download
+        return false;
+      }
+
+      // Only go back 20 turns since that's all PYDT keeps
+      if (turn.turn < (this.game.gameTurnRangeKey || 0) - 20) {
+        return false;
+      }
+
+      // Allow download if it's the end user's turn or if the game is finalized
+      return this.game.finalized || turn.playerSteamId === this.auth.getSteamProfile().steamid;
+    };
+
+    if (turns.some(x => canDownload(x)) && !this.tableColumns.some(x => x.name === "download")) {
+      this.tableColumns = [
+        ...this.tableColumns,
+        {
+          title: "Download",
+          name: "download",
+        },
+      ];
+    }
+
     return turns.map(turn => {
       let timeTaken = "";
 
@@ -130,6 +164,9 @@ export class GameDetailTurnsComponent implements OnInit {
         endDate: turn.endDate ? moment(turn.endDate).format("LLL") : "In Progress...",
         timeTaken: timeTaken.toString(),
         skipped: turn.skipped ? "Skipped!" : "",
+        download: canDownload(turn)
+          ? `<a href='#' *ngIf="false" onClick="window.dispatchEvent(new CustomEvent('DownloadTurn', { detail: ${turn.turn} }));return false;">Download</a>`
+          : "",
       };
     });
   }