shaka-player 4.7.0 → 4.7.2

package/externs/isoboxer.js

@@ -13,27 +13,35 @@
 /**
  * @typedef {{
  *   Utils: !ISOBoxerUtils,
- *   parseBuffer: function(!(ArrayBuffer|ArrayBufferView)):!ISOBoxer,
+ *   parseBuffer: function(!(ArrayBuffer|ArrayBufferView)):!ISOFile,
  *   createBox: function(string, !ISOBoxer, boolean=):!ISOBoxer,
  *   createFullBox: function(string, !ISOBoxer, ?ISOBoxer=):!ISOBoxer,
  *   addBoxProcessor: function(string, function()):!ISOBoxer,
- *   createFile: function():!ISOBoxer,
- *   write: function():!ArrayBuffer,
- *   fetch: function(!ArrayBuffer):!ISOBoxer
+ *   createFile: function():!ISOFile,
  * }}
  * @property {!ISOBoxerUtils} Utils
- * @property {function(!(ArrayBuffer|ArrayBufferView)):!ISOBoxer} parseBuffer
+ * @property {function(!(ArrayBuffer|ArrayBufferView)):!ISOFile} parseBuffer
  * @property {function(string, !ISOBoxer, boolean=):!ISOBoxer} createBox
  * @property {function(string, !ISOBoxer, ?ISOBoxer=):!ISOBoxer} createFullBox
  * @property {function(string, function()):!ISOBoxer} addBoxProcessor
- * @property {function():!ISOBoxer} createFile
- * @property {function():!ArrayBuffer} write
- * @property {function(!ArrayBuffer):!ISOBoxer} fetch
+ * @property {function():!ISOFile} createFile
  * @const
  */
 var ISOBoxer;
 
 
+/**
+ * @typedef {{
+ *   write: function():!ArrayBuffer,
+ *   fetch: function(string):!ISOBox
+ * }}
+ * @property {function():!ArrayBuffer} write
+ * @property {function(string):!ISOBox} fetch
+ * @const
+ */
+var ISOFile;
+
+
 /**
  * @typedef {{
  *   appendBox: function(!ISOBoxer, !ISOBoxer):!ISOBox
@@ -91,7 +99,7 @@ var ISOBoxerUtils;
  *   graphicsmode: number,
  *   opcolor: Array.<number>,
  *   balance: number,
- *   entries: Array.<!ISOBox>,
+ *   entries: Array.<!ISOEntry>,
  *   location: string,
  *   data_reference_index: number,
  *   pre_defined1: number,
@@ -119,7 +127,7 @@ var ISOBoxerUtils;
  *   default_sample_size: number,
  *   default_sample_flags: number,
  *   baseMediaDecodeTime: number,
- *   usertype: ?string,
+ *   usertype: (string|null|undefined),
  *   offset: Array.<number>,
  *   sample_info_size: Array.<number>,
  *   data_offset: number
@@ -170,7 +178,7 @@ var ISOBoxerUtils;
  * @property {number} graphicsmode
  * @property {Array.<number>} opcolor
  * @property {number} balance
- * @property {Array.<!ISOBox} entries
+ * @property {Array.<!ISOEntry>} entries
  * @property {string} location
  * @property {number} data_reference_index
  * @property {number} pre_defined1
@@ -198,7 +206,7 @@ var ISOBoxerUtils;
  * @property {number} default_sample_size
  * @property {number} default_sample_flags
  * @property {number} baseMediaDecodeTime
- * @property {?string} usertype
+ * @property {string|null|undefined} usertype
  * @property {Array.<number} offset
  * @property {Array.<number} sample_info_size
  * @property {number} data_offset

package/externs/shaka/codecs.js

@@ -4,6 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+/**
+ * @externs
+ */
+
 /**
  * @typedef {{
  *   data: !Uint8Array,

package/lib/ads/media_tailor_ad_manager.js

@@ -576,8 +576,9 @@ shaka.ads.MediaTailorAdManager = class {
       if (!app.data.source.length) {
         continue;
       }
-      const imageElement = document.createElement('img');
-      imageElement.setAttribute('src', app.data.source[0].url);
+      const imageElement = /** @type {!HTMLImageElement} */ (
+        document.createElement('img'));
+      imageElement.src = app.data.source[0].url;
       imageElement.style.top = (app.placeholder.top || 0) + '%';
       imageElement.style.height = (100 - (app.placeholder.top || 0)) + '%';
       imageElement.style.left = (app.placeholder.left || 0) + '%';

