shaka-player 4.3.10 → 4.4.0

package/ui/pip_button.js

@@ -36,6 +36,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     /** @private {HTMLMediaElement} */
     this.localVideo_ = this.controls.getLocalVideo();
 
+    /** @private {HTMLElement } */
+    this.videoContainer_ = this.controls.getVideoContainer();
+
     const LocIds = shaka.ui.Locales.Ids;
     /** @private {!HTMLButtonElement} */
     this.pipButton_ = shaka.util.Dom.createButton();
@@ -111,8 +114,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
    * @private
    */
   isPipAllowed_() {
-    return document.pictureInPictureEnabled &&
-        !this.video.disablePictureInPicture;
+    return ('documentPictureInPicture' in window) ||
+      (document.pictureInPictureEnabled && !this.video.disablePictureInPicture);
   }
 
 
@@ -122,6 +125,10 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
    */
   async onPipClick_() {
     try {
+      if ('documentPictureInPicture' in window) {
+        await this.toggleDocumentPictureInPicture_();
+        return;
+      }
       if (!document.pictureInPictureElement) {
         // If you were fullscreen, leave fullscreen first.
         if (document.fullscreenElement) {
@@ -137,6 +144,80 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     }
   }
 
+  /**
+   * The Document Picture-in-Picture API makes it possible to open an
+   * always-on-top window that can be populated with arbitrary HTML content.
+   * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
+   * @private
+   */
+  async toggleDocumentPictureInPicture_() {
+    // Close Picture-in-Picture window if any.
+    if (window.documentPictureInPicture.window) {
+      window.documentPictureInPicture.window.close();
+      this.onLeavePictureInPicture_();
+      return;
+    }
+
+    // Open a Picture-in-Picture window.
+    const pipPlayer = this.videoContainer_;
+    const rectPipPlayer = pipPlayer.getBoundingClientRect();
+    const pipWindow = await window.documentPictureInPicture.requestWindow({
+      width: rectPipPlayer.width,
+      height: rectPipPlayer.height,
+    });
+
+    // Copy style sheets to the Picture-in-Picture window.
+    this.copyStyleSheetsToWindow_(pipWindow);
+
+    // Add placeholder for the player.
+    const parentPlayer = pipPlayer.parentNode || document.body;
+    const placeholder = this.videoContainer_.cloneNode(true);
+    placeholder.style.visibility = 'hidden';
+    placeholder.style.height = getComputedStyle(pipPlayer).height;
+    parentPlayer.appendChild(placeholder);
+
+    // Make sure player fits in the Picture-in-Picture window.
+    const styles = document.createElement('style');
+    styles.append(`[data-shaka-player-container] {
+      width: 100% !important; max-height: 100%}`);
+    pipWindow.document.head.append(styles);
+
+    // Move player to the Picture-in-Picture window.
+    pipWindow.document.body.append(pipPlayer);
+    this.onEnterPictureInPicture_();
+
+    // Listen for the PiP closing event to move the player back.
+    this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
+      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
+    });
+  }
+
+  /** @private */
+  copyStyleSheetsToWindow_(win) {
+    const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
+    const allCSS = [...styleSheets]
+        .map((sheet) => {
+          try {
+            return [...sheet.cssRules].map((rule) => rule.cssText).join('');
+          } catch (e) {
+            const link = /** @type {!HTMLLinkElement} */(
+              document.createElement('link'));
+
+            link.rel = 'stylesheet';
+            link.type = sheet.type;
+            link.media = sheet.media;
+            link.href = sheet.href;
+            win.document.head.appendChild(link);
+          }
+          return '';
+        })
+        .filter(Boolean)
+        .join('\n');
+    const style = document.createElement('style');
+
+    style.textContent = allCSS;
+    win.document.head.appendChild(style);
+  }
 
   /** @private */
   onEnterPictureInPicture_() {

package/ui/range_element.js

@@ -104,6 +104,14 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
       }
     });
 
+    this.eventManager.listen(this.bar, 'touchcancel', (e) => {
+      if (this.isChanging_) {
+        this.isChanging_ = false;
+        this.setBarValueForTouch_(e);
+        this.onChangeEnd();
+      }
+    });
+
     this.eventManager.listen(this.bar, 'mouseup', () => {
       if (this.isChanging_) {
         this.isChanging_ = false;
@@ -111,6 +119,13 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
       }
     });
 
