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