shaka-player 4.6.4 → 4.7.0

package/lib/util/stream_utils.js

@@ -15,6 +15,7 @@ goog.require('shaka.util.LanguageUtils');
 goog.require('shaka.util.ManifestParserUtils');
 goog.require('shaka.util.MimeUtils');
 goog.require('shaka.util.MultiMap');
+goog.require('shaka.util.ObjectUtils');
 goog.require('shaka.util.Platform');
 goog.requireType('shaka.media.DrmEngine');
 
@@ -508,22 +509,90 @@ shaka.util.StreamUtils = class {
     const cacheKey =
         shaka.util.StreamUtils.alphabeticalKeyOrderStringify_(decodingConfig);
 
-    try {
-      const cache = shaka.util.StreamUtils.decodingConfigCache_;
-      if (cache[cacheKey]) {
-        shaka.log.v2('Using cached results of mediaCapabilities.decodingInfo',
-            'for key', cacheKey);
-        variant.decodingInfos.push(cache[cacheKey]);
-      } else {
-        const result =
-            await navigator.mediaCapabilities.decodingInfo(decodingConfig);
-        cache[cacheKey] = result;
-        variant.decodingInfos.push(result);
+    const cache = shaka.util.StreamUtils.decodingConfigCache_;
+    if (cache[cacheKey]) {
+      shaka.log.v2('Using cached results of mediaCapabilities.decodingInfo',
+          'for key', cacheKey);
+      variant.decodingInfos.push(cache[cacheKey]);
+    } else {
+      // Do a final pass-over of the decoding config: if a given stream has
+      // multiple codecs, that suggests that it switches between those codecs
+      // at points of the go-through.
+      // mediaCapabilities by itself will report "not supported" when you
+      // put in multiple different codecs, so each has to be checked
+      // individually. So check each and take the worst result, to determine
+      // overall variant compatibility.
+      const results = await shaka.util.StreamUtils
+          .checkEachDecodingConfigCombination_(decodingConfig);
+      if (results && results.length) {
+        /** @type {?MediaCapabilitiesDecodingInfo} */
+        let overallResult = null;
+        for (const result of results) {
+          if (!overallResult) {
+            overallResult = result;
+          } else {
+            overallResult.supported =
+                overallResult.supported && result.supported;
+            overallResult.powerEfficient =
+                overallResult.powerEfficient && result.powerEfficient;
+            overallResult.smooth = overallResult.smooth && result.smooth;
+            if (!result.keySystemAccess) {
+              overallResult.keySystemAccess = null;
+            }
+          }
+        }
+        if (overallResult) {
+          cache[cacheKey] = overallResult;
+          variant.decodingInfos.push(overallResult);
+        }
       }
-    } catch (e) {
+    }
+  }
+
+  /**
+   * @param {!MediaDecodingConfiguration} decodingConfig
+   * @return {!Promise.<?Array.<!MediaCapabilitiesDecodingInfo>>}
+   * @private
+   */
+  static checkEachDecodingConfigCombination_(decodingConfig) {
+    let videoCodecs = [''];
+    if (decodingConfig.video) {
+      videoCodecs = shaka.util.MimeUtils.getCodecs(
+          decodingConfig.video.contentType).split(',');
+    }
+    let audioCodecs = [''];
+    if (decodingConfig.audio) {
+      audioCodecs = shaka.util.MimeUtils.getCodecs(
+          decodingConfig.audio.contentType).split(',');
+    }
+    const promises = [];
+    for (const videoCodec of videoCodecs) {
+      for (const audioCodec of audioCodecs) {
+        const copy = shaka.util.ObjectUtils.cloneObject(decodingConfig);
+        if (decodingConfig.video) {
+          const mimeType = shaka.util.MimeUtils.getBasicType(
+              copy.video.contentType);
+          copy.video.contentType = shaka.util.MimeUtils.getFullType(
+              mimeType, videoCodec);
+        }
+        if (decodingConfig.audio) {
+          const mimeType = shaka.util.MimeUtils.getBasicType(
+              copy.audio.contentType);
+          copy.audio.contentType = shaka.util.MimeUtils.getFullType(
+              mimeType, audioCodec);
+        }
+        promises.push(new Promise((resolve, reject) => {
+          navigator.mediaCapabilities.decodingInfo(copy).then((res) => {
+            resolve(res);
+          }).catch(reject);
+        }));
+      }
+    }
+    return Promise.all(promises).catch((e) => {
       shaka.log.info('MediaCapabilities.decodingInfo() failed.',
           JSON.stringify(decodingConfig), e);
-    }
+      return null;
+    });
   }
 
 

package/package.json

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

package/ui/audio_language_selection.js

@@ -76,6 +76,9 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
         new shaka.util.FakeEvent('languageselectionupdated'));
 
     this.button.setAttribute('shaka-status', this.currentSelection.innerText);
