feat(UI): Modernization of the UI (#8409)

Changes:
- The look has been changed to make it more similar to YouTube:
  - The main background color is now black, and the font is white.
  - Presentation time has been moved to the bottom.
  - Cast and airplay buttons are now more accessible.
  - Tooltips have been enabled except on mobile platforms.
- The ad information has been moved to appear in the same position as
the presentation time when the ad is present.
- A mark indicating the current quality has been added (e.g.: HD, 2K,
4K, 8K)
- The spinner has been replaced with one that works well on Smart TVs
and is very similar to the current one. The animation is included in the
SVG element itself rather than through CSS.
- More LESS variables have been added to make customization easier in
forks.
- The maximum size of the menus is dynamically calculated so that they
never extend outside the video container.
- The size of the subtitle container when the UI appears is now
calculated dynamically.
- The Demo has been updated to show the seekbar when trickplays are
enabled.
- UI performance on Smart TVs has been improved (Tested on Tizen 5.0)
- Many offsets that were hardcoded have been removed, but not all (in
CSS).

Close #8406

Author: avelad

build/types/ui

@@ -1,8 +1,7 @@
 # UI library.
 
 +../../third_party/language-mapping-list/language-mapping-list.js
-+../../ui/ad_counter.js
-+../../ui/ad_position.js
++../../ui/ad_info.js
 +../../ui/ad_statistics_button.js
 +../../ui/audio_language_selection.js
 +../../ui/externs/ui.js

demo/demo.less

@@ -71,6 +71,10 @@ main.mdl-layout__content {
   top: 10px;
   right: 10px;
 
+  height: 32px;
+  width: 32px;
+  font-size: 24px;
+
   /* Give the button a round background, meant to look like the play button. */
   border-radius: 50%;
   color: #000;

demo/main.js

@@ -385,8 +385,6 @@ shakaDemo.Main = class {
           return element != 'rewind' && element != 'fast_forward';
         });
     if (this.trickPlayControlsEnabled_) {
-      // Trick mode controls don't have a seek bar.
-      uiConfig.addSeekBar = false;
       // Replace the position the play_pause button was at with a full suite of
       // trick play controls, including rewind and fast-forward.
       const index = uiConfig.controlPanelElements.indexOf('play_pause');

lib/util/dom_utils.js

@@ -105,6 +105,27 @@ shaka.util.Dom = class {
     return shaka.util.Dom.asHTMLElement(elements[0]);
   }
 
+
+  /**
+   * Returns the element with a given class name if it exists.
+   * Assumes the class name to be unique for a given parent.
+   *
+   * @param {string} className
+   * @param {!HTMLElement} parent
+   * @return {?HTMLElement}
+   */
+  static getElementByClassNameIfItExists(className, parent) {
+    const elements = parent.getElementsByClassName(className);
+    if (!elements.length) {
+      return null;
+    }
+    goog.asserts.assert(elements.length == 1,
+        'Should only be one element with class name ' + className);
+
+    return shaka.util.Dom.asHTMLElement(elements[0]);
+  }
+
+
   /**
    * Remove all of the child nodes of an element.
    * @param {!Element} element

shaka-player.uncompiled.js

@@ -83,8 +83,7 @@ goog.require('shaka.ui.PlayButton');
 goog.require('shaka.ui.SettingsMenu');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.AudioLanguageSelection');
-goog.require('shaka.ui.AdCounter');
-goog.require('shaka.ui.AdPosition');
+goog.require('shaka.ui.AdInfo');
 goog.require('shaka.ui.AdStatisticsButton');
 goog.require('shaka.ui.AirPlayButton');
 goog.require('shaka.ui.BigPlayButton');

test/text/text_displayer_layout_unit.js

@@ -30,50 +30,6 @@ filterDescribe('Cue layout', shaka.test.TextLayoutTests.supported, () => {
     });
 
     defineTests();
-
-    // This test is unique to the UI.
-    it('moves cues to avoid controls', async () => {
-      let ui;
-
-      try {
-        // Set up UI controls.  The video element is in a paused state by
-        // default, so the controls should be shown.  The video is not in the
-        // DOM and is purely temporary.
-        const player = new shaka.Player();
-        ui = new shaka.ui.Overlay(
-            player, /** @type {!HTMLElement} */(helper.videoContainer),
-            shaka.test.UiUtils.createVideoElement());
-        // Turn off every part of the UI that we can, so that the screenshot is
-        // less likely to change because of something unrelated to text
-        // rendering.
-        ui.configure({
-          controlPanelElements: [],
-          addSeekBar: false,
-          addBigPlayButton: false,
-          enableFullscreenOnRotation: false,
-        });
-
-        // Recreate the text displayer so that the text container comes after
-        // the controls (as it does in production).  This is important for the
-        // CSS that moves the cues above the controls when they are shown.
-        await helper.textDisplayer.destroy();
-        helper.recreateTextDisplayer();
-
-        const cue = new shaka.text.Cue(
-            0, 1, 'Captain\'s log, stardate 41636.9');
-        cue.region.id = '1';
-        // Position the cue *explicitly* at the bottom of the screen.
-        cue.region.viewportAnchorX = 0;  // %
-        cue.region.viewportAnchorY = 90;  // %
-        cue.region.width = 100;  // %
-        cue.region.height = 10;  // %
-        helper.textDisplayer.append([cue]);
-
-        await helper.checkScreenshot('cue-with-controls');
-      } finally {
-        await ui.destroy();
-      }
-    });
   });
 
   describe('using browser-native rendering', () => {

test/ui/ad_ui_unit.js

@@ -208,82 +208,6 @@ describe('Ad UI', () => {
     });
   });
 
