shaka-player 2.5.1 → 2.5.5

package/ui/less/range_elements.less

@@ -39,8 +39,8 @@
 /* These control the color and size of the various pieces. */
 @thumb-color: white;
 @track-default-color: white;
-@thumb-size: 10px;
-@track-height: 3.4px;
+@thumb-size: 12px;
+@track-height: 4px;
 
 /* The range container is the div that contains a range element.
  * This div will act as a virtual track to allow us to style the track space.
@@ -51,8 +51,10 @@
 
   /* Vertical margins to occupy the same space as the thumb. */
   margin: (@thumb-size - @track-height)/2 6px;
+
   /* Smaller height to contain the background for the virtual track. */
   height: @track-height;
+
   /* Rounded ends on the virtual track. */
   border-radius: @track-height;
 
@@ -123,6 +125,7 @@
   &::-webkit-slider-runnable-track {
     .track();
   }
+
   &::-webkit-slider-thumb {
     .thumb();
   }
@@ -131,6 +134,7 @@
   &::-moz-range-track {
     .track();
   }
+
   &::-moz-range-thumb {
     .thumb();
   }
@@ -139,6 +143,7 @@
   &::-ms-track {
     .track();
   }
+
   &::-ms-thumb {
     .thumb();
   }
@@ -152,14 +157,17 @@
   &::-ms-fill-lower {
     .hidden();
   }
+
   &::-ms-fill-upper {
     .hidden();
   }
 }
 
