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');
  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.   /** @param {HTMLMediaElement} video */
  27.   constructor(video) {
  28.     /** @private {TextTrack} */
  29.     this.textTrack_ = null;
  31.     // TODO: Test that in all cases, the built-in CC controls in the video
  32.     // element are toggling our TextTrack.
  34.     // If the video element has TextTracks, disable them.  If we see one that
  35.     // was created by a previous instance of Shaka Player, reuse it.
  36.     for (const track of Array.from(video.textTracks)) {
  37.       // NOTE: There is no API available to remove a TextTrack from a video
  38.       // element.
  39.       track.mode = 'disabled';
  41.       if (track.label == shaka.Player.TextTrackLabel) {
  42.         this.textTrack_ = track;
  43.       }
  44.     }
  46.     if (!this.textTrack_) {
  47.       // As far as I can tell, there is no observable difference between setting
  48.       // kind to 'subtitles' or 'captions' when creating the TextTrack object.
  49.       // The individual text tracks from the manifest will still have their own
  50.       // kinds which can be displayed in the app's UI.
  51.       this.textTrack_ = video.addTextTrack(
  52.           'subtitles', shaka.Player.TextTrackLabel);
  53.     }
  54.     this.textTrack_.mode = 'hidden';
  55.   }
  57.   /**
  58.    * @override
  59.    * @export
  60.    */
  61.   remove(start, end) {
  62.     // Check that the displayer hasn't been destroyed.
  63.     if (!this.textTrack_) {
  64.       return false;
  65.     }
  67.     const removeInRange = (cue) => {
  68.       const inside = cue.startTime < end && cue.endTime > start;
  69.       return inside;
  70.     };
  72.     shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeInRange);
  74.     return true;
  75.   }
  77.   /**
  78.    * @override
  79.    * @export
  80.    */
  81.   append(cues) {
  82.     // Flatten nested cue payloads recursively.  If a cue has nested cues,
  83.     // their contents should be combined and replace the payload of the parent.
  84.     const flattenPayload = (cue) => {
  85.       // Handle styles (currently bold/italics/underline).
  86.       // TODO add support for color rendering.
  87.       const openStyleTags = [];
  88.       const bold = cue.fontWeight >= shaka.text.Cue.fontWeight.BOLD;
  89.       const italics = cue.fontStyle == shaka.text.Cue.fontStyle.ITALIC;
  90.       const underline = cue.textDecoration.includes(
  91.           shaka.text.Cue.textDecoration.UNDERLINE);
  92.       if (bold) {
  93.         openStyleTags.push('b');
  94.       }
  95.       if (italics) {
  96.         openStyleTags.push('i');
  97.       }
  98.       if (underline) {
  99.         openStyleTags.push('u');
  100.       }
  102.       // Prefix opens tags, suffix closes tags in reverse order of opening.
  103.       const prefixStyleTags = openStyleTags.reduce((acc, tag) => {
  104.         return `${acc}<${tag}>`;
  105.       }, '');
  106.       const suffixStyleTags = openStyleTags.reduceRight((acc, tag) => {
  107.         return `${acc}</${tag}>`;
  108.       }, '');
  110.       if (cue.lineBreak) {
  111.         // This is a vertical lineBreak, so insert a newline.
  112.         return '\n';
  113.       } else if (cue.nestedCues.length) {
  114.         return cue.nestedCues.map(flattenPayload).join('');
  115.       } else {
  116.         // This is a real cue.
  117.         return prefixStyleTags + cue.payload + suffixStyleTags;
  118.       }
  119.     };
  121.     // We don't want to modify the array or objects passed in, since we don't
  122.     // technically own them.  So we build a new array and replace certain items
  123.     // in it if they need to be flattened.
  124.     // We also don't want to flatten the text payloads starting at a container
  125.     // element; otherwise, for containers encapsulating multiple caption lines,
  126.     // the lines would merge into a single cue. This is undesirable when a
  127.     // subset of the captions are outside of the append time window. To fix
  128.     // this, we only call flattenPayload() starting at elements marked as
  129.     // isContainer = false.
  130.     const getCuesToFlatten = (cues, result) => {
  131.       for (const cue of cues) {
  132.         if (cue.isContainer) {
  133.           // Recurse to find the actual text payload cues.
  134.           getCuesToFlatten(cue.nestedCues, result);
  135.         } else {
  136.           // Flatten the payload.
  137.           const flatCue = cue.clone();
  138.           flatCue.nestedCues = [];
  139.           flatCue.payload = flattenPayload(cue);
  140.           result.push(flatCue);
  141.         }
  142.       }
  143.       return result;
  144.     };
  145.     const flattenedCues = getCuesToFlatten(cues, []);
  147.     // Convert cues.
  148.     const textTrackCues = [];
  149.     const cuesInTextTrack = this.textTrack_.cues ?
  150.                             Array.from(this.textTrack_.cues) : [];
  152.     for (const inCue of flattenedCues) {
  153.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  154.       // into two segments.
  155.       // To avoid displaying duplicate cues, if the current textTrack cues
  156.       // list already contains the cue, skip it.
  157.       const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  158.         if (cueInTextTrack.startTime == inCue.startTime &&
  159.             cueInTextTrack.endTime == inCue.endTime &&
  160.             cueInTextTrack.text == inCue.payload) {
  161.           return true;
  162.         }
  163.         return false;
  164.       });
  166.       if (!containsCue) {
  167.         const cue =
  168.             shaka.text.SimpleTextDisplayer.convertToTextTrackCue_(inCue);
  169.         if (cue) {
  170.           textTrackCues.push(cue);
  171.         }
  172.       }
  173.     }
  175.     // Sort the cues based on start/end times.  Make a copy of the array so
  176.     // we can get the index in the original ordering.  Out of order cues are
  177.     // rejected by Edge.  See https://bit.ly/2K9VX3s
  178.     const sortedCues = textTrackCues.slice().sort((a, b) => {
  179.       if (a.startTime != b.startTime) {
  180.         return a.startTime - b.startTime;
  181.       } else if (a.endTime != b.endTime) {
  182.         return a.endTime - b.startTime;
  183.       } else {
  184.         // The browser will display cues with identical time ranges from the
  185.         // bottom up.  Reversing the order of equal cues means the first one
  186.         // parsed will be at the top, as you would expect.
  187.         // See https://github.com/shaka-project/shaka-player/issues/848 for
  188.         // more info.
  189.         // However, this ordering behavior is part of VTTCue's "line" field.
  190.         // Some platforms don't have a real VTTCue and use a polyfill instead.
  191.         // When VTTCue is polyfilled or does not support "line", we should _not_
  192.         // reverse the order.  This occurs on legacy Edge.
  193.         // eslint-disable-next-line no-restricted-syntax
  194.         if ('line' in VTTCue.prototype) {
  195.           // Native VTTCue
  196.           return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  197.         } else {
  198.           // Polyfilled VTTCue
  199.           return textTrackCues.indexOf(a) - textTrackCues.indexOf(b);
  200.         }
  201.       }
  202.     });
  204.     for (const cue of sortedCues) {
  205.       this.textTrack_.addCue(cue);
  206.     }
  207.   }
  209.   /**
  210.    * @override
  211.    * @export
  212.    */
  213.   destroy() {
  214.     if (this.textTrack_) {
  215.       const removeIt = (cue) => true;
  216.       shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  218.       // NOTE: There is no API available to remove a TextTrack from a video
  219.       // element.
  220.       this.textTrack_.mode = 'disabled';
  221.     }
  223.     this.textTrack_ = null;
  224.     return Promise.resolve();
  225.   }
  227.   /**
  228.    * @override
  229.    * @export
  230.    */
  231.   isTextVisible() {
  232.     return this.textTrack_.mode == 'showing';
  233.   }
  235.   /**
  236.    * @override
  237.    * @export
  238.    */
  239.   setTextVisibility(on) {
  240.     this.textTrack_.mode = on ? 'showing' : 'hidden';
  241.   }
  243.   /**
  244.    * @param {!shaka.extern.Cue} shakaCue
  245.    * @return {TextTrackCue}
  246.    * @private
  247.    */
  248.   static convertToTextTrackCue_(shakaCue) {
  249.     if (shakaCue.startTime >= shakaCue.endTime) {
  250.       // Edge will throw in this case.
  251.       // See issue #501
  252.       shaka.log.warning('Invalid cue times: ' + shakaCue.startTime +
  253.                         ' - ' + shakaCue.endTime);
  254.       return null;
  255.     }
  257.     const Cue = shaka.text.Cue;
  258.     /** @type {VTTCue} */
  259.     const vttCue = new VTTCue(
  260.         shakaCue.startTime,
  261.         shakaCue.endTime,
  262.         shakaCue.payload);
  264.     // NOTE: positionAlign and lineAlign settings are not supported by Chrome
  265.     // at the moment, so setting them will have no effect.
  266.     // The bug on chromium to implement them:
  267.     // https://bugs.chromium.org/p/chromium/issues/detail?id=633690
  269.     vttCue.lineAlign = shakaCue.lineAlign;
  270.     vttCue.positionAlign = shakaCue.positionAlign;
  271.     if (shakaCue.size) {
  272.       vttCue.size = shakaCue.size;
  273.     }
  275.     try {
  276.       // Safari 10 seems to throw on align='center'.
  277.       vttCue.align = shakaCue.textAlign;
  278.     } catch (exception) {}
  280.     if (shakaCue.textAlign == 'center' && vttCue.align != 'center') {
  281.       // We want vttCue.position = 'auto'. By default, |position| is set to
  282.       // "auto". If we set it to "auto" safari will throw an exception, so we
  283.       // must rely on the default value.
  284.       vttCue.align = 'middle';
  285.     }
  287.     if (shakaCue.writingMode ==
  288.             Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  289.       vttCue.vertical = 'lr';
  290.     } else if (shakaCue.writingMode ==
  291.              Cue.writingMode.VERTICAL_RIGHT_TO_LEFT) {
  292.       vttCue.vertical = 'rl';
  293.     }
  295.     // snapToLines flag is true by default
  296.     if (shakaCue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  297.       vttCue.snapToLines = false;
  298.     }
  300.     if (shakaCue.line != null) {
  301.       vttCue.line = shakaCue.line;
  302.     }
  304.     if (shakaCue.position != null) {
  305.       vttCue.position = shakaCue.position;
  306.     }
  308.     return vttCue;
  309.   }
  311.   /**
  312.    * Iterate over all the cues in a text track and remove all those for which
  313.    * |predicate(cue)| returns true.
  314.    *
  315.    * @param {!TextTrack} track
  316.    * @param {function(!TextTrackCue):boolean} predicate
  317.    * @private
  318.    */
  319.   static removeWhere_(track, predicate) {
  320.     // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  321.     // something other than "disabled".
  322.     //
  323.     // If the track is already showing, then we should keep it as showing. But
  324.     // if it something else, we will use hidden so that we don't "flash" cues on
  325.     // the screen.
  326.     const oldState = track.mode;
  327.     const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  329.     track.mode = tempState;
  331.     goog.asserts.assert(
  332.         track.cues,
  333.         'Cues should be accessible when mode is set to "' + tempState + '".');
  335.     // Create a copy of the list to avoid errors while iterating.
  336.     for (const cue of Array.from(track.cues)) {
  337.       if (cue && predicate(cue)) {
  338.         track.removeCue(cue);
  339.       }
  340.     }
  342.     track.mode = oldState;
  343.   }
  344. };