shaka-player 3.2.1 → 3.3.1

package/ui/controls.js

@@ -16,6 +16,7 @@ goog.require('shaka.log');
 goog.require('shaka.ui.AdCounter');
 goog.require('shaka.ui.AdPosition');
 goog.require('shaka.ui.BigPlayButton');
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.SeekBar');
@@ -323,6 +324,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.playButton_ = null;
     }
 
+    if (this.contextMenu_) {
+      this.contextMenu_ = null;
+    }
+
     if (this.controlsContainer_) {
       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
       this.releaseChildElements_();
@@ -573,9 +578,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
           }
         }
       } catch (error) {
-        this.dispatchEvent(new shaka.util.FakeEvent('error', {
-          detail: error,
-        }));
+        this.dispatchEvent(new shaka.util.FakeEvent(
+            'error', (new Map()).set('detail', error)));
       }
     }
   }
@@ -651,6 +655,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.addPlayButton_();
     }
 
+    if (this.config_.customContextMenu) {
+      this.addContextMenu_();
+    }
+
     if (!this.spinnerContainer_) {
       this.addBufferingSpinner_();
     }
@@ -709,6 +717,14 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.elements_.push(this.playButton_);
   }
 
+  /** @private */
+  addContextMenu_() {
+    /** @private {shaka.ui.ContextMenu} */
+    this.contextMenu_ =
+        new shaka.ui.ContextMenu(this.controlsButtonPanel_, this);
+    this.elements_.push(this.contextMenu_);
+  }
+
   /** @private */
   addScrimContainer_() {
     // This is the container that gets styled by CSS to have the
@@ -723,7 +739,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     /** @private {!HTMLElement} */
     this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
     this.adPanel_.classList.add('shaka-ad-controls');
-    shaka.ui.Utils.setDisplay(this.adPanel_, this.ad_ != null);
+    const showAdPanel = this.ad_ != null && this.ad_.isLinear();
+    shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
     this.bottomControls_.appendChild(this.adPanel_);
 
     const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
@@ -780,8 +797,12 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // on the page. The click event listener on window ensures that.
     // However, clicks on the bottom controls don't propagate to the container,
     // so we have to explicitly hide the menus onclick here.
-    this.eventManager_.listen(this.bottomControls_, 'click', () => {
-      this.hideSettingsMenus();
+    this.eventManager_.listen(this.bottomControls_, 'click', (e) => {
+      // We explicitly deny this measure when clicking on buttons that
+      // open submenus in the control panel.
+      if (!e.target['closest']('.shaka-overflow-button')) {
+        this.hideSettingsMenus();
+      }
     });
 
     this.addAdControls_();
@@ -791,6 +812,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
     this.controlsButtonPanel_.classList.add(
         'shaka-show-controls-on-mouse-over');
+    if (this.config_.enableTooltips) {
+      this.controlsButtonPanel_.classList.add('shaka-tooltips-on');
+    }
     this.bottomControls_.appendChild(this.controlsButtonPanel_);
 
     // Create the elements specified by controlPanelElements
@@ -860,7 +884,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
 
   /**
-   * Adds a container for server side ad UI with IMA SDK.
+   * Adds a container for client side ad UI with IMA SDK.
    *
    * @private
    */
@@ -869,6 +893,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
+    this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
+      this.onContainerClick_();
+    });
     this.videoContainer_.appendChild(this.clientAdContainer_);
   }
 
@@ -895,6 +922,12 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // Listen for click events to dismiss the settings menus.
     this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus());
 
+    // Avoid having multiple submenus open at the same time.
+    this.eventManager_.listen(
+        this, 'submenuopen', () => {
+          this.hideSettingsMenus();
+        });
+
     this.eventManager_.listen(this.video_, 'play', () => {
       this.onPlayStateChange_();
     });
