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.Deprecate');
  16. goog.require('shaka.log');
  17. goog.require('shaka.text.Cue');
  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.     // Flatten nested cue payloads recursively.  If a cue has nested cues,
  84.     // their contents should be combined and replace the payload of the parent.
  85.     const flattenPayload = (cue) => {
  86.       // Handle styles (currently bold/italics/underline).
  87.       // TODO add support for color rendering.
  88.       const openStyleTags = [];
  89.       const bold = cue.fontWeight >= shaka.text.Cue.fontWeight.BOLD;
  90.       const italics = cue.fontStyle == shaka.text.Cue.fontStyle.ITALIC;
  91.       const underline = cue.textDecoration.includes(
  92.           shaka.text.Cue.textDecoration.UNDERLINE);
  93.       if (bold) {
  94.         openStyleTags.push('b');
  95.       }
  96.       if (italics) {
  97.         openStyleTags.push('i');
  98.       }
  99.       if (underline) {
  100.         openStyleTags.push('u');
  101.       }
  103.       // Prefix opens tags, suffix closes tags in reverse order of opening.
  104.       const prefixStyleTags = openStyleTags.reduce((acc, tag) => {
  105.         return `${acc}<${tag}>`;
  106.       }, '');
  107.       const suffixStyleTags = openStyleTags.reduceRight((acc, tag) => {
  108.         return `${acc}</${tag}>`;
  109.       }, '');
  111.       if (cue.lineBreak || cue.spacer) {
  112.         if (cue.spacer) {
  113.           shaka.Deprecate.deprecateFeature(4,
  114.               'shaka.extern.Cue',
  115.               'Please use lineBreak instead of spacer.');
  116.         }
  117.         // This is a vertical lineBreak, so insert a newline.
  118.         return '\n';
  119.       } else if (cue.nestedCues.length) {
  120.         return cue.nestedCues.map(flattenPayload).join('');
  121.       } else {
  122.         // This is a real cue.
  123.         return prefixStyleTags + cue.payload + suffixStyleTags;
  124.       }
  125.     };
  127.     // We don't want to modify the array or objects passed in, since we don't
  128.     // technically own them.  So we build a new array and replace certain items
  129.     // in it if they need to be flattened.
  130.     const flattenedCues = cues.map((cue) => {
  131.       if (cue.nestedCues.length) {
  132.         const flatCue = cue.clone();
  133.         flatCue.nestedCues = [];
  134.         flatCue.payload = flattenPayload(cue);
  135.         return flatCue;
  136.       } else {
  137.         return cue;
  138.       }
  139.     });
  141.     // Convert cues.
  142.     const textTrackCues = [];
  143.     const cuesInTextTrack = this.textTrack_.cues ?
  144.                             Array.from(this.textTrack_.cues) : [];
  146.     for (const inCue of flattenedCues) {
  147.       // When a VTT cue spans a segment boundary, the cue will be duplicated
  148.       // into two segments.
  149.       // To avoid displaying duplicate cues, if the current textTrack cues
  150.       // list already contains the cue, skip it.
  151.       const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  152.         if (cueInTextTrack.startTime == inCue.startTime &&
  153.             cueInTextTrack.endTime == inCue.endTime &&
  154.             cueInTextTrack.text == inCue.payload) {
  155.           return true;
  156.         }
  157.         return false;
  158.       });
  160.       if (!containsCue) {
  161.         const cue =
  162.             shaka.text.SimpleTextDisplayer.convertToTextTrackCue_(inCue);
  163.         if (cue) {
  164.           textTrackCues.push(cue);
  165.         }
  166.       }
  167.     }
  169.     // Sort the cues based on start/end times.  Make a copy of the array so
  170.     // we can get the index in the original ordering.  Out of order cues are
  171.     // rejected by Edge.  See https://bit.ly/2K9VX3s
  172.     const sortedCues = textTrackCues.slice().sort((a, b) => {
  173.       if (a.startTime != b.startTime) {
  174.         return a.startTime - b.startTime;
  175.       } else if (a.endTime != b.endTime) {
  176.         return a.endTime - b.startTime;
  177.       } else {
  178.         // The browser will display cues with identical time ranges from the
  179.         // bottom up.  Reversing the order of equal cues means the first one
  180.         // parsed will be at the top, as you would expect.
  181.         // See https://github.com/google/shaka-player/issues/848 for more info.
  182.         // However, this ordering behavior is part of VTTCue's "line" field.
  183.         // Some platforms don't have a real VTTCue and use a polyfill instead.
  184.         // When VTTCue is polyfilled or does not support "line", we should _not_
  185.         // reverse the order.  This occurs on legacy Edge.
  186.         // eslint-disable-next-line no-restricted-syntax
  187.         if ('line' in VTTCue.prototype) {
  188.           // Native VTTCue
  189.           return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  190.         } else {
  191.           // Polyfilled VTTCue
  192.           return textTrackCues.indexOf(a) - textTrackCues.indexOf(b);
  193.         }
  194.       }
  195.     });
  197.     for (const cue of sortedCues) {
  198.       this.textTrack_.addCue(cue);
  199.     }
  200.   }
  202.   /**
  203.    * @override
  204.    * @export
  205.    */
  206.   destroy() {
  207.     if (this.textTrack_) {
  208.       const removeIt = (cue) => true;
  209.       shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  211.       // NOTE: There is no API available to remove a TextTrack from a video
  212.       // element.
  213.       this.textTrack_.mode = 'disabled';
  214.     }
  216.     this.textTrack_ = null;
  217.     return Promise.resolve();
  218.   }
  220.   /**
  221.    * @override
  222.    * @export
  223.    */
  224.   isTextVisible() {
  225.     return this.textTrack_.mode == 'showing';
  226.   }
  228.   /**
  229.    * @override
  230.    * @export
  231.    */
  232.   setTextVisibility(on) {
  233.     this.textTrack_.mode = on ? 'showing' : 'hidden';
  234.   }
  236.   /**
  237.    * @param {!shaka.extern.Cue} shakaCue
  238.    * @return {TextTrackCue}
  239.    * @private
  240.    */
  241.   static convertToTextTrackCue_(shakaCue) {
  242.     if (shakaCue.startTime >= shakaCue.endTime) {
  243.       // Edge will throw in this case.
  244.       // See issue #501
  245.       shaka.log.warning('Invalid cue times: ' + shakaCue.startTime +
  246.                         ' - ' + shakaCue.endTime);
  247.       return null;
  248.     }
  250.     const Cue = shaka.text.Cue;
  251.     /** @type {VTTCue} */
  252.     const vttCue = new VTTCue(
  253.         shakaCue.startTime,
  254.         shakaCue.endTime,
  255.         shakaCue.payload);
  257.     // NOTE: positionAlign and lineAlign settings are not supported by Chrome
  258.     // at the moment, so setting them will have no effect.
  259.     // The bug on chromium to implement them:
  260.     // https://bugs.chromium.org/p/chromium/issues/detail?id=633690
  262.     vttCue.lineAlign = shakaCue.lineAlign;
  263.     vttCue.positionAlign = shakaCue.positionAlign;
  264.     if (shakaCue.size) {
  265.       vttCue.size = shakaCue.size;
  266.     }
  268.     try {
  269.       // Safari 10 seems to throw on align='center'.
  270.       vttCue.align = shakaCue.textAlign;
  271.     } catch (exception) {}
  273.     if (shakaCue.textAlign == 'center' && vttCue.align != 'center') {
  274.       // We want vttCue.position = 'auto'. By default, |position| is set to
  275.       // "auto". If we set it to "auto" safari will throw an exception, so we
  276.       // must rely on the default value.
  277.       vttCue.align = 'middle';
  278.     }
  280.     if (shakaCue.writingMode ==
  281.             Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  282.       vttCue.vertical = 'lr';
  283.     } else if (shakaCue.writingMode ==
  284.              Cue.writingMode.VERTICAL_RIGHT_TO_LEFT) {
  285.       vttCue.vertical = 'rl';
  286.     }
  288.     // snapToLines flag is true by default
  289.     if (shakaCue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  290.       vttCue.snapToLines = false;
  291.     }
  293.     if (shakaCue.line != null) {
  294.       vttCue.line = shakaCue.line;
  295.     }
  297.     if (shakaCue.position != null) {
  298.       vttCue.position = shakaCue.position;
  299.     }
  301.     return vttCue;
  302.   }
  304.   /**
  305.    * Iterate over all the cues in a text track and remove all those for which
  306.    * |predicate(cue)| returns true.
  307.    *
  308.    * @param {!TextTrack} track
  309.    * @param {function(!TextTrackCue):boolean} predicate
  310.    * @private
  311.    */
  312.   static removeWhere_(track, predicate) {
  313.     // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  314.     // something other than "disabled".
  315.     //
  316.     // If the track is already showing, then we should keep it as showing. But
  317.     // if it something else, we will use hidden so that we don't "flash" cues on
  318.     // the screen.
  319.     const oldState = track.mode;
  320.     const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  322.     track.mode = tempState;
  324.     goog.asserts.assert(
  325.         track.cues,
  326.         'Cues should be accessible when mode is set to "' + tempState + '".');
  328.     // Create a copy of the list to avoid errors while iterating.
  329.     for (const cue of Array.from(track.cues)) {
  330.       if (cue && predicate(cue)) {
  331.         track.removeCue(cue);
  332.       }
  333.     }
  335.     track.mode = oldState;
  336.   }
  337. };