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