shaka-player 3.3.1 → 3.3.4

package/ui/less/buttons.less

@@ -26,7 +26,7 @@
    *
    * Based on tips from https://stackoverflow.com/a/12925343 */
   box-sizing: border-box;
-  padding: @play-button-size-percentage / 2;
+  padding: calc(@play-button-size-percentage / 2);
   width: 0;
   height: 0;
 
@@ -38,7 +38,7 @@
   border-radius: 50%;
 
   /* A small drop shadow below the button. */
-  box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
+  box-shadow: rgba(0 0 0 / 10%) 0 0 20px 0;
 
   /* No border. */
   border: none;
@@ -51,7 +51,7 @@
   background-position: center center;
 
   /* A background color behind the play arrow. */
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255 255 255 / 90%);
 
   .show-when-controls-shown();
 
@@ -60,11 +60,11 @@
    * deployed separately from the compiled CSS.
    * Note that these URIs should relative to ui/controls.less, not this file. */
   &[icon="play"] {
-    background-image: data-uri('images/play_arrow.svg');
+    background-image: data-uri("images/play_arrow.svg");
   }
 
   &[icon="pause"] {
-    background-image: data-uri('images/pause.svg');
+    background-image: data-uri("images/pause.svg");
   }
 }
 
@@ -74,7 +74,7 @@
  */
 .shaka-current-time {
   font-size: 14px;
-  color: rgb(255, 255, 255);
+  color: white;
   cursor: pointer;
 
   &[disabled] {

package/ui/less/containers.less

@@ -6,8 +6,6 @@
 
 /* All of the top-level containers into which various visible features go. */
 
-@transparent: rgba(0, 0, 0, 0);
-
 /* A container for the entire video + controls combo.  This is the auto-setup
  * div which we populate. */
 .shaka-video-container {
@@ -19,13 +17,13 @@
 
   /* Set a special font for material design icons. */
   .material-icons-round {
-    font-family: 'Material Icons Round';
+    font-family: "Material Icons Round";
     font-size: 24px;
   }
 
   /* Set the fonts for all other content. */
   * {
-    font-family: Roboto-Regular, Roboto, sans-serif;
+    font-family: Roboto-Regular, Roboto, sans-serif, TengwarTelcontar;
   }
 }
 
@@ -202,7 +200,7 @@
   min-width: 300px;
 
   color: white;
-  background-color: rgba(35, 35, 35, 0.9);
+  background-color: rgba(35 35 35 / 90%);
 
   font-size: 14px;
 
@@ -223,12 +221,12 @@
   }
 
   span {
-    color: rgb(150, 150, 150);
+    color: rgb(150 150 150);
   }
 }
 
 .shaka-context-menu {
-  background-color: rgba(35, 35, 35, 0.9);
+  background-color: rgba(35 35 35 / 90%);
 
   border-radius: 2px;
 
@@ -248,7 +246,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: rgba(50, 50, 50, 0.9);
+      background-color: rgba(50 50 50 / 90%);
     }
   }
 
@@ -277,7 +275,7 @@
   .show-when-controls-shown();
 
   /* A black gradient at the bottom, behind the controls, but only so high. */
-  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0, @transparent 15%);
+  background: linear-gradient(to top, black 0, transparent 15%);
 }
 
 .shaka-text-container {
@@ -305,7 +303,7 @@
   /* These are defaults which are overridden by JS or cue styles. */
   font-size: 20px;
   line-height: 1.4;  // relative to font size.
-  color: rgb(255, 255, 255);
+  color: white;
 
   span.shaka-text-wrapper {
     display: inline;
@@ -339,8 +337,8 @@
 
 .shaka-spinner {
   /* This uses the same trickery as the big play button define
-  the spinner's width and height. See .shaka-play-button
-  for the detailed explanation. */
+   * the spinner's width and height. See .shaka-play-button
+   * for the detailed explanation. */
 
   /* For the padding thing to work, spinner div needs to be an
   overlay-parent and spinner svg - an overlay child. */
@@ -348,11 +346,11 @@
 
   margin: 0;
   box-sizing: border-box;
-  padding: @spinner-size-percentage / 2;
+  padding: calc(@spinner-size-percentage / 2);
   width: 0;
   height: 0;
 
   /* Add a bit of a white shadow to keep our black spinner visible
-  on a black background. */
-  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
+   * on a black background. */
+  filter: drop-shadow(0 0 2px rgba(255 255 255 / 50%));
 }

package/ui/less/overflow_menu.less

@@ -18,7 +18,7 @@
 
   /* Styles for the menu itself. */
   background: white;
-  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 9px 0 rgba(0 0 0 / 40%);
   border-radius: 2px;
   max-height: 250px;
   min-width: 180px;
@@ -52,7 +52,7 @@
 
     /* When hovered, the button's background is highlighted. */
     &:hover {
-      background: rgb(224, 224, 224);
+      background: rgb(224 224 224);
     }
 
     /* The button is clickable, showing cursor pointer */
@@ -64,7 +64,7 @@
     }
 
     .shaka-keyboard-navigation &:focus {
-      background: rgb(224, 224, 224);
+      background: rgb(224 224 224);
     }
   }
 
