shaka-player 4.12.9 → 4.13.0

package/ui/localization.js

@@ -42,7 +42,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
      * The current mappings that will be used when requests are made. Since
      * nothing has been loaded yet, there will be nothing in this map.
      *
-     * @private {!Map.<string, string>}
+     * @private {!Map<string, string>}
      */
     this.currentMap_ = new Map();
 
@@ -51,7 +51,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
      * have anything when we first initialize, an empty set means "no
      * preference".
      *
-     * @private {!Set.<string>}
+     * @private {!Set<string>}
      */
     this.currentLocales_ = new Set();
 
@@ -60,7 +60,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
      *  - The outer map is a mapping from locale code to localizations.
      *  - The inner map is a mapping from id to localized text.
      *
-     * @private {!Map.<string, !Map.<string, string>>}
+     * @private {!Map<string, !Map<string, string>>}
      */
     this.localizations_ = new Map();
   }
@@ -81,7 +81,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
    * an event identifying which locales it does not know. The localization
    * system will then continue to operate using the closest matches it has.
    *
-   * @param {!Iterable.<string>} locales
+   * @param {!Iterable<string>} locales
    *    The locale codes for the requested locales in order of preference.
    * @export
    */
@@ -128,7 +128,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
    *
    * @param {string} locale
    *   The locale that the localizations should be added to.
-   * @param {!Map.<string, string>} localizations
+   * @param {!Map<string, string>} localizations
    *   A mapping of id to localized text that should used to modify the internal
    *   collection of localizations.
    * @param {shaka.ui.Localization.ConflictResolution=} conflictResolution
@@ -183,7 +183,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
    *      dictionary.set(key, localization.resolve(key));
    *    }
    *
