Merge pull request #445 from cloudinary/ME-13971-chapters-source

ME-13971-chapters-source
cloudinary · Oct 12, 2023 · 20e4183 · 20e4183
2 parents d9f7cb2 + 7c2607d
commit 20e4183
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 25 deletions.
diff --git a/docs/chapters.html b/docs/chapters.html
@@ -36,16 +36,18 @@
         },
       });
 
-      const playerConf = cloudinary.videoPlayer('player-config', {
-        cloud_name: 'demo',
-        publicId: 'snow_horses',
+      const playerSourceConf = cloudinary.videoPlayer('player-config', {
+        cloud_name: 'demo'
+      });
+
+      playerSourceConf.source('snow_horses', {
         info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
         chapters: {
           0: 'Opening credits',
           3: 'A dangerous quest',
           8: 'The attack'
         },
-      });
+      })
 
     }, false);
   </script>
@@ -72,7 +74,7 @@ <h4 class="mb-4">From a VTT file</h4>
     ></video>
 
     <br><br>
-    <h4 class="mb-4">From a config object</h4>
+    <h4 class="mb-4">From a config object on <code>source()</code></h4>
 
     <video
       id="player-config"
@@ -120,16 +122,18 @@ <h3 class="mt-4">Example Code:</h3>
           },
         });
 
-        const playerConf = cloudinary.videoPlayer('player-config', {
-          cloud_name: 'demo',
-          publicId: 'snow_horses',
+        const playerSourceConf = cloudinary.videoPlayer('player-config', {
+          cloud_name: 'demo'
+        });
+
+        playerSourceConf.source('snow_horses', {
           info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
           chapters: {
             0: 'Opening credits',
             3: 'A dangerous quest',
             8: 'The attack'
           },
-        });
+        })
       </code>
     </pre>
   </div>

diff --git a/src/plugins/chapters/index.js b/src/plugins/chapters/index.js
@@ -206,9 +206,9 @@ const ChaptersPlugin = (function () {
         timeTooltip.updateTime(seekBarRect, seekBarPoint, time, () => {
           // Make sure it doesn't exit the player
           if ((seekBarRect.width * seekBarPoint) < size) {
-            this.el_.style.left = size;
+            this.el_.style.left = `${size}px`;
           } else if ((seekBarRect.width * seekBarPoint) + size > width) {
-            this.el_.style.left = (seekBarRect.width * seekBarPoint) - size;
+            this.el_.style.left = `${(seekBarRect.width * seekBarPoint) - size}px`;
           } else {
             this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
           }

diff --git a/src/plugins/cloudinary/models/video-source/video-source.const.js b/src/plugins/cloudinary/models/video-source/video-source.const.js
@@ -10,7 +10,8 @@ export const DEFAULT_VIDEO_PARAMS = {
   sourceTypes: DEFAULT_VIDEO_SOURCE_TYPES,
   recommendations: null,
   info: {},
-  interactionAreas: {}
+  interactionAreas: {},
+  chapters: {}
 };
 
 export const VIDEO_SUFFIX_REMOVAL_PATTERN = RegExp(`\\.(${DEFAULT_VIDEO_SOURCE_TYPES.join('|')})$$`);

diff --git a/src/plugins/cloudinary/models/video-source/video-source.js b/src/plugins/cloudinary/models/video-source/video-source.js
@@ -44,7 +44,8 @@ class VideoSource extends BaseSource {
       recommendations,
       textTracks,
       withCredentials,
-      interactionAreas
+      interactionAreas,
+      chapters
     } = sliceAndUnsetProperties(
       options,
       'poster',
@@ -54,7 +55,8 @@ class VideoSource extends BaseSource {
       'recommendations',
       'textTracks',
       'withCredentials',
-      'interactionAreas'
+      'interactionAreas',
+      'chapters'
     );
 
     super(publicId, options);
@@ -66,6 +68,7 @@ class VideoSource extends BaseSource {
     this._info = null;
     this._sourceTransformation = null;
     this._interactionAreas = null;
+    this._chapters = null;
     this._type = SOURCE_TYPE.VIDEO;
     this.isRawUrl = _isRawUrl;
     this._rawTransformation = options.raw_transformation;
@@ -77,6 +80,7 @@ class VideoSource extends BaseSource {
     this.sourceTransformation(sourceTransformation);
     this.info(info);
     this.interactionAreas(interactionAreas);
+    this.chapters(chapters);
     this.recommendations(recommendations);
     this.textTracks(textTracks);
     this.objectId = generateId();
@@ -131,6 +135,16 @@ class VideoSource extends BaseSource {
     return this;
   }
 
+  chapters(chapters) {
+    if (!chapters) {
+      return this._chapters;
+    }
+
+    this._chapters = chapters;
+
+    return this;
+  }
+
   sourceTransformation(trans) {
     if (!trans) {
       return this._sourceTransformation;

diff --git a/src/plugins/vtt-thumbnails/index.js b/src/plugins/vtt-thumbnails/index.js
@@ -137,9 +137,9 @@ const VttThumbnailsPlugin = (function () {
       this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
         // Make sure the thumbnail doesn't exit the player
         if ((seekBarRect.width * seekBarPoint) < halfThumbnailWidth) {
-          this.el_.style.left = halfThumbnailWidth;
+          this.el_.style.left = `${halfThumbnailWidth}px`;
         } else if ((seekBarRect.width * seekBarPoint) + halfThumbnailWidth > width) {
-          this.el_.style.left = (seekBarRect.width * seekBarPoint) - halfThumbnailWidth;
+          this.el_.style.left = `${(seekBarRect.width * seekBarPoint) - halfThumbnailWidth}px`;
         } else {
           this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
         }

diff --git a/src/validators/validators.js b/src/validators/validators.js
@@ -82,6 +82,7 @@ export const sourceValidators = {
   raw_transformation: validator.isString,
   shoppable: validator.isPlainObject,
   withCredentials: validator.isBoolean,
+  chapters: validator.isPlainObject,
   interactionAreas: {
     enable: validator.isBoolean,
     template: validator.or(validator.isString(INTERACTION_AREAS_TEMPLATE), validator.isArray),

diff --git a/src/video-player.js b/src/video-player.js
@@ -320,15 +320,11 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   }
 
   _initChapters() {
-    if (this.playerOptions.chapters) {
-      this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, { source }) => {
-        if (!source) {
-          return;
-        }
-
-        this.videojs.chapters(this.playerOptions.chapters);
-      });
-    }
+    this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, { source }) => {
+      if (source._chapters) {
+        this.videojs.chapters(source._chapters);
+      }
+    });
   }
 
   _initColors () {