+
+    const numberOfItems = this.menu.getElementsByTagName('button').length;
+    shaka.ui.Utils.setDisplay(this.button, numberOfItems > 2);
   }
 
   /** @private */

package/ui/controls.js

@@ -16,6 +16,8 @@ goog.require('shaka.ui.AdCounter');
 goog.require('shaka.ui.AdPosition');
 goog.require('shaka.ui.BigPlayButton');
 goog.require('shaka.ui.ContextMenu');
+goog.require('shaka.ui.HiddenFastForwardButton');
+goog.require('shaka.ui.HiddenRewindButton');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.SeekBar');
@@ -847,6 +849,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.addBufferingSpinner_();
     }
 
+    if (this.config_.seekOnTaps) {
+      this.addFastForwardButtonOnControlsContainer_();
+      this.addRewindButtonOnControlsContainer_();
+    }
+
     this.addDaiAdContainer_();
 
     this.addControlsButtonPanel_();
@@ -970,6 +977,42 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     svg.appendChild(spinnerCircle);
   }
 
+  /**
+   * Add fast-forward button on Controls container for moving video some
+   * seconds ahead when the video is tapped more than once, video seeks ahead
+   * some seconds for every extra tap.
+   * @private
+   */
+  addFastForwardButtonOnControlsContainer_() {
+    const hiddenFastForwardContainer = shaka.util.Dom.createHTMLElement('div');
+    hiddenFastForwardContainer.classList.add(
+        'shaka-hidden-fast-forward-container');
+    this.controlsContainer_.appendChild(hiddenFastForwardContainer);
+
+    /** @private {shaka.ui.HiddenFastForwardButton} */
+    this.hiddenFastForwardButton_ =
+        new shaka.ui.HiddenFastForwardButton(hiddenFastForwardContainer, this);
+    this.elements_.push(this.hiddenFastForwardButton_);
+  }
+
+  /**
+   * Add Rewind button on Controls container for moving video some seconds
+   * behind when the video is tapped more than once, video seeks behind some
+   * seconds for every extra tap.
+   * @private
+   */
+  addRewindButtonOnControlsContainer_() {
+    const hiddenRewindContainer = shaka.util.Dom.createHTMLElement('div');
+    hiddenRewindContainer.classList.add(
+        'shaka-hidden-rewind-container');
+    this.controlsContainer_.appendChild(hiddenRewindContainer);
+
+    /** @private {shaka.ui.HiddenRewindButton} */
+    this.hiddenRewindButton_ =
+        new shaka.ui.HiddenRewindButton(hiddenRewindContainer, this);
+    this.elements_.push(this.hiddenRewindButton_);
+  }
+
   /** @private */
   addControlsButtonPanel_() {
     /** @private {!HTMLElement} */
@@ -1443,6 +1486,23 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
           this.seek_(this.player_.seekRange().end);
         }
         break;
