Extract the big play button into its own class & make it optional.

Change-Id: I462632c3da5f8ff5a68e111940591086bb395a13
imuzi · Jul 25, 2019 · 635acb6 · 635acb6
1 parent 0b9de75
commit 635acb6
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 97 deletions.
diff --git a/build/types/ui b/build/types/ui
@@ -3,6 +3,8 @@
 +../../third_party/language-mapping-list/language-mapping-list.js
 +../../ui/audio_language_selection.js
 +../../ui/externs/ui.js
++../../ui/play_button.js
++../../ui/big_play_button.js
 +../../ui/cast_button.js
 +../../ui/controls.js
 +../../ui/constants.js
@@ -15,7 +17,7 @@
 +../../ui/mute_button.js
 +../../ui/overflow_menu.js
 +../../ui/pip_button.js
-+../../ui/play_pause_button.js
++../../ui/small_play_button.js
 +../../ui/presentation_time.js
 +../../ui/range_element.js
 +../../ui/resolution_selection.js

diff --git a/shaka-player.uncompiled.js b/shaka-player.uncompiled.js
@@ -64,8 +64,10 @@ goog.require('shaka.text.TextEngine');
 goog.require('shaka.text.TtmlTextParser');
 goog.require('shaka.text.VttTextParser');
 goog.require('shaka.ui.Controls');
+goog.require('shaka.ui.PlayButton');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.AudioLanguageSelection');
+goog.require('shaka.ui.BigPlayButton');
 goog.require('shaka.ui.CastButton');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.FastForwardButton');
@@ -74,7 +76,7 @@ goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.MuteButton');
 goog.require('shaka.ui.Overlay');
 goog.require('shaka.ui.PipButton');
-goog.require('shaka.ui.PlayPauseButton');
+goog.require('shaka.ui.SmallPlayButton');
 goog.require('shaka.ui.PresentationTimeTracker');
 goog.require('shaka.ui.ResolutionSelection');
 goog.require('shaka.ui.RewindButton');

diff --git a/ui/big_play_button.js b/ui/big_play_button.js
@@ -0,0 +1,61 @@
+/**
+ * @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.BigPlayButton');
+
+goog.require('shaka.ui.PlayButton');
+
+
+/**
+ * @extends {shaka.ui.PlayButton}
+ * @final
+ * @export
+ */
+shaka.ui.BigPlayButton = class extends shaka.ui.PlayButton {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    this.button.classList.add('shaka-play-button');
+    this.button.classList.add('shaka-no-propagation');
+
+    this.updateIcon_();
+    this.updateAriaLabel();
+
+    this.eventManager.listen(this.video, 'play', () => {
+      this.updateIcon_();
+    });
+
+    this.eventManager.listen(this.video, 'pause', () => {
+      this.updateIcon_();
+    });
+  }
+
+
+  /** @private */
+  updateIcon_() {
+    if (this.isPaused()) {
+      this.button.setAttribute('icon', 'play');
+    } else {
+      this.button.setAttribute('icon', 'pause');
+    }
+  }
+};
diff --git a/ui/controls.js b/ui/controls.js
@@ -149,8 +149,6 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // Configure and create the layout of the controls
     this.configure(this.config_);
 
