feat: SNI-6952 add VideoPoster type for cldVideo

Author: pawelphilipczyk-cloudinary

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

@@ -1,10 +1,11 @@
 import {Component, OnInit, Input, ElementRef, EventEmitter, Output, OnChanges, OnDestroy} from '@angular/core';
-import {CloudinaryImage, CloudinaryVideo} from '@cloudinary/url-gen';
+import {CloudinaryVideo} from '@cloudinary/url-gen';
 
 import {
   cancelCurrentlyRunningPlugins,
   HtmlVideoLayer,
   Plugins,
+  VideoPoster,
   VideoSources
 } from '@cloudinary/html';
 
@@ -14,7 +15,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 {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
@@ -52,7 +53,7 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
   constructor(private el: ElementRef) { }
 
   @Input('cldVid') cldVid: CloudinaryVideo;
-  @Input('cldPoster') cldPoster: CloudinaryImage | 'auto';
+  @Input('cldPoster') cldPoster: VideoPoster;
   @Input('sources') sources: VideoSources;
   @Input('plugins') plugins: Plugins;
   @Input('poster') poster: string;

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';

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 {CloudinaryImage, 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, userCloudinaryPoster?: CloudinaryImage | 'auto'){
+    constructor(element: HTMLVideoElement | null, userCloudinaryVideo: CloudinaryVideo, sources: VideoSources,  plugins?: Plugins, videoAttributes?: object, userCloudinaryPoster?: VideoPoster){
         this.videoElement = element;
         this.originalVideo = userCloudinaryVideo;
         this.htmlPluginState = {cleanupCallbacks:[], pluginEventSubscription: []};
@@ -104,7 +104,7 @@ 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 = {}, userCloudinaryPoster?: CloudinaryImage | 'auto') {
+    setVideoAttributes(videoAttributes: object = {}, userCloudinaryPoster?: VideoPoster) {
         if (userCloudinaryPoster === 'auto') {
           videoAttributes['poster'] = this.originalVideo
            .quality('auto')
@@ -129,7 +129,7 @@ export class HtmlVideoLayer{
      * @param plugins
      * @param videoAttributes
      */
-    update(updatedCloudinaryVideo: CloudinaryVideo, sources: VideoSources,  plugins?: Plugins, videoAttributes?: object, userCloudinaryPoster?: CloudinaryImage | 'auto'){
+    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]);

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';

packages/react/src/AdvancedVideo.tsx

@@ -4,6 +4,7 @@ import { CloudinaryImage, CloudinaryVideo } from '@cloudinary/url-gen';
 import {
   HtmlVideoLayer,
   Plugins,
+  VideoPoster,
   VideoSources,
   cancelCurrentlyRunningPlugins
 } from '@cloudinary/html';
@@ -12,7 +13,7 @@ type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
 
 interface VideoProps extends HTMLAttributes<HTMLVideoElement>{
   cldVid: CloudinaryVideo,
-  cldPoster?: CloudinaryImage | "auto",
+  cldPoster?: VideoPoster,
   plugins?: Plugins,
   sources?: VideoSources,
   innerRef?: ((instance: any) => void) | MutableRefObject<unknown> | null

packages/vue/src/components/AdvancedVideo.vue

@@ -8,15 +8,16 @@
  * @type {Component}
  * @description The Cloudinary video component.
  * @prop {CloudinaryVideo} cldVid Generated by @cloudinary/url-gen
+ * @prop {VideoPoster} cldPoster Generated by @cloudinary/url-gen
  * @prop {Plugins} plugins Advanced video component plugins accessibility(), responsive(), lazyload(), placeholder()
  */
 
 import { ref, onMounted, onUpdated, onUnmounted } from "vue";
-import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
-import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
+import { CloudinaryImage, CloudinaryVideo } from "@cloudinary/url-gen";
 import {
   HtmlVideoLayer,
   Plugins,
+  VideoPoster,
   VideoSources,
   cancelCurrentlyRunningPlugins,
 } from "@cloudinary/html";
@@ -25,7 +26,7 @@ interface VideoProps {
   cldVid: CloudinaryVideo;
   plugins?: Plugins;
   sources?: VideoSources;
-  cldPoster?: CloudinaryImage | 'auto';
+  cldPoster?: VideoPoster;
 
   [x: string]: any;
 }