-  describe('ad counter', () => {
-    /** @type {!HTMLElement} */
-    let adCounter;
-    /** @type {!shaka.ui.Localization} */
-    let localization;
-
-    beforeEach(() => {
-      adCounter = UiUtils.getElementByClassName(
-          container, 'shaka-ad-counter-span');
-
-      localization = video['ui'].getControls().getLocalization();
-    });
-
-    it('displays correct ad time', async () => {
-      const eventManager = new shaka.util.EventManager();
-      const waiter = new shaka.test.Waiter(eventManager);
-      const p = waiter.waitForEvent(adManager, shaka.ads.Utils.AD_STARTED);
-
-      ad = new shaka.test.FakeAd(/* skipIn= */ null,
-          /* position= */ 1, /* totalAdsInPod= */ 1);
-      adManager.startAd(ad);
-      ad.setRemainingTime(5); // seconds
-
-      await p;
-
-      // Ad counter has an internal timer that fires every 0.5 sec
-      // to check the state. Give it a full second to make sure it
-      // has time to catch up to the new remaining time value.
-      await shaka.test.Util.delay(1);
-
-      const expectedTimeString = '0:05 / 0:10';
-      const LocIds = shaka.ui.Locales.Ids;
-      const raw = localization.resolve(LocIds.AD_TIME);
-      expect(adCounter.textContent).toBe(
-          raw.replace('[AD_TIME]', expectedTimeString));
-    });
-  });
-
-  describe('ad position', () => {
-    /** @type {!HTMLElement} */
-    let adPosition;
-    /** @type {!shaka.ui.Localization} */
-    let localization;
-
-    beforeEach(() => {
-      adPosition = UiUtils.getElementByClassName(
-          container, 'shaka-ad-position-span');
-
-      localization = video['ui'].getControls().getLocalization();
-    });
-
-
-    it('correctly shows "X of Y ads" for a sequence of several ads',
-        async () => {
-          const position = 2;
-          const adsInPod = 3;
-          const eventManager = new shaka.util.EventManager();
-          const waiter = new shaka.test.Waiter(eventManager);
-          const p = waiter.waitForEvent(
-              adManager, shaka.ads.Utils.AD_STARTED);
-
-          ad = new shaka.test.FakeAd(/* skipIn= */ null,
-          /* position= */ position, /* totalAdsInPod= */ adsInPod);
-          adManager.startAd(ad);
-
-          await p;
-
-          const LocIds = shaka.ui.Locales.Ids;
-          const expectedString = localization.resolve(LocIds.AD_PROGRESS)
-              .replace('[AD_ON]', String(position))
-              .replace('[NUM_ADS]', String(adsInPod));
-
-          expect(adPosition.textContent).toBe(expectedString);
-        });
-  });
-
   describe('timeline', () => {
     /** @type {!HTMLElement} */
     let seekBar;

test/ui/ui_customization_unit.js

@@ -54,10 +54,10 @@ describe('UI Customization', () => {
   });
 
   it('only the specified overflow menu buttons are created', async () => {
-    const config = {overflowMenuButtons: ['cast']};
+    const config = {overflowMenuButtons: ['loop']};
     await UiUtils.createUIThroughAPI(container, video, config, canvas);
 
-    UiUtils.confirmElementFound(container, 'shaka-cast-button');
+    UiUtils.confirmElementFound(container, 'shaka-loop-button');
 
     UiUtils.confirmElementMissing(container, 'shaka-caption-button');
   });
@@ -86,32 +86,11 @@ describe('UI Customization', () => {
     UiUtils.confirmElementFound(container, 'shaka-play-button');
   });
 
-  it('settings menus are lower when seek bar is absent', async () => {
-    const config = {addSeekBar: false};
-    await UiUtils.createUIThroughAPI(container, video, config, canvas);
-
-    function confirmLowPosition(className) {
-      const elements =
-        container.getElementsByClassName(className);
-      expect(elements.length).toBe(1);
-      expect(
-          elements[0].classList.contains('shaka-low-position')).toBe(true);
-    }
-
-    UiUtils.confirmElementMissing(container, 'shaka-seek-bar');
-
-    confirmLowPosition('shaka-overflow-menu');
-    confirmLowPosition('shaka-resolutions');
-    confirmLowPosition('shaka-audio-languages');
-    confirmLowPosition('shaka-text-languages');
-    confirmLowPosition('shaka-playback-rates');
-  });
-
   it('controls are created in specified order', async () => {
     const config = {
       controlPanelElements: [
         'mute',
-        'time_and_duration',
+        'loop',
         'fullscreen',
       ],
     };
@@ -130,7 +109,7 @@ describe('UI Customization', () => {
     expect( /** @type {!HTMLElement} */ (buttons[0]).className)
         .toContain('shaka-mute-button');
     expect( /** @type {!HTMLElement} */ (buttons[1]).className)
-        .toContain('shaka-current-time');
+        .toContain('shaka-loop-button');
     expect( /** @type {!HTMLElement} */ (buttons[2]).className)
         .toContain('shaka-fullscreen');
   });

test/ui/ui_unit.js

@@ -961,7 +961,7 @@ describe('UI', () => {
     const videos = container.getElementsByTagName('video');
     expect(videos.length).not.toBe(0);
 
-    UiUtils.confirmElementFound(container, 'shaka-spinner-svg');
+    UiUtils.confirmElementFound(container, 'shaka-spinner');
     UiUtils.confirmElementFound(container, 'shaka-overflow-menu');
     UiUtils.confirmElementFound(container, 'shaka-controls-button-panel');
   }

ui/ad_counter.js renamed to ui/ad_info.js

@@ -5,7 +5,7 @@
  */
 
 
-goog.provide('shaka.ui.AdCounter');
+goog.provide('shaka.ui.AdInfo');
 
 goog.require('goog.asserts');
 goog.require('shaka.ads.Utils');
@@ -23,7 +23,7 @@ goog.requireType('shaka.ui.Controls');
  * @final
  * @export
  */
-shaka.ui.AdCounter = class extends shaka.ui.Element {
+shaka.ui.AdInfo = class extends shaka.ui.Element {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
@@ -32,14 +32,9 @@ shaka.ui.AdCounter = class extends shaka.ui.Element {
     super(parent, controls);
 
     /** @private {!HTMLElement} */
-    this.container_ = shaka.util.Dom.createHTMLElement('div');
-    this.container_.classList.add('shaka-ad-counter');
-    this.parent.appendChild(this.container_);
-
-    /** @private {!HTMLElement} */
-    this.span_ = shaka.util.Dom.createHTMLElement('span');
-    this.span_.classList.add('shaka-ad-counter-span');
-    this.container_.appendChild(this.span_);
+    this.adInfo_ = shaka.util.Dom.createButton();
+    this.adInfo_.classList.add('shaka-ad-info');
+    this.parent.appendChild(this.adInfo_);
 
     /**
      * The timer that tracks down the ad progress.
@@ -97,6 +92,8 @@ shaka.ui.AdCounter = class extends shaka.ui.Element {
    * @private
    */
   onTimerTick_() {
+    const LocIds = shaka.ui.Locales.Ids;
+
     goog.asserts.assert(this.ad != null,
         'this.ad should exist at this point');
 
@@ -105,11 +102,23 @@ shaka.ui.AdCounter = class extends shaka.ui.Element {
       return;
     }
 
+    let text = '';
+
+    const adsInAdPod = this.ad.getSequenceLength();
+    if (adsInAdPod > 1) {
+      // If it's a single ad, showing 'Ad 1 of 1' isn't helpful.
+      // Only show this element if there's more than 1 ad and it's a linear ad.
+      const adPosition = this.ad.getPositionInSequence();
+      text = this.localization.resolve(LocIds.AD_PROGRESS)
+          .replace('[AD_ON]', String(adPosition))
+          .replace('[NUM_ADS]', String(adsInAdPod));
+    }
+
     const secondsLeft = Math.round(this.ad.getRemainingTime());
     const adDuration = this.ad.getDuration();
     if (secondsLeft == -1 || adDuration == -1) {
-      // Not enough information about the ad. Don't show the
-      // counter just yet.
+      this.adInfo_.textContent = text;
+      shaka.ui.Utils.setDisplay(this.adInfo_, text != '');
       return;
     }
 
@@ -121,17 +130,17 @@ shaka.ui.AdCounter = class extends shaka.ui.Element {
           adDuration, /* showHour= */ false);
       const timeString = timePassedStr + ' / ' + adLength;
 
-      const adsInAdPod = this.ad.getSequenceLength();
       // If there's more than one ad in the sequence, show the time
       // without the word 'Ad' (it will be shown by another element).
       // Otherwise, the format is "Ad: 0:05 / 0:10."
       if (adsInAdPod > 1) {
-        this.span_.textContent = timeString;
+        text += '\u00A0\u00A0' + timeString;
       } else {
-        const LocIds = shaka.ui.Locales.Ids;
-        const raw = this.localization.resolve(LocIds.AD_TIME);
-        this.span_.textContent = raw.replace('[AD_TIME]', timeString);
+        text = this.localization.resolve(LocIds.AD_TIME)
+            .replace('[AD_TIME]', timeString);
       }
+      this.adInfo_.textContent = text;
+      shaka.ui.Utils.setDisplay(this.adInfo_, text != '');
     } else {
       this.reset_();
     }
@@ -144,7 +153,7 @@ shaka.ui.AdCounter = class extends shaka.ui.Element {
     this.timer_.stop();
     // Controls are going to hide the whole ad panel once the ad is over,
     // this is just a safeguard.
-    this.span_.textContent = '';
+    this.adInfo_.textContent = '';
   }
 
   /**