shaka-player 2.5.4 → 2.5.5

package/test/ui/ui_unit.js

@@ -181,6 +181,27 @@ describe('UI', function() {
       videoContainer.appendChild(video);
     });
 
+    it('goes into fullscreen on double click', async () => {
+      const config = {
+        controlPanelElements: [
+          'overflow_menu',
+        ],
+        overflowMenuButtons: [
+          'quality',
+        ],
+      };
+      const ui = createUIThroughAPI(videoContainer, video, config);
+      const controls = ui.getControls();
+
+      const spy = spyOn(controls, 'toggleFullScreen');
+
+      const controlsContainer =
+          videoContainer.querySelector('.shaka-controls-container');
+      shaka.test.UiUtils.simulateEvent(controlsContainer, 'dblclick');
+      await shaka.test.Util.delay(0.1);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
     describe('all the controls', function() {
        /** @type {!HTMLElement} */
       let controlsContainer;
@@ -344,6 +365,8 @@ describe('UI', function() {
     describe('resolutions menu', function() {
        /** @type {!HTMLElement} */
       let resolutionsMenu;
+      /** @type {shaka.ui.Controls} */
+      let controls;
 
       beforeEach(function() {
         let config = {
@@ -354,7 +377,9 @@ describe('UI', function() {
             'quality',
           ],
         };
-        createUIThroughAPI(videoContainer, video, config);
+        const ui = createUIThroughAPI(videoContainer, video, config);
+        controls = ui.getControls();
+        player = controls.getLocalPlayer();
 
         let resolutionsMenus =
             videoContainer.getElementsByClassName('shaka-resolutions');
@@ -406,8 +431,107 @@ describe('UI', function() {
             jasmine.any(Object), true);
       });
 
-      // TODO: integration test to ensure all resolutions are
-      // correctly represented
+      it('displays resolutions based on current stream', async () => {
+        /* eslint-disable indent */
+        // A manifest with different resolutions at different
+        // languages/channel-counts to test the current resolution list is
+        // filtered.
+        const manifest = new shaka.test.ManifestGenerator()
+            .addPeriod(0)
+              .addVariant(0)
+                .primary()
+                .language('en')
+                .addVideo(1).size(320, 240)
+                .addAudio(3).channelsCount(2)
+              .addVariant(4)
+                .language('en')
+                .addVideo(5).size(640, 480)
+                .addAudio(6).channelsCount(2)
+              .addVariant(7)  // Duplicate with 4
+                .language('en')
+                .addVideo(8).size(640, 480)
+                .addAudio(9).channelsCount(2)
+              .addVariant(10)
+                .language('en')
+                .addVideo(11).size(1280, 720)
+                .addAudio(12).channelsCount(1)
+              .addVariant(13)
+                .language('es')
+                .addVideo(14).size(960, 540)
+                .addAudio(15).channelsCount(2)
+              .addVariant(16)
+                .language('fr')
+                .addVideo(17).size(256, 144)
+                .addAudio(18).channelsCount(2)
+            .build();
+        /* eslint-enable indent */
+        const getResolutions = () => {
+          const resolutionButtons = videoContainer.querySelectorAll(
+              'button.explicit-resolution > span');
+          return Array.from(resolutionButtons)
+              .map((btn) => btn.innerText)
+              .sort();
+        };
+
+        await player.load(
+            /* uri= */ 'fake', /* startTime= */ 0, function() {
+              return new shaka.test.FakeManifestParser(manifest);
+            });
+        player.configure('abr.enabled', false);
+
+        const tracks = player.getVariantTracks();
+        const en2 =
+            tracks.find((t) => t.language == 'en' && t.channelsCount == 2);
+        const en1 =
+            tracks.find((t) => t.language == 'en' && t.channelsCount == 1);
+        const es = tracks.find((t) => t.language == 'es');
+
+        // There are 3 variants with English 2-channel, but one is a duplicate
+        // and shouldn't appear in the list.
+        goog.asserts.assert(en2, 'Unable to find tracks');
+        player.selectVariantTrack(en2, true);
+        await updateResolutionMenu();
+        expect(getResolutions()).toEqual(['240p', '480p']);
+
+        // There is 1 variant with English 1-channel.
+        goog.asserts.assert(en1, 'Unable to find tracks');
+        player.selectVariantTrack(en1, true);
+        await updateResolutionMenu();
+        expect(getResolutions()).toEqual(['720p']);
+
+        // There is 1 variant with Spanish 2-channel.
+        goog.asserts.assert(es, 'Unable to find tracks');
+        player.selectVariantTrack(es, true);
+        await updateResolutionMenu();
+        expect(getResolutions()).toEqual(['540p']);
+      });
+
+      /**
+       * Use internals to update the resolution menu.  Our fake manifest can
+       * cause problems with startup where the Player will get stuck using
+       * "deferred" switches, so we won't get events and the resolution menu
+       * won't update.
+       *
+       * @suppress {accessControls}
+       */
+      async function updateResolutionMenu() {
+        await shaka.test.Util.delay(0.1);
+        // TODO(#2089): We should be able to stop once we find one, but since
+        // there are multiple ResolutionMenu objects, we need to update all of
+        // them.
+        let found = false;
+        for (const elem of controls.elements_) {
+          if (elem instanceof shaka.ui.OverflowMenu) {
+            for (const child of elem.children_) {
+              if (child instanceof shaka.ui.ResolutionSelection) {
+                child.updateResolutionSelection_();
+                found = true;
+              }
+            }
+          }
+        }
+        goog.asserts.assert(found, 'Unable to find resolution menu');
+      }
     });
 
     // TODO: integration test to test audio language menu.
@@ -541,6 +665,7 @@ describe('UI', function() {
    * @param {!HTMLElement} videoContainer
    * @param {!HTMLMediaElement} video
    * @param {!Object=} config
+   * @return {!shaka.ui.Overlay}
    */
   function createUIThroughAPI(videoContainer, video, config) {
     player = new shaka.Player(video);
@@ -548,6 +673,7 @@ describe('UI', function() {
     config = config || {};
     const ui = new shaka.ui.Overlay(player, videoContainer, video);
     ui.configure(config);
+    return ui;
   }
 
   /**

package/ui/audio_language_selection.js

@@ -18,31 +18,28 @@
 
 goog.provide('shaka.ui.AudioLanguageSelection');
 
-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.util.Dom');
-
+goog.require('shaka.ui.SettingsMenu');
 
 /**
- * @extends {shaka.ui.Element}
+ * @extends {shaka.ui.SettingsMenu}
  * @final
  * @export
  */
-shaka.ui.AudioLanguageSelection = class extends shaka.ui.Element {
+shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls);
-
-    this.addLanguagesButton_();
+    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.LANGUAGE);
 
-    this.addAudioLangMenu_();
+    this.button.classList.add('shaka-language-button');
+    this.menu.classList.add('shaka-audio-languages');
 
     this.eventManager.listen(
       this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
@@ -63,10 +60,6 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.Element {
       this.updateAudioLanguages_();
     });
 
-    this.eventManager.listen(this.languagesButton_, 'click', () => {
-      this.onLanguagesClick_();
-    });
-
     // Set up all the strings in the user's preferred language.
     this.updateLocalizedStrings_();
 
@@ -74,89 +67,17 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.Element {
   }
 
 
-  /**
-   * @private
-   */
-  addAudioLangMenu_() {
-    /** @private {!HTMLElement} */
-    this.audioLangMenu_ = shaka.util.Dom.createHTMLElement('div');
-    this.audioLangMenu_.classList.add('shaka-audio-languages');
-    this.audioLangMenu_.classList.add('shaka-no-propagation');
-    this.audioLangMenu_.classList.add('shaka-show-controls-on-mouse-over');
-    this.audioLangMenu_.classList.add('shaka-settings-menu');
-
-    /** @private {!HTMLElement} */
-    this.backFromLanguageButton_ = shaka.util.Dom.createHTMLElement('button');
-    this.backFromLanguageButton_.classList.add('shaka-back-to-overflow-button');
-    this.audioLangMenu_.appendChild(this.backFromLanguageButton_);
-
-    const backIcon = shaka.util.Dom.createHTMLElement('i');
-    backIcon.classList.add('material-icons');
-    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
-    this.backFromLanguageButton_.appendChild(backIcon);
-
-    /** @private {!HTMLElement} */
-    this.backFromLanguageSpan_ = shaka.util.Dom.createHTMLElement('span');
-    this.backFromLanguageButton_.appendChild(this.backFromLanguageSpan_);
-
-    const controlsContainer = this.controls.getControlsContainer();
-    controlsContainer.appendChild(this.audioLangMenu_);
-  }
-
-
-  /**
-   * @private
-   */
-  addLanguagesButton_() {
-    /** @private {!HTMLElement} */
-    this.languagesButton_ = shaka.util.Dom.createHTMLElement('button');
-    this.languagesButton_.classList.add('shaka-language-button');
-
-    const icon = shaka.util.Dom.createHTMLElement('i');
-    icon.classList.add('material-icons');
-    icon.textContent = shaka.ui.Enums.MaterialDesignIcons.LANGUAGE;
-    this.languagesButton_.appendChild(icon);
-
-    const label = shaka.util.Dom.createHTMLElement('label');
-    label.classList.add('shaka-overflow-button-label');
-
-    /** @private {!HTMLElement} */
-    this.languageNameSpan_ = shaka.util.Dom.createHTMLElement('span');
-    this.languageNameSpan_.classList.add('languageSpan');
-    label.appendChild(this.languageNameSpan_);
-
-    /** @private {!HTMLElement} */
-    this.currentAudioLanguage_ = shaka.util.Dom.createHTMLElement('span');
-    this.currentAudioLanguage_.classList.add('shaka-current-selection-span');
-    const language = this.player.getConfiguration().preferredAudioLanguage;
-    this.currentAudioLanguage_.textContent =
-      shaka.ui.LanguageUtils.getLanguageName(language, this.localization);
-    label.appendChild(this.currentAudioLanguage_);
-
-    this.languagesButton_.appendChild(label);
-
-    this.parent.appendChild(this.languagesButton_);
-  }
-
-  /** @private */
-  onLanguagesClick_() {
-    this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
-    shaka.ui.Utils.setDisplay(this.audioLangMenu_, true);
-    // Focus on the currently selected language button.
-    shaka.ui.Utils.focusOnTheChosenItem(this.audioLangMenu_);
-  }
-
   /** @private */
   updateAudioLanguages_() {
     const tracks = this.player.getVariantTracks();
     const languages = this.player.getAudioLanguages();
 
-    shaka.ui.LanguageUtils.updateLanguages(tracks, this.audioLangMenu_,
-      languages,
-      this.onAudioLanguageSelected_.bind(this), /* updateChosen */ true,
-      this.currentAudioLanguage_,
-      this.localization);
-    shaka.ui.Utils.focusOnTheChosenItem(this.audioLangMenu_);
+    shaka.ui.LanguageUtils.updateLanguages(tracks, this.menu,
+        languages,
+        (lang) => this.onAudioLanguageSelected_(lang), /* updateChosen */ true,
+        this.currentSelection,
+        this.localization);
+    shaka.ui.Utils.focusOnTheChosenItem(this.menu);
 
     // TODO: document this event
     this.controls.dispatchEvent(
@@ -166,7 +87,7 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.Element {
   /** @private */
   onTracksChanged_() {
     const hasVariants = this.player.getVariantTracks().length > 0;
-    shaka.ui.Utils.setDisplay(this.languagesButton_, hasVariants);
+    shaka.ui.Utils.setDisplay(this.button, hasVariants);
     this.updateAudioLanguages_();
   }
 
@@ -185,13 +106,13 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.Element {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.backFromLanguageButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(LocIds.BACK));
-    this.languagesButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(LocIds.LANGUAGE));
-    this.languageNameSpan_.textContent =
+    this.nameSpan.textContent =
         this.localization.resolve(LocIds.LANGUAGE);
-    this.backFromLanguageSpan_.textContent =
+    this.backSpan.textContent =
         this.localization.resolve(LocIds.LANGUAGE);
   }
 };

package/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');
+    }
+  }
+};