feat: video player thumbnail

e-picsa · Sep 20, 2023 · 61c5a7b · 61c5a7b
1 parent e50b52c
commit 61c5a7b
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 23 deletions.
diff --git a/.../picsa-tools/resources-tool/src/app/components/resource-item/resource-item.component.scss b/.../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
@@ -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
@@ -1,4 +1,4 @@
-export * from '../video';
+export * from './video';
 export * from './app';
 export * from './card/card';
 export * from './collection/collection';

diff --git a/...src/app/components/resource-item/video.ts → ...mponents/resource-item/templates/video.ts b/...src/app/components/resource-item/video.ts → ...mponents/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
@@ -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
@@ -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
@@ -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
@@ -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();