+    this.eventManager.listen(this.bar, 'blur', () => {
+      if (this.isChanging_) {
+        this.isChanging_ = false;
+        this.onChangeEnd();
+      }
+    });
+
     this.eventManager.listen(this.bar, 'contextmenu', (e) => {
       e.preventDefault();
       e.stopPropagation();

package/ui/resolution_selection.js

@@ -132,8 +132,15 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           () => this.onTrackSelected_(track));
 
       const span = shaka.util.Dom.createHTMLElement('span');
-      span.textContent = this.player.isAudioOnly() ?
-          Math.round(track.bandwidth / 1000) + ' kbits/s' : track.height + 'p';
+      if (this.player.isAudioOnly()) {
+        span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
+      } else {
+        if (track.hdr == 'PQ' || track.hdr == 'HLG') {
+          span.textContent = track.height + 'p (HDR)';
+        } else {
+          span.textContent = track.height + 'p';
+        }
+      }
       button.appendChild(span);
 
       if (!abrEnabled && track == selectedTrack) {

package/ui/seek_bar.js

@@ -89,6 +89,41 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
      */
     this.wasPlaying_ = false;
 
+
+    /** @private {!HTMLElement} */
+    this.thumbnailContainer_ = shaka.util.Dom.createHTMLElement('div');
+    this.thumbnailContainer_.id = 'shaka-player-ui-thumbnail-container';
+
+    /** @private {!HTMLImageElement} */
+    this.thumbnailImage_ = /** @type {!HTMLImageElement} */ (
+      shaka.util.Dom.createHTMLElement('img'));
+    this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
+    this.thumbnailImage_.draggable = false;
+
+    /** @private {!HTMLElement} */
+    this.thumbnailTime_ = shaka.util.Dom.createHTMLElement('div');
+    this.thumbnailTime_.id = 'shaka-player-ui-thumbnail-time';
+
+    this.thumbnailContainer_.appendChild(this.thumbnailImage_);
+    this.thumbnailContainer_.appendChild(this.thumbnailTime_);
+    this.container.appendChild(this.thumbnailContainer_);
+
+    /**
+     * True if the bar is moving due to touchscreen or keyboard events.
+     *
+     * @private {boolean}
+     */
+    this.isMoving_ = false;
+
+    /**
+     * The timer is activated to hide the thumbnail.
+     *
+     * @private {shaka.util.Timer}
+     */
+    this.hideThumbnailTimer_ = new shaka.util.Timer(() => {
+      this.hideThumbnail_();
+    });
+
     /** @private {!Array.<!shaka.extern.AdCuePoint>} */
     this.adCuePoints_ = [];
 
@@ -126,6 +161,29 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
           this.onAdCuePointsChanged_();
         });
 
+    this.eventManager.listen(this.bar, 'mousemove', (event) => {
+      if (!this.player.getImageTracks().length) {
+        this.hideThumbnail_();
+        return;
+      }
+      const rect = this.bar.getBoundingClientRect();
+      const min = parseFloat(this.bar.min);
+      const max = parseFloat(this.bar.max);
+      // Pixels from the left of the range element
+      const mousePosition = event.clientX - rect.left;
+      // Pixels per unit value of the range element.
+      const scale = (max - min) / rect.width;
+      // Mouse position in units, which may be outside the allowed range.
+      const value = Math.round(min + scale * mousePosition);
+      // Show Thumbnail
+      this.showThumbnail_(mousePosition, value);
+    });
+
+    this.eventManager.listen(this.container, 'mouseleave', () => {
+      this.hideThumbnailTimer_.stop();
+      this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
+    });
+
     // Initialize seek state and label.
     this.setValue(this.video.currentTime);
     this.update();
@@ -159,6 +217,8 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     this.wasPlaying_ = !this.video.paused;
     this.controls.setSeeking(true);
     this.video.pause();
+    this.hideThumbnailTimer_.stop();
+    this.isMoving_ = true;
   }
 
   /**
@@ -186,6 +246,18 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     // Calling |start| on an already pending timer will cancel the old request
     // and start the new one.
     this.seekTimer_.tickAfter(/* seconds= */ 0.125);