@@ -109,7 +109,7 @@
  * language, the currently-selected resolution, etc. */
 .shaka-current-selection-span {
   /* This is dimmer than the other span, which is the name of the submenu. */
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0 0 0 / 54%);
 }
 
 /* The submenus have somewhat different margins inside them. */

package/ui/less/range_elements.less

@@ -39,7 +39,7 @@
   .overlay-parent();
 
   /* Vertical margins to occupy the same space as the thumb. */
-  margin: (@thumb-size - @track-height)/2 6px;
+  margin: calc((@thumb-size - @track-height) / 2) 6px;
 
   /* Smaller height to contain the background for the virtual track. */
   height: @track-height;
@@ -57,6 +57,11 @@
   /* The track should fill the range element. */
   width: 100%;
 
+  /* Since range elements are special input elements, they must reflect user
+   * interaction, so when the user hovers over the range element, the cursor
+   * must be a pointer. */
+  cursor: pointer;
+
   /* The track should be tall enough to contain the thumb without clipping it.
    * It is very tricky to make the thumb show outside the track on IE 11, and
    * it is incompatible with our background gradients. */
@@ -104,7 +109,7 @@
 
   /* Position the top of the range element so that it is centered on the
    * container. Note that the container is actually smaller than the thumb. */
-  top: (@track-height - @thumb-size) / 2;
+  top: calc((@track-height - @thumb-size) / 2);
 
   /* Make sure clicking at the very top of the bar still takes effect and is not
    * confused with clicking the video to play/pause it. */

package/ui/less/tooltip.less

@@ -48,22 +48,22 @@
 
       /* Override .material-icons-round text styling */
       font-family: Roboto-Regular, Roboto, sans-serif;
-      line-height: @material-icons-width / 2;
+      line-height: calc(@material-icons-width / 2);
       white-space: nowrap;
       font-size: 13px;
 
       /* Styling */
-      background: rgba(35, 35, 35, 0.9);
+      background: rgba(35 35 35 / 90%);
       color: white;
       border-radius: 3px;
       padding: 5px 10px;
 
       /* Positioning */
       position: absolute;
-      bottom: @material-icons-width + 5px;
+      bottom: calc(@material-icons-width + 5px);
 
       /* Left attribute is set to half of the width of the parent button */
-      left: @material-icons-width / 2;
+      left: calc(@material-icons-width / 2);
 
       /* The tooltip is also translated 50% to appear centered */
       .translateX(-0.5);

package/ui/locales/sjn-translations.yaml

