From 61c5a7ba1f348428da3956c00b3fd27e9bfad35a Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 20 Sep 2023 14:13:38 -0700
Subject: [PATCH] feat: video player thumbnail

---
 .../resource-item.component.scss              | 12 ------------
 .../resource-item/resource-item.component.ts  |  2 +-
 .../resource-item/templates/index.ts          |  2 +-
 .../resource-item/{ => templates}/video.ts    | 17 ++++++++++++-----
 .../src/app/data/picsa/videos.ts              |  2 +-
 .../video-player/video-player.component.html  |  1 +
 .../video-player/video-player.component.scss  | 19 ++++++++++++++++---
 .../video-player/video-player.component.ts    |  4 ++++
 8 files changed, 36 insertions(+), 23 deletions(-)
 rename apps/picsa-tools/resources-tool/src/app/components/resource-item/{ => templates}/video.ts (63%)

diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.scss b/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.scss
index b20ad7e70..bd0332929 100644
--- a/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.scss
+++ b/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.scss
@@ -2,18 +2,6 @@
   display: contents;
 }
 
-.language-code {
-  background: var(--color-secondary);
-  padding: 4px;
-  color: white;
-}
-.resource-item-info {
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
 .action-button {
   margin: auto 8px;
 }
diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.ts
index 15a2928a7..4977149af 100644
--- a/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.ts
+++ b/apps/picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.ts
@@ -8,7 +8,7 @@ import { AppItemHandler } from './templates/app';
 import { CollectionItemHandler } from './templates/collection/collection';
 import { FileItemHandler } from './templates/file';
 import { LinkItemHandler } from './templates/link';
-import { VideoItemHandler } from './video';
+import { VideoItemHandler } from './templates/video';
 
 type IResourceClickHandlers = {
   [type in IResourceType]: (resource: any) => void;
diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/index.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/index.ts
index 3d70c61f2..4f43a6a72 100644
--- a/apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/index.ts
+++ b/apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/index.ts
@@ -1,4 +1,4 @@
-export * from '../video';
+export * from './video';
 export * from './app';
 export * from './card/card';
 export * from './collection/collection';
diff --git a/apps/picsa-tools/resources-tool/src/app/components/resource-item/video.ts b/apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/video.ts
similarity index 63%
rename from apps/picsa-tools/resources-tool/src/app/components/resource-item/video.ts
rename to apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/video.ts
index cad6a3fe4..e14141013 100644
--- a/apps/picsa-tools/resources-tool/src/app/components/resource-item/video.ts
+++ b/apps/picsa-tools/resources-tool/src/app/components/resource-item/templates/video.ts
@@ -1,14 +1,21 @@
 import { Component, Input } from '@angular/core';
 
-import { IResourceVideo } from '../../models';
-import { ResourceItemComponent } from './resource-item.component';
-import { FileItemHandler } from './templates/file';
+import { IResourceVideo } from '../../../models';
+import { ResourceItemComponent } from '../resource-item.component';
+import { FileItemHandler } from './file';
 
 @Component({
   selector: 'resource-item-video',
   template: `
-    <div>Video</div>
-    <picsa-video-player [url]="resource.url" #videoPlayer (click)="videoPlayer.playVideo()"></picsa-video-player>
+    <h2>{{ resource.title | translate }}</h2>
+    <picsa-video-player
+      [url]="resource.url"
+      #videoPlayer
+      (click)="videoPlayer.playVideo()"
+      [thumbnail]="resource.image"
+    ></picsa-video-player>
+    <p *ngIf="resource.subtitle">{{ resource.subtitle | translate }}</p>
+    <p *ngIf="resource.description">{{ resource.description | translate }}</p>
   `,
 })
 export class ResourceItemVideoComponent {
diff --git a/apps/picsa-tools/resources-tool/src/app/data/picsa/videos.ts b/apps/picsa-tools/resources-tool/src/app/data/picsa/videos.ts
index 7cc2057b3..1a82a7d3f 100644
--- a/apps/picsa-tools/resources-tool/src/app/data/picsa/videos.ts
+++ b/apps/picsa-tools/resources-tool/src/app/data/picsa/videos.ts
@@ -7,7 +7,7 @@ const videos: Record<string, IResourceVideo> = {
     _modified: '2019-09-25T11:00:01.000Z',
     title: 'RAM Refresher',
     mimetype: 'video/mp4',
-    description: '',
+    description: 'A summary of how to create resource allocation maps (RAMs)',
     subtitle: '',
     filename: 'ram-refresher.mp4',
     type: 'video',
diff --git a/libs/shared/src/features/video-player/video-player.component.html b/libs/shared/src/features/video-player/video-player.component.html
index 449f9572d..a2ecd2680 100644
--- a/libs/shared/src/features/video-player/video-player.component.html
+++ b/libs/shared/src/features/video-player/video-player.component.html
@@ -1,4 +1,5 @@
 <div class="placeholder" [id]="playerId" #playerEl slot="fixed">
+  <div *ngIf="thumbnail" class="thumbnail" [style.background-image]="'url(' + thumbnail + ')'"></div>
   <button *ngIf="showPlayButton" mat-fab color="primary" class="play-button" (click)="playVideo()" [disabled]="!url">
     <mat-icon>play_arrow</mat-icon>
   </button>
diff --git a/libs/shared/src/features/video-player/video-player.component.scss b/libs/shared/src/features/video-player/video-player.component.scss
index 60efb0e42..8c8a3e2fe 100644
--- a/libs/shared/src/features/video-player/video-player.component.scss
+++ b/libs/shared/src/features/video-player/video-player.component.scss
@@ -1,19 +1,32 @@
 @use '@angular/material' as mat;
 
+$playerWidth: 480px;
+
 :host {
   display: contents;
 }
+.placeholder,
+.thumbnail {
+  width: 100%;
+  max-width: $playerWidth;
+  aspect-ratio: 16/9;
+}
 .placeholder {
   position: relative;
-  width: 100%;
-  max-width: 480px;
   margin-bottom: 2rem;
-  aspect-ratio: 16/9;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.25);
 }
+.thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 $icon-size: 3rem;
 .play-button {
   position: absolute;
diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts
index 1b3dbf8b7..efcdb733e 100644
--- a/libs/shared/src/features/video-player/video-player.component.ts
+++ b/libs/shared/src/features/video-player/video-player.component.ts
@@ -29,6 +29,8 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
   @Input() options: Partial<capVideoPlayerOptions> = {};
   /** Url of video to player */
   @Input() url?: string;
+  /** Optional image shown as preview */
+  @Input() thumbnail?: string;
   /** Unique identifier used in case of multiple players*/
   protected playerId = `videoPlayer_${generateID(5)}`;
 
@@ -53,6 +55,8 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
   }
 
   public async playVideo() {
+    // Remove thumbnail from future playback
+    this.thumbnail = undefined;
     // On native initialise before every playback to ensure full screen fragments created
     if (Capacitor.isNativePlatform()) {
       await this.initPlayer();