-.shaka-volume-bar-container {
+.shaka-range-container {
   .range-container();
+}
 
+.shaka-volume-bar-container {
   width: 100px;
 
   /* Hide volume slider on mobile-sized screens. */
@@ -169,16 +177,10 @@
 }
 
 .shaka-seek-bar-container {
-  .range-container();
-
   /* TODO: Document why! */
   width: 96.5%;
 }
 
-.shaka-seek-bar {
-  .range-element();
-}
-
-.shaka-volume-bar {
+.shaka-range-element {
   .range-element();
 }

package/ui/less/spinner.less

@@ -71,10 +71,12 @@
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
   }
+
   50% {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -35px;
   }
+
   100% {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;

package/ui/overflow_menu.js

@@ -64,7 +64,7 @@ goog.require('shaka.util.Dom');
 
     for (let i = 0; i < backToOverflowMenuButtons.length; i++) {
       const button = backToOverflowMenuButtons[i];
-      button.addEventListener('click', () => {
+      this.eventManager.listen(button, 'click', () => {
         // Hide the submenus, display the overflow menu
         this.controls.hideSettingsMenus();
         shaka.ui.Utils.setDisplay(this.overflowMenu_, true);

package/ui/pip_button.js

@@ -100,7 +100,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
       this.onLeavePictureInPicture_();
     });
 
-    this.eventManager.listen(this.controls, 'caststatuschange', (e) => {
+    this.eventManager.listen(this.controls, 'caststatuschanged', (e) => {
       this.onCastStatusChange_(e);
     });
 

package/ui/{play_pause_button.js → play_button.js}

@@ -16,10 +16,9 @@
  */
 
 
-goog.provide('shaka.ui.PlayPauseButton');
+goog.provide('shaka.ui.PlayButton');
 
 goog.require('shaka.ui.Element');
-goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.util.Dom');
@@ -27,10 +26,9 @@ goog.require('shaka.util.Dom');
 
 /**
  * @extends {shaka.ui.Element}
- * @final
  * @export
  */
-shaka.ui.PlayPauseButton = class extends shaka.ui.Element {
+shaka.ui.PlayButton = class extends shaka.ui.Element {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
@@ -38,37 +36,30 @@ shaka.ui.PlayPauseButton = class extends shaka.ui.Element {
   constructor(parent, controls) {
     super(parent, controls);
 
-    /** @private {!HTMLElement} */
-    this.button_ = shaka.util.Dom.createHTMLElement('button');
-    this.button_.classList.add('shaka-play-pause-button');
-    this.button_.classList.add('material-icons');
-    this.parent.appendChild(this.button_);
-
-    this.updateIcon_();
-    this.updateAriaLabel_();
+    /** @protected {!HTMLElement} */
+    this.button = shaka.util.Dom.createHTMLElement('button');
+    this.parent.appendChild(this.button);
 
     const LOCALE_UPDATED = shaka.ui.Localization.LOCALE_UPDATED;
     this.eventManager.listen(this.localization, LOCALE_UPDATED, () => {
-      this.updateAriaLabel_();
+      this.updateAriaLabel();
     });
 
     const LOCALE_CHANGED = shaka.ui.Localization.LOCALE_CHANGED;
     this.eventManager.listen(this.localization, LOCALE_CHANGED, () => {
-      this.updateAriaLabel_();
+      this.updateAriaLabel();
     });
 
     this.eventManager.listen(this.video, 'play', () => {
-      this.updateAriaLabel_();
-      this.updateIcon_();
+      this.updateAriaLabel();
     });
 
     this.eventManager.listen(this.video, 'pause', () => {
-      this.updateAriaLabel_();
-      this.updateIcon_();
+      this.updateAriaLabel();
     });
 
-    this.eventManager.listen(this.button_, 'click', () => {
-      if (this.isPaused_()) {
+    this.eventManager.listen(this.button, 'click', () => {
+      if (this.isPaused()) {
         this.video.play();
       } else {
         this.video.pause();
@@ -78,41 +69,20 @@ shaka.ui.PlayPauseButton = class extends shaka.ui.Element {
 
   /**
    * @return {boolean}
-   * @private
+   * @protected
    */
-  isPaused_() {
+  isPaused() {
     // The video element is in a paused state while seeking, but we don't count
     // that.
     return this.video.paused && !this.controls.isSeeking();
   }
 
-  /** @private */
-  updateAriaLabel_() {
+  /** @protected */
+  updateAriaLabel() {
     const LocIds = shaka.ui.Locales.Ids;
-    const label = this.isPaused_() ? LocIds.PLAY : LocIds.PAUSE;
+    const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(label));
   }
-
-  /** @private */
-  updateIcon_() {
-    const Icons = shaka.ui.Enums.MaterialDesignIcons;
-    this.button_.textContent = this.isPaused_() ? Icons.PLAY : Icons.PAUSE;
-  }
-};
-
-
-/**
- * @implements {shaka.extern.IUIElement.Factory}
- * @final
- */
-shaka.ui.PlayPauseButton.Factory = class {
-  /** @override */
-  create(rootElement, controls) {
-    return new shaka.ui.PlayPauseButton(rootElement, controls);
-  }
 };
-
-shaka.ui.Controls.registerElement(
-    'play_pause', new shaka.ui.PlayPauseButton.Factory());

package/ui/presentation_time.js

@@ -37,7 +37,7 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
 
     this.currentTime_ = shaka.util.Dom.createHTMLElement('button');
     this.currentTime_.classList.add('shaka-current-time');
-    this.currentTime_.textContent = '0:00';
+    this.setValue_('0:00');
     this.parent.appendChild(this.currentTime_);
 
     this.eventManager.listen(this.currentTime_, 'click', () => {
@@ -56,10 +56,18 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
     });
   }
 
+  /** @private */
+  setValue_(value) {
+    // To avoid constant updates to the DOM, which makes debugging more
+    // difficult, only set the value if it has changed.  If we don't do this
+    // check, the DOM updates constantly, this element flashes in the debugger
+    // in Chrome, and you can't make changes in the CSS panel.
+    if (value != this.currentTime_.textContent) {
+      this.currentTime_.textContent = value;
+    }
+  }
 
-  /**
-   * @private
-   */
+  /** @private */
   updateTime_() {
     const isSeeking = this.controls.isSeeking();
     let displayTime = this.controls.getDisplayTime();
@@ -80,24 +88,21 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
       // The button should only be clickable when it's live stream content, and
       // the current play time is behind live edge.
       if ((displayTime >= 1) || isSeeking) {
-        this.currentTime_.textContent =
-            '- ' + this.buildTimeString_(displayTime, showHour);
+        this.setValue_('- ' + this.buildTimeString_(displayTime, showHour));
         this.currentTime_.disabled = false;
       } else {
-        this.currentTime_.textContent =
-            this.localization.resolve(shaka.ui.Locales.Ids.LIVE);
+        this.setValue_(this.localization.resolve(shaka.ui.Locales.Ids.LIVE));
         this.currentTime_.disabled = true;
       }
     } else {
       let showHour = duration >= 3600;
 
-      this.currentTime_.textContent =
-          this.buildTimeString_(displayTime, showHour);
-
+      let value = this.buildTimeString_(displayTime, showHour);
       if (duration) {
-        this.currentTime_.textContent += ' / ' +
+        value += ' / ' +
             this.buildTimeString_(duration, showHour);
       }
+      this.setValue_(value);
       this.currentTime_.disabled = true;
     }
   }

package/ui/range_element.js

@@ -0,0 +1,176 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+goog.provide('shaka.ui.RangeElement');
+
+goog.require('shaka.ui.Element');
+goog.require('shaka.util.Dom');
+
+
+/**
+ * A range element, built to work across browsers.
+ *
+ * In particular, getting styles to work right on IE requires a specific
+ * structure.
+ *
+ * This also handles the case where the range element is being manipulated and
+ * updated at the same time.  This can happen when seeking during playback or
+ * when casting.
+ *
+ * @extends {shaka.ui.Element}
+ * @export
+ */
+shaka.ui.RangeElement = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   * @param {!Array.<string>} containerClassNames
+   * @param {!Array.<string>} barClassNames
+   */
+  constructor(parent, controls, containerClassNames, barClassNames) {
+    super(parent, controls);
+
+    /**
+     * This container is to support IE 11.  See detailed notes in
+     * less/range_elements.less for a complete explanation.
+     * @protected {!HTMLElement}
+     */
+    this.container = shaka.util.Dom.createHTMLElement('div');
+    this.container.classList.add('shaka-range-container');
+    this.container.classList.add(...containerClassNames);
+
+    /** @private {boolean} */
+    this.isChanging_ = false;
+
+    /** @protected {!HTMLInputElement} */
+    this.bar =
+      /** @type {!HTMLInputElement} */ (document.createElement('input'));
+
+    this.bar.classList.add('shaka-range-element');
+    this.bar.classList.add(...barClassNames);
+    this.bar.type = 'range';
+    // TODO(#2027): step=any causes keyboard nav problems on IE 11.
+    this.bar.step = 'any';
+    this.bar.min = '0';
+    this.bar.max = '1';
+    this.bar.value = '0';
+
+    this.container.appendChild(this.bar);
+    this.parent.appendChild(this.container);
+
+    this.eventManager.listen(this.bar, 'mousedown', () => {
+      this.isChanging_ = true;
+      this.onChangeStart();
+    });
+
+    this.eventManager.listen(this.bar, 'touchstart', (e) => {
+      this.isChanging_ = true;
+      this.setBarValueForTouch_(e);
+      this.onChangeStart();
+    }, {passive: true});
+
+    this.eventManager.listen(this.bar, 'input', () => {
+      this.onChange();
+    });
+
+    this.eventManager.listen(this.bar, 'touchmove', (e) => {
+      this.setBarValueForTouch_(e);
+      this.onChange();
+    });
+
+    this.eventManager.listen(this.bar, 'touchend', (e) => {
+      this.isChanging_ = false;
+      this.setBarValueForTouch_(e);
+      this.onChangeEnd();
+    });
+
+    this.eventManager.listen(this.bar, 'mouseup', () => {
+      this.isChanging_ = false;
+      this.onChangeEnd();
+    });
+  }
+
+  /**
+   * @param {number} min
+   * @param {number} max
+   */
+  setRange(min, max) {
+    this.bar.min = min;
+    this.bar.max = max;
+  }
+
+  /**
+   * Called when user interaction begins.
+   * To be overridden by subclasses.
+   */
+  onChangeStart() {}
+
+  /**
+   * Called when a new value is set by user interaction.
+   * To be overridden by subclasses.
+   */
+  onChange() {}
+
+  /**
+   * Called when user interaction ends.
+   * To be overridden by subclasses.
+   */
+  onChangeEnd() {}
+
+  /** @return {number} */
+  getValue() {
+    return parseFloat(this.bar.value);
+  }
+
+  /** @param {number} value */
+  setValue(value) {
+    // The user interaction overrides any external values being pushed in.
+    if (this.isChanging_) {
+      return;
+    }
+
+    this.bar.value = value;
+  }
+
+  /**
+   * Synchronize the touch position with the range value.
+   * Comes in handy on iOS, where users have to grab the handle in order
+   * to start seeking.
+   * @param {Event} event
+   * @private
+   */
+  setBarValueForTouch_(event) {
+    event.preventDefault();
+
+    const changedTouch = /** @type {TouchEvent} */ (event).changedTouches[0];
+    const rect = this.bar.getBoundingClientRect();
+
+    // Calculate the range value based on the touch position.
+    let value = (this.bar.max / rect.width) *
+      (changedTouch.clientX - rect.left);
+
+    // Keep value within bounds.
+    if (value < this.bar.min) {
+      value = this.bar.min;
+    } else if (value > this.bar.max) {
+      value = this.bar.max;
+    }
+
+    this.bar.value = value;
+  }
+};