package/lib/dash/dash_parser.js

@@ -136,9 +136,11 @@ shaka.dash.DashParser = class {
       this.contentSteeringManager_.configure(this.config_);
     }
 
-    this.periodCombiner_.setAllowMultiTypeVariants(
-        this.config_.dash.multiTypeVariantsAllowed &&
-        shaka.media.Capabilities.isChangeTypeSupported());
+    if (this.periodCombiner_) {
+      this.periodCombiner_.setAllowMultiTypeVariants(
+          this.config_.dash.multiTypeVariantsAllowed &&
+          shaka.media.Capabilities.isChangeTypeSupported());
+    }
   }
 
   /**

package/lib/hls/hls_parser.js

@@ -295,6 +295,7 @@ shaka.hls.HlsParser = class {
     this.groupIdToStreamInfosMap_.clear();
     this.groupIdToCodecsMap_.clear();
     this.globalVariables_.clear();
+    this.mapTagToInitSegmentRefMap_.clear();
 
     if (this.contentSteeringManager_) {
       this.contentSteeringManager_.destroy();
@@ -905,6 +906,7 @@ shaka.hls.HlsParser = class {
     let initData = null;
     const initSegmentRef = this.getInitSegmentReference_(
         playlist, middleSegment.tags, getUris);
+    this.mapTagToInitSegmentRefMap_.clear();
     if (initSegmentRef) {
       const initSegmentRequest = shaka.net.NetworkingEngine.makeRequest(
           initSegmentRef.getUris(), this.config_.retryParameters);

package/lib/media/media_source_engine.js

@@ -867,7 +867,7 @@ shaka.media.MediaSourceEngine = class {
         const calculatedTimestampOffset = reference.startTime - timestamp;
         const timestampOffsetDifference =
             Math.abs(timestampOffset - calculatedTimestampOffset);
-        if ((timestampOffsetDifference >= 0.1 || seeked || adaptation) &&
+        if ((timestampOffsetDifference >= 0.001 || seeked || adaptation) &&
             (!isChunkedData || calculatedTimestampOffset > 0 ||
             !timestampOffset)) {
           timestampOffset = calculatedTimestampOffset;

package/lib/media/segment_prefetch.js

@@ -165,12 +165,12 @@ shaka.media.SegmentPrefetch = class {
       if (reference instanceof shaka.media.SegmentReference) {
         shaka.log.debug(
             logPrefix,
-            'reused prefetched segment at time:', reference.startTime,
+            'missed segment at time:', reference.startTime,
             'mapSize', this.segmentPrefetchMap_.size);
       } else {
         shaka.log.debug(
             logPrefix,
-            'reused prefetched init segment at time, mapSize',
+            'missed init segment at time, mapSize',
             this.segmentPrefetchMap_.size);
       }
       return null;

package/lib/net/networking_utils.js

@@ -8,6 +8,7 @@ goog.provide('shaka.net.NetworkingUtils');
 
 goog.require('goog.Uri');
 goog.require('shaka.net.NetworkingEngine');
+goog.require('shaka.util.Error');
 
 
 /**
@@ -30,13 +31,21 @@ shaka.net.NetworkingUtils = class {
     const type = shaka.net.NetworkingEngine.RequestType.MANIFEST;
 
     const request = shaka.net.NetworkingEngine.makeRequest([uri], retryParams);
-    request.method = 'HEAD';
 
-    const response = await netEngine.request(type, request).promise;
+    try {
+      request.method = 'HEAD';
+      const response = await netEngine.request(type, request).promise;
+      mimeType = response.headers['content-type'];
+    } catch (error) {
+      if (error && error.code == shaka.util.Error.Code.HTTP_ERROR) {
+        request.method = 'GET';
+        const response = await netEngine.request(type, request).promise;
+        mimeType = response.headers['content-type'];
+      }
+    }
 
     // https://bit.ly/2K9s9kf says this header should always be available,
     // but just to be safe:
-    mimeType = response.headers['content-type'];
     return mimeType ? mimeType.toLowerCase().split(';').shift() : '';
   }
 

package/lib/player.js

@@ -4594,7 +4594,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
       if (this.isLive()) {
         const now = this.getPresentationStartTimeAsDate().valueOf() +
-            this.seekRange().end * 1000;
+            element.currentTime * 1000;
         const latency = (Date.now() - now) / 1000;
         this.stats_.setLiveLatency(latency);
       }
@@ -6865,7 +6865,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @export
  */
 // eslint-disable-next-line no-useless-concat
