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. */
  6. /**
  7. * @fileoverview
  8. */
  9. goog.provide('shaka.text.SimpleTextDisplayer');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.text.Utils');
  12. /**
  13. * A text displayer plugin using the browser's native VTTCue interface.
  14. *
  15. * @implements {shaka.extern.TextDisplayer}
  16. * @export
  17. */
  18. shaka.text.SimpleTextDisplayer = class {
  19. /**
  20. * @param {HTMLMediaElement} video
  21. * @param {string} label
  22. */
  23. constructor(video, label) {
  24. /** @private {TextTrack} */
  25. this.textTrack_ = null;
  26. // TODO: Test that in all cases, the built-in CC controls in the video
  27. // element are toggling our TextTrack.
  28. // If the video element has TextTracks, disable them. If we see one that
  29. // was created by a previous instance of Shaka Player, reuse it.
  30. for (const track of Array.from(video.textTracks)) {
  31. if (track.kind === 'metadata' || track.kind === 'chapters') {
  32. continue;
  33. }
  34. // NOTE: There is no API available to remove a TextTrack from a video
  35. // element.
  36. track.mode = 'disabled';
  37. if (track.label == label) {
  38. this.textTrack_ = track;
  39. }
  40. }
  41. if (!this.textTrack_) {
  42. // As far as I can tell, there is no observable difference between setting
  43. // kind to 'subtitles' or 'captions' when creating the TextTrack object.
  44. // The individual text tracks from the manifest will still have their own
  45. // kinds which can be displayed in the app's UI.
  46. this.textTrack_ = video.addTextTrack('subtitles', label);
  47. }
  48. this.textTrack_.mode = 'hidden';
  49. }
  50. /**
  51. * @override
  52. * @export
  53. */
  54. configure(config) {
  55. // Unused.
  56. }
  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. }
  66. const removeInRange = (cue) => {
  67. const inside = cue.startTime < end && cue.endTime > start;
  68. return inside;
  69. };
  70. shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeInRange);
  71. return true;
  72. }
  73. /**
  74. * @override
  75. * @export
  76. */
  77. append(cues) {
  78. const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues);
  79. // Convert cues.
  80. const textTrackCues = [];
  81. const cuesInTextTrack = this.textTrack_.cues ?
  82. Array.from(this.textTrack_.cues) : [];
  83. for (const inCue of flattenedCues) {
  84. // When a VTT cue spans a segment boundary, the cue will be duplicated
  85. // into two segments.
  86. // To avoid displaying duplicate cues, if the current textTrack cues
  87. // list already contains the cue, skip it.
  88. const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  89. if (cueInTextTrack.startTime == inCue.startTime &&
  90. cueInTextTrack.endTime == inCue.endTime &&
  91. cueInTextTrack.text == inCue.payload) {
  92. return true;
  93. }
  94. return false;
  95. });
  96. if (!containsCue && inCue.payload) {
  97. const cue =
  98. shaka.text.Utils.mapShakaCueToNativeCue(inCue);
  99. if (cue) {
  100. textTrackCues.push(cue);
  101. }
  102. }
  103. }
  104. // Sort the cues based on start/end times. Make a copy of the array so
  105. // we can get the index in the original ordering. Out of order cues are
  106. // rejected by Edge. See https://bit.ly/2K9VX3s
  107. const sortedCues = textTrackCues.slice().sort((a, b) => {
  108. if (a.startTime != b.startTime) {
  109. return a.startTime - b.startTime;
  110. } else if (a.endTime != b.endTime) {
  111. return a.endTime - b.startTime;
  112. } else {
  113. // The browser will display cues with identical time ranges from the
  114. // bottom up. Reversing the order of equal cues means the first one
  115. // parsed will be at the top, as you would expect.
  116. // See https://github.com/shaka-project/shaka-player/issues/848 for
  117. // more info.
  118. // However, this ordering behavior is part of VTTCue's "line" field.
  119. // Some platforms don't have a real VTTCue and use a polyfill instead.
  120. // When VTTCue is polyfilled or does not support "line", we should _not_
  121. // reverse the order. This occurs on legacy Edge.
  122. // eslint-disable-next-line no-restricted-syntax
  123. if ('line' in VTTCue.prototype) {
  124. // Native VTTCue
  125. return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  126. } else {
  127. // Polyfilled VTTCue
  128. return textTrackCues.indexOf(a) - textTrackCues.indexOf(b);
  129. }
  130. }
  131. });
  132. for (const cue of sortedCues) {
  133. this.textTrack_.addCue(cue);
  134. }
  135. }
  136. /**
  137. * @override
  138. * @export
  139. */
  140. destroy() {
  141. if (this.textTrack_) {
  142. const removeIt = (cue) => true;
  143. shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  144. // NOTE: There is no API available to remove a TextTrack from a video
  145. // element.
  146. this.textTrack_.mode = 'disabled';
  147. }
  148. this.textTrack_ = null;
  149. return Promise.resolve();
  150. }
  151. /**
  152. * @override
  153. * @export
  154. */
  155. isTextVisible() {
  156. return this.textTrack_.mode == 'showing';
  157. }
  158. /**
  159. * @override
  160. * @export
  161. */
  162. setTextVisibility(on) {
  163. this.textTrack_.mode = on ? 'showing' : 'hidden';
  164. }
  165. /**
  166. * @override
  167. * @export
  168. */
  169. setTextLanguage(language) {
  170. }
  171. /**
  172. * Iterate over all the cues in a text track and remove all those for which
  173. * |predicate(cue)| returns true.
  174. *
  175. * @param {!TextTrack} track
  176. * @param {function(!TextTrackCue):boolean} predicate
  177. * @private
  178. */
  179. static removeWhere_(track, predicate) {
  180. // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  181. // something other than "disabled".
  182. //
  183. // If the track is already showing, then we should keep it as showing. But
  184. // if it something else, we will use hidden so that we don't "flash" cues on
  185. // the screen.
  186. const oldState = track.mode;
  187. const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  188. track.mode = tempState;
  189. goog.asserts.assert(
  190. track.cues,
  191. 'Cues should be accessible when mode is set to "' + tempState + '".');
  192. // Create a copy of the list to avoid errors while iterating.
  193. for (const cue of Array.from(track.cues)) {
  194. if (cue && predicate(cue)) {
  195. track.removeCue(cue);
  196. }
  197. }
  198. track.mode = oldState;
  199. }
  200. };