-   * @param {!Map.<string, string>} dictionary
+   * @param {!Map<string, string>} dictionary
    * @export
    */
   resolveDictionary(dictionary) {
@@ -233,7 +233,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
   /**
    * The locales currently used. An empty set means "no preference".
    *
-   * @return {!Set.<string>}
+   * @return {!Set<string>}
    * @export
    */
   getCurrentLocales() {
@@ -246,11 +246,11 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
   updateCurrentMap_() {
     const LanguageUtils = shaka.util.LanguageUtils;
 
-    /** @type {!Map.<string, !Map.<string, string>>} */
+    /** @type {!Map<string, !Map<string, string>>} */
     const localizations = this.localizations_;
     /** @type {string} */
     const fallbackLocale = this.fallbackLocale_;
-    /** @type {!Iterable.<string>} */
+    /** @type {!Iterable<string>} */
     const preferredLocales = this.currentLocales_;
 
     /**
@@ -275,12 +275,12 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
      *    // Preference 2 base
      *    'dwarfish',
      *    // Preference 2 Siblings
-     *    'dwarfish-MOUNTAIN', 'dwarfish-NORTH', "dwarish-SOUTH",
+     *    'dwarfish-MOUNTAIN', 'dwarfish-NORTH', "dwarfish-SOUTH",
      *    // Fallback
      *    'common-HUMAN',
      * ])
      *
-     * @type {!Set.<string>}
+     * @type {!Set<string>}
      */
     const localeOrder = new Set();
 
@@ -316,7 +316,7 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
     localeOrder.add(fallbackLocale);
 
     // Add all the sibling maps.
-    /** @type {!Array.<!Map.<string, string>>} */
+    /** @type {!Array<!Map<string, string>>} */
     const mergeOrder = [];
     for (const locale of localeOrder) {
       const map = localizations.get(locale);
@@ -343,10 +343,10 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
     // missing entries. This will allow app developers to find holes in their
     // localizations.
 
-    /** @type {!Iterable.<string>} */
+    /** @type {!Iterable<string>} */
     const allKeys = this.currentMap_.keys();
 
-    /** @type {!Set.<string>} */
+    /** @type {!Set<string>} */
     const missing = new Set();
 
     for (const locale of this.currentLocales_) {
@@ -373,9 +373,9 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
    * Go through a map and add all the keys that are in |keys| but not in
    * |map| to |missing|.
    *
-   * @param {!Map.<string, string>} map
-   * @param {!Iterable.<string>} keys
-   * @param {!Set.<string>} missing
+   * @param {!Map<string, string>} map
+   * @param {!Iterable<string>} keys
+   * @param {!Set<string>} missing
    * @private
    */
   static findMissingKeys_(map, keys, missing) {
@@ -454,7 +454,7 @@ shaka.ui.Localization.LOCALE_UPDATED = 'locale-updated';
  * @event shaka.ui.Localization.UnknownLocalesEvent
  * @property {string} type
  *   'unknown-locales'
- * @property {!Array.<string>} locales
+ * @property {!Array<string>} locales
  *    The locales that the user wanted but could not be found.
  * @exportDoc
  */
@@ -463,7 +463,7 @@ shaka.ui.Localization.LOCALE_UPDATED = 'locale-updated';
  * @event shaka.ui.Localization.MissingLocalizationsEvent
  * @property {string} type
  *   'unknown-localization'
- * @property {!Array.<string>} locales
+ * @property {!Array<string>} locales
  *    The locales that the user wanted.
  * @property {string} missing
  *    The id of the unknown entry.
@@ -476,7 +476,7 @@ shaka.ui.Localization.LOCALE_UPDATED = 'locale-updated';
  *   'missing-localizations'
  * @property {string} locale
  *    The locale that the user wanted.
- * @property {!Array.<string>} missing
+ * @property {!Array<string>} missing
  *    The ids of the missing entries.
  * @exportDoc
  */
@@ -485,7 +485,7 @@ shaka.ui.Localization.LOCALE_UPDATED = 'locale-updated';
  * @event shaka.ui.Localization.LocaleChangedEvent
  * @property {string} type
  *   'locale-changed'
- * @property {!Array.<string>} locales
+ * @property {!Array<string>} locales
  *    The new set of locales that user wanted,
  *    and that were successfully found.
  * @exportDoc

package/ui/loop_button.js

@@ -87,9 +87,9 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     // 2) create a timer that checks the state of the loop property
     // regularly.
     // I (ismena) opted to go for #2 as at least video.currentTime
-    // will be changing constatntly during playback, to say nothing
+    // will be changing constantly during playback, to say nothing
     // about other video properties. I expect the timer to be less
-    // of a performence hit.
+    // of a performance hit.
     /**
      * The timer that tracks down the ad progress.
      *

package/ui/overflow_menu.js

@@ -39,7 +39,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     /** @private {HTMLElement} */
     this.controlsContainer_ = this.controls.getControlsContainer();
 
-    /** @private {!Array.<shaka.extern.IUIElement>} */
+    /** @private {!Array<shaka.extern.IUIElement>} */
     this.children_ = [];
 
     this.addOverflowMenuButton_();
@@ -217,6 +217,6 @@ shaka.ui.Controls.registerElement(
     'overflow_menu', new shaka.ui.OverflowMenu.Factory());
 
 
-/** @private {!Map.<string, !shaka.extern.IUIElement.Factory>} */
+/** @private {!Map<string, !shaka.extern.IUIElement.Factory>} */
 shaka.ui.OverflowMenu.elementNamesToFactories_ = new Map();
 

package/ui/playback_rate_selection.js

@@ -52,7 +52,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
       this.updatePlaybackRateSelection_(this.player.getPlaybackRate());
     });
 
-    /** @type {!Map.<string, number>} */
+    /** @type {!Map<string, number>} */
     this.playbackRates_ = new Map(this.controls.getConfig().playbackRates
         .map((rate) => [rate + 'x', rate]));
 

package/ui/presentation_time.js

@@ -64,7 +64,10 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
         });
   }
 
-  /** @private */
+  /**
+   * @param {string} value
+   * @private
+   */
   setValue_(value) {
     // To avoid constant updates to the DOM, which makes debugging more
     // difficult, only set the value if it has changed.  If we don't do this

package/ui/range_element.js

@@ -30,8 +30,8 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
-   * @param {!Array.<string>} containerClassNames
-   * @param {!Array.<string>} barClassNames
+   * @param {!Array<string>} containerClassNames
+   * @param {!Array<string>} barClassNames
    */
   constructor(parent, controls, containerClassNames, barClassNames) {
     super(parent, controls);

package/ui/resolution_selection.js

@@ -20,6 +20,7 @@ goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.FakeEvent');
 goog.require('shaka.util.Functional');
+goog.require('shaka.util.MimeUtils');
 goog.requireType('shaka.ui.Controls');
 
 
@@ -74,7 +75,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   /** @private */
   updateResolutionSelection_() {
     const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
-    /** @type {!Array.<shaka.extern.Track>} */
+    /** @type {!Array<shaka.extern.Track>} */
     let tracks = [];
     // When played with src=, the variant tracks available from
     // player.getVariantTracks() represent languages, not resolutions.
@@ -125,11 +126,17 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
         tracks = tracks.filter((track, idx) => {
           // Keep the first one with the same height and framerate or bandwidth.
           const otherIdx = tracks.findIndex((t) => {
-            return t.height == track.height &&
+            let ret = t.height == track.height &&
                 t.videoBandwidth == track.videoBandwidth &&
                 t.frameRate == track.frameRate &&
                 t.hdr == track.hdr &&
                 t.videoLayout == track.videoLayout;
+            if (ret && this.controls.getConfig().showVideoCodec &&
+                t.videoCodec && track.videoCodec) {
+              ret = shaka.util.MimeUtils.getNormalizedCodec(t.videoCodec) ==
+                  shaka.util.MimeUtils.getNormalizedCodec(track.videoCodec);
+            }
+            return ret;
           });
           return otherIdx == idx;
         });
@@ -137,11 +144,17 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
         tracks = tracks.filter((track, idx) => {
           // Keep the first one with the same height and framerate or bandwidth.
           const otherIdx = tracks.findIndex((t) => {
-            return t.height == track.height &&
+            let ret = t.height == track.height &&
                 t.bandwidth == track.bandwidth &&
                 t.frameRate == track.frameRate &&
                 t.hdr == track.hdr &&
                 t.videoLayout == track.videoLayout;
+            if (ret && this.controls.getConfig().showVideoCodec &&
+                t.videoCodec && track.videoCodec) {
+              ret = shaka.util.MimeUtils.getNormalizedCodec(t.videoCodec) ==
+                  shaka.util.MimeUtils.getNormalizedCodec(track.videoCodec);
+            }
+            return ret;
           });
           return otherIdx == idx;
         });
@@ -246,7 +259,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
   /**
    * @param {!shaka.extern.Track} track
-   * @param {!Array.<!shaka.extern.Track>} tracks
+   * @param {!Array<!shaka.extern.Track>} tracks
    * @return {string}
    * @private
    */
@@ -284,8 +297,31 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
       return otherTrack != track && otherTrack.height == track.height;
     });
     if (hasDuplicateResolution) {
-      const bandwidth = track.videoBandwidth || track.bandwidth;
-      text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
+      const hasDuplicateBandwidth = tracks.some((otherTrack) => {
+        return otherTrack != track && otherTrack.height == track.height &&
+            (otherTrack.videoBandwidth || otherTrack.bandwidth) ==
+            (track.videoBandwidth || track.bandwidth);
+      });
+      if (!hasDuplicateBandwidth) {
+        const bandwidth = track.videoBandwidth || track.bandwidth;
+        text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
+      }
+
+      if (this.controls.getConfig().showVideoCodec) {
+        const getVideoCodecName = (videoCodec) => {
+          let name = '';
+          if (videoCodec) {
+            const codec = shaka.util.MimeUtils.getNormalizedCodec(videoCodec);
+            if (codec.startsWith('dovi-')) {
+              name = 'Dolby Vision';
+            } else {
+              name = codec.toUpperCase();
+            }
+          }
+          return name ? ' ' + name : name;
+        };
+        text += getVideoCodecName(track.videoCodec);
+      }
     }
     return text;
   }

package/ui/rewind_button.js

@@ -40,7 +40,7 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
-    /** @private {!Array.<number>} */
+    /** @private {!Array<number>} */
     this.rewindRates_ = this.controls.getConfig().rewindRates;
 
     this.eventManager.listen(

package/ui/seek_bar.js

@@ -143,7 +143,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.hideThumbnail_();
     });
 
