shaka-player 3.3.2 → 4.0.0

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;
@@ -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));
+  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/en.json

@@ -27,6 +27,7 @@
   "PICTURE_IN_PICTURE": "Picture-in-Picture",
   "PLAY": "Play",
   "PLAYBACK_RATE": "Playback speed",
+  "QUALITY": "Quality",
   "REPLAY": "Replay",
   "RESOLUTION": "Resolution",
   "REWIND": "Rewind",

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/locales/source.json

@@ -113,6 +113,11 @@
     "message": "Playback speed",
     "description": "Label for a button used to navigate to a submenu to choose the playback speed in the video player."
   },
+  "QUALITY": {
+    "description": "Label for a button used to open a submenu to choose audio quality in the video player.",
+    "meaning": "Audio quality",
+    "message": "Quality"
+  },
   "REPLAY": {
     "description": "Label for a button used to replay the video in a video player.",
     "message": "Replay"

package/ui/resolution_selection.js

@@ -61,9 +61,6 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     });
 
     this.updateResolutionSelection_();
-
-    // Set up all the strings in the user's preferred language.
-    this.updateLocalizedStrings_();
   }
 
 
@@ -72,27 +69,6 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     /** @type {!Array.<shaka.extern.Track>} */
     let tracks = this.player.getVariantTracks();
 
-    // Hide resolution menu and button for audio-only content and src= content
-    // without resolution information.
-    // TODO: for audio-only content, this should be a bitrate selection menu
-    // instead.
-    if (tracks.length && !tracks[0].height) {
-      shaka.ui.Utils.setDisplay(this.menu, false);
-      shaka.ui.Utils.setDisplay(this.button, false);
-      return;
-    }
-    // Otherwise, restore it.
-    shaka.ui.Utils.setDisplay(this.button, true);
-
-    tracks.sort((t1, t2) => {
-      // We have already screened for audio-only content, but the compiler
-      // doesn't know that.
-      goog.asserts.assert(t1.height != null, 'Null height');
-      goog.asserts.assert(t2.height != null, 'Null height');
-
-      return t2.height - t1.height;
-    });
-
     // If there is a selected variant track, then we filter out any tracks in
     // a different language.  Then we use those remaining tracks to display the
     // available resolutions.
@@ -104,14 +80,31 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
               track.channelsCount == selectedTrack.channelsCount);
     }
 
-    // Remove duplicate entries with the same height.  This can happen if
-    // we have multiple resolutions of audio.  Pick an arbitrary one.
+    // Remove duplicate entries with the same resolution or quality depending
+    // on content type.  Pick an arbitrary one.
     tracks = tracks.filter((track, idx) => {
-      // Keep the first one with the same height.
-      const otherIdx = tracks.findIndex((t) => t.height == track.height);
+      // Keep the first one with the same height or bandwidth.
+      const otherIdx = this.player.isAudioOnly() ?
+          tracks.findIndex((t) => t.bandwidth == track.bandwidth) :
+          tracks.findIndex((t) => t.height == track.height);
       return otherIdx == idx;
     });
 
+    // Sort the tracks by height or bandwith depending on content type.
+    if (this.player.isAudioOnly()) {
+      tracks.sort((t1, t2) => {
+        goog.asserts.assert(t1.bandwidth != null, 'Null bandwidth');
+        goog.asserts.assert(t2.bandwidth != null, 'Null bandwidth');
+        return t2.bandwidth - t1.bandwidth;
+      });
+    } else {
+      tracks.sort((t1, t2) => {
+        goog.asserts.assert(t1.height != null, 'Null height');
+        goog.asserts.assert(t2.height != null, 'Null height');
+        return t2.height - t1.height;
+      });
+    }
+
     // Remove old shaka-resolutions
     // 1. Save the back to menu button
     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
@@ -133,7 +126,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           () => this.onTrackSelected_(track));
 
       const span = shaka.util.Dom.createHTMLElement('span');
-      span.textContent = track.height + 'p';
+      span.textContent = this.player.isAudioOnly() ?
+          Math.round(track.bandwidth / 1000) + ' kbits/s' : track.height + 'p';
       button.appendChild(span);
 
       if (!abrEnabled && track == selectedTrack) {
@@ -179,6 +173,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
     this.controls.dispatchEvent(
         new shaka.util.FakeEvent('resolutionselectionupdated'));
+
+    this.updateLocalizedStrings_();
   }
 
 
@@ -200,13 +196,15 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
    */
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
+    const locId = this.player.isAudioOnly() ?
+        LocIds.QUALITY : LocIds.RESOLUTION;
 
-    this.button.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
-    this.backButton.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
+    this.button.ariaLabel = this.localization.resolve(locId);
+    this.backButton.ariaLabel = this.localization.resolve(locId);
     this.backSpan.textContent =
-        this.localization.resolve(LocIds.RESOLUTION);
+        this.localization.resolve(locId);
     this.nameSpan.textContent =
-        this.localization.resolve(LocIds.RESOLUTION);
+        this.localization.resolve(locId);
     this.abrOnSpan_.textContent =
         this.localization.resolve(LocIds.AUTO_QUALITY);
 

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
      *