shaka-player 2.5.1 → 2.5.5

package/ui/text_displayer.js

@@ -198,8 +198,8 @@ shaka.ui.TextDisplayer = class {
     const captionsStyle = captions.style;
     const panelStyle = this.textContainer_.style;
 
-    // Set white-space to 'pre' to enable showing line breaks in the text.
-    captionsStyle.whiteSpace = 'pre';
+    // Set white-space to 'pre-line' to enable showing line breaks in the text.
+    captionsStyle.whiteSpace = 'pre-line';
     captions.textContent = cue.payload;
     captionsStyle.backgroundColor = cue.backgroundColor;
     captionsStyle.color = cue.color;
@@ -210,6 +210,9 @@ shaka.ui.TextDisplayer = class {
       captionsStyle.backgroundRepeat = 'no-repeat';
       captionsStyle.backgroundSize = 'contain';
       captionsStyle.backgroundPosition = 'center';
+      if (cue.backgroundColor == '') {
+        captionsStyle.backgroundColor = 'transparent';
+      }
     }
     if (cue.backgroundImage && cue.region) {
       const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
@@ -256,21 +259,21 @@ shaka.ui.TextDisplayer = class {
       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           if (cue.lineAlign == Cue.lineAlign.START) {
-            this.textContainer_.top = cue.line + '%';
+            panelStyle.top = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            this.textContainer_.bottom = cue.line + '%';
+            panelStyle.bottom = cue.line + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
           if (cue.lineAlign == Cue.lineAlign.START) {
-            this.textContainer_.left = cue.line + '%';
+            panelStyle.left = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            this.textContainer_.right = cue.line + '%';
+            panelStyle.right = cue.line + '%';
           }
         } else {
           if (cue.lineAlign == Cue.lineAlign.START) {
-            this.textContainer_.right = cue.line + '%';
+            panelStyle.right = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            this.textContainer_.left = cue.line + '%';
+            panelStyle.left = cue.line + '%';
           }
         }
       }
@@ -282,18 +285,18 @@ shaka.ui.TextDisplayer = class {
     // direction defined by the writing direction.
     if (cue.position) {
       if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-        this.textContainer_.paddingLeft = cue.position;
+        panelStyle.paddingLeft = cue.position;
       } else {
-        this.textContainer_.paddingTop = cue.position;
+        panelStyle.paddingTop = cue.position;
       }
     }
 
     // The positionAlign attribute is an alignment for the text container in
     // the dimension of the writing direction.
     if (cue.positionAlign == Cue.positionAlign.LEFT) {
-      panelStyle.float = 'left';
+      panelStyle.cssFloat = 'left';
     } else if (cue.positionAlign == Cue.positionAlign.RIGHT) {
-      panelStyle.float = 'right';
+      panelStyle.cssFloat = 'right';
     } else {
       panelStyle.margin = 'auto';
     }
@@ -306,9 +309,9 @@ shaka.ui.TextDisplayer = class {
     // interpreted as a percentage of the video, as defined by the writing
     // direction.
     if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-      this.textContainer_.width = cue.size + '%';
+      panelStyle.width = cue.size + '%';
     } else {
-      this.textContainer_.height = cue.size + '%';
+      panelStyle.height = cue.size + '%';
     }
   }
 };

package/ui/text_selection.js

@@ -18,31 +18,39 @@
 
 goog.provide('shaka.ui.TextSelection');
 
-goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.LanguageUtils');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.SettingsMenu');
 goog.require('shaka.util.Dom');
 
 
 /**
- * @extends {shaka.ui.Element}
+ * @extends {shaka.ui.SettingsMenu}
  * @final
  * @export
  */
-shaka.ui.TextSelection = class extends shaka.ui.Element {
+shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls);
+    super(parent,
+        controls, shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS);
 
-    this.addCaptionButton_();
+    this.button.classList.add('shaka-caption-button');
+    this.menu.classList.add('shaka-text-languages');
 
