@srgssr/pillarbox-web 1.35.1 → 1.36.1

package/dist/pillarbox.umd.js

@@ -93,7 +93,7 @@
     return "symbol" == typeof i ? i : i + "";
   }
 
-  const version$8 = "1.35.0";
+  const version$8 = "1.36.0";
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -28404,7 +28404,7 @@
    *
    * @extends Button
    */
-  class PictureInPictureToggle extends Button {
+  let PictureInPictureToggle$1 = class PictureInPictureToggle extends Button {
     /**
      * Creates an instance of this class.
      *
@@ -28524,7 +28524,7 @@
       }
       super.show();
     }
-  }
+  };
 
   /**
    * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.
@@ -28532,8 +28532,8 @@
    * @type {string}
    * @protected
    */
-  PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';
-  Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
+  PictureInPictureToggle$1.prototype.controlText_ = 'Picture-in-Picture';
+  Component$1.registerComponent('PictureInPictureToggle', PictureInPictureToggle$1);
 
   /**
    * @file fullscreen-toggle.js
@@ -71215,6 +71215,79 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       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.
@@ -71479,6 +71552,45 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
   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.
    *
@@ -75120,25 +75232,23 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
      */
     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);
     }
 
@@ -75148,12 +75258,12 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
      * @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,
@@ -75255,7 +75365,7 @@ ${segmentInfoString(segmentInfo)}`); // If there's an init segment associated wi
       if (!blockedSegmentsTrack) return;
 
       /** @type {VTTCue} */
-      const [blockedCue] = Array.from(blockedSegmentsTrack.activeCues);
+      const [blockedCue] = Array.from(blockedSegmentsTrack.activeCues || []);
       return blockedCue;
     }