-shaka.Player.version = 'v4.7.0' + '-uncompiled';  // x-release-please-version
+shaka.Player.version = 'v4.7.2' + '-uncompiled';  // x-release-please-version
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/text/ui_text_displayer.js

@@ -154,6 +154,11 @@ shaka.text.UITextDisplayer = class {
    * @export
    */
   destroy() {
+    // Return resolved promise if destroy() has been called.
+    if (!this.textContainer_) {
+      return Promise.resolve();
+    }
+
     // Remove the text container element from the UI.
     this.videoContainer_.removeChild(this.textContainer_);
     this.textContainer_ = null;
@@ -176,6 +181,8 @@ shaka.text.UITextDisplayer = class {
       this.resizeObserver_.disconnect();
       this.resizeObserver_ = null;
     }
+
+    return Promise.resolve();
   }
 
 

package/lib/transmuxer/mss_transmuxer.js

@@ -253,6 +253,7 @@ shaka.transmuxer.MssTransmuxer = class {
    */
   processMediaSegment_(data, stream, reference) {
     let i;
+    /** @type {!ISOFile} */
     const isoFile = this.isoBoxer_.parseBuffer(data);
     // Update track_Id in tfhd box
     const tfhd = isoFile.fetch('tfhd');
@@ -313,8 +314,8 @@ shaka.transmuxer.MssTransmuxer = class {
             // (subsample_count field size)
             // 6 = 2 (BytesOfClearData field size) + 4
             // (BytesOfEncryptedData field size)
-            saiz.sample_info_size[i] =
-                10 + (6 * sepiff.entry[i].NumberOfEntries);
+            const entry = /** @type {!ISOEntry} */ (sepiff.entry[i]);
+            saiz.sample_info_size[i] = 10 + (6 * entry.NumberOfEntries);
           }
         } else {
           // No sub-sample encryption => set default

package/lib/transmuxer/ts_transmuxer.js

@@ -705,7 +705,7 @@ shaka.transmuxer.TsTransmuxer = class {
     /** @type {?number} */
     let baseMediaDecodeTime = null;
 
-    let nalus = [];
+    const nalus = [];
     const videoData = tsParser.getVideoData();
     if (!videoData.length) {
       throw new shaka.util.Error(
@@ -716,7 +716,7 @@ shaka.transmuxer.TsTransmuxer = class {
     for (let i = 0; i < videoData.length; i++) {
       const pes = videoData[i];
       const dataNalus = pes.nalus;
-      nalus = nalus.concat(dataNalus);
+      nalus.push(...dataNalus);
       const frame = H264.parseFrame(dataNalus);
       if (!frame) {
         continue;
@@ -797,7 +797,7 @@ shaka.transmuxer.TsTransmuxer = class {
     /** @type {?number} */
     let baseMediaDecodeTime = null;
 
-    let nalus = [];
+    const nalus = [];
     const videoData = tsParser.getVideoData();
     if (!videoData.length) {
       throw new shaka.util.Error(
@@ -808,7 +808,7 @@ shaka.transmuxer.TsTransmuxer = class {
     for (let i = 0; i < videoData.length; i++) {
       const pes = videoData[i];
       const dataNalus = pes.nalus;
-      nalus = nalus.concat(dataNalus);
+      nalus.push(...dataNalus);
       const frame = H265.parseFrame(dataNalus);
       if (!frame) {
         continue;

package/lib/util/mp4_generator.js

@@ -47,10 +47,11 @@ shaka.util.Mp4Generator = class {
     goog.asserts.assert(this.streamInfos_.length > 0,
         'StreamInfos must have elements');
     const Mp4Generator = shaka.util.Mp4Generator;
-    let traks = new Uint8Array([]);
+    const trakArrays = [];
     for (const streamInfo of this.streamInfos_) {
-      traks = shaka.util.Uint8ArrayUtils.concat(traks, this.trak_(streamInfo));
+      trakArrays.push(this.trak_(streamInfo));
     }
+    const traks = shaka.util.Uint8ArrayUtils.concat(...trakArrays);
     const firstStreamInfo = this.streamInfos_[0];
     return Mp4Generator.box('moov',
         this.mvhd_(firstStreamInfo),
@@ -693,10 +694,11 @@ shaka.util.Mp4Generator = class {
    */
   mvex_() {
     const Mp4Generator = shaka.util.Mp4Generator;
-    let trexs = new Uint8Array([]);
+    const trexArrays = [];
     for (const streamInfo of this.streamInfos_) {
-      trexs = shaka.util.Uint8ArrayUtils.concat(trexs, this.trex_(streamInfo));
+      trexArrays.push(this.trex_(streamInfo));
     }
+    const trexs = shaka.util.Uint8ArrayUtils.concat(...trexArrays);
     return Mp4Generator.box('mvex', trexs);
   }
 
@@ -730,9 +732,9 @@ shaka.util.Mp4Generator = class {
    * @private
    */
   pssh_(streamInfo) {
-    let boxes = new Uint8Array([]);
+    const initDatas = [];
     if (!streamInfo.encrypted) {
-      return boxes;
+      return new Uint8Array([]);
     }
 
     for (const drmInfo of streamInfo.stream.drmInfos) {
@@ -740,9 +742,10 @@ shaka.util.Mp4Generator = class {
         continue;
       }
       for (const initData of drmInfo.initData) {
-        boxes = shaka.util.Uint8ArrayUtils.concat(boxes, initData.initData);
+        initDatas.push(initData.initData);
       }
     }
+    const boxes = shaka.util.Uint8ArrayUtils.concat(...initDatas);
     return boxes;
   }
 
@@ -845,11 +848,12 @@ shaka.util.Mp4Generator = class {
    * @return {!Uint8Array}
    */
   segmentData() {
-    let result = new Uint8Array([]);
+    const segmentDataArray = [];
     for (const streamInfo of this.streamInfos_) {
-      result = shaka.util.Uint8ArrayUtils.concat(result,
-          this.moof_(streamInfo), this.mdat_(streamInfo));
+      segmentDataArray.push(
+          ...[this.moof_(streamInfo), this.mdat_(streamInfo)]);
     }
+    const result = shaka.util.Uint8ArrayUtils.concat(...segmentDataArray);
     return result;
   }
 

package/lib/util/platform.js

@@ -234,10 +234,12 @@ shaka.util.Platform = class {
     return !!navigator.vendor && navigator.vendor.includes('Apple') &&
         !shaka.util.Platform.isTizen() &&
         !shaka.util.Platform.isEOS() &&
+        !shaka.util.Platform.isAPL() &&
         !shaka.util.Platform.isVirginMedia() &&
         !shaka.util.Platform.isOrange() &&
         !shaka.util.Platform.isPS4() &&
-        !shaka.util.Platform.isAmazonFireTV();
+        !shaka.util.Platform.isAmazonFireTV() &&
+        !shaka.util.Platform.isWPE();
   }
 
   /**
@@ -292,6 +294,14 @@ shaka.util.Platform = class {
     return shaka.util.Platform.userAgentContains_('AFT');
   }
 
+  /**
+   * Check if the current platform is Comcast X1.
+   * @return {boolean}
+   */
+  static isWPE() {
+    return shaka.util.Platform.userAgentContains_('WPE');
+  }
+
   /**
    * Returns a major version number for Safari, or Safari-based iOS browsers.
    *
@@ -348,6 +358,15 @@ shaka.util.Platform = class {
     return shaka.util.Platform.userAgentContains_('PC=EOS');
   }
 
+  /**
+   * Check if the current platform is an APL set-top box.
+   *
+   * @return {boolean}
+   */
+  static isAPL() {
+    return shaka.util.Platform.userAgentContains_('PC=APL');
+  }
+
   /**
    * Guesses if the platform is a mobile one (iOS or Android).
    *

package/lib/util/ts_parser.js

@@ -32,7 +32,7 @@ shaka.util.TsParser = class {
     /** @private {?string} */
     this.videoCodec_ = null;
 
-    /** @private {!Array.<Uint8Array>} */
+    /** @private {!Array.<!Array.<Uint8Array>>} */
     this.videoData_ = [];
 
     /** @private {!Array.<shaka.extern.MPEG_PES>} */
@@ -44,7 +44,7 @@ shaka.util.TsParser = class {
     /** @private {?string} */
     this.audioCodec_ = null;
 
-    /** @private {!Array.<Uint8Array>} */
+    /** @private {!Array.<!Array.<Uint8Array>>} */
     this.audioData_ = [];
 
     /** @private {!Array.<shaka.extern.MPEG_PES>} */
@@ -53,7 +53,7 @@ shaka.util.TsParser = class {
     /** @private {?number} */
     this.id3Pid_ = null;
 
-    /** @private {!Array.<Uint8Array>} */
+    /** @private {!Array.<!Array.<Uint8Array>>} */
     this.id3Data_ = [];
   }
 
@@ -79,7 +79,6 @@ shaka.util.TsParser = class {
    */
   parse(data) {
     const packetLength = shaka.util.TsParser.PacketLength_;
-    const Uint8ArrayUtils = shaka.util.Uint8ArrayUtils;
 
     // A TS fragment should contain at least 3 TS packets, a PAT, a PMT, and
     // one PID.
@@ -162,12 +161,11 @@ shaka.util.TsParser = class {
           case this.videoPid_: {
             const videoData = data.subarray(offset, start + packetLength);
             if (payloadUnitStartIndicator) {
-              this.videoData_.push(videoData);
+              this.videoData_.push([videoData]);
             } else if (this.videoData_.length) {
               const prevVideoData = this.videoData_[this.videoData_.length - 1];
               if (prevVideoData) {
-                this.videoData_[this.videoData_.length - 1] =
-                    Uint8ArrayUtils.concat(prevVideoData, videoData);
+                this.videoData_[this.videoData_.length - 1].push(videoData);
               }
             }
             break;
@@ -175,12 +173,11 @@ shaka.util.TsParser = class {
           case this.audioPid_: {
             const audioData = data.subarray(offset, start + packetLength);
             if (payloadUnitStartIndicator) {
-              this.audioData_.push(audioData);
+              this.audioData_.push([audioData]);
             } else if (this.audioData_.length) {
               const prevAudioData = this.audioData_[this.audioData_.length - 1];
               if (prevAudioData) {
-                this.audioData_[this.audioData_.length - 1] =
-                    Uint8ArrayUtils.concat(prevAudioData, audioData);
+                this.audioData_[this.audioData_.length - 1].push(audioData);
               }
             }
             break;
@@ -188,12 +185,11 @@ shaka.util.TsParser = class {
           case this.id3Pid_: {
             const id3Data = data.subarray(offset, start + packetLength);
             if (payloadUnitStartIndicator) {
-              this.id3Data_.push(id3Data);
+              this.id3Data_.push([id3Data]);
             } else if (this.id3Data_.length) {
               const prevId3Data = this.id3Data_[this.id3Data_.length - 1];
               if (prevId3Data) {
-                this.id3Data_[this.id3Data_.length - 1] =
-                    Uint8ArrayUtils.concat(prevId3Data, id3Data);
+                this.id3Data_[this.id3Data_.length - 1].push(id3Data);
               }
             }
             break;
@@ -588,7 +584,8 @@ shaka.util.TsParser = class {
   getMetadata() {
     const timescale = shaka.util.TsParser.Timescale;
     const metadata = [];
-    for (const id3Data of this.id3Data_) {
+    for (const id3DataArray of this.id3Data_) {
+      const id3Data = shaka.util.Uint8ArrayUtils.concat(...id3DataArray);
       const pes = this.parsePES_(id3Data);
       if (pes) {
         metadata.push({
@@ -612,11 +609,14 @@ shaka.util.TsParser = class {
   getAudioData() {
     if (this.audioData_.length && !this.audioPes_.length) {
       let sort = false;
-      for (const audioData of this.audioData_) {
+      for (const audioDataArray of this.audioData_) {
+        const audioData = shaka.util.Uint8ArrayUtils.concat(...audioDataArray);
         const pes = this.parsePES_(audioData);
-        if (pes && pes.pts != null && pes.dts != null) {
-          if (this.audioPes_.length &&
-              pes.dts < (this.audioPes_[this.audioPes_.length - 1].dts || 0)) {
+        let previousPes = this.audioPes_.length ?
+            this.audioPes_[this.audioPes_.length - 1] : null;
+        if (pes && pes.pts != null && pes.dts != null && (!previousPes ||
+            (previousPes.pts != pes.pts && previousPes.dts != pes.dts))) {
+          if (this.audioPes_.length && pes.dts < (previousPes.dts || 0)) {
             sort = true;
           }
           this.audioPes_.push(pes);
@@ -625,7 +625,7 @@ shaka.util.TsParser = class {
           if (!data) {
             continue;
           }
-          const previousPes = this.audioPes_.pop();
+          previousPes = this.audioPes_.pop();
           previousPes.data =
               shaka.util.Uint8ArrayUtils.concat(previousPes.data, data);
           this.audioPes_.push(previousPes);
@@ -652,11 +652,14 @@ shaka.util.TsParser = class {
   getVideoData(naluProcessing = true) {
     if (this.videoData_.length && !this.videoPes_.length) {
       let sort = false;
-      for (const videoData of this.videoData_) {
+      for (const videoDataArray of this.videoData_) {
+        const videoData = shaka.util.Uint8ArrayUtils.concat(...videoDataArray);
         const pes = this.parsePES_(videoData);
-        if (pes && pes.pts != null && pes.dts != null) {
-          if (this.videoPes_.length &&
-              pes.dts < (this.videoPes_[this.videoPes_.length - 1].dts || 0)) {
+        let previousPes = this.videoPes_.length ?
+            this.videoPes_[this.videoPes_.length - 1] : null;
+        if (pes && pes.pts != null && pes.dts != null && (!previousPes ||
+            (previousPes.pts != pes.pts && previousPes.dts != pes.dts))) {
+          if (this.videoPes_.length && pes.dts < (previousPes.dts || 0)) {
             sort = true;
           }
           this.videoPes_.push(pes);
@@ -665,7 +668,7 @@ shaka.util.TsParser = class {
           if (!data) {
             continue;
           }
-          const previousPes = this.videoPes_.pop();
+          previousPes = this.videoPes_.pop();
           previousPes.data =
               shaka.util.Uint8ArrayUtils.concat(previousPes.data, data);
           this.videoPes_.push(previousPes);

package/lib/util/uint8array_utils.js

@@ -107,21 +107,26 @@ shaka.util.Uint8ArrayUtils = class {
    * @export
    */
   static concat(...varArgs) {
+    const BufferUtils = shaka.util.BufferUtils;
     let totalLength = 0;
-    for (const arr of varArgs) {
-      totalLength += arr.byteLength;
+    for (let i = 0; i < varArgs.length; ++i) {
+      const value = varArgs[i];
+      totalLength += value.byteLength;
     }
 
     const result = new Uint8Array(totalLength);
     let offset = 0;
-    for (const arr of varArgs) {
-      if (arr instanceof Uint8Array) {
-        result.set(arr, offset);
+
+    for (let i = 0; i < varArgs.length; ++i) {
+      const value = varArgs[i];
+      if (value instanceof Uint8Array) {
+        result.set(value, offset);
       } else {
-        result.set(shaka.util.BufferUtils.toUint8(arr), offset);
+        result.set(BufferUtils.toUint8(value), offset);
       }
-      offset += arr.byteLength;
+      offset += value.byteLength;
     }
+
     return result;
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "homepage": "https://github.com/shaka-project/shaka-player",
   "author": "Google",
   "maintainers": [

package/ui/controls.js

@@ -652,7 +652,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
   isPiPAllowed() {
     if ('documentPictureInPicture' in window &&
         this.config_.preferDocumentPictureInPicture) {
-      return true;
+      const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+      return !video.disablePictureInPicture;
     }
     if (document.pictureInPictureEnabled) {
       const video = /** @type {HTMLVideoElement} */(this.localVideo_);

package/ui/volume_bar.js

@@ -32,6 +32,10 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
     /** @private {!shaka.extern.UIConfiguration} */
     this.config_ = this.controls.getConfig();
 
+    // We use a range of 100 to avoid problems with Firefox.
+    // See https://github.com/shaka-project/shaka-player/issues/3987
+    this.setRange(0, 100);
+
     this.eventManager.listen(this.video,
         'volumechange',
         () => this.onPresentationVolumeChange_());
@@ -74,9 +78,9 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
    */
   onChange() {
     if (this.ad && this.ad.isLinear()) {
-      this.ad.setVolume(this.getValue());
+      this.ad.setVolume(this.getValue() / 100);
     } else {
-      this.video.volume = this.getValue();
+      this.video.volume = this.getValue() / 100;
       if (this.video.volume == 0) {
         this.video.muted = true;
       } else {
@@ -90,7 +94,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
     if (this.video.muted) {
       this.setValue(0);
     } else {
-      this.setValue(this.video.volume);
+      this.setValue(this.video.volume * 100);
     }
 
     this.updateColors_();
@@ -102,7 +106,7 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
         'This.ad should exist at this point!');
 
     const volume = this.ad.getVolume();
-    this.setValue(volume);
+    this.setValue(volume * 100);
     this.updateColors_();
   }
 
@@ -110,8 +114,8 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
   updateColors_() {
     const colors = this.config_.volumeBarColors;
     const gradient = ['to right'];
-    gradient.push(colors.level + (this.getValue() * 100) + '%');
-    gradient.push(colors.base + (this.getValue() * 100) + '%');
+    gradient.push(colors.level + this.getValue() + '%');
+    gradient.push(colors.base + this.getValue() + '%');
     gradient.push(colors.base + '100%');
 
     this.container.style.background =