@srgssr/pillarbox-web 1.35.1 → 1.36.1

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.36.0";
 
 /** @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.
  *
@@ -4092,25 +4204,23 @@ class SrgSsr {
    */
   static createTextTrack(_x5, _x6) {
     return _asyncToGenerator(function* (player, trackId, cues = []) {
-      const removeTrack = player.textTracks().getTrackById(trackId);
+      const removeTrack = player.remoteTextTracks().getTrackById(trackId);
       if (removeTrack) {
-        player.textTracks().removeTrack(removeTrack);
+        player.removeRemoteTextTrack(removeTrack);
       }
+      const textTrack = player.addRemoteTextTrack({
+        id: trackId,
+        kind: 'metadata',
+        label: trackId
+      });
+
+      // Safari
+      textTrack.track.mode = 'hidden';
 
       // See https://github.com/videojs/video.js/issues/8519
-      const textTrack = yield new Promise(resolve => {
-        setTimeout(() => {
-          resolve(new pillarbox.TextTrack({
-            id: trackId,
-            kind: 'metadata',
-            label: trackId,
-            tech: player.tech(true)
-          }));
-        }, 100);
-      });
-      SrgSsr.addTextTrackCues(textTrack, cues);
-      player.textTracks().addTrack(textTrack);
-      return textTrack;
+      yield new Promise(resolve => setTimeout(resolve, 100));
+      SrgSsr.addTextTrackCues(textTrack.track, cues);
+      return textTrack.track;
     }).apply(this, arguments);
   }
 
@@ -4120,12 +4230,12 @@ class SrgSsr {
    * @param {Player} player
    */
   static cuechangeEventProxy(player) {
-    player.textTracks().on('addtrack', ({
+    player.textTracks().on('addtrack', /** @param {{ track: TextTrack }} */({
       track
     }) => {
       if (!['srgssr-chapters', 'srgssr-intervals'].includes(track.id)) return;
-      track.on('cuechange', () => {
-        const [cue] = Array.from(track.activeCues);
+      track.addEventListener('cuechange', () => {
+        const [cue] = Array.from(track.activeCues || []);
         const type = track.id.includes('srgssr-chapters') ? 'srgssr/chapter' : 'srgssr/interval';
         player.trigger({
           type,
@@ -4227,7 +4337,7 @@ class SrgSsr {
     if (!blockedSegmentsTrack) return;
 
     /** @type {VTTCue} */
-    const [blockedCue] = Array.from(blockedSegmentsTrack.activeCues);
+    const [blockedCue] = Array.from(blockedSegmentsTrack.activeCues || []);
     return blockedCue;
   }