@srgssr/pillarbox-web 1.35.1 → 1.36.0

package/dist/pillarbox.es.js

@@ -90,7 +90,7 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
-const version = "1.35.0";
+const version = "1.35.1";
 
 /** @import VJSPlayer from 'video.js/dist/types/player' */
 /** @import AudioTrack from 'video.js/dist/types/tracks/audio-track' */
@@ -187,6 +187,79 @@ class Player extends vjsPlayer {
     return ranges;
   }
 
+  /**
+   * Create a floating video window always on top of other windows so that users may
+   * continue consuming media while they interact with other content sites, or
+   * applications on their device.
+   *
+   * This can use document picture-in-picture or element picture in picture
+   *
+   * Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
+   * Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
+   *
+   *
+   * @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
+   * @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
+   *
+   * @fires Player#enterpictureinpicture
+   *
+   * @return {Promise}
+   *         A promise with a Picture-in-Picture window.
+   */
+  /* eslint-disable */
+  requestPictureInPicture() {
+    if (this.options_.enableDocumentPictureInPicture && window.documentPictureInPicture) {
+      const pipContainer = document.createElement(this.el().tagName);
+      pipContainer.classList = this.el().classList;
+      pipContainer.classList.add('vjs-pip-container');
+      if (this.posterImage) {
+        pipContainer.appendChild(this.posterImage.el().cloneNode(true));
+      }
+      if (this.titleBar) {
+        pipContainer.appendChild(this.titleBar.el().cloneNode(true));
+      }
+      pipContainer.appendChild(videojs.dom.createEl('p', {
+        className: 'vjs-pip-text'
+      }, {}, this.localize('Playing in picture-in-picture')));
+      return window.documentPictureInPicture.requestWindow({
+        // The aspect ratio won't be correct, Chrome bug https://crbug.com/1407629
+        width: this.videoWidth(),
+        height: this.videoHeight()
+      }).then(pipWindow => {
+        videojs.dom.copyStyleSheetsToWindow(pipWindow);
+        this.el_.parentNode.insertBefore(pipContainer, this.el_);
+        pipWindow.document.body.appendChild(this.el_);
+        pipWindow.document.body.classList.add('vjs-pip-window');
+        this.player_.isInPictureInPicture(true);
+        this.player_.trigger({
+          type: 'enterpictureinpicture',
+          pipWindow
+        });
+
+        // Listen for the PiP closing event to move the video back.
+        pipWindow.addEventListener('pagehide', event => {
+          console.log(event.target);
+          const pipVideo = event.target.querySelector('.vjs-v8');
+          pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
+          this.player_.isInPictureInPicture(false);
+          this.player_.trigger('leavepictureinpicture');
+        });
+        return pipWindow;
+      });
+    }
+    if ('pictureInPictureEnabled' in document && this.disablePictureInPicture() === false) {
+      /**
+       * This event fires when the player enters picture in picture mode
+       *
+       * @event Player#enterpictureinpicture
+       * @type {Event}
+       */
+      return this.techGet_('requestPictureInPicture');
+    }
+    return Promise.reject('No PiP mode is available');
+  }
+  /* eslint-enable */
+
   /**
    * Get the percent (as a decimal) of the media that's been played.
    * This method is not a part of the native HTML video API.
@@ -451,6 +524,45 @@ class AudioTrackButton extends VJSAudioTrackButton {
 videojs.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
 videojs.registerComponent('AudioTrackButton', AudioTrackButton);
 
+/**
+ * @ignore
+ */
+const VJSPictureInPictureToggle = videojs.getComponent('PictureInPictureToggle');
+class PictureInPictureToggle extends VJSPictureInPictureToggle {
+  /**
+   * Displays or hides the button depending on the audio mode detection.
+   * Exits picture-in-picture if it is enabled when switching to audio mode.
+   */
+  /* eslint-disable */
+  handlePictureInPictureAudioModeChange() {
+    // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+    const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+    const isAudioMode = isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+    if (!isAudioMode || this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window) {
+      this.show();
+      return;
+    }
+    if (this.player_.isInPictureInPicture()) {
+      this.player_.exitPictureInPicture();
+    }
+    this.hide();
+  }
+  /* eslint-enable */
+
+  /**
+  * Show the `Component`s element if it is hidden by removing the
+  * 'vjs-hidden' class name from it only in browsers that support the Picture-in-Picture API.
+  */
+  show() {
+    // Does not allow to display the pictureInPictureToggle in browsers that do not support the Picture-in-Picture or DocumentPictureInPicture API.
+    if (typeof document.exitPictureInPicture !== 'function' && !(this.player_.options_.enableDocumentPictureInPicture && 'documentPictureInPicture' in window)) {
+      return;
+    }
+    this.removeClass('vjs-hidden');
+  }
+}
+videojs.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+
 /**
  * Pillarbox is an alias for the video.js namespace with additional options.
  *