+
+    if (this.player.getImageTracks().length) {
+      const min = parseFloat(this.bar.min);
+      const max = parseFloat(this.bar.max);
+      const rect = this.bar.getBoundingClientRect();
+      const value = Math.round(this.getValue());
+      const scale = (max - min) / rect.width;
+      const position = (value - min) / scale;
+      this.showThumbnail_(position, value);
+    } else {
+      this.hideThumbnail_();
+    }
   }
 
   /**
@@ -203,6 +275,12 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     if (this.wasPlaying_) {
       this.video.play();
     }
+
+    if (this.isMoving_) {
+      this.isMoving_ = false;
+      this.hideThumbnailTimer_.stop();
+      this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
+    }
   }
 
   /**
@@ -382,6 +460,151 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
   updateAriaLabel_() {
     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
   }
+
+
+  /**
+   * @private
+   */
+  async showThumbnail_(pixelPosition, value) {
+    const thumbnailTrack = this.getThumbnailTrack_();
+    if (!thumbnailTrack) {
+      this.hideThumbnail_();
+      return;
+    }
+    if (value < 0) {
+      value = 0;
+    }
+    const seekRange = this.player.seekRange();
+    const playerValue = Math.max(Math.ceil(seekRange.start),
+        Math.min(Math.floor(seekRange.end), value));
+    const thumbnail =
+        await this.player.getThumbnails(thumbnailTrack.id, playerValue);
+    if (!thumbnail || !thumbnail.uris.length) {
+      this.hideThumbnail_();
+      return;
+    }
+    if (this.player.isLive()) {
+      const totalSeconds = seekRange.end - value;
+      if (totalSeconds < 1) {
+        this.thumbnailTime_.textContent =
+            this.localization.resolve(shaka.ui.Locales.Ids.LIVE);
+      } else {
+        this.thumbnailTime_.textContent =
+            '-' + this.timeFormatter_(totalSeconds);
+      }
+    } else {
+      this.thumbnailTime_.textContent = this.timeFormatter_(value);
+    }
+    const offsetTop = -10;
+    const width = this.thumbnailContainer_.clientWidth;
+    let height = Math.floor(width * 9 / 16);
+    this.thumbnailContainer_.style.height = height + 'px';
+    this.thumbnailContainer_.style.top = -(height - offsetTop) + 'px';
+    const leftPosition = Math.min(this.bar.offsetWidth - width,
+        Math.max(0, pixelPosition - (width / 2)));
+    this.thumbnailContainer_.style.left = leftPosition + 'px';
+    this.thumbnailContainer_.style.visibility = 'visible';
+    const uri = thumbnail.uris[0].split('#xywh=')[0];
+    if (uri !== this.thumbnailImage_.src) {
+      try {
+        this.thumbnailContainer_.removeChild(this.thumbnailImage_);
+      } catch (e) {
+        // The image is not a child
+      }
+      this.thumbnailImage_ = /** @type {!HTMLImageElement} */ (
+        shaka.util.Dom.createHTMLElement('img'));
+      this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
+      this.thumbnailImage_.draggable = false;
+      this.thumbnailImage_.src = uri;
+      this.thumbnailContainer_.insertBefore(this.thumbnailImage_,
+          this.thumbnailContainer_.firstChild);
+    }
+    const scale = width / thumbnail.width;
+    if (thumbnail.imageHeight) {
+      this.thumbnailImage_.height = thumbnail.imageHeight;
+    } else if (!thumbnail.sprite) {
+      this.thumbnailImage_.style.height = '100%';
+      this.thumbnailImage_.style.objectFit = 'contain';
+    }
+    if (thumbnail.imageWidth) {
+      this.thumbnailImage_.width = thumbnail.imageWidth;
+    } else if (!thumbnail.sprite) {
+      this.thumbnailImage_.style.width = '100%';
+      this.thumbnailImage_.style.objectFit = 'contain';
+    }
+    this.thumbnailImage_.style.left = '-' + scale * thumbnail.positionX + 'px';
+    this.thumbnailImage_.style.top = '-' + scale * thumbnail.positionY + 'px';
+    this.thumbnailImage_.style.transform = 'scale(' + scale + ')';
+    this.thumbnailImage_.style.transformOrigin = 'left top';
+    // Update container height and top
+    height = Math.floor(width * thumbnail.height / thumbnail.width);
+    this.thumbnailContainer_.style.height = height + 'px';
+    this.thumbnailContainer_.style.top = -(height - offsetTop) + 'px';
+  }
+
+
+  /**
+   * @return {?shaka.extern.Track} The thumbnail track.
+   * @private
+   */
+  getThumbnailTrack_() {
+    const imageTracks = this.player.getImageTracks();
+    if (!imageTracks.length) {
+      return null;
+    }
+    const mimeTypesPreference = [
+      'image/avif',
+      'image/webp',
+      'image/jpeg',
+      'image/png',
+      'image/svg+xml',
+    ];
+    for (const mimeType of mimeTypesPreference) {
+      const estimatedBandwidth = this.player.getStats().estimatedBandwidth;
+      const bestOptions = imageTracks.filter((track) => {
+        return track.mimeType.toLowerCase() === mimeType &&
+            track.bandwidth < estimatedBandwidth * 0.01;
+      }).sort((a, b) => {
+        return b.bandwidth - a.bandwidth;
+      });
+      if (bestOptions && bestOptions.length) {
+        return bestOptions[0];
+      }
+    }
+    return imageTracks[0];
+  }
+
+
+  /**
+   * @private
+   */
+  hideThumbnail_() {
+    this.thumbnailContainer_.style.visibility = 'hidden';
+    this.thumbnailTime_.textContent = '';
+  }
+
+
+  /**
+   * @param {number} totalSeconds
+   * @private
+   */
+  timeFormatter_(totalSeconds) {
+    const secondsNumber = Math.round(totalSeconds);
+    const hours = Math.floor(secondsNumber / 3600);
+    let minutes = Math.floor((secondsNumber - (hours * 3600)) / 60);
+    let seconds = secondsNumber - (hours * 3600) - (minutes * 60);
+    if (seconds < 10) {
+      seconds = '0' + seconds;
+    }
+    if (hours > 0) {
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      return hours + ':' + minutes + ':' + seconds;
+    } else {
+      return minutes + ':' + seconds;
+    }
+  }
 };
 
 