-    this.updateLocalizedStrings_();
-
     /**
      * The pressed keys set is used to record which keys are currently pressed
      * down, so we can know what keys are pressed at the same time.
@@ -346,8 +344,18 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
     this.castProxy_.changeReceiverId(config.castReceiverAppId);
 
+    // Deconstruct the old layout if applicable
+    if (this.seekBar_) {
+      this.seekBar_.destroy();
+      this.seekBar_ = null;
+    }
+
+    if (this.playButton_) {
+      this.playButton_.destroy();
+      this.playButton_ = null;
+    }
+
     if (this.controlsContainer_) {
-      // Deconstruct the old layout if applicable
       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
       this.videoContainer_.removeChild(this.spinnerContainer_);
     } else {
@@ -357,6 +365,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // Create the new layout
     this.createDOM_();
 
+    // Init the play state
+    this.onPlayStateChange_();
+
     this.addEventListeners_();
   }
 
@@ -572,28 +583,14 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
   }
 
-  /** @private */
-  updateLocalizedStrings_() {
-    const LocIds = shaka.ui.Locales.Ids;
-
-    // Localize state-dependant labels
-    const makePlayNotPause = this.video_.paused && !this.isSeeking_;
-    const playButtonAriaLabelId = makePlayNotPause ? LocIds.PLAY : LocIds.PAUSE;
-    this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization_.resolve(playButtonAriaLabelId));
-  }
-
   /** @private */
   createDOM_() {
-    if (this.seekBar_) {
-      this.seekBar_.destroy();
-      this.seekBar_ = null;
-    }
-
     this.videoContainer_.classList.add('shaka-video-container');
     this.video_.classList.add('shaka-video');
 
-    this.addPlayButton_();
+    if (this.config_.addBigPlayButton) {
+      this.addPlayButton_();
+    }
 
     this.addBufferingSpinner_();
 
@@ -630,16 +627,13 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
   /** @private */
   addPlayButton_() {
-    /** @private {!HTMLElement} */
-    this.playButtonContainer_ = shaka.util.Dom.createHTMLElement('div');
-    this.playButtonContainer_.classList.add('shaka-play-button-container');
-    this.controlsContainer_.appendChild(this.playButtonContainer_);
+    const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
+    playButtonContainer.classList.add('shaka-play-button-container');
+    this.controlsContainer_.appendChild(playButtonContainer);
 
-    /** @private {!HTMLElement} */
-    this.playButton_ = shaka.util.Dom.createHTMLElement('button');
-    this.playButton_.classList.add('shaka-play-button');
-    this.playButtonContainer_.appendChild(this.playButton_);
-    this.onPlayStateChange_();
+    /** @private {shaka.ui.BigPlayButton} */
+    this.playButton_ =
+        new shaka.ui.BigPlayButton(playButtonContainer, this);
   }
 
   /** @private */
@@ -789,14 +783,6 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.onKeyUp_(e);
     });
 
-    this.eventManager_.listen(this.localization_,
-        shaka.ui.Localization.LOCALE_UPDATED,
-        (e) => this.updateLocalizedStrings_());
-
-    this.eventManager_.listen(this.localization_,
-        shaka.ui.Localization.LOCALE_CHANGED,
-        (e) => this.updateLocalizedStrings_());
-
     if (screen.orientation) {
       this.eventManager_.listen(screen.orientation, 'change', () => {
         this.onScreenRotation_();
@@ -997,17 +983,6 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     if (this.video_.ended && !this.video_.paused) {
       this.video_.pause();
     }
-
-    // Video is paused during seek, so don't show the play arrow while seeking:
-    if (this.enabled_ && this.video_.paused && !this.isSeeking_) {
-      this.playButton_.setAttribute('icon', 'play');
-      this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-          this.localization_.resolve(shaka.ui.Locales.Ids.PLAY));
-    } else {
-      this.playButton_.setAttribute('icon', 'pause');
-      this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-          this.localization_.resolve(shaka.ui.Locales.Ids.PAUSE));
-    }
   }
 
   /**

diff --git a/ui/externs/ui.js b/ui/externs/ui.js
@@ -34,6 +34,7 @@ shaka.extern = {};
  *   controlPanelElements: !Array.<string>,
  *   overflowMenuButtons: !Array.<string>,
  *   addSeekBar: boolean,
+ *   addBigPlayButton: boolean,
  *   castReceiverAppId: string
  * }}
  *
@@ -43,6 +44,9 @@ shaka.extern = {};
  *   The ordered list of the overflow menu buttons.
  * @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 {string} castReceiverAppId
  *   Receiver app id to use for the Chromecast support.
  * @exportDoc

diff --git a/ui/play_pause_button.js → ui/play_button.js b/ui/play_pause_button.js → ui/play_button.js
@@ -16,59 +16,50 @@
  */
 
 
-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');
 
 
 /**
  * @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
    */
   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());