-    /** @private {!Array.<!shaka.extern.AdCuePoint>} */
+    /** @private {!Array<!shaka.extern.AdCuePoint>} */
     this.adCuePoints_ = [];
 
     this.eventManager.listen(this.localization,
@@ -313,7 +313,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
 
   /**
    * @override
-  */
+   */
   isShowing() {
     // It is showing by default, so it is hidden if shaka-hidden is in the list.
     return !this.container.classList.contains('shaka-hidden');
@@ -442,12 +442,12 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
 
   /**
    * @param {string} color
-   * @param {number} fract
+   * @param {number} fraction
    * @return {string}
    * @private
    */
-  makeColor_(color, fract) {
-    return color + ' ' + (fract * 100) + '%';
+  makeColor_(color, fraction) {
+    return color + ' ' + (fraction * 100) + '%';
   }
 
 

package/ui/statistics_button.js

@@ -77,10 +77,10 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
     /** @private {!Array} */
     this.skippedStats_ = ['stateHistory', 'switchHistory'];
 
-    /** @private {!Object.<string, number>} */
+    /** @private {!Object<string, number>} */
     this.currentStats_ = this.player.getStats();
 
-    /** @private {!Object.<string, HTMLElement>} */
+    /** @private {!Object<string, HTMLElement>} */
     this.displayedElements_ = {};
 
 
@@ -136,7 +136,7 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       }
     };
 
-    /** @private {!Object.<string, function(string):string>} */
+    /** @private {!Object<string, function(string): string>} */
     this.parseFrom_ = {
       'width': parsePx,
       'height': parsePx,
@@ -220,7 +220,11 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
     this.stateSpan_.textContent = this.localization.resolve(labelText);
   }
 
-  /** @private */
+  /**
+   * @param {string} name
+   * @return {!HTMLElement}
+   * @private
+   */
   generateComponent_(name) {
     const section = shaka.util.Dom.createHTMLElement('div');
 

package/ui/text_selection.js

@@ -140,7 +140,8 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         this.currentSelection,
         this.localization,
         this.controls.getConfig().textTrackLabelFormat,
-        this.controls.getConfig().showAudioChannelCountVariants);
+        this.controls.getConfig().showAudioChannelCountVariants,
+        this.controls.getConfig().showAudioCodec);
 
     // Add the Off button
     const offButton = shaka.util.Dom.createButton();