+      case 'f':
+        if (this.isFullScreenSupported()) {
+          this.toggleFullScreen();
+        }
+        break;
+      case 'm':
+        if (this.ad_ && this.ad_.isLinear()) {
+          this.ad_.setMuted(!this.ad_.isMuted());
+        } else {
+          this.localVideo_.muted = !this.localVideo_.muted;
+        }
+        break;
+      case 'p':
+        if (this.isPiPAllowed()) {
+          this.togglePiP();
+        }
+        break;
       // Pause or play by pressing space on the seek bar.
       case ' ':
         if (isSeekBar) {

package/ui/externs/ui.js

@@ -98,7 +98,9 @@ shaka.extern.UIVolumeBarColors;
  *   keyboardLargeSeekDistance: number,
  *   fullScreenElement: HTMLElement,
  *   preferDocumentPictureInPicture: boolean,
- *   showAudioChannelCountVariants: boolean
+ *   showAudioChannelCountVariants: boolean,
+ *   seekOnTaps: boolean,
+ *   tapSeekDistance: number
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -215,6 +217,15 @@ shaka.extern.UIVolumeBarColors;
  *   displayed or if, on the contrary, only the language should be displayed
  *   regardless of the channel count.
  *   Defaults to true.
+ * @property {boolean} seekOnTaps
+ *   Indicates whether or not a fast-forward and rewind tap button that seeks
+ *   video some seconds.
+ *   Defaults to true.
+ * @property {number} tapSeekDistance
+ *   The time interval, in seconds, to seek when the user presses the left or
+ *   right part of the video. If less than or equal to 0,
+ *   no seeking will occur.
+ *   Defaults to 10 seconds.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

package/ui/hidden_fast_forward_button.js

@@ -0,0 +1,32 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.ui.HiddenFastForwardButton');
+
+goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.HiddenSeekButton');
+
+goog.requireType('shaka.ui.Controls');
+
+/**
+ * @extends {shaka.ui.HiddenSeekButton}
+ * @final
+ * @export
+ */
+shaka.ui.HiddenFastForwardButton = class extends shaka.ui.HiddenSeekButton {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    this.seekContainer.classList.add('shaka-fast-foward-container');
+    this.seekIcon.textContent =
+        shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;
+    this.isRewind = false;
+  }
+};

package/ui/hidden_rewind_button.js

@@ -0,0 +1,32 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.ui.HiddenRewindButton');
+
+goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.HiddenSeekButton');
+
+goog.requireType('shaka.ui.Controls');
+
+/**
+ * @extends {shaka.ui.HiddenSeekButton}
+ * @final
+ * @export
+ */
+shaka.ui.HiddenRewindButton = class extends shaka.ui.HiddenSeekButton {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    this.seekContainer.classList.add('shaka-rewind-container');
+    this.seekIcon.textContent =
+        shaka.ui.Enums.MaterialDesignIcons.REWIND;
+    this.isRewind = true;
+  }
+};

package/ui/hidden_seek_button.js

