feat: SNI-6952 add cldPoster to angular video component

Author: pawelphilipczyk-cloudinary

packages/angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, Input, ElementRef, EventEmitter, Output, OnChanges, OnDestroy} from '@angular/core';
-import {CloudinaryVideo} from '@cloudinary/url-gen';
+import {CloudinaryImage, CloudinaryVideo} from '@cloudinary/url-gen';
+
 import {
   cancelCurrentlyRunningPlugins,
   HtmlVideoLayer,
@@ -13,6 +14,7 @@ import {
  * @type {Component}
  * @description The Cloudinary video component.
  * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen
+ * @prop {CloudinaryImage | "auto"} transformation Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced image component plugins lazyload()
  * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay
  * @prop videoEvents Optional video events include play, loadstart, playing, error, ended
@@ -50,6 +52,7 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
   constructor(private el: ElementRef) { }
 
   @Input('cldVid') cldVid: CloudinaryVideo;
+  @Input('cldPoster') cldPoster: CloudinaryImage | 'auto';
   @Input('sources') sources: VideoSources;
   @Input('plugins') plugins: Plugins;
   @Input('poster') poster: string;
@@ -82,7 +85,8 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
       this.cldVid,
       this.sources,
       this.plugins,
-      this.getVideoAttributes()
+      this.getVideoAttributes(),
+      this.cldPoster
       );
 
     // check if video should be muted. We need to take care of this here since Angular has a bug with binding the muted
@@ -102,7 +106,7 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
   ngOnChanges() {
     if (this.htmlVideoLayerInstance) {
       cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);
-      this.htmlVideoLayerInstance.update(this.cldVid, this.sources, this.plugins, this.getVideoAttributes());
+      this.htmlVideoLayerInstance.update(this.cldVid, this.sources, this.plugins, this.getVideoAttributes(), this.cldPoster);
     }
   }
 

packages/angular/projects/cloudinary-library/src/tests/cloudinary-video.component.spec.ts

@@ -1,10 +1,11 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { CloudinaryVideoComponent } from '../lib/cloudinary-video.component';
-import {CloudinaryVideo} from '@cloudinary/url-gen';
+import {CloudinaryImage, CloudinaryVideo} from '@cloudinary/url-gen';
 import { auto, vp9 } from '@cloudinary/url-gen/qualifiers/videoCodec';
 import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
 import {ElementRef} from "@angular/core";
 
+const cloudinaryImage = new CloudinaryImage('sample', { cloudName: 'demo' }, { analytics: false });
 const cloudinaryVideo = new CloudinaryVideo('sample', { cloudName: 'demo'}, { analytics: false });
 
 describe('CloudinaryVideoComponent render', () => {
@@ -90,6 +91,31 @@ describe('CloudinaryVideoComponent render', () => {
       .toEqual( 'video/webm; codecs=avc1.4D401E, mp4a.40.2');
   }));
 
+
+  it('should contain poster when "auto" is passed as cldPoster', fakeAsync(() => {
+    component.cldVid = cloudinaryVideo;
+    component.cldPoster = "auto";
+    const vidElement: HTMLVideoElement = fixture.nativeElement;
+    const video = vidElement.querySelector('video');
+    fixture.detectChanges();
+    tick(0);
+  
+    expect(video.attributes.getNamedItem('poster').value)
+    .toEqual( 'https://res.cloudinary.com/demo/video/upload/q_auto/f_jpg/so_auto/sample');
+  }));
+
+  it('should contain poster when cloudinary image is passed as cldPoster', fakeAsync(() => {
+    component.cldVid = cloudinaryVideo;
+    component.cldPoster = cloudinaryImage;
+    const vidElement: HTMLVideoElement = fixture.nativeElement;
+    const video = vidElement.querySelector('video');
+    fixture.detectChanges();
+    tick(0);
+  
+    expect(video.attributes.getNamedItem('poster').value)
+    .toEqual( 'https://res.cloudinary.com/demo/image/upload/sample');
+  }));
+
   it('should emit playing event', fakeAsync(() => {
     component.cldVid = cloudinaryVideo;
     fixture.detectChanges();