@@ -178,7 +179,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
    */
   async onTextTrackSelected_(track) {
     // setTextTrackVisibility should be called after selectTextTrack.
-    // selectTextTrack sets a text stream, and setTextTrackVisiblity(true)
+    // selectTextTrack sets a text stream, and setTextTrackVisibility(true)
     // will set a text stream if it isn't already set. Consequently, reversing
     // the order of these calls makes two languages display simultaneously
     // if captions are turned off -> on in a different language.

package/ui/ui.js

@@ -14,6 +14,7 @@ goog.require('shaka.Player');
 goog.require('shaka.log');
 goog.require('shaka.polyfill');
 goog.require('shaka.ui.Controls');
+goog.require('shaka.ui.Watermark');
 goog.require('shaka.util.ConfigUtils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.FakeEvent');
@@ -66,6 +67,11 @@ shaka.ui.Overlay = class {
 
     videoContainer['ui'] = this;
     video['ui'] = this;
+    /** @private {shaka.ui.Watermark} */
+    this.watermark_ = new shaka.ui.Watermark(
+        this.videoContainer_,
+        this.controls_,
+    );
   }
 
 
@@ -83,6 +89,7 @@ shaka.ui.Overlay = class {
       await this.player_.destroy();
     }
     this.player_ = null;
+    this.watermark_ = null;
   }
 
 
@@ -168,6 +175,27 @@ shaka.ui.Overlay = class {
   }
 
 
+  /**
+   * @param {string} text
+   * @param {?shaka.ui.Watermark.Options=} options
+   * @export
+   */
+  setTextWatermark(text, options) {
+    if (this.watermark_) {
+      this.watermark_.setTextWatermark(text, options);
+    }
+  }
+
+  /**
+   * @export
+   */
+  removeWatermark() {
+    if (this.watermark_) {
+      this.watermark_.removeWatermark();
+    }
+  }
+
+
   /**
    * @return {!shaka.extern.UIConfiguration}
    * @private
@@ -274,6 +302,8 @@ shaka.ui.Overlay = class {
       defaultVrProjectionMode: 'equirectangular',
       setupMediaSession: true,
       preferVideoFullScreenInVisionOS: false,
+      showAudioCodec: true,
+      showVideoCodec: true,
     };
 
     // eslint-disable-next-line no-restricted-syntax
@@ -515,8 +545,8 @@ shaka.ui.Overlay = class {
 
   /**
    * @param {!Element} container
-   * @param {!NodeList.<!Element>} canvases
-   * @param {!NodeList.<!Element>} vrCanvases
+   * @param {!NodeList<!Element>} canvases
+   * @param {!NodeList<!Element>} vrCanvases
    * @return {{lcevcCanvas: !Element, vrCanvas: !Element}}
    * @private
    */

package/ui/vr_manager.js

@@ -338,7 +338,7 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
     if (this.gl_ && this.canvas_) {
       this.vrWebgl_ = new shaka.ui.VRWebgl(
           this.video_, this.player_, this.canvas_, this.gl_, projectionMode);
-      this.setupVRListerners_();
+      this.setupVRListeners_();
     }
   }
 
@@ -371,7 +371,7 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
   /**
    * @private
    */