@@ -0,0 +1,121 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.ui.HiddenSeekButton');
+
+goog.require('shaka.ui.Element');
+goog.require('shaka.util.Timer');
+goog.require('shaka.util.Dom');
+
+goog.requireType('shaka.ui.Controls');
+
+/**
+ * @extends {shaka.ui.Element}
+ * @export
+ */
+shaka.ui.HiddenSeekButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {?number} */
+    this.lastTouchEventTimeSet_ = null;
+
+    /** @private {?boolean} */
+    this.triggeredTouchValid_ = false;
+
+    /**
+     * This timer will be used to hide seek button on video Container.
+     * When the timer ticks it will force button to be invisible.
+     *
+     * @private {shaka.util.Timer}
+     */
+    this.hideSeekButtonContainerTimer_ = new shaka.util.Timer(() => {
+      this.hideSeekButtonContainer_();
+    });
+
+    /** @protected {!HTMLElement} */
+    this.seekContainer = shaka.util.Dom.createHTMLElement('div');
+    this.parent.appendChild(this.seekContainer);
+
+    this.eventManager.listen(this.seekContainer, 'touchstart', (event) => {
+      // In case any settings menu are open this assigns the first touch
+      // to close the menu.
+      if (this.controls.anySettingsMenusAreOpen()) {
+        // prevent the default changes that browser triggers
+        event.preventDefault();
+        this.controls.hideSettingsMenus();
+      } else if (this.controls.getConfig().tapSeekDistance > 0) {
+        // prevent the default changes that browser triggers
+        event.preventDefault();
+        this.onSeekButtonClick_();
+      }
+    });
+
+    /** @private {!HTMLElement} */
+    this.seekValue_ = shaka.util.Dom.createHTMLElement('span');
+    this.seekValue_.textContent = '0s';
+    this.seekContainer.appendChild(this.seekValue_);
+
+
+    /** @protected {!HTMLElement} */
+    this.seekIcon = shaka.util.Dom.createHTMLElement('span');
+    this.seekIcon.classList.add(
+        'shaka-forward-rewind-container-icon');
+    this.seekContainer.appendChild(this.seekIcon);
+
+    /** @protected {boolean} */
+    this.isRewind = false;
+  }
+
+  /**
+   * @private
+   */
+  onSeekButtonClick_() {
+    const tapSeekDistance = this.controls.getConfig().tapSeekDistance;
+    // This stores the time for first touch and makes touch valid for
+    // next 1s so incase the touch event is triggered again within 1s
+    // this if condition fails and the video seeking happens.
+    if (!this.triggeredTouchValid_) {
+      this.triggeredTouchValid_ = true;
+      this.lastTouchEventTimeSet_ = Date.now();
+      this.hideSeekButtonContainerTimer_.tickAfter(1);
+    } else if (this.lastTouchEventTimeSet_+1000 > Date.now()) {
+      // stops hidding of seek button incase the timmer is active
+      // because of previous touch event.
+      this.hideSeekButtonContainerTimer_.stop();
+      this.lastTouchEventTimeSet_ = Date.now();
+      let position = 0;
+      if (this.isRewind) {
+        position =
+            parseInt(this.seekValue_.textContent, 10) - tapSeekDistance;
+      } else {
+        position =
+            parseInt(this.seekValue_.textContent, 10) + tapSeekDistance;
+      }
+      this.seekValue_.textContent = position.toString() + 's';
+      this.seekContainer.style.opacity = '1';
+      this.hideSeekButtonContainerTimer_.tickAfter(1);
+    }
+  }
+
+  /**
+   * @private
+   */
+  hideSeekButtonContainer_() {
+    // Prevent adding seek value if its a single tap.
+    if (parseInt(this.seekValue_.textContent, 10) != 0) {
+      this.video.currentTime = this.controls.getDisplayTime() + parseInt(
+          this.seekValue_.textContent, 10);
+    }
+    this.seekContainer.style.opacity = '0';
+    this.triggeredTouchValid_ = false;
+    this.seekValue_.textContent = '0s';
+  }
+};

package/ui/less/buttons.less

@@ -106,3 +106,53 @@
     outline: none;
   }
 }
+
+.shaka-fast-foward-container,
+.shaka-rewind-container {
+  height: 100%;
+  width: 100%;
+  .shrinkable();
+  .absolute-position();
+
+  /* Keep all the elements inside button div in center and in row */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  /* To be properly positioned, this should have no margin. */
+  margin: 0;
+
+  /* No border. */
+  border: none;
+
+  /* Setting text color to white */
+  color: rgb(255 255 255);
+
+  /* Setting background color to black so white text can be seen clearly */
+  background-color: rgb(0 0 0 / 50%);
+
+  cursor: default;
+  font-size: 20px;
+
+  /* Hidding the container by setting opacity */
+  opacity: 0;
+
+  /* Make the text inside this button unselectable */
+  .unselectable();
+}
+
+.shaka-fast-foward-container {
+  border-radius: 40% 0  0 40%;
+}
+
+.shaka-rewind-container {
+  border-radius: 0 40% 40% 0;
+}
+
+/* This class is instead of material-icon-round
+ * because the font-size of 24 doesn't look good */
+.shaka-forward-rewind-container-icon {
+  font-family: "Material Icons Round";
+  font-size: 34px;
+}

package/ui/less/containers.less

@@ -365,3 +365,21 @@
   on a black background. */
   filter: drop-shadow(0 0 2px rgba(255 255 255 / 50%));
 }
+
+.shaka-hidden-fast-forward-container,
+.shaka-hidden-rewind-container {
+  height: 100%;
+  width: 40%;
+  .shrinkable();
+}
+
+.shaka-hidden-fast-forward-container {
+  /* Keep the fast forward button to the right of this container. */
+  .absolute-position();
+  left: 60%;
+}
+
+.shaka-hidden-rewind-container {
+  /* keep the rewind button to the left */
+  .absolute-position();
+}

package/ui/resolution_selection.js

@@ -194,6 +194,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
         new shaka.util.FakeEvent('resolutionselectionupdated'));
 
     this.updateLocalizedStrings_();
