Merge pull request #195 from cloudinary/SNI-6952-react-video-cld-poster

pawelphilipczyk-cloudinary · web-flow · commit 522058a146da · 2023-01-17T09:10:24.000+01:00
Sni 6952 add video cld poster
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -33,7 +33,7 @@
     "@angular/cli": "~10.2.3",
     "@angular/compiler-cli": "~10.2.4",
     "@cloudinary/html": "^1.8.1",
-    "@cloudinary/url-gen": "^1.8.6",
+    "@cloudinary/url-gen": "^1.8.7",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
diff --git a/packages/angular/playground/package.json b/packages/angular/playground/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "~10.2.4",
     "@angular/platform-browser-dynamic": "~10.2.4",
     "@angular/router": "~10.2.4",
-    "@cloudinary/url-gen": "~1.8.7",
+    "@cloudinary/url-gen": "^1.8.7",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
diff --git a/packages/angular/projects/cloudinary-library/package.json b/packages/angular/projects/cloudinary-library/package.json
@@ -7,7 +7,7 @@
     "@angular/core": ">=10.0.0"
   },
   "devDependencies": {
-    "@cloudinary/url-gen": "^1.8.6"
+    "@cloudinary/url-gen": "^1.8.7"
   },
   "dependencies": {
     "@cloudinary/html": "^1.8.1"
diff --git a/packages/angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts b/packages/angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts
@@ -1,9 +1,11 @@
 import {Component, OnInit, Input, ElementRef, EventEmitter, Output, OnChanges, OnDestroy} from '@angular/core';
 import {CloudinaryVideo} from '@cloudinary/url-gen';
+
 import {
   cancelCurrentlyRunningPlugins,
   HtmlVideoLayer,
   Plugins,
+  VideoPoster,
   VideoSources
 } from '@cloudinary/html';
 
@@ -13,6 +15,7 @@ import {
  * @type {Component}
  * @description The Cloudinary video component.
  * @prop {CloudinaryVideo} transformation Generated by @cloudinary/url-gen
+ * @prop {VideoPoster} 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 +53,7 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
   constructor(private el: ElementRef) { }
 
   @Input('cldVid') cldVid: CloudinaryVideo;
+  @Input('cldPoster') cldPoster: VideoPoster;
   @Input('sources') sources: VideoSources;
   @Input('plugins') plugins: Plugins;
   @Input('poster') poster: string;
@@ -82,7 +86,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 +107,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);
     }
   }
 
