feat(VIDEO-20110): video-elements - add support for poster (#926)

* feat(VIDEO-20110): video-elements - add support for poster

* chore: bundlewatch

* chore: fix options.resource_type

* chore: tx query string

* chore: e2e example page

* chore: poster analytics and E2e

Author: tsi

docs/es-modules/poster.html

@@ -53,6 +53,12 @@ <h4>Raw URL - default with no poster image</h4>
         <video id="player-raw" playsinline controls class="cld-video-player cld-fluid"></video>
       </div>
 
+      <div class="video-container mb-4">
+        <h4>Applet poster (poster: true)</h4>
+        <h6>Uses applet service URL for poster</h6>
+        <video id="player-applet-poster" playsinline controls class="cld-video-player cld-fluid"></video>
+      </div>
+
       <p class="mt-4">
         <a href="https://cloudinary.com/documentation/cloudinary_video_player"
           >Full documentation</a
@@ -89,6 +95,12 @@ <h4>Raw URL - default with no poster image</h4>
         cloudName: 'demo',
         publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8'
       });
+
+      const playerAppletPoster = videoPlayer('player-applet-poster', {
+        cloudName: 'demo',
+        publicId: 'snow_horses',
+        poster: true
+      });
     </script>
 
     <!-- Bootstrap -->

docs/poster.html

@@ -56,6 +56,12 @@
         publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8'
       });
 
+      player5 = cloudinary.videoPlayer('player-applet-poster', {
+        cloud_name: 'demo',
+        publicId: 'snow_horses',
+        poster: true
+      });
+
     }, false);
   </script>
 
@@ -113,6 +119,17 @@ <h4>Raw URL - default with no poster image</h4>
       ></video>
     </div>
 
+    <div class="video-container mb-4">
+      <h4>Applet poster (poster: true)</h4>
+      <h6>Uses applet service URL for poster</h6>
+      <video
+        id="player-applet-poster"
+        playsinline
+        controls
+        class="cld-video-player cld-fluid"
+      ></video>
+    </div>
+
     <p class="mt-4">
       <a href="https://cloudinary.com/documentation/video_player_api_reference#posteroptions">Full documentation</a>
     </p>
@@ -151,6 +168,13 @@ <h3 class="mt-4">Example Code:</h3>
           class="cld-video-player cld-fluid"
         &lt;/video&gt;
 
+        &lt;video
+          id="player-applet-poster"
+          playsinline
+          controls
+          class="cld-video-player cld-fluid"
+        &lt;/video&gt;
+
       </code>
       <code class="language-javascript">
 
@@ -179,6 +203,12 @@ <h3 class="mt-4">Example Code:</h3>
           publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8'
         });
 
+        player5 = cloudinary.videoPlayer('player-applet-poster', {
+          cloud_name: 'demo',
+          publicId: 'snow_horses',
+          poster: true
+        });
+
       </code>
     </pre>
   </div>

src/plugins/cloudinary/index.js

@@ -122,8 +122,14 @@ class CloudinaryContext {
       options.cloudinaryConfig = extendCloudinaryConfig(this.cloudinaryConfig(), options.cloudinaryConfig || {});
       options.transformation = mergeTransformations(this.transformation(), options.transformation || {});
       options.sourceTransformation = options.sourceTransformation || this.sourceTransformation();
-      options.sourceTypes = options.sourceTypes || this.sourceTypes();
-      options.poster = options.poster || posterOptionsForCurrent();
+      options.sourceTypes = options.sourceTypes || this.sourceTypes();      
+
+      
+      const defaultPosterOptions = posterOptionsForCurrent();
+      const userPosterOptions = options.posterOptions || {};
+      options.poster = options.poster || defaultPosterOptions;
+      options.posterOptions = Object.assign({}, defaultPosterOptions, userPosterOptions);
+      
       options.queryParams = Object.assign(options.queryParams || {}, options.allowUsageReport ? { _s: `vp-${VERSION}` } : {});
 
       if (options.sourceTypes.indexOf('audio') > -1) {

src/plugins/cloudinary/models/video-source/video-source.js

@@ -14,7 +14,9 @@ import {
   hasCodec,
   normalizeFormat
 } from './video-source.utils';
-import { normalizeOptions, isSrcEqual, isRawUrl, mergeTransformations } from '../../common';
+import { normalizeOptions, isSrcEqual, isRawUrl, mergeTransformations, getCloudinaryUrlPrefix } from '../../common';
+import { utf8ToBase64 } from 'utils/utf8Base64';
+import Transformation from '@cloudinary/url-gen/backwards/transformation';
 import BaseSource from '../base-source';
 import ImageSource from '../image-source';
 
@@ -127,9 +129,28 @@ class VideoSource extends BaseSource {
     }
 
     options.cloudinaryConfig = options.cloudinaryConfig || this.cloudinaryConfig();
-    
+
     options.resource_type = this.resourceType() || options.resource_type;
-    
+
+    if (publicId === true) {
+      const urlPrefix = getCloudinaryUrlPrefix(options.cloudinaryConfig);
+      const deliveryType = this.getInitOptions().type || 'upload';
+      const base64PublicId = utf8ToBase64(this.publicId());
+      let appletUrl = `${urlPrefix}/_applet_/video_service/elements/${deliveryType}/${base64PublicId}/poster`;
+
+      const transformation = this.getInitOptions().posterOptions?.transformation;
+      if (transformation) {
+        const transformationString = new Transformation(transformation).toString();
+        appletUrl += `?tx=${transformationString}`;
+      }
+
+      this._poster = new ImageSource(appletUrl, {
+        cloudinaryConfig: options.cloudinaryConfig
+      });
+
+      return this;
+    }
+
     this._poster = new ImageSource(publicId, options);
 
     return this;

src/utils/get-analytics-player-options.js

@@ -12,6 +12,11 @@ const filterDefaultsAndNulls = (obj) => Object.entries(obj).reduce((filtered, [k
 }, {});
 
 const getSourceOptions = (sourceOptions = {}) => ({
+  poster: (() => {
+    if (sourceOptions.poster === true) return 'auto';
+    if (typeof sourceOptions.poster === 'string') return 'url';
+    return undefined;
+  })(),
   posterOptions: hasConfig(sourceOptions.posterOptions),
   posterOptionsPublicId: sourceOptions.posterOptions && hasConfig(sourceOptions.posterOptions.publicId),
   autoShowRecommendations: sourceOptions.autoShowRecommendations,