fix: picture in picture toggle (#522)

cloudinary · Jan 25, 2024 · 8c271cc · 8c271cc
1 parent fc178a2
commit 8c271cc
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 13 deletions.
diff --git a/docs/chapters.html b/docs/chapters.html
@@ -33,14 +33,12 @@
         chapters: {
           url: 'https://res.cloudinary.com/tsachi/raw/upload/tests/snow_horses_chapters_k1e1ff.vtt'
         },
+        chaptersButton: true
       });
 
       const playerSourceConf = cloudinary.videoPlayer('player-config', {
         cloud_name: 'demo',
-        controlBar: {
-          pictureInPictureToggle: false,
-          chaptersButton: true
-        },
+        chaptersButton: true
       });
 
       playerSourceConf.source('snow_horses', {
@@ -150,14 +148,12 @@ <h3 class="mt-4">Example Code:</h3>
           chapters: {
             url: 'https://res.cloudinary.com/tsachi/raw/upload/tests/snow_horses_chapters_k1e1ff.vtt'
           },
+          chaptersButton: true
         });
 
         const playerSourceConf = cloudinary.videoPlayer('player-config', {
           cloud_name: 'demo',
-          controlBar: {
-            pictureInPictureToggle: false,
-            chaptersButton: true
-          },
+          chaptersButton: true
         });
 
         playerSourceConf.source('snow_horses', {

diff --git a/docs/ui-config.html b/docs/ui-config.html
@@ -36,6 +36,7 @@
         logoOnclickUrl: 'https://google.com',
         showLogo: true,
         showJumpControls: true,
+        pictureInPictureToggle: true,
         fontFace: 'Lobster',
         bigPlayButton: false,
         playbackRates: [0.5, 1, 1.5, 2]
@@ -61,6 +62,7 @@ <h3 class="mb-4">Display Configurations</h3>
         <li>Display 10-sec jump buttons</li>
         <li>Hide big-play-button</li>
         <li>Show playback rates control</li>
+        <li>Show PictureInPicture Toggle</li>
       </ul>
     </p>
 
@@ -92,7 +94,6 @@ <h3 class="mt-4">Example Code:</h3>
         &lt;/video&gt;
       </code>
       <code class="language-javascript">
-
         var player = cloudinary.videoPlayer('player', {
           cloud_name: 'demo',
           publicId: 'snow_horses',
@@ -102,6 +103,10 @@ <h3 class="mt-4">Example Code:</h3>
           logoOnclickUrl: 'https://google.com',
           showLogo: true,
           showJumpControls: true,
+          pictureInPictureToggle: true,
+          fontFace: 'Lobster',
+          bigPlayButton: false,
+          playbackRates: [0.5, 1, 1.5, 2]
         });
       </code>
     </pre>

diff --git a/src/config/defaults.js b/src/config/defaults.js
@@ -9,10 +9,8 @@ export default {
   playsinline: videojs.browser.IS_IOS,
   skin: 'dark',
   controls: false,
-  controlBar: {
-    pictureInPictureToggle: false,
-    chaptersButton: false
-  },
+  chaptersButton: false,
+  pictureInPictureToggle: false,
   seekThumbnails: true,
   aiHighlightsGraph: false,
   preload: PRELOAD.AUTO,

diff --git a/src/utils/get-analytics-player-options.js b/src/utils/get-analytics-player-options.js
@@ -83,6 +83,8 @@ export const getAnalyticsFromPlayerOptions = (playerOptions) => filterDefaultsAn
   videoTimeout: playerOptions.videoTimeout,
   seekThumbnails: playerOptions.seekThumbnails,
   showJumpControls: playerOptions.showJumpControls,
+  chaptersButton: playerOptions.chaptersButton,
+  pictureInPictureToggle: playerOptions.pictureInPictureToggle,
   showLogo: playerOptions.showLogo,
   skin: playerOptions.skin,
   videoJS: hasConfig(playerOptions.videoJS),

diff --git a/src/validators/validators.js b/src/validators/validators.js
@@ -43,6 +43,8 @@ export const playerValidators = {
     hideContextMenu: validator.isBoolean,
     playedEventPercents: validator.isArrayOfNumbers,
     showJumpControls: validator.isBoolean,
+    chaptersButton: validator.isBoolean,
+    pictureInPictureToggle: validator.isBoolean,
     seekThumbnails: validator.isBoolean,
     aiHighlightsGraph: validator.isBoolean,
     floatingWhenNotVisible: validator.isString(FLOATING_TO),

diff --git a/src/video-player.const.js b/src/video-player.const.js
@@ -27,6 +27,8 @@ export const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat([
   'floatingWhenNotVisible',
   'ads',
   'showJumpControls',
+  'chaptersButton',
+  'pictureInPictureToggle',
   'textTracks',
   'qualitySelector',
   'fetchErrorUsingGet',

diff --git a/src/video-player.js b/src/video-player.js
@@ -99,6 +99,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._setCssClasses();
     this._initPlugins();
     this._initJumpButtons();
+    this._initPictureInPicture();
     this._setVideoJsListeners(ready);
   }
 
@@ -311,6 +312,9 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   }
 
   _initChapters() {
+    if (!this.playerOptions.chaptersButton && this.videojs.controlBar) {
+      this.videojs.controlBar.removeChild('chaptersButton');
+    }
     this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, (e, { source }) => {
       if ((!isEmpty(source._chapters) || source._chapters === true) && this.videojs.chapters) {
         isFunction(this.videojs.chapters)
@@ -368,6 +372,12 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     }
   }
 
+  _initPictureInPicture() {
+    if (!this.playerOptions.pictureInPictureToggle && this.videojs.controlBar) {
+      this.videojs.controlBar.removeChild('pictureInPictureToggle');
+    }
+  }
+
   _initCloudinary() {
     const { cloudinaryConfig } = this.playerOptions.cloudinary;
     cloudinaryConfig.chainTarget = this;