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.  * @suppress {missingRequire} TODO(b/152540451): this shouldn't be needed
  10.  */
  12. goog.provide('shaka.text.SimpleTextDisplayer');
  14. goog.require('goog.asserts');
  15. goog.require('shaka.log');
  16. goog.require('shaka.text.Cue');
  17. goog.require('shaka.text.Utils');
  20. /**
  21.  * A text displayer plugin using the browser's native VTTCue interface.
  22.  *
  23.  * @implements {shaka.extern.TextDisplayer}
  24.  * @export
  25.  */
  26. shaka.text.SimpleTextDisplayer = class {
  27.   /** @param {HTMLMediaElement} video */
  28.   constructor(video) {
  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.       // NOTE: There is no API available to remove a TextTrack from a video
  39.       // element.
  40.       track.mode = 'disabled';
  42.       if (track.label == shaka.Player.TextTrackLabel) {
  43.         this.textTrack_ = track;
  44.       }
  45.     }
  47.     if (!this.textTrack_) {
  48.       // As far as I can tell, there is no observable difference between setting
  49.       // kind to 'subtitles' or 'captions' when creating the TextTrack object.
  50.       // The individual text tracks from the manifest will still have their own
  51.       // kinds which can be displayed in the app's UI.
  52.       this.textTrack_ = video.addTextTrack(
  53.           'subtitles', shaka.Player.TextTrackLabel);
  54.     }
  55.     this.textTrack_.mode = 'hidden';
  56.   }
  58.   /**
  59.    * @override
  60.    * @export
  61.    */
  62.   remove(start, end) {
  63.     // Check that the displayer hasn't been destroyed.
  64.     if (!this.textTrack_) {
  65.       return false;
  66.     }
  68.     const removeInRange = (cue) => {
  69.       const inside = cue.startTime < end && cue.endTime > start;
  70.       return inside;
  71.     };
  73.     shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeInRange);
  75.     return true;
  76.   }
  78.   /**
  79.    * @override
  80.    * @export
  81.    */
  82.   append(cues) {
  83.     const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues, []);
  85.     // Convert cues.
  86.     const textTrackCues = [];
  87.     const cuesInTextTrack = this.textTrack_.cues ?
  88.                             Array.from(this.textTrack_.cues) : [];
  90.     for (const inCue of flattenedCues) {
  91.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  92.       // into two segments.
  93.       // To avoid displaying duplicate cues, if the current textTrack cues
  94.       // list already contains the cue, skip it.
  95.       const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  96.         if (cueInTextTrack.startTime == inCue.startTime &&
  97.             cueInTextTrack.endTime == inCue.endTime &&
  98.             cueInTextTrack.text == inCue.payload) {
  99.           return true;
  100.         }
  101.         return false;
  102.       });
  104.       if (!containsCue) {
  105.         const cue =
  106.             shaka.text.SimpleTextDisplayer.convertToTextTrackCue_(inCue);
  107.         if (cue) {
  108.           textTrackCues.push(cue);
  109.         }
  110.       }
  111.     }
  113.     // Sort the cues based on start/end times.  Make a copy of the array so
  114.     // we can get the index in the original ordering.  Out of order cues are
  115.     // rejected by Edge.  See https://bit.ly/2K9VX3s
  116.     const sortedCues = textTrackCues.slice().sort((a, b) => {
  117.       if (a.startTime != b.startTime) {
  118.         return a.startTime - b.startTime;
  119.       } else if (a.endTime != b.endTime) {
  120.         return a.endTime - b.startTime;
  121.       } else {
  122.         // The browser will display cues with identical time ranges from the
  123.         // bottom up.  Reversing the order of equal cues means the first one
  124.         // parsed will be at the top, as you would expect.
  125.         // See https://github.com/shaka-project/shaka-player/issues/848 for
  126.         // more info.
  127.         // However, this ordering behavior is part of VTTCue's "line" field.
  128.         // Some platforms don't have a real VTTCue and use a polyfill instead.
  129.         // When VTTCue is polyfilled or does not support "line", we should _not_
  130.         // reverse the order.  This occurs on legacy Edge.
  131.         // eslint-disable-next-line no-restricted-syntax
  132.         if ('line' in VTTCue.prototype) {
  133.           // Native VTTCue
  134.           return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  135.         } else {
  136.           // Polyfilled VTTCue
  137.           return textTrackCues.indexOf(a) - textTrackCues.indexOf(b);
  138.         }
  139.       }
  140.     });
  142.     for (const cue of sortedCues) {
  143.       this.textTrack_.addCue(cue);
  144.     }
  145.   }
  147.   /**
  148.    * @override
  149.    * @export
  150.    */
  151.   destroy() {
  152.     if (this.textTrack_) {
  153.       const removeIt = (cue) => true;
  154.       shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  156.       // NOTE: There is no API available to remove a TextTrack from a video
  157.       // element.
  158.       this.textTrack_.mode = 'disabled';
  159.     }
  161.     this.textTrack_ = null;
  162.     return Promise.resolve();
  163.   }
  165.   /**
  166.    * @override
  167.    * @export
  168.    */
  169.   isTextVisible() {
  170.     return this.textTrack_.mode == 'showing';
  171.   }
  173.   /**
  174.    * @override
  175.    * @export
  176.    */
  177.   setTextVisibility(on) {
  178.     this.textTrack_.mode = on ? 'showing' : 'hidden';
  179.   }
  181.   /**
  182.    * @param {!shaka.text.Cue} shakaCue
  183.    * @return {TextTrackCue}
  184.    * @private
  185.    */
  186.   static convertToTextTrackCue_(shakaCue) {
  187.     if (shakaCue.startTime >= shakaCue.endTime) {
  188.       // Edge will throw in this case.
  189.       // See issue #501
  190.       shaka.log.warning('Invalid cue times: ' + shakaCue.startTime +
  191.                         ' - ' + shakaCue.endTime);
  192.       return null;
  193.     }
  195.     const Cue = shaka.text.Cue;
  196.     /** @type {VTTCue} */
  197.     const vttCue = new VTTCue(
  198.         shakaCue.startTime,
  199.         shakaCue.endTime,
  200.         shakaCue.payload);
  202.     // NOTE: positionAlign and lineAlign settings are not supported by Chrome
  203.     // at the moment, so setting them will have no effect.
  204.     // The bug on chromium to implement them:
  205.     // https://bugs.chromium.org/p/chromium/issues/detail?id=633690
  207.     vttCue.lineAlign = shakaCue.lineAlign;
  208.     vttCue.positionAlign = shakaCue.positionAlign;
  209.     if (shakaCue.size) {
  210.       vttCue.size = shakaCue.size;
  211.     }
  213.     try {
  214.       // Safari 10 seems to throw on align='center'.
  215.       vttCue.align = shakaCue.textAlign;
  216.     } catch (exception) {}
  218.     if (shakaCue.textAlign == 'center' && vttCue.align != 'center') {
  219.       // We want vttCue.position = 'auto'. By default, |position| is set to
  220.       // "auto". If we set it to "auto" safari will throw an exception, so we
  221.       // must rely on the default value.
  222.       vttCue.align = 'middle';
  223.     }
  225.     if (shakaCue.writingMode ==
  226.             Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  227.       vttCue.vertical = 'lr';
  228.     } else if (shakaCue.writingMode ==
  229.              Cue.writingMode.VERTICAL_RIGHT_TO_LEFT) {
  230.       vttCue.vertical = 'rl';
  231.     }
  233.     // snapToLines flag is true by default
  234.     if (shakaCue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  235.       vttCue.snapToLines = false;
  236.     }
  238.     if (shakaCue.line != null) {
  239.       vttCue.line = shakaCue.line;
  240.     }
  242.     if (shakaCue.position != null) {
  243.       vttCue.position = shakaCue.position;
  244.     }
  246.     return vttCue;
  247.   }
  249.   /**
  250.    * Iterate over all the cues in a text track and remove all those for which
  251.    * |predicate(cue)| returns true.
  252.    *
  253.    * @param {!TextTrack} track
  254.    * @param {function(!TextTrackCue):boolean} predicate
  255.    * @private
  256.    */
  257.   static removeWhere_(track, predicate) {
  258.     // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  259.     // something other than "disabled".
  260.     //
  261.     // If the track is already showing, then we should keep it as showing. But
  262.     // if it something else, we will use hidden so that we don't "flash" cues on
  263.     // the screen.
  264.     const oldState = track.mode;
  265.     const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  267.     track.mode = tempState;
  269.     goog.asserts.assert(
  270.         track.cues,
  271.         'Cues should be accessible when mode is set to "' + tempState + '".');
  273.     // Create a copy of the list to avoid errors while iterating.
  274.     for (const cue of Array.from(track.cues)) {
  275.       if (cue && predicate(cue)) {
  276.         track.removeCue(cue);
  277.       }
  278.     }
  280.     track.mode = oldState;
  281.   }
  282. };