Source: lib/text/simple_text_displayer.js

  1. /** @license
  2.  * Copyright 2016 Google LLC
  3.  * SPDX-License-Identifier: Apache-2.0
  4.  */
  6. goog.provide('shaka.text.SimpleTextDisplayer');
  8. goog.require('goog.asserts');
  9. goog.require('shaka.log');
  10. goog.require('shaka.text.Cue');
  13. /**
  14.  * @summary
  15.  * This defines the default text displayer plugin. An instance of this
  16.  * class is used when no custom displayer is given.
  17.  *
  18.  * This class simply converts shaka.text.Cue objects to
  19.  * TextTrackCues and feeds them to the browser.
  20.  *
  21.  * @implements {shaka.extern.TextDisplayer}
  22.  * @export
  23.  */
  24. shaka.text.SimpleTextDisplayer = class {
  25.   /** @param {HTMLMediaElement} video */
  26.   constructor(video) {
  27.     /** @private {TextTrack} */
  28.     this.textTrack_ = null;
  30.     // TODO: Test that in all cases, the built-in CC controls in the video
  31.     // element are toggling our TextTrack.
  33.     // If the video element has TextTracks, disable them.  If we see one that
  34.     // was created by a previous instance of Shaka Player, reuse it.
  35.     for (const track of Array.from(video.textTracks)) {
  36.       // NOTE: There is no API available to remove a TextTrack from a video
  37.       // element.
  38.       track.mode = 'disabled';
  40.       if (track.label == shaka.Player.TextTrackLabel) {
  41.         this.textTrack_ = track;
  42.       }
  43.     }
  45.     if (!this.textTrack_) {
  46.       // As far as I can tell, there is no observable difference between setting
  47.       // kind to 'subtitles' or 'captions' when creating the TextTrack object.
  48.       // The individual text tracks from the manifest will still have their own
  49.       // kinds which can be displayed in the app's UI.
  50.       this.textTrack_ = video.addTextTrack(
  51.           'subtitles', shaka.Player.TextTrackLabel);
  52.     }
  53.     this.textTrack_.mode = 'hidden';
  54.   }
  56.   /**
  57.    * @override
  58.    * @export
  59.    */
  60.   remove(start, end) {
  61.     // Check that the displayer hasn't been destroyed.
  62.     if (!this.textTrack_) {
  63.       return false;
  64.     }
  66.     const removeInRange = (cue) => {
  67.       const inside = cue.startTime < end && cue.endTime > start;
  68.       return inside;
  69.     };
  71.     shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeInRange);
  73.     return true;
  74.   }
  76.   /**
  77.    * @override
  78.    * @export
  79.    */
  80.   append(cues) {
  81.     // Flatten the cues and their nestedCues into a list.
  82.     let flattenedCues = [];
  83.     for (const cue of cues) {
  84.       if (cue.nestedCues.length) {
  85.         flattenedCues = flattenedCues.concat(cue.nestedCues);
  86.       } else {
  87.         flattenedCues.push(cue);
  88.       }
  89.     }
  90.     // Convert cues.
  91.     const textTrackCues = [];
  92.     const cuesInTextTrack = this.textTrack_.cues ?
  93.                             Array.from(this.textTrack_.cues) : [];
  95.     for (const inCue of flattenedCues) {
  96.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  97.       // into two segments.
  98.       // To avoid displaying duplicate cues, if the current textTrack cues
  99.       // list already contains the cue, skip it.
  100.       const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  101.         if (cueInTextTrack.startTime == inCue.startTime &&
  102.             cueInTextTrack.endTime == inCue.endTime &&
  103.             cueInTextTrack.text == inCue.payload) {
  104.           return true;
  105.         }
  106.         return false;
  107.       });
  109.       if (!containsCue) {
  110.         const cue =
  111.             shaka.text.SimpleTextDisplayer.convertToTextTrackCue_(inCue);
  112.         if (cue) {
  113.           textTrackCues.push(cue);
  114.         }
  115.       }
  116.     }
  118.     // Sort the cues based on start/end times.  Make a copy of the array so
  119.     // we can get the index in the original ordering.  Out of order cues are
  120.     // rejected by IE/Edge.  See https://bit.ly/2K9VX3s
  121.     const sortedCues = textTrackCues.slice().sort((a, b) => {
  122.       if (a.startTime != b.startTime) {
  123.         return a.startTime - b.startTime;
  124.       } else if (a.endTime != b.endTime) {
  125.         return a.endTime - b.startTime;
  126.       } else {
  127.         // The browser will display cues with identical time ranges from the
  128.         // bottom up.  Reversing the order of equal cues means the first one
  129.         // parsed will be at the top, as you would expect.
  130.         // See https://github.com/google/shaka-player/issues/848 for more info.
  131.         return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  132.       }
  133.     });
  135.     for (const cue of sortedCues) {
  136.       this.textTrack_.addCue(cue);
  137.     }
  138.   }
  140.   /**
  141.    * @override
  142.    * @export
  143.    */
  144.   destroy() {
  145.     if (this.textTrack_) {
  146.       const removeIt = (cue) => true;
  147.       shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  149.       // NOTE: There is no API available to remove a TextTrack from a video
  150.       // element.
  151.       this.textTrack_.mode = 'disabled';
  152.     }
  154.     this.textTrack_ = null;
  155.     return Promise.resolve();
  156.   }
  158.   /**
  159.    * @override
  160.    * @export
  161.    */
  162.   isTextVisible() {
  163.     return this.textTrack_.mode == 'showing';
  164.   }
  166.   /**
  167.    * @override
  168.    * @export
  169.    */
  170.   setTextVisibility(on) {
  171.     this.textTrack_.mode = on ? 'showing' : 'hidden';
  172.   }
  174.   /**
  175.    * @param {!shaka.extern.Cue} shakaCue
  176.    * @return {TextTrackCue}
  177.    * @private
  178.    */
  179.   static convertToTextTrackCue_(shakaCue) {
  180.     if (shakaCue.startTime >= shakaCue.endTime) {
  181.       // IE/Edge will throw in this case.
  182.       // See issue #501
  183.       shaka.log.warning('Invalid cue times: ' + shakaCue.startTime +
  184.                         ' - ' + shakaCue.endTime);
  185.       return null;
  186.     }
  188.     const Cue = shaka.text.Cue;
  189.     /** @type {VTTCue} */
  190.     const vttCue = new VTTCue(shakaCue.startTime,
  191.         shakaCue.endTime,
  192.         shakaCue.payload);
  194.     // NOTE: positionAlign and lineAlign settings are not supported by Chrome
  195.     // at the moment, so setting them will have no effect.
  196.     // The bug on chromium to implement them:
  197.     // https://bugs.chromium.org/p/chromium/issues/detail?id=633690
  199.     vttCue.lineAlign = shakaCue.lineAlign;
  200.     vttCue.positionAlign = shakaCue.positionAlign;
  201.     if (shakaCue.size) {
  202.       vttCue.size = shakaCue.size;
  203.     }
  205.     try {
  206.       // Safari 10 seems to throw on align='center'.
  207.       vttCue.align = shakaCue.textAlign;
  208.     } catch (exception) {}
  210.     if (shakaCue.textAlign == 'center' && vttCue.align != 'center') {
  211.       // We want vttCue.position = 'auto'. By default, |position| is set to
  212.       // "auto". If we set it to "auto" safari will throw an exception, so we
  213.       // must rely on the default value.
  214.       vttCue.align = 'middle';
  215.     }
  217.     if (shakaCue.writingMode ==
  218.             Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  219.       vttCue.vertical = 'lr';
  220.     } else if (shakaCue.writingMode ==
  221.              Cue.writingMode.VERTICAL_RIGHT_TO_LEFT) {
  222.       vttCue.vertical = 'rl';
  223.     }
  225.     // snapToLines flag is true by default
  226.     if (shakaCue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  227.       vttCue.snapToLines = false;
  228.     }
  230.     if (shakaCue.line != null) {
  231.       vttCue.line = shakaCue.line;
  232.     }
  234.     if (shakaCue.position != null) {
  235.       vttCue.position = shakaCue.position;
  236.     }
  238.     return vttCue;
  239.   }
  241.   /**
  242.    * Iterate over all the cues in a text track and remove all those for which
  243.    * |predicate(cue)| returns true.
  244.    *
  245.    * @param {!TextTrack} track
  246.    * @param {function(!TextTrackCue):boolean} predicate
  247.    * @private
  248.    */
  249.   static removeWhere_(track, predicate) {
  250.     // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  251.     // something other than "disabled".
  252.     //
  253.     // If the track is already showing, then we should keep it as showing. But
  254.     // if it something else, we will use hidden so that we don't "flash" cues on
  255.     // the screen.
  256.     const oldState = track.mode;
  257.     const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  259.     track.mode = tempState;
  261.     goog.asserts.assert(
  262.         track.cues,
  263.         'Cues should be accessible when mode is set to "' + tempState + '".');
  265.     // Create a copy of the list to avoid errors while iterating.
  266.     for (const cue of Array.from(track.cues)) {
  267.       if (cue && predicate(cue)) {
  268.         track.removeCue(cue);
  269.       }
  270.     }
  272.     track.mode = oldState;
  273.   }
  274. };