@@ -0,0 +1,257 @@
+# Shaka Player Sindarin (Elvish) Translations
+# Copyright 2022 Google LLC
+# SPDX-License-Identifier: Apache-2.0
+
+# This documents the manual translation of our UI into Sindarin.
+# This file is not consumed automatically.
+
+# References:
+#  - Font: http://freetengwar.sourceforge.net/tengtelc.html
+#  - Transliteration & dictionary: https://www.tecendil.com/?mode=sindarin
+#  - Dictionary: https://www.jrrvf.com/hisweloke/sindar/
+#  - Dictionary: https://www.elfdict.com/w/run/s?include_old=1
+#  - Grammar: https://www.elvish.org/gwaith/sindarin_intro.htm
+#  - Grammar: https://eldamo.org/content/grammar-indexes/grammars-s.html
+#  - Imperative ending: -o
+#  - Thesaurus: https://www.thesaurus.com/
+
+translations:
+ - key: AD_DURATION
+   english: "Ad duration"
+   sjn-literal: "time for break for money"
+   sjn-roman: "lû an hastië an mirian"
+   sjn: "    "
+
+ - key: AD_PROGRESS
+   english: "Ad [AD_ON] of [NUM_ADS]"
+   sjn-literal: "break for money [A] / [B]"
+   sjn-roman: "hastië an mirian [A] / [B]"
+   sjn: "   [AD_ON] / [NUM_ADS]"
+
+ - key: AD_TIME
+   english: "Ad: [AD_TIME]"
+   sjn-literal: "break for money: [A]"
+   sjn-roman: "hastië an mirian: [A]"
+   sjn: "  : [AD_TIME]"
+
+ - key: AIRPLAY
+   english: "AirPlay"
+   sjn-literal: "heavens-make-play"
+   sjn-roman: "menelnortho"
+   sjn: ""
+
+ - key: AUTO_QUALITY
+   english: "Auto"
+   sjn-literal: "adapt/make fit"
+   sjn-roman: "cammo"
+   sjn: ""
+
+ - key: BACK
+   english: "Back"
+   sjn-literal: "return"
+   sjn-roman: "dan"
+   sjn: ""
+
+ - key: CAPTIONS
+   english: "Captions"
+   sjn-literal: "words written"
+   sjn-roman: "pith teithiel"
+   sjn: " "
+
+ - key: CAST
+   english: "Cast..."
+   sjn-literal: "throw"
+   sjn-roman: "hanto"
+   sjn: ""
+
+ - key: ENTER_LOOP_MODE
+   english: "Loop the current video"
+   sjn-literal: "enter repeating"
+   sjn-roman: "minno enquetië"
+   sjn: " "
+
+ - key: ENTER_PICTURE_IN_PICTURE
+   english: "Enter Picture-in-Picture"
+   sjn-literal: "enter mind-picture within mind-picture"
+   sjn-roman: "minno fanwos bir fanwos"
+   sjn: "   "
+
+ - key: EXIT_FULL_SCREEN
+   english: "Exit full screen"
+   sjn-literal: "escape mind-picture full"
+   sjn-roman: "uthro fanwos panta"
+   sjn: "  "
+
+ - key: EXIT_LOOP_MODE
+   english: "Stop looping the current video"
+   sjn-literal: "escape repeating"
+   sjn-roman: "uthro enquetië"
+   sjn: " "
+
+ - key: EXIT_PICTURE_IN_PICTURE
+   english: "Exit Picture-in-Picture"
+   sjn-literal: "escape mind-picture within mind-picture"
+   sjn-roman: "uthro fanwos bir fanwos"
+   sjn: "   "
+
+ - key: FAST_FORWARD
+   english: "Fast-forward"
+   sjn-literal: "make-run fast"
+   sjn-roman: "northo lim"
+   sjn: " "
+
+ - key: FULL_SCREEN
+   english: "Full screen"
+   sjn-literal: "mind-picture full"
+   sjn-roman: "fanwos panta"
+   sjn: " "
+
+ - key: LANGUAGE
+   english: "Language"
+   sjn-literal: "language"
+   sjn-roman: "lambë"
+   sjn: ""
+
+ - key: LIVE
+   english: "Live"
+   sjn-literal: "freshest"
+   sjn-roman: "cîrwain"
+   sjn: ""
+
+ - key: LOOP
+   english: "Loop"
+   sjn-literal: "repeat"
+   sjn-roman: "enqueto"
+   sjn: ""
+
+ - key: MORE_SETTINGS
+   english: "More settings"
+   sjn-literal: "more+choices"
+   sjn-roman: "galainc"
+   sjn: ""
+
+ - key: MULTIPLE_LANGUAGES
+   english: "Multiple languages"
+   sjn-literal: "language without count"
+   sjn-roman: "lambë arnoediad"
+   sjn: " "
+
+ - key: MUTE
+   english: "Mute"
+   sjn-literal: "silence"
+   sjn-roman: "dîn"
+   sjn: ""
+
+ - key: NOT_APPLICABLE
+   english: "Not applicable"
+   sjn-literal: "not important"
+   sjn-roman: "la bâl"
+   sjn: " "
+
+ - key: OFF
+   english: "Off"
+   sjn-literal: "nothing"
+   sjn-roman: "unt"
+   sjn: ""
+
+ - key: ON
+   english: "On"
+   sjn-literal: "active"
+   sjn-roman: "carweg"
+   sjn: ""
+
+ - key: PAUSE
+   english: "Pause"
+   sjn-literal: "tarry/wait/pause"
+   sjn-roman: "hasto"
+   sjn: ""
+
+ - key: PICTURE_IN_PICTURE
+   english: "Picture-in-picture"
+   sjn-literal: "mind-picture within mind-picture"
+   sjn-roman: "fanwos bir fanwos"
+   sjn: "  "
+
+ - key: PLAY
+   english: "Play"
+   sjn-literal: "make-run"
+   sjn-roman: "northo"
+   sjn: ""
+
+ - key: PLAYBACK_RATE
+   english: "Playback speed"
+   sjn-literal: "speed"
+   sjn-roman: "lintië"
+   sjn: ""
+
+ - key: REPLAY
+   english: "Replay"
+   sjn-literal: "make-run again"
+   sjn-roman: "adnortho"
+   sjn: ""
+
+ - key: RESOLUTION
+   english: "Resolution"
+   sjn-literal: "value/preciousness"
+   sjn-roman: "meiras"
+   sjn: ""
+
+ - key: REWIND
+   english: "Rewind"
+   sjn-literal: "make-run backwards"
+   sjn-roman: "northo abont"
+   sjn: " "
+
+ - key: SEEK
+   english: "Seek"
+   sjn-literal: "time"
+   sjn-roman: "lû"
+   sjn: ""
+
+ - key: SKIP_AD
+   english: "Skip Ad"
+   sjn-literal: "leap across break for money"
+   sjn-roman: "cabo thar hastië an mirian"
+   sjn: "    "
+
+ - key: SKIP_TO_LIVE
+   english: "Skip ahead to live"
+   sjn-literal: "leap to freshest"
+   sjn-roman: "cabo na cîrwain"
+   sjn: "  "
+
+ - key: STATISTICS
+   english: "Statistics"
+   sjn-literal: "interrogate numbers"
+   sjn-roman: "cetho neth"
+   sjn: " "
+
+ - key: SUBTITLE_FORCED
+   english: "Forced"
+   sjn-literal: "words written firm/abiding"
+   sjn-roman: "pith teithiel taug"
+   sjn: "  "
+
+ - key: UNDETERMINED_LANGUAGE
+   english: "Undetermined"
+   sjn-literal: "not known"
+   sjn-roman: "la sinnen"
+   sjn: " "
+
+ - key: UNMUTE
+   english: "Unmute"
+   sjn-literal: "noise/sound"
+   sjn-roman: "lhôn"
+   sjn: ""
+
+ - key: UNRECOGNIZED_LANGUAGE
+   english: "Unrecognized"
+   sjn-literal: "not known"
+   sjn-roman: "la sinnen"
+   sjn: " "
+
+ - key: VOLUME
+   english: "Volume"
+   sjn-literal: "loud(ness)"
+   sjn-roman: "brui"
+   sjn: ""

