Merge pull request #469 from cloudinary/ME-14565-subtitles-styles-gra…

…vity ME-14565-subtitles-styles-gravity
cloudinary · Dec 18, 2023 · d430da7 · d430da7
2 parents b03ec37 + 5956915
commit d430da7
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 41 deletions.
diff --git a/docs/subtitles-and-captions.html b/docs/subtitles-and-captions.html
@@ -127,13 +127,15 @@
       const textTracks = {
         options: {
           // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d'
-          // position: "", // i.e. 'top-left', 'center' etc
-          // offset: { // Object of top/right/bottom/left
-          //   top: "25%",
-          //   left: "12%"
-          // },
           // fontFace: "", // any Google font
           // fontSize: "", // any CSS value
+          // gravity: "", // i.e. 'top-left', 'center' etc
+          // box: { // Object of x/y/width/height
+          //   x: "0%",
+          //   y: "0%",
+          //   width: "100%",
+          //   height: "100%"
+          // },
           // style: { // Styles key-value object
           //   color: "hotpink"
           // }
@@ -164,13 +166,13 @@
       const maxWordsInput = document.getElementById('maxWords');
       const themeSelect = document.getElementById('theme');
       const fontSelect = document.getElementById('font');
-      const positionSelect = document.getElementById('position');
+      const gravitySelect = document.getElementById('gravity');
       const applyButton = document.getElementById('apply');
       applyButton.addEventListener('click', function () {
         textTracks.captions.maxWords = parseInt(maxWordsInput.value);
         textTracks.options.theme = themeSelect.value;
         textTracks.options.fontFace = fontSelect.value;
-        textTracks.options.position = positionSelect.value;
+        textTracks.options.gravity = gravitySelect.value;
         pacedPlayer.source(publicId, {
           textTracks
         });
@@ -218,29 +220,35 @@ <h4 class="mt-4 mb-2">Paced & Styled Captions</h4>
       <input type="number" id="maxWords" name="maxWords" min="1" max="100" value="4" />
       <label for="theme">Theme</label>
       <select id="theme" name="theme">
-        <option value="default">Default</option>
+        <option value="default" selected>Default</option>
         <option value="videojs-default">VideoJS Default</option>
         <option value="player-colors">Player Colors</option>
         <option value="yellow-outlined">Yellow Outlined</option>
         <option value="3d">3D</option>
       </select>
       <label for="font">Font</label>
       <select id="font" name="font">
-        <option value="Inter">Inter</option>
+        <option value="Inter" selected>Inter</option>
         <option value="Ceviche One">Ceviche One</option>
         <option value="Merienda">Merienda</option>
         <option value="Ultra">Ultra</option>
+        <option value="Kavoon">Kavoon</option>
+        <option value="Erica One">Erica One</option>
+        <option value="Corben">Corben</option>
+        <option value="Bungee Spice">Bungee Spice (Color)</option>
         <option value="Nabla">Nabla (Color)</option>
       </select>
-      <label for="position">Position</label>
-      <select id="position" name="position">
-        <option value="bottom">Bottom</option>
+      <label for="gravity">Gravity</label>
+      <select id="gravity" name="gravity">
+        <option value="bottom" selected>Bottom</option>
         <option value="bottom-left">Bottom Left</option>
         <option value="bottom-right">Bottom Right</option>
         <option value="top">Top</option>
         <option value="top-left">Top Left</option>
         <option value="top-right">Top Right</option>
         <option value="center">Center</option>
+        <option value="center-left">Center Left</option>
+        <option value="center-right">Center Right</option>
       </select>
       <button type="button" id="apply">Apply</button>
     </form>
@@ -388,13 +396,15 @@ <h3 class="mt-4">Example Code:</h3>
         const textTracks = {
           options: {
             // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d'
-            // position: "", // i.e. 'top-left', 'center' etc
-            // offset: { // Object of top/right/bottom/left
-            //   top: "25%",
-            //   left: "12%"
-            // },
             // fontFace: "", // any Google font
             // fontSize: "", // any CSS value
+            // gravity: "", // i.e. 'top-left', 'center' etc
+            // box: { // Object of x/y/width/height
+            //   x: "0%",
+            //   y: "0%",
+            //   width: "100%",
+            //   height: "100%"
+            // },
             // style: { // Styles key-value object
             //   color: "hotpink"
             // }

diff --git a/src/assets/styles/components/text-tracks.scss b/src/assets/styles/components/text-tracks.scss
@@ -2,6 +2,7 @@
   // Default captions styles
   // See styled-text-tracks plugin for more options
   .vjs-text-track-display {
+    margin: auto;
     bottom: 0 !important;
     > div {
       margin: 3% !important;

diff --git a/src/plugins/styled-text-tracks/styled-text-tracks.js b/src/plugins/styled-text-tracks/styled-text-tracks.js
@@ -8,23 +8,23 @@ const styledTextTracks = (config, player) => {
     theme: config.theme || 'default',
     fontFace: config.fontFace,
     fontSize: config.fontSize,
-    position: config.position || 'bottom',
-    offset: config.offset,
+    gravity: config.gravity || 'bottom',
+    box: config.box,
     style: config.style
   };
 
-  // Class Names - Theme/Position
+  // Class Names - Theme/Gravity
   const classNames = player.textTrackDisplay.el().classList;
   classNames.forEach(className => {
-    // Remove previously added theme/position classes
+    // Remove previously added theme/gravity classes
     if (className.startsWith('cld-styled-text-tracks')) {
       classNames.remove(className);
     }
   });
   classNames.add('cld-styled-text-tracks');
   classNames.add(`cld-styled-text-tracks-theme-${options.theme}`);
-  options.position.split('-').forEach(position => {
-    classNames.add(`cld-styled-text-tracks-position-${position}`);
+  options.gravity.split('-').forEach(gravity => {
+    classNames.add(`cld-styled-text-tracks-gravity-${gravity}`);
   });
 
   // Font
@@ -47,27 +47,34 @@ const styledTextTracks = (config, player) => {
     }
   };
 
-  // Custom offset
-  if (options.offset) {
+  // Custom bounding box
+  if (options.box) {
+    const { x, y, width, height } = options.box;
     applyImportantStyle(
-      options.offset,
-      '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue');
+      {
+        translate: `${x ? x : 0} ${y ? y : 0}`,
+        ...(width ? { width } : undefined),
+        ...(height ? { height } : undefined)
+      },
+      '.vjs-text-track-display.cld-styled-text-tracks'
+    );
   }
 
   // Custom font-size
   if (options.fontSize) {
     applyImportantStyle(
       { 'font-size': options.fontSize },
-      '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue > div');
+      '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue > div'
+    );
   }
 
   // Custom styles
   if (options.style) {
     applyImportantStyle(
       options.style,
-      '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue > div');
+      '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue > div'
+    );
   }
-
 };
 
 export default styledTextTracks;
diff --git a/src/plugins/styled-text-tracks/styled-text-tracks.scss b/src/plugins/styled-text-tracks/styled-text-tracks.scss
@@ -1,27 +1,27 @@
 .cld-video-player {
 
-  // Positions
-  .cld-styled-text-tracks-position-center {
+  // Gravity (position + alignment)
+  .cld-styled-text-tracks-gravity-center {
     inset: 0 !important;
     .vjs-text-track-cue {
       inset: 0 !important;
       margin: auto;
     }
   }
 
-  .cld-styled-text-tracks-position-top {
+  .cld-styled-text-tracks-gravity-top {
     .vjs-text-track-cue {
       top: 0 !important;
     }
   }
 
-  .cld-styled-text-tracks-position-right {
+  .cld-styled-text-tracks-gravity-right {
     .vjs-text-track-cue {
       text-align: right !important;
     }
   }
 
-  .cld-styled-text-tracks-position-left {
+  .cld-styled-text-tracks-gravity-left {
     .vjs-text-track-cue {
       text-align: left !important;
     }

diff --git a/src/validators/validators.js b/src/validators/validators.js
@@ -91,10 +91,12 @@ export const sourceValidators = {
   },
   textTracks: {
     options: {
-      fontFace: validator.isString,
-      position: validator.isString,
       theme: validator.isString,
-      style: validator.isString
+      fontFace: validator.isString,
+      fontSize: validator.isString,
+      gravity: validator.isString,
+      box: validator.isPlainObject,
+      style: validator.isPlainObject
     },
     captions: {
       label: validator.isString,

diff --git a/src/video-player.js b/src/video-player.js
@@ -74,9 +74,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this.videoElement.classList.add('video-js');
 
     // Handle WebFont loading
-    if (this.playerOptions.cloudinary.fontFace) {
-      Utils.fontFace(this.videoElement, this.playerOptions.cloudinary.fontFace);
-    }
+    Utils.fontFace(this.videoElement, this.playerOptions.cloudinary.fontFace);
 
     // Handle play button options
     Utils.playButton(this.videoElement, this._videojsOptions);