shaka-player 4.9.13 → 4.10.1

package/ui/language_utils.js

@@ -39,6 +39,20 @@ shaka.ui.LanguageUtils = class {
       return track.active == true;
     });
 
+    /** @type {!Map<string, !Set<string>>} */
+    const codecsByLanguage = new Map();
+    for (const track of tracks) {
+      if (!track.audioCodec) {
+        continue;
+      }
+      if (!codecsByLanguage.has(track.language)) {
+        codecsByLanguage.set(track.language, new Set());
+      }
+      codecsByLanguage.get(track.language).add(track.audioCodec);
+    }
+    const hasDifferentAudioCodecs = (language) =>
+      codecsByLanguage.has(language) && codecsByLanguage.get(language).size > 1;
+
     // Remove old tracks
     // 1. Save the back to menu button
     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
@@ -59,7 +73,8 @@ shaka.ui.LanguageUtils = class {
       }
     };
 
-    const getCombination = (language, rolesString, label, channelsCount) => {
+    const getCombination = (language, rolesString, label, channelsCount,
+        audioCodec) => {
       const keys = [
         language,
         rolesString,
@@ -67,6 +82,9 @@ shaka.ui.LanguageUtils = class {
       if (showAudioChannelCountVariants && channelsCount != null) {
         keys.push(channelsCount);
       }
+      if (hasDifferentAudioCodecs(language) && audioCodec) {
+        keys.push(audioCodec);
+      }
       if (label &&
           trackLabelFormat == shaka.ui.Overlay.TrackLabelFormat.LABEL) {
         keys.push(label);
@@ -82,6 +100,21 @@ shaka.ui.LanguageUtils = class {
       return name;
     };
 
+    const getAudioCodecName = (audioCodec) => {
+      let name = '';
+      audioCodec = audioCodec.toLowerCase();
+      if (audioCodec.startsWith('mp4a')) {
+        name = 'AAC';
+      } else if (audioCodec === 'ec-3' || audioCodec === 'ac-3') {
+        name = 'Dolby';
+      } else if (audioCodec === 'opus') {
+        name = 'Opus';
+      } else if (audioCodec === 'flac') {
+        name = 'fLaC';
+      }
+      return name ? ' ' + name : name;
+    };
+
     /** @type {!Map.<string, !Set.<string>>} */
     const rolesByLanguage = new Map();
     for (const track of tracks) {
@@ -96,7 +129,8 @@ shaka.ui.LanguageUtils = class {
     const combinationsMade = new Set();
     const selectedCombination = selectedTrack ? getCombination(
         selectedTrack.language, getRolesString(selectedTrack),
-        selectedTrack.label, selectedTrack.channelsCount) : '';
+        selectedTrack.label, selectedTrack.channelsCount,
+        selectedTrack.audioCodec) : '';
 
     for (const track of tracks) {
       const language = track.language;
@@ -105,8 +139,10 @@ shaka.ui.LanguageUtils = class {
       const rolesString = getRolesString(track);
       const label = track.label;
       const channelsCount = track.channelsCount;
+      const audioCodec = track.audioCodec;
       const combinationName =
-          getCombination(language, rolesString, label, channelsCount);
+          getCombination(language, rolesString, label, channelsCount,
+              audioCodec);
       if (combinationsMade.has(combinationName)) {
         continue;
       }
@@ -124,6 +160,9 @@ shaka.ui.LanguageUtils = class {
           shaka.ui.LanguageUtils.getLanguageName(language, localization);
       switch (trackLabelFormat) {
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE:
+          if (hasDifferentAudioCodecs(language)) {
+            span.textContent += getAudioCodecName(audioCodec);
+          }
           if (showAudioChannelCountVariants) {
             span.textContent += getChannelsCountName(channelsCount);
           }
@@ -132,6 +171,9 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.ROLE:
+          if (hasDifferentAudioCodecs(language)) {
+            span.textContent += getAudioCodecName(audioCodec);
+          }
           if (showAudioChannelCountVariants) {
             span.textContent += getChannelsCountName(channelsCount);
           }
@@ -148,6 +190,9 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE_ROLE:
+          if (hasDifferentAudioCodecs(language)) {
+            span.textContent += getAudioCodecName(audioCodec);
+          }
           if (showAudioChannelCountVariants) {
             span.textContent += getChannelsCountName(channelsCount);
           }

package/ui/less/containers.less

@@ -248,6 +248,38 @@
   }
 }
 
+.shaka-ad-statistics-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  min-width: 150px;
+
+  color: white;
+  background-color: rgba(35 35 35 / 90%);
+
+  font-size: 14px;
+
+  padding: 5px 10px;
+  border-radius: 2px;
+
+  position: absolute;
+  z-index: 2;
+  right: 15px;
+  top: 15px;
+
+  /* Fades out with the other controls. */
+  .show-when-controls-shown();
+
+  div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  span {
+    color: rgb(150 150 150);
+  }
+}
+
 .shaka-context-menu {
   background-color: rgba(35 35 35 / 90%);
 

package/ui/less/thumbnails.less

@@ -24,3 +24,16 @@
     text-align: center;
   }
 }
+
+#shaka-player-ui-time-container {
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  box-shadow: 0 8px 8px 0 rgb(0 0 0 / 50%);
+  color: black;
+  overflow: hidden;
+  padding: 1px 7px;
+  position: absolute;
+  visibility: hidden;
+  z-index: 1;
+}

package/ui/locales/en.json

@@ -1,12 +1,14 @@
 {
   "AD_DURATION": "Ad duration",
   "AD_PROGRESS": "Ad [AD_ON] of [NUM_ADS]",
+  "AD_STATISTICS": "Ad statistics",
   "AD_TIME": "Ad: [AD_TIME]",
   "AIRPLAY": "AirPlay",
   "AUTO_QUALITY": "Auto",
   "BACK": "Back",
   "CAPTIONS": "Captions",
   "CAST": "Cast...",
+  "DOWNLOAD_VIDEO_FRAME": "Save video frame",
   "ENTER_LOOP_MODE": "Loop the current video",
   "ENTER_PICTURE_IN_PICTURE": "Enter Picture-in-Picture",
   "EXIT_FULL_SCREEN": "Exit full screen",

package/ui/locales/es-419.json

@@ -1,6 +1,7 @@
 {
   "AD_DURATION": "Duración del anuncio",
   "AD_PROGRESS": "Anuncio [AD_ON] de [NUM_ADS]",
+  "AD_STATISTICS": "Estadísticas de anuncios",
   "AD_TIME": "Anuncio: [AD_TIME]",
   "AUTO_QUALITY": "Automático",
   "BACK": "Atrás",
@@ -32,6 +33,7 @@
   "SEEK": "Buscar",
   "SKIP_AD": "Omitir anuncio",
   "SKIP_TO_LIVE": "Adelantar hasta la transmisión en vivo",
+  "STATISTICS": "Estadísticas",
   "SUBTITLE_FORCED": "Forzado",
   "SURROUND": "Envolvente",
   "TOGGLE_STEREOSCOPIC": "Alternar estereoscópico",

package/ui/locales/es.json

@@ -1,12 +1,14 @@
 {
   "AD_DURATION": "Duración del anuncio",
   "AD_PROGRESS": "Anuncio [AD_ON] de [NUM_ADS]",
+  "AD_STATISTICS": "Estadísticas de anuncios",
   "AD_TIME": "Anuncio: [AD_TIME]",
   "AIRPLAY": "AirPlay",
   "AUTO_QUALITY": "Automático",
   "BACK": "Atrás",
   "CAPTIONS": "Subtítulos",
   "CAST": "Enviar...",
+  "DOWNLOAD_VIDEO_FRAME": "Guardar fotograma",
   "ENTER_LOOP_MODE": "Reproducir en bucle el vídeo actual",
   "ENTER_PICTURE_IN_PICTURE": "Activar el modo imagen en imagen",
   "EXIT_FULL_SCREEN": "Salir del modo de pantalla completa",
@@ -34,6 +36,7 @@
   "SEEK": "Buscar",
   "SKIP_AD": "Saltar anuncio",
   "SKIP_TO_LIVE": "Ir al vídeo en directo",
+  "STATISTICS": "Estadísticas",
   "SUBTITLE_FORCED": "Forzado",
   "SURROUND": "Envolvente",
   "TOGGLE_STEREOSCOPIC": "Alternar estereoscópico",

package/ui/locales/fr.json

@@ -8,6 +8,7 @@
   "BACK": "Retour",
   "CAPTIONS": "Sous-titres",
   "CAST": "Caster…",
+  "DOWNLOAD_VIDEO_FRAME": "Enregistrer l'image vidéo",
   "ENTER_LOOP_MODE": "Lire en boucle la vidéo en cours",
   "ENTER_PICTURE_IN_PICTURE": "Utiliser le mode Picture-in-Picture",
   "EXIT_FULL_SCREEN": "Quitter le mode plein écran",

package/ui/locales/pl.json

@@ -8,6 +8,7 @@
   "BACK": "Wstecz",
   "CAPTIONS": "Napisy",
   "CAST": "Przesyłaj...",
+  "DOWNLOAD_VIDEO_FRAME": "Zapisz klatkę wideo",
   "ENTER_LOOP_MODE": "Odtwarzaj bieżący film w pętli",
   "ENTER_PICTURE_IN_PICTURE": "Włącz tryb obrazu w obrazie",
   "EXIT_FULL_SCREEN": "Zamknij pełny ekran",

package/ui/locales/pt-BR.json

@@ -8,6 +8,7 @@
   "BACK": "Voltar",
   "CAPTIONS": "Legendas",
   "CAST": "Transmitir...",
+  "DOWNLOAD_VIDEO_FRAME": "Salvar quadro de vídeo",
   "ENTER_LOOP_MODE": "Repetir o vídeo atual",
   "ENTER_PICTURE_IN_PICTURE": "Entrar no modo picture-in-picture",
   "EXIT_FULL_SCREEN": "Sair do modo tela cheia",

package/ui/locales/pt-PT.json

@@ -8,6 +8,7 @@
   "BACK": "Anterior",
   "CAPTIONS": "Legendas",
   "CAST": "Transmitir...",
+  "DOWNLOAD_VIDEO_FRAME": "Salvar quadro de vídeo",
   "ENTER_LOOP_MODE": "Repetir o vídeo atual",
   "ENTER_PICTURE_IN_PICTURE": "Entrar no modo ecrã no ecrã",
   "EXIT_FULL_SCREEN": "Sair do modo de ecrã inteiro",

package/ui/locales/source.json

@@ -7,6 +7,10 @@
     "description": "The contents of the ad countdown element, describing what ad you are on in a sequence of ads.",
     "message": "Ad [AD_ON:1] of [NUM_ADS:6]"
   },
+  "AD_STATISTICS": {
+    "description": "Label for a button that displays ad statistics.",
+    "message": "Ad statistics"
+  },
   "AD_TIME": {
     "description": "The text content of a label that shows how much time is left in the current ad.",
     "message": "Ad: [AD_TIME:0:05/0:10]"
@@ -33,6 +37,10 @@
     "description": "Label for a button used to open the native Cast dialog in the browser and select a destination to Cast to.",
     "message": "Cast..."
   },
+  "DOWNLOAD_VIDEO_FRAME": {
+    "description": "Label for a button used to download the current video frame.",
+    "message": "Save video frame"
+  },
   "ENTER_LOOP_MODE": {
     "description": "Label for a button that controls the loop mode of a video player. This mode will loop (play over and over) currently selected video.",
     "message": "Loop the current video"

package/ui/mute_button.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.MuteButton');
 
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -62,19 +62,19 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     });
 
     this.eventManager.listen(this.adManager,
-        shaka.ads.AdManager.AD_VOLUME_CHANGED, () => {
+        shaka.ads.Utils.AD_VOLUME_CHANGED, () => {
           this.updateAriaLabel_();
           this.updateIcon_();
         });
 
     this.eventManager.listen(this.adManager,
-        shaka.ads.AdManager.AD_MUTED, () => {
+        shaka.ads.Utils.AD_MUTED, () => {
           this.updateAriaLabel_();
           this.updateIcon_();
         });
 
     this.eventManager.listen(this.adManager,
-        shaka.ads.AdManager.AD_STOPPED, () => {
+        shaka.ads.Utils.AD_STOPPED, () => {
           // The base class also listens for this event and sets this.ad
           // to null. This is a safeguard in case of a race condition as
           // the label and icon code depends on this.ad being correctly

package/ui/overflow_menu.js

@@ -8,7 +8,7 @@
 goog.provide('shaka.ui.OverflowMenu');
 
 goog.require('goog.asserts');
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.log');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
@@ -59,14 +59,14 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
+        this.adManager, shaka.ads.Utils.AD_STARTED, () => {
           if (this.ad && this.ad.isLinear()) {
             shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
           }
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STOPPED, () => {
+        this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
           shaka.ui.Utils.setDisplay(this.overflowMenuButton_, true);
         });
 

package/ui/play_button.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.PlayButton');
 
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.util.Dom');
@@ -27,8 +27,6 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
   constructor(parent, controls) {
     super(parent, controls);
 
-    const AdManager = shaka.ads.AdManager;
-
     /** @protected {!HTMLButtonElement} */
     this.button = shaka.util.Dom.createButton();
     this.parent.appendChild(this.button);
@@ -58,22 +56,22 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
       this.updateIcon();
     });
 
-    this.eventManager.listen(this.adManager, AdManager.AD_PAUSED, () => {
+    this.eventManager.listen(this.adManager, shaka.ads.Utils.AD_PAUSED, () => {
       this.updateAriaLabel();
       this.updateIcon();
     });
 
-    this.eventManager.listen(this.adManager, AdManager.AD_RESUMED, () => {
+    this.eventManager.listen(this.adManager, shaka.ads.Utils.AD_RESUMED, () => {
       this.updateAriaLabel();
       this.updateIcon();
     });
 
-    this.eventManager.listen(this.adManager, AdManager.AD_STARTED, () => {
+    this.eventManager.listen(this.adManager, shaka.ads.Utils.AD_STARTED, () => {
       this.updateAriaLabel();
       this.updateIcon();
     });
 
-    this.eventManager.listen(this.adManager, AdManager.AD_STOPPED, () => {
+    this.eventManager.listen(this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
       this.updateAriaLabel();
       this.updateIcon();
     });

package/ui/presentation_time.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.PresentationTimeTracker');
 
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Locales');
@@ -54,12 +54,12 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
     });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
+        this.adManager, shaka.ads.Utils.AD_STARTED, () => {
           shaka.ui.Utils.setDisplay(this.currentTime_, false);
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STOPPED, () => {
+        this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
           shaka.ui.Utils.setDisplay(this.currentTime_, true);
         });
   }

package/ui/save_video_frame_button.js

@@ -0,0 +1,196 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.SaveVideoFrameButton');
+
+goog.require('shaka.ads.Utils');
+goog.require('shaka.ui.ContextMenu');
+goog.require('shaka.ui.Controls');
+goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Locales');
+goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.Utils');
+goog.require('shaka.util.Dom');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.SaveVideoFrameButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    const LocIds = shaka.ui.Locales.Ids;
+    /** @private {!HTMLButtonElement} */
+    this.button_ = shaka.util.Dom.createButton();
+    this.button_.classList.add('shaka-save.video-frame-button');
+    this.button_.classList.add('shaka-tooltip');
+
+    /** @private {!HTMLElement} */
+    this.icon_ = shaka.util.Dom.createHTMLElement('i');
+    this.icon_.classList.add('material-icons-round');
+    this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.DOWNLOAD;
+    this.button_.appendChild(this.icon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
+    this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    this.nameSpan_.textContent =
+        this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
+    label.appendChild(this.nameSpan_);
+
+    /** @private {!HTMLElement} */
+    this.currentState_ = shaka.util.Dom.createHTMLElement('span');
+    this.currentState_.classList.add('shaka-current-selection-span');
+    label.appendChild(this.currentState_);
+
+    this.button_.appendChild(label);
+
+    this.updateLocalizedStrings_();
+
+    this.parent.appendChild(this.button_);
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(this.button_, 'click', () => {
+      this.onClick_();
+    });
+
+    const vr = this.controls.getVR();
+    this.eventManager.listen(vr, 'vrstatuschanged', () => {
+      this.checkAvailability_();
+    });
+
+    this.eventManager.listen(
+        this.adManager, shaka.ads.Utils.AD_STARTED, () => {
+          this.checkAvailability_();
+        });
+
+    this.eventManager.listen(
+        this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
+          this.checkAvailability_();
+        });
+
+    this.eventManager.listen(this.player, 'unloading', () => {
+      this.checkAvailability_();
+    });
+
+    this.eventManager.listen(this.player, 'loaded', () => {
+      this.checkAvailability_();
+    });
+
+    this.eventManager.listen(this.player, 'loaded', () => {
+      this.checkAvailability_();
+    });
+
+    this.eventManager.listen(this.video, 'play', () => {
+      this.checkAvailability_();
+    });
+
+    this.eventManager.listen(this.video, 'pause', () => {
+      this.checkAvailability_();
+    });
+
+    this.eventManager.listen(this.video, 'seeking', () => {
+      this.checkAvailability_();
+    });
+
+    this.checkAvailability_();
+  }
+
+
+  /** @private */
+  onClick_() {
+    const canvas = /** @type {!HTMLCanvasElement}*/ (
+      document.createElement('canvas'));
+    const context = /** @type {CanvasRenderingContext2D} */ (
+      canvas.getContext('2d'));
+
+    const video = /** @type {!HTMLVideoElement} */ (
+      this.controls.getLocalVideo());
+
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    const dataURL = canvas.toDataURL('image/png');
+
+    const downloadLink = /** @type {!HTMLAnchorElement}*/ (
+      document.createElement('a'));
+    downloadLink.href = dataURL;
+    downloadLink.download =
+        'videoframe_' + video.currentTime.toFixed(3) + '.png';
+    downloadLink.click();
+  }
+
+
+  /**
+   * @private
+   */
+  checkAvailability_() {
+    let available = true;
+    if (this.controls.isPlayingVR()) {
+      available = false;
+    }
+    if (this.player.drmInfo() || this.player.isAudioOnly()) {
+      available = false;
+    }
+    if (this.ad) {
+      available = false;
+    }
+    shaka.ui.Utils.setDisplay(this.button_, available);
+  }
+
+
+  /**
+   * @private
+   */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+
+    this.button_.ariaLabel =
+        this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
+    this.nameSpan_.textContent =
+        this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.SaveVideoFrameButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.SaveVideoFrameButton(rootElement, controls);
+  }
+};
+
+
+shaka.ui.OverflowMenu.registerElement(
+    'save_video_frame', new shaka.ui.SaveVideoFrameButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'save_video_frame', new shaka.ui.SaveVideoFrameButton.Factory());