package/ui/locales/sjn.json

@@ -0,0 +1,42 @@
+{
+  "AD_DURATION": "    ",
+  "AD_PROGRESS": "   [AD_ON] / [NUM_ADS]",
+  "AD_TIME": "  : [AD_TIME]",
+  "AIRPLAY": "",
+  "AUTO_QUALITY": "",
+  "BACK": "",
+  "CAPTIONS": " ",
+  "CAST": "",
+  "ENTER_LOOP_MODE": " ",
+  "ENTER_PICTURE_IN_PICTURE": "   ",
+  "EXIT_FULL_SCREEN": "  ",
+  "EXIT_LOOP_MODE": " ",
+  "EXIT_PICTURE_IN_PICTURE": "   ",
+  "FAST_FORWARD": " ",
+  "FULL_SCREEN": " ",
+  "LANGUAGE": "",
+  "LIVE": "",
+  "LOOP": "",
+  "MORE_SETTINGS": "",
+  "MULTIPLE_LANGUAGES": " ",
+  "MUTE": "",
+  "NOT_APPLICABLE": " ",
+  "OFF": "",
+  "ON": "",
+  "PAUSE": "",
+  "PICTURE_IN_PICTURE": "  ",
+  "PLAY": "",
+  "PLAYBACK_RATE": "",
+  "REPLAY": "",
+  "RESOLUTION": "",
+  "REWIND": " ",
+  "SEEK": "",
+  "SKIP_AD": "    ",
+  "SKIP_TO_LIVE": "  ",
+  "STATISTICS": " ",
+  "SUBTITLE_FORCED": "  ",
+  "UNDETERMINED_LANGUAGE": " ",
+  "UNMUTE": "",
+  "UNRECOGNIZED_LANGUAGE": " ",
+  "VOLUME": ""
+}

package/ui/localization.js