package/ui/ui.js

@@ -34,6 +34,9 @@ shaka.ui.Overlay = class {
     /** @private {shaka.Player} */
     this.player_ = player;
 
+    /** @private {HTMLElement} */
+    this.videoContainer_ = videoContainer;
+
     /** @private {!shaka.extern.UIConfiguration} */
     this.config_ = this.defaultConfig_();
 
@@ -240,6 +243,8 @@ shaka.ui.Overlay = class {
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
       keyboardSeekDistance: 5,
+      keyboardLargeSeekDistance: 60,
+      fullScreenElement: this.videoContainer_,
     };
 
     // Check AirPlay support

package/lib/cea/i_caption_decoder.js

@@ -1,51 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-goog.provide('shaka.cea.ICaptionDecoder');
-
-goog.require('shaka.text.Cue');
-
-
-/**
- * Interface for decoding inband closed captions from packets.
- * @interface
- */
-shaka.cea.ICaptionDecoder = class {
-  /**
-   * Extracts packets and prepares them for decoding. In a given media fragment,
-   * all the caption packets found in its SEI messages should be extracted by
-   * successive calls to extract(), followed by a single call to decode().
-   *
-   * @param {!Uint8Array} userDataSeiMessage
-   * This is a User Data registered by Rec.ITU-T T.35 SEI message.
-   * It is described in sections D.1.6 and D.2.6 of Rec. ITU-T H.264 (06/2019).
-   * @param {number} pts PTS when this packet was received, in seconds.
-   */
-  extract(userDataSeiMessage, pts) {}
-
-  /**
-   * Decodes all currently extracted packets and then clears them.
-   * This should be called once for a set of extracts (see comment on extract).
-   * @return {!Array.<!shaka.cea.ICaptionDecoder.ClosedCaption>}
-   */
-  decode() {}
-
-  /**
-   * Clears the decoder state completely.
-   * Should be used when an action renders the decoder state invalid,
-   * e.g. unbuffered seeks.
-   */
-  clear() {}
-};
-
-/**
- * Parsed Cue.
- * @typedef {{
- *   cue: !shaka.text.Cue,
- *   stream: string
- * }}
- */
-shaka.cea.ICaptionDecoder.ClosedCaption;

package/lib/cea/i_cea_parser.js

@@ -1,68 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-goog.provide('shaka.cea.ICeaParser');
-
-/**
- * Interface for parsing inband closed caption data from MP4 streams.
- * @interface
- */
-shaka.cea.ICeaParser = class {
-  /**
-   * Initializes the parser with init segment data.
-   * @param {!BufferSource} initSegment init segment to parse.
-   */
-  init(initSegment) {}
-
-  /**
-   * Parses the stream and extracts closed captions packets.
-   * @param {!BufferSource} mediaSegment media segment to parse.
-   * @return {!Array<!shaka.cea.ICeaParser.CaptionPacket>}
-   */
-  parse(mediaSegment) {}
-};
-
-/**
- * NALU type for Supplemental Enhancement Information (SEI) for H.264.
- * @const {number}
- */
-shaka.cea.ICeaParser.H264_NALU_TYPE_SEI = 0x06;
-
-/**
- * NALU type for Supplemental Enhancement Information (SEI) for H.265.
- * @const {number}
- */
-shaka.cea.ICeaParser.H265_PREFIX_NALU_TYPE_SEI = 0x27;
-
-/**
- * NALU type for Supplemental Enhancement Information (SEI) for H.265.
- * @const {number}
- */
-shaka.cea.ICeaParser.H265_SUFFIX_NALU_TYPE_SEI = 0x28;
-
-/**
- * Default timescale value for a track.
- */
-shaka.cea.ICeaParser.DEFAULT_TIMESCALE_VALUE = 90000;
-
-/**
- * @typedef {{
- *   packet: !Uint8Array,
- *   pts: number
- * }}
- *
- * @description Parsed Caption Packet.
- * @property {!Uint8Array} packet
- * Caption packet. More specifically, it contains a "User data
- * registered by Recommendation ITU-T T.35 SEI message", from section D.1.6
- * and section D.2.6 of Rec. ITU-T H.264 (06/2019).
- * @property {number} pts
- * The presentation timestamp (pts) at which the ITU-T T.35 data shows up.
- * in seconds.
- * @exportDoc
- */
-shaka.cea.ICeaParser.CaptionPacket;
-