+
+    shaka.ui.Utils.setDisplay(this.button, tracks.length > 0);
   }
 
 

package/ui/ui.js

@@ -249,6 +249,8 @@ shaka.ui.Overlay = class {
       fullScreenElement: this.videoContainer_,
       preferDocumentPictureInPicture: true,
       showAudioChannelCountVariants: true,
+      seekOnTaps: true,
+      tapSeekDistance: 10,
     };
 
     // eslint-disable-next-line no-restricted-syntax

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,75 +0,0 @@
----
-name: Bug report
-about: Report a bug to help us improve
-title: ''
-labels: 'type: bug'
-assignees: ''
-
----
-
-<!-- NOTE: If you ignore this template, we will send it again and ask you to fill it out anyway. -->
-
-**Have you read the [FAQ](https://bit.ly/ShakaFAQ) and checked for duplicate open issues?**
-
-
-**If the problem is related to FairPlay, have you read the tutorial?**
-<!-- NOTE: https://shaka-player-demo.appspot.com/docs/api/tutorial-fairplay.html -->
-
-
-**What version of Shaka Player are you using?**
-<!-- NOTE:
-  Only some versions of the application are maintained, if your version
-  is older, first update to a newer one. See:
-  https://github.com/shaka-project/shaka-player/blob/main/maintained-branches.md
---->
-
-
-**Can you reproduce the issue with our latest release version?**
-
-
-**Can you reproduce the issue with the latest code from `main`?**
-
-
-**Are you using the demo app or your own custom app?**
-
-
-**If custom app, can you reproduce the issue using our demo app?**
-
-
-**What browser and OS are you using?**
-
-
-**For embedded devices (smart TVs, etc.), what model and firmware version are you using?**
-
-
-**What are the manifest and license server URIs?**
-<!-- NOTE:
-  You can send the URIs to <shaka-player-maintainers@googlegroups.com> instead,
-  but please use GitHub and the template for the rest.
-  A copy of the manifest text or an attached manifest will **not** be
-  enough to reproduce your issue, and we **will** ask you to send a
-  URI instead.  You can copy the URI of the demo app to send us the
-  exact asset, licence server, and settings you have selected there.
-  If you send the URIs to email, the response time and resolution
-  will be much higher.
--->
-
-
-**What configuration are you using?  What is the output of `player.getConfiguration()`?**
-<!-- NOTE:
-  You can censor URLs to keep them private, but include them in the email.  You
-  can also use JSON.stringify(obj, null, 2) to print nicely on platforms that
-  don't print objects well in the console.  DON'T SEND '[object Object]'!
--->
-
-
-**What did you do?**
-<!-- Steps to reproduce the bug -->
-
-
-**What did you expect to happen?**
-
-
-**What actually happened?**
-<!-- A clear and concise description of what the bug is -->
-<!-- If applicable, you may add screenshots to help explain your problem. -->

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,26 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: 'type: enhancement'
-assignees: ''
-
----
-
-**Have you read the [FAQ](https://bit.ly/ShakaFAQ) and checked for duplicate open issues?**
-
-
-**Is your feature request related to a problem? Please describe.**
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-
-**Describe the solution you'd like**
-<!-- A clear and concise description of what you want to happen. -->
-
-
-**Describe alternatives you've considered**
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-
-**Additional context**
-<!-- Add any other context or screenshots about the feature request here. -->

package/.github/ISSUE_TEMPLATE/question.md

@@ -1,26 +0,0 @@
----
-name: Question
-about: An open-ended question or discussion about Shaka Player, but not a bug report
-  or feature request
-title: ''
-labels: 'type: question'
-assignees: ''
-
----
-
-<!-- NOTE:
-  This template is for questions.
-  If you suspect that your issue might be a bug, but aren't sure, please file the bug template instead.
-  If you want to know whether we will support a feature, please file the feature request template instead.
--->
-
-**Have you read the [Tutorials](http://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html)?**
-
-
-**Have you read the [FAQ](https://bit.ly/ShakaFAQ) and checked for duplicate open issues?**
-
-
-**What version of Shaka Player are you using?**
-
-
-**Please ask your question**

package/.github/config.yml

@@ -1 +0,0 @@
-blank_issues_enabled: false