Source: lib/text/simple_text_displayer.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  7. /**
  8.  * @fileoverview
  9.  */
  11. goog.provide('shaka.text.SimpleTextDisplayer');
  13. goog.require('goog.asserts');
  14. goog.require('shaka.text.Utils');
  17. /**
  18.  * A text displayer plugin using the browser's native VTTCue interface.
  19.  *
  20.  * @implements {shaka.extern.TextDisplayer}
  21.  * @export
  22.  */
  23. shaka.text.SimpleTextDisplayer = class {
  24.   /**
  25.    * @param {HTMLMediaElement} video
  26.    * @param {string} label
  27.    */
  28.   constructor(video, label) {
  29.     /** @private {TextTrack} */
  30.     this.textTrack_ = null;
  32.     // TODO: Test that in all cases, the built-in CC controls in the video
  33.     // element are toggling our TextTrack.
  35.     // If the video element has TextTracks, disable them.  If we see one that
  36.     // was created by a previous instance of Shaka Player, reuse it.
  37.     for (const track of Array.from(video.textTracks)) {
  38.       if (track.kind === 'metadata' || track.kind === 'chapters') {
  39.         continue;
  40.       }
  41.       // NOTE: There is no API available to remove a TextTrack from a video
  42.       // element.
  43.       track.mode = 'disabled';
  45.       if (track.label == label) {
  46.         this.textTrack_ = track;
  47.       }
  48.     }
  50.     if (!this.textTrack_) {
  51.       // As far as I can tell, there is no observable difference between setting
  52.       // kind to 'subtitles' or 'captions' when creating the TextTrack object.
  53.       // The individual text tracks from the manifest will still have their own
  54.       // kinds which can be displayed in the app's UI.
  55.       this.textTrack_ = video.addTextTrack('subtitles', label);
  56.     }
  57.     this.textTrack_.mode = 'hidden';
  58.   }
  61.   /**
  62.    * @override
  63.    * @export
  64.    */
  65.   configure(config) {
  66.     // Unused.
  67.   }
  69.   /**
  70.    * @override
  71.    * @export
  72.    */
  73.   remove(start, end) {
  74.     // Check that the displayer hasn't been destroyed.
  75.     if (!this.textTrack_) {
  76.       return false;
  77.     }
  79.     const removeInRange = (cue) => {
  80.       const inside = cue.startTime < end && cue.endTime > start;
  81.       return inside;
  82.     };
  84.     shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeInRange);
  86.     return true;
  87.   }
  89.   /**
  90.    * @override
  91.    * @export
  92.    */
  93.   append(cues) {
  94.     if (!this.textTrack_) {
  95.       return;
  96.     }
  97.     const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues);
  99.     // Convert cues.
  100.     const textTrackCues = [];
  101.     const cuesInTextTrack = this.textTrack_.cues ?
  102.                             Array.from(this.textTrack_.cues) : [];
  104.     for (const inCue of flattenedCues) {
  105.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  106.       // into two segments.
  107.       // To avoid displaying duplicate cues, if the current textTrack cues
  108.       // list already contains the cue, skip it.
  109.       const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  110.         if (cueInTextTrack.startTime == inCue.startTime &&
  111.             cueInTextTrack.endTime == inCue.endTime &&
  112.             cueInTextTrack.text == inCue.payload) {
  113.           return true;
  114.         }
  115.         return false;
  116.       });
  118.       if (!containsCue && inCue.payload) {
  119.         const cue =
  120.             shaka.text.Utils.mapShakaCueToNativeCue(inCue);
  121.         if (cue) {
  122.           textTrackCues.push(cue);
  123.         }
  124.       }
  125.     }
  127.     // Sort the cues based on start/end times.  Make a copy of the array so
  128.     // we can get the index in the original ordering.  Out of order cues are
  129.     // rejected by Edge.  See https://bit.ly/2K9VX3s
  130.     const sortedCues = textTrackCues.slice().sort((a, b) => {
  131.       if (a.startTime != b.startTime) {
  132.         return a.startTime - b.startTime;
  133.       } else if (a.endTime != b.endTime) {
  134.         return a.endTime - b.startTime;
  135.       } else {
  136.         // The browser will display cues with identical time ranges from the
  137.         // bottom up.  Reversing the order of equal cues means the first one
  138.         // parsed will be at the top, as you would expect.
  139.         // See https://github.com/shaka-project/shaka-player/issues/848 for
  140.         // more info.
  141.         // However, this ordering behavior is part of VTTCue's "line" field.
  142.         // Some platforms don't have a real VTTCue and use a polyfill instead.
  143.         // When VTTCue is polyfilled or does not support "line", we should _not_
  144.         // reverse the order.  This occurs on legacy Edge.
  145.         // eslint-disable-next-line no-restricted-syntax
  146.         if ('line' in VTTCue.prototype) {
  147.           // Native VTTCue
  148.           return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  149.         } else {
  150.           // Polyfilled VTTCue
  151.           return textTrackCues.indexOf(a) - textTrackCues.indexOf(b);
  152.         }
  153.       }
  154.     });
  156.     for (const cue of sortedCues) {
  157.       this.textTrack_.addCue(cue);
  158.     }
  159.   }
  161.   /**
  162.    * @override
  163.    * @export
  164.    */
  165.   destroy() {
  166.     if (this.textTrack_) {
  167.       const removeIt = (cue) => true;
  168.       shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  170.       // NOTE: There is no API available to remove a TextTrack from a video
  171.       // element.
  172.       this.textTrack_.mode = 'disabled';
  173.     }
  175.     this.textTrack_ = null;
  176.     return Promise.resolve();
  177.   }
  179.   /**
  180.    * @override
  181.    * @export
  182.    */
  183.   isTextVisible() {
  184.     if (!this.textTrack_) {
  185.       return false;
  186.     }
  187.     return this.textTrack_.mode == 'showing';
  188.   }
  190.   /**
  191.    * @override
  192.    * @export
  193.    */
  194.   setTextVisibility(on) {
  195.     if (this.textTrack_) {
  196.       this.textTrack_.mode = on ? 'showing' : 'hidden';
  197.     }
  198.   }
  200.   /**
  201.    * Iterate over all the cues in a text track and remove all those for which
  202.    * |predicate(cue)| returns true.
  203.    *
  204.    * @param {!TextTrack} track
  205.    * @param {function(!TextTrackCue):boolean} predicate
  206.    * @private
  207.    */
  208.   static removeWhere_(track, predicate) {
  209.     // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  210.     // something other than "disabled".
  211.     //
  212.     // If the track is already showing, then we should keep it as showing. But
  213.     // if it something else, we will use hidden so that we don't "flash" cues on
  214.     // the screen.
  215.     const oldState = track.mode;
  216.     const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  218.     track.mode = tempState;
  220.     goog.asserts.assert(
  221.         track.cues,
  222.         'Cues should be accessible when mode is set to "' + tempState + '".');
  224.     // Create a copy of the list to avoid errors while iterating.
  225.     for (const cue of Array.from(track.cues)) {
  226.       if (cue && predicate(cue)) {
  227.         track.removeCue(cue);
  228.       }
  229.     }
  231.     track.mode = oldState;
  232.   }
  233. };