@@ -1101,7 +1134,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // recent mouse movement, we're in keyboard navigation, or one of a special
     // class of elements is hovered.
     if (adIsPaused ||
-        (!this.ad_ && videoIsPaused) ||
+        ((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
         this.recentMouseMovement_ ||
         keyboardNavigationMode ||
         this.isHovered_()) {
@@ -1145,14 +1178,14 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
     if (this.anySettingsMenusAreOpen()) {
       this.hideSettingsMenusTimer_.tickNow();
-    } else {
+    } else if (this.config_.singleClickForPlayAndPause) {
       this.onPlayPauseClick_();
     }
   }
 
   /** @private */
   onPlayPauseClick_() {
-    if (this.ad_) {
+    if (this.ad_ && this.ad_.isLinear()) {
       this.playPauseAd();
     } else {
       this.playPausePresentation();
@@ -1162,9 +1195,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
   /** @private */
   onCastStatusChange_() {
     const isCasting = this.castProxy_.isCasting();
-    this.dispatchEvent(new shaka.util.FakeEvent('caststatuschanged', {
-      newStatus: isCasting,
-    }));
+    this.dispatchEvent(new shaka.util.FakeEvent(
+        'caststatuschanged', (new Map()).set('newStatus', isCasting)));
 
     if (isCasting) {
       this.controlsContainer_.setAttribute('casting', 'true');

package/ui/controls.less

@@ -12,6 +12,7 @@
 @import "less/other_elements.less";
 @import "less/overflow_menu.less";
 @import "less/ad_controls.less";
+@import "less/tooltip.less";
 @import (css, inline) "https://fonts.googleapis.com/css?family=Roboto";
 // NOTE: Working around google/material-design-icons#958
 @import (css, inline) "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

package/ui/enums.js

@@ -16,7 +16,9 @@ goog.provide('shaka.ui.Enums');
 shaka.ui.Enums.MaterialDesignIcons = {
   'FULLSCREEN': 'fullscreen',
   'EXIT_FULLSCREEN': 'fullscreen_exit',
+  'CLOSE': 'close',
   'CLOSED_CAPTIONS': 'closed_caption',
+  'CLOSED_CAPTIONS_OFF': 'closed_caption_disabled',
   'CHECKMARK': 'done',
   'LANGUAGE': 'language',
   'PIP': 'picture_in_picture_alt',
@@ -40,4 +42,6 @@ shaka.ui.Enums.MaterialDesignIcons = {
   'UNLOOP': 'repeat_on',
   'AIRPLAY': 'airplay',
   'REPLAY': 'replay',
+  'STATISTICS_ON': 'insert_chart_outlined',
+  'STATISTICS_OFF': 'insert_chart',
 };

package/ui/externs/ui.js

@@ -63,8 +63,14 @@ shaka.extern.UIVolumeBarColors;
  * @typedef {{
  *   controlPanelElements: !Array.<string>,
  *   overflowMenuButtons: !Array.<string>,
+ *   contextMenuElements: !Array.<string>,
+ *   statisticsList: !Array.<string>,
+ *   playbackRates: !Array.<number>,
+ *   fastForwardRates: !Array.<number>,
+ *   rewindRates: !Array.<number>,
  *   addSeekBar: boolean,
  *   addBigPlayButton: boolean,
+ *   customContextMenu: boolean,
  *   castReceiverAppId: string,
  *   clearBufferOnQualityChange: boolean,
  *   showUnbufferedStart: boolean,
@@ -73,20 +79,34 @@ shaka.extern.UIVolumeBarColors;
  *   trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat,
  *   fadeDelay: number,
  *   doubleClickForFullscreen: boolean,
+ *   singleClickForPlayAndPause: boolean,
  *   enableKeyboardPlaybackControls: boolean,
  *   enableFullscreenOnRotation: boolean,
- *   forceLandscapeOnFullscreen: boolean
+ *   forceLandscapeOnFullscreen: boolean,
+ *   enableTooltips: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
  *   The ordered list of control panel elements of the UI.
  * @property {!Array.<string>} overflowMenuButtons
  *   The ordered list of the overflow menu buttons.
+ * @property {!Array.<string>} contextMenuElements
+ *   The ordered list of buttons in the context menu.
+ * @property {!Array.<string>} statisticsList
+ *   The ordered list of statistics present in the statistics container.
+ * @property {!Array.<number>} playbackRates
+ *   The ordered list of rates for playback selection.
+  * @property {!Array.<number>} fastForwardRates
+ *   The ordered list of rates for fast forward selection.
+ * @property {!Array.<number>} rewindRates
+ *   The ordered list of rates for rewind selection.
  * @property {boolean} addSeekBar
  *   Whether or not a seek bar should be part of the UI.
  * @property {boolean} addBigPlayButton
  *   Whether or not a big play button in the center of the video
  *   should be part of the UI.
+ * @property {boolean} customContextMenu
+ *   Whether or not a custom context menu replaces the default.
  * @property {string} castReceiverAppId
  *   Receiver app id to use for the Chromecast support.
  * @property {boolean} clearBufferOnQualityChange
@@ -135,6 +155,9 @@ shaka.extern.UIVolumeBarColors;
  *   Whether or not double-clicking on the UI should cause it to enter
  *   fullscreen.
  *   Defaults to true.
+ * @property {boolean} singleClickForPlayAndPause
+ *   Whether or not clicking on the video should cause it to play or pause.
+ *   Defaults to true.
  * @property {boolean} enableKeyboardPlaybackControls
  *   Whether or not playback controls via keyboard is enabled, such as seek
  *   forward, seek backward, jump to the beginning/end of the video.
@@ -147,6 +170,10 @@ shaka.extern.UIVolumeBarColors;
  *   enters fullscreen.  Note that this behavior is based on an experimental
  *   browser API, and may not work on all platforms.
  *   Defaults to true.
+ * @property {boolean} enableTooltips
+ *   Whether or not buttons in the control panel display tooltips that contain
+ *   information about their function.
+ *   Defaults to false.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

package/ui/fast_forward_button.js

@@ -32,11 +32,16 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-fast-forward-button');
+    this.button_.classList.add('shaka-tooltip-status');
+    this.button_.setAttribute('shaka-status', '1x');
     this.button_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
+    /** @private {!Array.<number>} */
+    this.fastForwardRates_ = this.controls.getConfig().fastForwardRates;
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -61,7 +66,7 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
   }
 
   /**
-   * Cycles trick play rate between 1, 2, 4, and 8.
+   * Cycles trick play rate between the selected fast forward rates.
    * @private
    */
   fastForward_() {
@@ -70,11 +75,15 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
     }
 
     const trickPlayRate = this.player.getPlaybackRate();
-    // Every time the button is clicked, the rate is multiplied by 2,
-    // unless the rate is at max (8), in which case it is dropped back to 1.
-    const newRate = (trickPlayRate < 0 || trickPlayRate > 4) ?
-        1 : trickPlayRate * 2;
+    const newRateIndex = this.fastForwardRates_.indexOf(trickPlayRate) + 1;
+
+    // When the button is clicked, the next rate in this.fastForwardRates_ is
+    // selected. If no more rates are available, the first one is set.
+    const newRate = (newRateIndex != this.fastForwardRates_.length) ?
+        this.fastForwardRates_[newRateIndex] : this.fastForwardRates_[0];
     this.player.trickPlay(newRate);
+
+    this.button_.setAttribute('shaka-status', newRate + 'x');
   }
 };
 

package/ui/fullscreen_button.js

@@ -32,6 +32,7 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-fullscreen-button');
     this.button_.classList.add('material-icons-round');
+    this.button_.classList.add('shaka-tooltip');
 
     // Don't show the button if fullscreen is not supported
     if (!document.fullscreenEnabled) {

package/ui/less/buttons.less

@@ -75,10 +75,6 @@
 .shaka-current-time {
   font-size: 14px;
   color: rgb(255, 255, 255);
-
-  /* Make the time element the right size for the text, instead of defaulting
-   * to the same size as the rest of the controls. */
-  height: auto;
   cursor: pointer;
 
   &[disabled] {

package/ui/less/containers.less

@@ -195,6 +195,80 @@
   align-items: center;
 }
 
+.shaka-statistics-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  min-width: 300px;
+
+  color: white;
+  background-color: rgba(35, 35, 35, 0.9);
+
+  font-size: 14px;
+
+  padding: 5px 10px;
+  border-radius: 2px;
+
+  position: absolute;
+  z-index: 2;
+  left: 15px;
+  top: 15px;
+
+  /* Fades out with the other controls. */
+  .show-when-controls-shown();
+
+  div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  span {
+    color: rgb(150, 150, 150);
+  }
+}
+
+.shaka-context-menu {
+  background-color: rgba(35, 35, 35, 0.9);
+
+  border-radius: 2px;
+
+  position: absolute;
+  z-index: 3;
+
+  button {
+    padding: 5px 10px;
+
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    color: white;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba(50, 50, 50, 0.9);
+    }
+  }
+
+  label {
+    padding: 0 20px;
+
+    align-items: flex-start;
+
+    color: white;
+    cursor: pointer;
+  }
+
+  .shaka-current-selection-span {
+    align-items: flex-start;
+
+    color: white;
+    cursor: pointer;
+  }
+}
+
 .shaka-scrim-container {
   margin: 0;
   .fill-container();
@@ -229,13 +303,9 @@
   transition-delay: 500ms;
 
   /* These are defaults which are overridden by JS or cue styles. */
-  span:not(.shaka-text-wrapper) {
-    display: inline;
-    font-size: 20px;
-    line-height: 1.4;  // relative to font size.
-    background-color: rgba(0, 0, 0, 0.8);
-    color: rgb(255, 255, 255);
-  }
+  font-size: 20px;
+  line-height: 1.4;  // relative to font size.
+  color: rgb(255, 255, 255);
 
   span.shaka-text-wrapper {
     display: inline;

package/ui/less/overflow_menu.less

@@ -141,13 +141,3 @@
   /* TODO(b/116651454): eliminate hard-coded offsets */
   left: 17px;
 }
-
-/* The captions button, when captions are on. */
-.shaka-captions-on {
-  color: black;
-}
-
-/* The captions button, when captions are off. */
-.shaka-captions-off {
-  color: grey;
-}

package/ui/less/tooltip.less

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * The tooltip is based on https://github.com/felipefialho/css-components/
+ * Local modifications have been performed.
+ *
+ * Copyright (c) 2017 Felipe Fialho
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@material-icons-width: 32px;
+
+.translateX(@percent) {
+  -webkit-transform: translateX(percentage(@percent));
+  -moz-transform: translateX(percentage(@percent));
+  -ms-transform: translateX(percentage(@percent));
+  -o-transform: translateX(percentage(@percent));
+  transform: translateX(percentage(@percent));
+}
+
+/* .shaka-tooltips-on enables the tooltips and is only added to the
+ * control panel when the 'enableTooltips' option is set to true */
+.shaka-tooltips-on {
+  overflow: visible;
+
+  & > [class*="shaka-tooltip"] {
+    position: relative;
+
+    /* The :after pseudo-element contains the tooltip */
+    &:hover:after, &:focus-visible:after, &:active:after {
+      content: attr(aria-label);
+
+      /* Override .material-icons-round text styling */
+      font-family: Roboto-Regular, Roboto, sans-serif;
+      line-height: @material-icons-width / 2;
+      white-space: nowrap;
+      font-size: 13px;
+
+      /* Styling */
+      background: rgba(35, 35, 35, 0.9);
+      color: white;
+      border-radius: 3px;
+      padding: 5px 10px;
+
+      /* Positioning */
+      position: absolute;
+      bottom: @material-icons-width + 5px;
+
+      /* Left attribute is set to half of the width of the parent button */
+      left: @material-icons-width / 2;
+
+      /* The tooltip is also translated 50% to appear centered */
+      .translateX(-0.5);
+    }
+  }
+
+  /* Adds an additional attribute for the status in .shaka-tooltip-status */
+  & > .shaka-tooltip-status {
+    &:hover:after, &:focus-visible:after, &:active:after {
+      content: attr(aria-label) " (" attr(shaka-status) ")";
+    }
+  }
+
+  /* The first tooltip of the panel is not centered on top of the button
+   * but rather aligned with the left border of the control panel */
+  button:first-child {
+    &:hover:after, &:focus-visible:after, &:active:after {
+      left: 0;
+      .translateX(0);
+    }
+  }
+
+  /* The last tooltip of the panel is not centered on top of the button
+   * but rather aligned with the right border of the control panel */
+  button:last-child {
+    &:hover:after, &:focus-visible:after,&:active:after {
+      left: @material-icons-width;
+      .translateX(-1);
+    }
+  }
+}

package/ui/locales/en.json

@@ -33,6 +33,7 @@
   "SEEK": "Seek",
   "SKIP_AD": "Skip Ad",
   "SKIP_TO_LIVE": "Skip ahead to live",
+  "STATISTICS": "Statistics",
   "SUBTITLE_FORCED": "Forced",
   "UNDETERMINED_LANGUAGE": "Undetermined",
   "UNMUTE": "Unmute",

package/ui/locales/ru.json

@@ -1,10 +1,10 @@
 {
-  "AD_DURATION": "Продолжительность объявления",
-  "AD_PROGRESS": "Объявление [AD_ON] из [NUM_ADS]",
-  "AD_TIME": "Объявление: [AD_TIME]",
+  "AD_DURATION": "Продолжительность рекламы",
+  "AD_PROGRESS": "Реклама [AD_ON] из [NUM_ADS]",
+  "AD_TIME": "Реклама: [AD_TIME]",
   "AUTO_QUALITY": "Авто",
   "BACK": "Назад",
-  "CAPTIONS": "Титры",
+  "CAPTIONS": "Субтитры",
   "CAST": "Транслировать...",
   "ENTER_LOOP_MODE": "Зациклить текущее видео",
   "ENTER_PICTURE_IN_PICTURE": "Перейти в режим \"Картинка в картинке\"",
@@ -20,8 +20,8 @@
   "MULTIPLE_LANGUAGES": "Несколько языков",
   "MUTE": "Отключить звук",
   "NOT_APPLICABLE": "Неприменимо",
-  "OFF": "Включить",
-  "ON": "Отключить",
+  "OFF": "Выкл.",
+  "ON": "Вкл.",
   "PAUSE": "Пауза",
   "PICTURE_IN_PICTURE": "Картинка в картинке",
   "PLAY": "Воспроизвести",

package/ui/locales/source.json

@@ -138,6 +138,10 @@
     "description": "Label for a button used to skip ahead to the live broadcast.",
     "message": "Skip ahead to live"
   },
+  "STATISTICS": {
+    "description": "Label for a button that displays statistics of the video.",
+    "message": "Statistics"
+  },
   "SUBTITLE_FORCED": {
     "description": "Label used to identify a subtitle track that is forced to be shown.",
     "message": "Forced"