-  setupVRListerners_() {
+  setupVRListeners_() {
     // Start
     this.eventManager_.listen(this.container_, 'mousedown', (event) => {
       if (!this.onGesture_) {
@@ -551,7 +551,7 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
 };
 
 /**
- * @constant {number}
+ * @const {number}
  * @private
  */
 shaka.ui.VRManager.TO_RADIANS_ = Math.PI / 180;

package/ui/vr_utils.js

@@ -11,15 +11,15 @@ goog.provide('shaka.ui.VRUtils');
 shaka.ui.VRUtils = class {
   /**
    * @param {number} resolution
-   * @return {{vertices: !Array.<number>, textureCoords: !Array.<number>,
-   *          indices: !Array.<number>}}
+   * @return {{vertices: !Array<number>, textureCoords: !Array<number>,
+   *          indices: !Array<number>}}
    */
   static generateSphere(resolution) {
-    /** @type {!Array.<number>} */
+    /** @type {!Array<number>} */
     const vertices = [];
-    /** @type {!Array.<number>} */
+    /** @type {!Array<number>} */
     const textureCoords = [];
-    /** @type {!Array.<number>} */
+    /** @type {!Array<number>} */
     const indices = [];
 
     for (let i = 0; i <= resolution; i++) {
@@ -62,11 +62,11 @@ shaka.ui.VRUtils = class {
   }
 
   /**
-   * @return {{vertices: !Array.<number>, textureCoords: !Array.<number>,
-   *          indices: !Array.<number>}}
+   * @return {{vertices: !Array<number>, textureCoords: !Array<number>,
+   *          indices: !Array<number>}}
    */
   static generateCube() {
-    /** @type {!Array.<number>} */
+    /** @type {!Array<number>} */
     const vertices = [
       //  order : left top back right bottom front
       // Front face 3
@@ -100,7 +100,7 @@ shaka.ui.VRUtils = class {
       1.0, 1.0, -1.0,
       1.0, -1.0, -1.0,
     ];
-    /** @type {!Array.<number>} */
+    /** @type {!Array<number>} */
     const textureCoords = [
       // Left Face
       2 / 3, 0.5,
@@ -133,7 +133,7 @@ shaka.ui.VRUtils = class {
       2 / 3, 0.5,
       2 / 3, 1.0,
     ];
-    /** @type {!Array.<number>} */
+    /** @type {!Array<number>} */
     const indices = [
       // Front face
       0, 1, 2,
@@ -162,7 +162,7 @@ shaka.ui.VRUtils = class {
 /**
  * Sphere vertex shader.
  *
- * @constant {string}
+ * @const {string}
  */
 shaka.ui.VRUtils.VERTEX_SPHERE_SHADER =
 `attribute vec4 a_vPosition;
@@ -183,7 +183,7 @@ void main()
 /**
  * Sphere fragment shader.
  *
- * @constant {string}
+ * @const {string}
  */
 shaka.ui.VRUtils.FRAGMENT_SPHERE_SHADER =
 `precision highp float;
@@ -204,7 +204,7 @@ highp vec4 texelColor =
 /**
  * Cube vertex shader.
  *
- * @constant {string}
+ * @const {string}
  */
 shaka.ui.VRUtils.VERTEX_CUBE_SHADER =
 `attribute vec4 aVertexPosition;
@@ -221,7 +221,7 @@ void main(void) {
 /**
  * Cube fragment shader.
  *
- * @constant {string}
+ * @const {string}
  */
 shaka.ui.VRUtils.FRAGMENT_CUBE_SHADER =
 `varying highp vec2 vTextureCoord;

package/ui/vr_webgl.js

@@ -94,8 +94,8 @@ shaka.ui.VRWebgl = class {
     this.previousCanvasHeight_ = 0;
 
     /**
-     * @private {?{vertices: !Array.<number>, textureCoords: !Array.<number>,
-     *           indices: !Array.<number>}}
+     * @private {?{vertices: !Array<number>, textureCoords: !Array<number>,
+     *           indices: !Array<number>}}
      */
     this.geometry_ = null;
 
@@ -188,7 +188,7 @@ shaka.ui.VRWebgl = class {
   }
 
   /**
-   * Toogle stereoscopic mode
+   * Toggle stereoscopic mode
    */
   toggleStereoscopicMode() {
     this.stereoscopicMode_ = !this.stereoscopicMode_;
@@ -574,7 +574,7 @@ shaka.ui.VRWebgl = class {
       shaka.ui.Matrix4x4.multiply(matrix, out, matrix);
     } else {
       // Doing this we restart the value to the previous position,
-      // to not mantain a value over 90º or under -90º.
+      // to not maintain a value over 90º or under -90º.
       this.positionY_ -= pitch;
     }
 
@@ -694,6 +694,6 @@ shaka.ui.VRWebgl = class {
 };
 
 /**
- * @constant {number}
+ * @const {number}
  */
 shaka.ui.VRWebgl.ANIMATION_DURATION_ = 0.5;