diff --git a/packages/angular/projects/cloudinary-library/src/tests/cloudinary-video.component.spec.ts b/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', () => {
@@ -73,7 +74,6 @@ describe('CloudinaryVideoComponent render', () => {
     tick(0);
     const vidElement: HTMLVideoElement = fixture.nativeElement;
     const video = vidElement.querySelector('video');
-    const defaultVideoTypes = ['webm', 'mp4', 'ogv'];
 
     expect(video.childElementCount).toBe(2);
 
@@ -90,6 +90,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 = new CloudinaryVideo('sample', { cloudName: 'demo'}, { analytics: false });
+    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();
diff --git a/packages/html/package.json b/packages/html/package.json
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-typescript": "^7.14.5",
-    "@cloudinary/url-gen": "^1.8.6",
+    "@cloudinary/url-gen": "^1.8.7",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "core-js": "^3.23.5",
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
@@ -9,5 +9,5 @@ export {accessibility} from './plugins/accessibility.js';
 export {placeholder} from './plugins/placeholder.js';
 export {isBrowser} from './utils/isBrowser.js';
 export {serverSideSrc} from './utils/serverSideSrc.js';
-export {Plugins, VideoSources, PictureSources} from './types.js';
+export {Plugins, VideoSources, VideoPoster, PictureSources} from './types.js';
 export {cancelCurrentlyRunningPlugins} from './utils/cancelCurrentlyRunningPlugins.js';
diff --git a/packages/html/src/layers/htmlVideoLayer.ts b/packages/html/src/layers/htmlVideoLayer.ts
@@ -1,4 +1,4 @@
-import {Plugins, HtmlPluginState, VideoSources, VideoType} from '../types.js'
+import {Plugins, HtmlPluginState, VideoSources, VideoType, VideoPoster} from '../types.js'
 import cloneDeep from 'lodash.clonedeep'
 import {CloudinaryVideo} from "@cloudinary/url-gen";
 import {render} from '../utils/render.js';
@@ -13,7 +13,7 @@ export class HtmlVideoLayer{
     mimeType = 'video';
     mimeSubTypes = VIDEO_MIME_TYPES;
 
-    constructor(element: HTMLVideoElement | null, userCloudinaryVideo: CloudinaryVideo, sources: VideoSources,  plugins?: Plugins, videoAttributes?: object){
+    constructor(element: HTMLVideoElement | null, userCloudinaryVideo: CloudinaryVideo, sources: VideoSources,  plugins?: Plugins, videoAttributes?: object, userCloudinaryPoster?: VideoPoster){
         this.videoElement = element;
         this.originalVideo = userCloudinaryVideo;
         this.htmlPluginState = {cleanupCallbacks:[], pluginEventSubscription: []};
@@ -23,7 +23,7 @@ export class HtmlVideoLayer{
             .then(()=>{ // when resolved updates sources
                 this.htmlPluginState.pluginEventSubscription.forEach(fn=>{fn()});
 
-                this.setVideoAttributes(videoAttributes);
+                this.setVideoAttributes(videoAttributes, userCloudinaryPoster);
                 this.handleSourceToVideo(pluginCloudinaryVideo, sources)
             });
 
@@ -104,14 +104,22 @@ export class HtmlVideoLayer{
      * In case of poster, sets the poster.
      * @param videoAttributes {object} Supported attributes: controls, loop, muted, poster, preload, autoplay, playsinline
      */
-    setVideoAttributes(videoAttributes: object) {
-        if (videoAttributes) {
-          for (const [key, value] of Object.entries(videoAttributes)) {
-            // Boolean attributes are considered to be true if they're present on the element at all.
-            // You should set value to the empty string ("") or the attribute's name.
-            // See https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
-            value && this.videoElement.setAttribute(key, key === 'poster' ? value : '');
-          }
+    setVideoAttributes(videoAttributes: object = {}, userCloudinaryPoster?: VideoPoster) {
+        if (userCloudinaryPoster === 'auto') {
+          const posterCloudinaryVideo = cloneDeep(this.originalVideo);
+          videoAttributes['poster'] = posterCloudinaryVideo
+           .quality('auto')
+           .format('jpg')
+           .addTransformation('so_auto')
+           .toURL()
+        } else if (userCloudinaryPoster) {
+            videoAttributes['poster'] = userCloudinaryPoster.toURL?.();
+        }
+        for (const [key, value] of Object.entries(videoAttributes)) {
+          // Boolean attributes are considered to be true if they're present on the element at all.
+          // You should set value to the empty string ("") or the attribute's name.
+          // See https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
+          value && this.videoElement.setAttribute(key, key === 'poster' ? value : '');
         }
     }
 
@@ -122,14 +130,14 @@ export class HtmlVideoLayer{
      * @param plugins
      * @param videoAttributes
      */
-    update(updatedCloudinaryVideo: CloudinaryVideo, sources: VideoSources,  plugins?: Plugins, videoAttributes?: object){
+    update(updatedCloudinaryVideo: CloudinaryVideo, sources: VideoSources,  plugins?: Plugins, videoAttributes?: object, userCloudinaryPoster?: VideoPoster){
         if(updatedCloudinaryVideo !== this.originalVideo){
             const sourcesToDelete = this.videoElement.getElementsByTagName("SOURCE");
             while (sourcesToDelete[0]) sourcesToDelete[0].parentNode.removeChild(sourcesToDelete[0]);
 
             render(this.videoElement, updatedCloudinaryVideo, plugins, this.htmlPluginState)
                 .then(()=>{ // when resolved updates sources
-                    this.setVideoAttributes(videoAttributes);
+                    this.setVideoAttributes(videoAttributes, userCloudinaryPoster);
                     this.handleSourceToVideo(updatedCloudinaryVideo, sources);
                     this.videoElement.load();
                 });
diff --git a/packages/html/src/types.ts b/packages/html/src/types.ts
@@ -20,3 +20,5 @@ export type PictureSources = {minWidth?: number, maxWidth?: number, image: Cloud
 export type PictureSource  = {minWidth?: number, maxWidth?: number, image: CloudinaryImage, sizes?: string};
 
 export type AnalyticsOptions = {sdkSemver: string, techVersion: string, sdkCode: string};
+
+export type VideoPoster = CloudinaryImage | 'auto';
diff --git a/packages/react/__tests__/AdvancedVideo.test.tsx b/packages/react/__tests__/AdvancedVideo.test.tsx
@@ -1,10 +1,11 @@
 import { AdvancedVideo } from '../src';
-import { CloudinaryVideo } from '@cloudinary/url-gen';
+import { CloudinaryImage, CloudinaryVideo } from '@cloudinary/url-gen';
 import { mount } from 'enzyme';
 import React from 'react';
 import { auto, vp9 } from '@cloudinary/url-gen/qualifiers/videoCodec';
 import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
 
+const cloudinaryImage = new CloudinaryImage('sample', { cloudName: 'demo' }, { analytics: false });
 const cloudinaryVideo = new CloudinaryVideo('sample', { cloudName: 'demo' }, { analytics: false });
 const cloudinaryVideoWithAnalytics = new CloudinaryVideo('sample', { cloudName: 'demo' }, { analytics: true });
 
@@ -80,6 +81,24 @@ describe('AdvancedVideo', () => {
     }, 0);// one tick
   });
 
+  it('should contain poster when "auto" is passed as cldPoster', function (done) {
+    const component = mount(<AdvancedVideo cldVid={cloudinaryVideo} cldPoster="auto" />);
+
+    setTimeout(() => {
+      expect(component.html()).toContain('poster="https://res.cloudinary.com/demo/video/upload/q_auto/f_jpg/so_auto/sample"');
+      done();
+    }, 0);// one tick
+  });
+
+  it('should contain poster when cloudinary image is passed as cldPoster', function (done) {
+    const component = mount(<AdvancedVideo cldVid={cloudinaryVideo} cldPoster={cloudinaryImage} />);
+
+    setTimeout(() => {
+      expect(component.html()).toContain('poster="https://res.cloudinary.com/demo/image/upload/sample"');
+      done();
+    }, 0);// one tick
+  });
+
   it('should simulate onPlay event', function (done) {
     const mockCallBack = jest.fn();
 
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -24,7 +24,7 @@
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@cloudinary/html": "^1.0.1",
-    "@cloudinary/url-gen": "^1.8.6",
+    "@cloudinary/url-gen": "^1.8.7",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
diff --git a/packages/react/playground/src/App.tsx b/packages/react/playground/src/App.tsx
@@ -2,20 +2,31 @@ import React from 'react'
 import './App.css'
 import {
   AdvancedImage,
+  AdvancedVideo,
   accessibility,
   responsive,
   lazyload,
   placeholder
 } from '@cloudinary/react/src'
 import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage'
+import { CloudinaryVideo } from '@cloudinary/url-gen/assets/CloudinaryVideo'
 
 // This is our playground and can be used to test library
 function App() {
   const img = new CloudinaryImage('sample', { cloudName: 'demo' })
 
+  const cldVid = new CloudinaryVideo(
+    'docs/walking_talking',
+    { cloudName: 'demo' },
+    { analytics: false }
+  )
+
   return (
     <div>
+      <h1>AdvancedImage</h1>
       <AdvancedImage cldImg={img} plugins={[responsive({ steps: 100 })]} />
+      <h1>AdvancedVideo</h1>
+      <AdvancedVideo cldVid={cldVid} controls loop width={600} />
     </div>
   )
 }
diff --git a/packages/react/src/AdvancedVideo.tsx b/packages/react/src/AdvancedVideo.tsx
@@ -1,9 +1,10 @@
 import React, { Component, createRef, EventHandler, HTMLAttributes, MutableRefObject, SyntheticEvent } from 'react';
-import { CloudinaryVideo } from '@cloudinary/url-gen';
+import { CloudinaryImage, CloudinaryVideo } from '@cloudinary/url-gen';
 
 import {
   HtmlVideoLayer,
   Plugins,
+  VideoPoster,
   VideoSources,
   cancelCurrentlyRunningPlugins
 } from '@cloudinary/html';
@@ -12,6 +13,7 @@ type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
 
 interface VideoProps extends HTMLAttributes<HTMLVideoElement>{
   cldVid: CloudinaryVideo,
+  cldPoster?: VideoPoster,
   plugins?: Plugins,
   sources?: VideoSources,
   innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null
@@ -84,7 +86,8 @@ class AdvancedVideo extends Component <VideoProps> {
       this.props.cldVid,
       this.props.sources,
       this.props.plugins,
-      this.getVideoAttributes()
+      this.getVideoAttributes(),
+      this.props.cldPoster
     )
   }
 
@@ -95,7 +98,13 @@ class AdvancedVideo extends Component <VideoProps> {
   componentDidUpdate() {
     cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);
     // call html layer to update the dom again with plugins and reset toBeCanceled
-    this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())
+    this.htmlVideoLayerInstance.update(
+      this.props.cldVid,
+      this.props.sources,
+      this.props.plugins,
+      this.getVideoAttributes(),
+      this.props.cldPoster
+    )
   }
 
   /**
@@ -140,6 +149,7 @@ class AdvancedVideo extends Component <VideoProps> {
   render() {
     const {
       cldVid,
+      cldPoster,
       plugins,
       sources,
       innerRef,
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@cloudinary/html": "^1.0.1",
-    "@cloudinary/url-gen": "^1.8.6",
+    "@cloudinary/url-gen": "^1.8.7",
     "@rollup/plugin-replace": "^4.0.0",
     "@sinonjs/fake-timers": "^9.1.2",
     "@types/jest": "^27.0.1",
diff --git a/packages/vue/src/components/AdvancedVideo.vue b/packages/vue/src/components/AdvancedVideo.vue
diff --git a/packages/vue/tests/unit/AdvancedVideo.spec.ts b/packages/vue/tests/unit/AdvancedVideo.spec.ts