@@ -23,17 +23,18 @@ goog.require('shaka.util.LanguageUtils');
  * If a string is not available, it will return the localized
  * form in the closest related locale.
  *
- * @implements {EventTarget}
  * @final
  * @export
  */
-shaka.ui.Localization = class {
+shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
   /**
    * @param {string} fallbackLocale
    *    The fallback locale that should be used. It will be assumed that this
    *    locale should have entries for just about every request.
    */
   constructor(fallbackLocale) {
+    super();
+
     /** @private {string} */
     this.fallbackLocale_ = shaka.util.LanguageUtils.normalize(fallbackLocale);
 
@@ -62,41 +63,16 @@ shaka.ui.Localization = class {
      * @private {!Map.<string, !Map.<string, string>>}
      */
     this.localizations_ = new Map();
-
-    /**
-     * The event target that we will wrap so that we can fire events
-     * without having to manage the listeners directly.
-     *
-     * @private {!EventTarget}
-     */
-    this.events_ = new shaka.util.FakeEventTarget();
-  }
-
-  /**
-   * @override
-   * @export
-   */
-  addEventListener(type, listener, options) {
-    this.events_.addEventListener(type, listener, options);
-  }
-
-  /**
-   * @override
-   * @export
-   */
-  removeEventListener(type, listener, options) {
-    // Apparently Closure says we can be passed a null |option|, but we can't
-    // pass a null option, so if we get have a null-like |option|, force it to
-    // be undefined.
-    this.events_.removeEventListener(type, listener, options || undefined);
   }
 
   /**
    * @override
    * @export
    */
-  dispatchEvent(event) {
-    return this.events_.dispatchEvent(event);
+  release() {
+    // Placeholder so that readers know this implements IReleasable (via
+    // FakeEventTarget)
+    super.release();
   }
 
   /**
@@ -130,7 +106,7 @@ shaka.ui.Localization = class {
         (locale) => !this.localizations_.has(locale));
 
     if (missing.length) {
-      this.events_.dispatchEvent(new shaka.util.FakeEvent(
+      this.dispatchEvent(new shaka.util.FakeEvent(
           Class.UNKNOWN_LOCALES,
           (new Map()).set('locales', missing)));
     }
@@ -141,7 +117,7 @@ shaka.ui.Localization = class {
 
     const data = (new Map()).set(
         'locales', found.length ? found : [this.fallbackLocale_]);
-    this.events_.dispatchEvent(new shaka.util.FakeEvent(
+    this.dispatchEvent(new shaka.util.FakeEvent(
         Class.LOCALE_CHANGED,
         data));
   }
@@ -193,7 +169,7 @@ shaka.ui.Localization = class {
     // data from.
     this.updateCurrentMap_();
 
-    this.events_.dispatchEvent(new FakeEvent(Class.LOCALE_UPDATED));
+    this.dispatchEvent(new FakeEvent(Class.LOCALE_UPDATED));
 
     return this;
   }
@@ -249,7 +225,7 @@ shaka.ui.Localization = class {
         // Make a copy to avoid leaking references.
         .set('locales', Array.from(this.currentLocales_))
         .set('missing', id);
-    this.events_.dispatchEvent(new FakeEvent(Class.UNKNOWN_LOCALIZATION, data));
+    this.dispatchEvent(new FakeEvent(Class.UNKNOWN_LOCALIZATION, data));
 
     return '';
   }
@@ -377,7 +353,7 @@ shaka.ui.Localization = class {
           // an array.
           .set('missing', Array.from(missing));
 
-      this.events_.dispatchEvent(new shaka.util.FakeEvent(
+      this.dispatchEvent(new shaka.util.FakeEvent(
           shaka.ui.Localization.MISSING_LOCALIZATIONS,
           data));
     }

package/ui/seek_bar.js

@@ -74,7 +74,8 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     });
 
     /**
-     * When user is scrubbing the seek bar - we should pause the video - see https://git.io/JUhHG
+     * When user is scrubbing the seek bar - we should pause the video - see
+     * https://github.com/google/shaka-player/pull/2898#issuecomment-705229215
      * but will conditionally pause or play the video after scrubbing
      * depending on its previous state
      *

package/externs/svgelement.js

@@ -1,18 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Externs for SVGElement which are missing from the Closure
- * compiler.
- *
- * @externs
- */
-
-// Right now, we only use SVGElement in an instanceof check, so we just declare
-// the type with nothing on it.
-
-/** @constructor */
-function SVGElement() {}