-    this.addTextLangMenu_();
+    if (this.player && this.player.isTextTrackVisible()) {
+      this.button.setAttribute('aria-pressed', 'true');
+    } else {
+      this.button.setAttribute('aria-pressed', 'false');
+    }
+
+    this.addOffOption_();
 
     this.eventManager.listen(
       this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
@@ -66,10 +74,6 @@ shaka.ui.TextSelection = class extends shaka.ui.Element {
       this.onCaptionStateChange_();
     });
 
-    this.eventManager.listen(this.captionButton_, 'click', () => {
-      this.onCaptionClick_();
-    });
-
     this.eventManager.listen(this.player, 'textchanged', () => {
       this.updateTextLanguages_();
     });
@@ -91,70 +95,10 @@ shaka.ui.TextSelection = class extends shaka.ui.Element {
   /**
    * @private
    */
-  addCaptionButton_() {
-    /** @private {!HTMLElement} */
-    this.captionButton_ = shaka.util.Dom.createHTMLElement('button');
-    this.captionButton_.classList.add('shaka-caption-button');
-
-    /** @private {!HTMLElement} */
-    this.captionIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.captionIcon_.classList.add('material-icons');
-    this.captionIcon_.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS;
-
-    if (this.player && this.player.isTextTrackVisible()) {
-      this.captionButton_.setAttribute('aria-pressed', 'true');
-    } else {
-      this.captionButton_.setAttribute('aria-pressed', 'false');
-    }
-    this.captionButton_.appendChild(this.captionIcon_);
-
-    const label = shaka.util.Dom.createHTMLElement('label');
-    label.classList.add('shaka-overflow-button-label');
-
-    /** @private {!HTMLElement} */
-    this.captionsNameSpan_ = shaka.util.Dom.createHTMLElement('span');
-
-    label.appendChild(this.captionsNameSpan_);
-
-    /** @private {!HTMLElement} */
-    this.currentCaptions_ = shaka.util.Dom.createHTMLElement('span');
-    this.currentCaptions_.classList.add('shaka-current-selection-span');
-    label.appendChild(this.currentCaptions_);
-    this.captionButton_.appendChild(label);
-    this.parent.appendChild(this.captionButton_);
-  }
-
-
-  /**
-   * @private
-   */
-  addTextLangMenu_() {
-    /** @private {!HTMLElement} */
-    this.textLangMenu_ = shaka.util.Dom.createHTMLElement('div');
-    this.textLangMenu_.classList.add('shaka-text-languages');
-    this.textLangMenu_.classList.add('shaka-no-propagation');
-    this.textLangMenu_.classList.add('shaka-show-controls-on-mouse-over');
-    this.textLangMenu_.classList.add('shaka-settings-menu');
-
-    /** @private {!HTMLElement} */
-    this.backFromCaptionsButton_ = shaka.util.Dom.createHTMLElement('button');
-    this.backFromCaptionsButton_.classList.add('shaka-back-to-overflow-button');
-    this.textLangMenu_.appendChild(this.backFromCaptionsButton_);
-
-    const backIcon = shaka.util.Dom.createHTMLElement('i');
-    backIcon.classList.add('material-icons');
-    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
-    this.backFromCaptionsButton_.appendChild(backIcon);
-
-    /** @private {!HTMLElement} */
-    this.backFromCaptionsSpan_ = shaka.util.Dom.createHTMLElement('span');
-    this.backFromCaptionsButton_.appendChild(this.backFromCaptionsSpan_);
-
-    // Add the off option
+  addOffOption_() {
     const off = shaka.util.Dom.createHTMLElement('button');
     off.setAttribute('aria-selected', 'true');
-    this.textLangMenu_.appendChild(off);
+    this.menu.appendChild(off);
 
     off.appendChild(shaka.ui.Utils.checkmarkIcon());
 
@@ -163,31 +107,19 @@ shaka.ui.TextSelection = class extends shaka.ui.Element {
 
     this.captionsOffSpan_.classList.add('shaka-auto-span');
     off.appendChild(this.captionsOffSpan_);
-
-    const controlsContainer = this.controls.getControlsContainer();
-    controlsContainer.appendChild(this.textLangMenu_);
-  }
-
-
-  /** @private */
-  onCaptionClick_() {
-    this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
-    shaka.ui.Utils.setDisplay(this.textLangMenu_, true);
-    // Focus on the currently selected language button.
-    shaka.ui.Utils.focusOnTheChosenItem(this.textLangMenu_);
   }
 
 
   /** @private */
   onCaptionStateChange_() {
     if (this.player.isTextTrackVisible()) {
-      this.captionIcon_.classList.add('shaka-captions-on');
-      this.captionIcon_.classList.remove('shaka-captions-off');
-      this.captionButton_.setAttribute('aria-pressed', 'true');
+      this.icon.classList.add('shaka-captions-on');
+      this.icon.classList.remove('shaka-captions-off');
+      this.button.setAttribute('aria-pressed', 'true');
     } else {
-      this.captionIcon_.classList.add('shaka-captions-off');
-      this.captionIcon_.classList.remove('shaka-captions-on');
-      this.captionButton_.setAttribute('aria-pressed', 'false');
+      this.icon.classList.add('shaka-captions-off');
+      this.icon.classList.remove('shaka-captions-on');
+      this.button.setAttribute('aria-pressed', 'false');
     }
 
     // TODO: document this event
@@ -204,35 +136,38 @@ shaka.ui.TextSelection = class extends shaka.ui.Element {
       return langAndRole.language;
     });
 
-    shaka.ui.LanguageUtils.updateLanguages(tracks, this.textLangMenu_,
-      languages,
-      this.onTextLanguageSelected_.bind(this),
-      // Don't mark current text language as chosen unless captions are enabled
-      this.player.isTextTrackVisible(),
-      this.currentCaptions_,
-      this.localization);
+    shaka.ui.LanguageUtils.updateLanguages(tracks, this.menu,
+        languages,
+        (lang) => this.onTextLanguageSelected_(lang),
+
+        // Don't mark current text language as chosen unless captions are
+        // enabled
+        this.player.isTextTrackVisible(),
+        this.currentSelection,
+        this.localization);
 
     // Add the Off button
     const offButton = shaka.util.Dom.createHTMLElement('button');
     offButton.classList.add('shaka-turn-captions-off-button');
-    offButton.addEventListener('click', () => {
-      this.player.setTextTrackVisibility(false);
+    this.eventManager.listen(offButton, 'click', () => {
+      const p = this.player.setTextTrackVisibility(false);
+      p.catch(() => {});  // TODO(#1993): Handle possible errors.
       this.updateTextLanguages_();
     });
 
     offButton.appendChild(this.captionsOffSpan_);
 
-    this.textLangMenu_.appendChild(offButton);
+    this.menu.appendChild(offButton);
 
     if (!this.player.isTextTrackVisible()) {
       offButton.setAttribute('aria-selected', 'true');
       offButton.appendChild(shaka.ui.Utils.checkmarkIcon());
       this.captionsOffSpan_.classList.add('shaka-chosen-item');
-      this.currentCaptions_.textContent =
+      this.currentSelection.textContent =
           this.localization.resolve(shaka.ui.Locales.Ids.OFF);
     }
 
-    shaka.ui.Utils.focusOnTheChosenItem(this.textLangMenu_);
+    shaka.ui.Utils.focusOnTheChosenItem(this.menu);
 
     // TODO: document this event
     this.controls.dispatchEvent(
@@ -259,13 +194,13 @@ shaka.ui.TextSelection = class extends shaka.ui.Element {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.captionButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(LocIds.CAPTIONS));
-    this.backFromCaptionsButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(LocIds.BACK));
-    this.captionsNameSpan_.textContent =
+    this.nameSpan.textContent =
         this.localization.resolve(LocIds.CAPTIONS);
-    this.backFromCaptionsSpan_.textContent =
+    this.backSpan.textContent =
         this.localization.resolve(LocIds.CAPTIONS);
     this.captionsOffSpan_.textContent =
         this.localization.resolve(LocIds.OFF);
@@ -275,7 +210,7 @@ shaka.ui.TextSelection = class extends shaka.ui.Element {
   /** @private */
   onTracksChanged_() {
     const hasText = this.player.getTextTracks().length > 0;
-    shaka.ui.Utils.setDisplay(this.captionButton_, hasText);
+    shaka.ui.Utils.setDisplay(this.button, hasText);
     this.updateTextLanguages_();
   }
 };

package/ui/ui.js

@@ -38,12 +38,6 @@ shaka.ui.Overlay = function(player, videoContainer, video) {
   /** @private {shaka.Player} */
   this.player_ = player;
 
-  /** @private {!HTMLElement} */
-  this.videoContainer_ = videoContainer;
-
-  /** @private {!HTMLMediaElement} */
-  this.video_ = video;
-
   /** @private {!shaka.extern.UIConfiguration} */
   this.config_ = this.defaultConfig_();
 
@@ -57,6 +51,10 @@ shaka.ui.Overlay = function(player, videoContainer, video) {
     videoContainer.classList.add('shaka-mobile');
   }
 
+  /** @private {shaka.ui.Controls} */
+  this.controls_ = new shaka.ui.Controls(
+      player, videoContainer, video, this.config_);
+
   // Run the initial setup so that no configure() call is required for default
   // settings.
   this.configure({});
@@ -120,28 +118,6 @@ shaka.ui.Overlay.prototype.configure = function(config, value) {
 
   goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
 
-  const DomUtils = shaka.util.Dom;
-  // Deconstruct the old layout.
-
-  // Save the text container, so subtitles can be displayed with
-  // the new layout.
-  const textContainer =
-    this.videoContainer_.querySelector('.shaka-text-container');
-
-  // Remember whether the controls were shown
-  let shown = false;
-  let controlsContainer =
-      this.videoContainer_.querySelector('.shaka-controls-container');
-  if (controlsContainer != null) {
-    shown = controlsContainer.getAttribute('shown');
-  }
-
-  // Destroy the old layout.
-  shaka.util.Dom.removeAllChildren(this.videoContainer_);
-
-  // Add the video back in
-  this.videoContainer_.appendChild(this.video_);
-
   shaka.util.ConfigUtils.mergeConfigObjects(
         this.config_, config, this.defaultConfig_(),
         /* overrides (only used for player config)*/ {}, /* path */ '');
@@ -154,18 +130,7 @@ shaka.ui.Overlay.prototype.configure = function(config, value) {
 
   goog.asserts.assert(this.player_ != null, 'Should have a player!');
 
-  /** @private {shaka.ui.Controls} */
-  this.controls_ = new shaka.ui.Controls(
-      this.player_, this.videoContainer_, this.video_, this.config_);
-
-  controlsContainer = DomUtils.getElementByClassName(
-      'shaka-controls-container', this.videoContainer_);
-  controlsContainer.setAttribute('shown', shown);
-
-  // Add the text container back.
-  if (textContainer) {
-    this.videoContainer_.appendChild(textContainer);
-  }
+  this.controls_.configure(this.config_);
 
   this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
 };
@@ -228,7 +193,9 @@ shaka.ui.Overlay.prototype.defaultConfig_ = function() {
       'cast',
     ],
     addSeekBar: true,
+    addBigPlayButton: true,
     castReceiverAppId: '',
+    clearBufferOnQualityChange: true,
   };
 };
 
@@ -269,6 +236,11 @@ shaka.ui.Overlay.scanPageForShakaElements_ = function() {
     // Just the video elements were provided.
     for (let i = 0; i < videos.length; i++) {
       const video = videos[i];
+      // If the app has already manually created a UI for this element,
+      // don't create another one.
+      if (video['ui']) {
+        continue;
+      }
       goog.asserts.assert(video.tagName.toLowerCase() == 'video',
         'Should be a video element!');
 
@@ -298,6 +270,11 @@ shaka.ui.Overlay.scanPageForShakaElements_ = function() {
   } else {
     for (let i = 0; i < containers.length; i++) {
       const container = containers[i];
+      // If the app has already manually created a UI for this element,
+      // don't create another one.
+      if (container['ui']) {
+        continue;
+      }
       goog.asserts.assert(container.tagName.toLowerCase() == 'div',
         'Container should be a div!');
 

package/ui/volume_bar.js

@@ -18,108 +18,80 @@
 
 goog.provide('shaka.ui.VolumeBar');
 
-goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.RangeElement');
 
 
 /**
- * @extends {shaka.ui.Element}
+ * @extends {shaka.ui.RangeElement}
  * @final
  * @export
  */
-shaka.ui.VolumeBar = class extends shaka.ui.Element {
+shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls);
-
-    // This container is to support IE 11.  See detailed notes in
-    // less/range_elements.less for a complete explanation.
-    // TODO: Factor this into a range-element component.
-    /** @private {!HTMLElement} */
-    this.container_ = shaka.util.Dom.createHTMLElement('div');
-    this.container_.classList.add('shaka-volume-bar-container');
-
-    this.bar_ =
-      /** @type {!HTMLInputElement} */ (document.createElement('input'));
-    this.bar_.classList.add('shaka-volume-bar');
-    this.bar_.setAttribute('type', 'range');
-    // NOTE: step=any causes keyboard nav problems on IE 11.
-    this.bar_.setAttribute('step', 'any');
-    this.bar_.setAttribute('min', '0');
-    this.bar_.setAttribute('max', '1');
-    this.bar_.setAttribute('value', '0');
-
-    this.container_.appendChild(this.bar_);
-    this.parent.appendChild(this.container_);
-    this.updateAriaLabel_();
-
-    this.eventManager.listen(this.video, 'volumechange', () => {
-      this.onVolumeStateChange_();
-    });
+    super(parent, controls,
+        ['shaka-volume-bar-container'], ['shaka-volume-bar']);
 
-    this.eventManager.listen(this.bar_, 'input', () => {
-      this.onVolumeInput_();
-    });
+    this.eventManager.listen(this.video,
+        'volumechange',
+        () => this.onVolumeStateChange_());
 
-    this.eventManager.listen(
-      this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
-        this.updateAriaLabel_();
-      });
+    this.eventManager.listen(this.localization,
+        shaka.ui.Localization.LOCALE_UPDATED,
+        () => this.updateAriaLabel_());
 
-    this.eventManager.listen(
-      this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
-        this.updateAriaLabel_();
-      });
+    this.eventManager.listen(this.localization,
+        shaka.ui.Localization.LOCALE_CHANGED,
+        () => this.updateAriaLabel_());
 
-    // Initialize volume display with a fake event.
+    // Initialize volume display and label.
     this.onVolumeStateChange_();
+    this.updateAriaLabel_();
   }
 
-
   /**
-   * @private
+   * Update the video element's state to match the input element's state.
+   * Called by the base class when the input element changes.
+   *
+   * @override
    */
+  onChange() {
+    this.video.volume = this.getValue();
+    if (this.video.volume == 0) {
+      this.video.muted = true;
+    } else {
+      this.video.muted = false;
+    }
+  }
+
+  /** @private */
   onVolumeStateChange_() {
     if (this.video.muted) {
-        this.bar_.value = 0;
+      this.setValue(0);
     } else {
-        this.bar_.value = this.video.volume;
+      this.setValue(this.video.volume);
     }
 
-    // TODO: Can we do this with LESS?
-    let gradient = ['to right'];
+    const gradient = ['to right'];
     gradient.push(shaka.ui.Constants.VOLUME_BAR_VOLUME_LEVEL_COLOR +
-                 (this.bar_.value * 100) + '%');
+                 (this.getValue() * 100) + '%');
     gradient.push(shaka.ui.Constants.VOLUME_BAR_BASE_COLOR +
-                 (this.bar_.value * 100) + '%');
+                 (this.getValue() * 100) + '%');
     gradient.push(shaka.ui.Constants.VOLUME_BAR_BASE_COLOR + '100%');
-    this.container_.style.background =
-        'linear-gradient(' + gradient.join(',') + ')';
-  }
 
-
-  /**
-   * @private
-   */
-  onVolumeInput_() {
-    this.video.volume = parseFloat(this.bar_.value);
-    if (this.video.volume == 0) {
-      this.video.muted = true;
-    } else {
-      this.video.muted = false;
-    }
+    this.container.style.background =
+        'linear-gradient(' + gradient.join(',') + ')';
   }
 
-
-  /**
-   * @private
-   */
+  /** @private */
   updateAriaLabel_() {
-    this.bar_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.bar.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(shaka.ui.Locales.Ids.VOLUME));
   }
 };