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. * @suppress {missingRequire} TODO(b/152540451): this shouldn't be needed
  9. */
  10. goog.provide('shaka.text.SimpleTextDisplayer');
  11. goog.require('goog.asserts');
  12. goog.require('shaka.log');
  13. goog.require('shaka.text.Cue');
  14. goog.require('shaka.text.Utils');
  15. /**
  16. * A text displayer plugin using the browser's native VTTCue interface.
  17. *
  18. * @implements {shaka.extern.TextDisplayer}
  19. * @export
  20. */
  21. shaka.text.SimpleTextDisplayer = class {
  22. /** @param {HTMLMediaElement} video */
  23. constructor(video) {
  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. // NOTE: There is no API available to remove a TextTrack from a video
  32. // element.
  33. track.mode = 'disabled';
  34. if (track.label == shaka.Player.TextTrackLabel) {
  35. this.textTrack_ = track;
  36. }
  37. }
  38. if (!this.textTrack_) {
  39. // As far as I can tell, there is no observable difference between setting
  40. // kind to 'subtitles' or 'captions' when creating the TextTrack object.
  41. // The individual text tracks from the manifest will still have their own
  42. // kinds which can be displayed in the app's UI.
  43. this.textTrack_ = video.addTextTrack(
  44. 'subtitles', shaka.Player.TextTrackLabel);
  45. }
  46. this.textTrack_.mode = 'hidden';
  47. }
  48. /**
  49. * @override
  50. * @export
  51. */
  52. remove(start, end) {
  53. // Check that the displayer hasn't been destroyed.
  54. if (!this.textTrack_) {
  55. return false;
  56. }
  57. const removeInRange = (cue) => {
  58. const inside = cue.startTime < end && cue.endTime > start;
  59. return inside;
  60. };
  61. shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeInRange);
  62. return true;
  63. }
  64. /**
  65. * @override
  66. * @export
  67. */
  68. append(cues) {
  69. const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues, []);
  70. // Convert cues.
  71. const textTrackCues = [];
  72. const cuesInTextTrack = this.textTrack_.cues ?
  73. Array.from(this.textTrack_.cues) : [];
  74. for (const inCue of flattenedCues) {
  75. // When a VTT cue spans a segment boundary, the cue will be duplicated
  76. // into two segments.
  77. // To avoid displaying duplicate cues, if the current textTrack cues
  78. // list already contains the cue, skip it.
  79. const containsCue = cuesInTextTrack.some((cueInTextTrack) => {
  80. if (cueInTextTrack.startTime == inCue.startTime &&
  81. cueInTextTrack.endTime == inCue.endTime &&
  82. cueInTextTrack.text == inCue.payload) {
  83. return true;
  84. }
  85. return false;
  86. });
  87. if (!containsCue) {
  88. const cue =
  89. shaka.text.SimpleTextDisplayer.convertToTextTrackCue_(inCue);
  90. if (cue) {
  91. textTrackCues.push(cue);
  92. }
  93. }
  94. }
  95. // Sort the cues based on start/end times. Make a copy of the array so
  96. // we can get the index in the original ordering. Out of order cues are
  97. // rejected by Edge. See https://bit.ly/2K9VX3s
  98. const sortedCues = textTrackCues.slice().sort((a, b) => {
  99. if (a.startTime != b.startTime) {
  100. return a.startTime - b.startTime;
  101. } else if (a.endTime != b.endTime) {
  102. return a.endTime - b.startTime;
  103. } else {
  104. // The browser will display cues with identical time ranges from the
  105. // bottom up. Reversing the order of equal cues means the first one
  106. // parsed will be at the top, as you would expect.
  107. // See https://github.com/shaka-project/shaka-player/issues/848 for
  108. // more info.
  109. // However, this ordering behavior is part of VTTCue's "line" field.
  110. // Some platforms don't have a real VTTCue and use a polyfill instead.
  111. // When VTTCue is polyfilled or does not support "line", we should _not_
  112. // reverse the order. This occurs on legacy Edge.
  113. // eslint-disable-next-line no-restricted-syntax
  114. if ('line' in VTTCue.prototype) {
  115. // Native VTTCue
  116. return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
  117. } else {
  118. // Polyfilled VTTCue
  119. return textTrackCues.indexOf(a) - textTrackCues.indexOf(b);
  120. }
  121. }
  122. });
  123. for (const cue of sortedCues) {
  124. this.textTrack_.addCue(cue);
  125. }
  126. }
  127. /**
  128. * @override
  129. * @export
  130. */
  131. destroy() {
  132. if (this.textTrack_) {
  133. const removeIt = (cue) => true;
  134. shaka.text.SimpleTextDisplayer.removeWhere_(this.textTrack_, removeIt);
  135. // NOTE: There is no API available to remove a TextTrack from a video
  136. // element.
  137. this.textTrack_.mode = 'disabled';
  138. }
  139. this.textTrack_ = null;
  140. return Promise.resolve();
  141. }
  142. /**
  143. * @override
  144. * @export
  145. */
  146. isTextVisible() {
  147. return this.textTrack_.mode == 'showing';
  148. }
  149. /**
  150. * @override
  151. * @export
  152. */
  153. setTextVisibility(on) {
  154. this.textTrack_.mode = on ? 'showing' : 'hidden';
  155. }
  156. /**
  157. * @param {!shaka.text.Cue} shakaCue
  158. * @return {TextTrackCue}
  159. * @private
  160. */
  161. static convertToTextTrackCue_(shakaCue) {
  162. if (shakaCue.startTime >= shakaCue.endTime) {
  163. // Edge will throw in this case.
  164. // See issue #501
  165. shaka.log.warning('Invalid cue times: ' + shakaCue.startTime +
  166. ' - ' + shakaCue.endTime);
  167. return null;
  168. }
  169. const Cue = shaka.text.Cue;
  170. /** @type {VTTCue} */
  171. const vttCue = new VTTCue(
  172. shakaCue.startTime,
  173. shakaCue.endTime,
  174. shakaCue.payload);
  175. // NOTE: positionAlign and lineAlign settings are not supported by Chrome
  176. // at the moment, so setting them will have no effect.
  177. // The bug on chromium to implement them:
  178. // https://bugs.chromium.org/p/chromium/issues/detail?id=633690
  179. vttCue.lineAlign = shakaCue.lineAlign;
  180. vttCue.positionAlign = shakaCue.positionAlign;
  181. if (shakaCue.size) {
  182. vttCue.size = shakaCue.size;
  183. }
  184. try {
  185. // Safari 10 seems to throw on align='center'.
  186. vttCue.align = shakaCue.textAlign;
  187. } catch (exception) {}
  188. if (shakaCue.textAlign == 'center' && vttCue.align != 'center') {
  189. // We want vttCue.position = 'auto'. By default, |position| is set to
  190. // "auto". If we set it to "auto" safari will throw an exception, so we
  191. // must rely on the default value.
  192. vttCue.align = 'middle';
  193. }
  194. if (shakaCue.writingMode ==
  195. Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
  196. vttCue.vertical = 'lr';
  197. } else if (shakaCue.writingMode ==
  198. Cue.writingMode.VERTICAL_RIGHT_TO_LEFT) {
  199. vttCue.vertical = 'rl';
  200. }
  201. // snapToLines flag is true by default
  202. if (shakaCue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
  203. vttCue.snapToLines = false;
  204. }
  205. if (shakaCue.line != null) {
  206. vttCue.line = shakaCue.line;
  207. }
  208. if (shakaCue.position != null) {
  209. vttCue.position = shakaCue.position;
  210. }
  211. return vttCue;
  212. }
  213. /**
  214. * Iterate over all the cues in a text track and remove all those for which
  215. * |predicate(cue)| returns true.
  216. *
  217. * @param {!TextTrack} track
  218. * @param {function(!TextTrackCue):boolean} predicate
  219. * @private
  220. */
  221. static removeWhere_(track, predicate) {
  222. // Since |track.cues| can be null if |track.mode| is "disabled", force it to
  223. // something other than "disabled".
  224. //
  225. // If the track is already showing, then we should keep it as showing. But
  226. // if it something else, we will use hidden so that we don't "flash" cues on
  227. // the screen.
  228. const oldState = track.mode;
  229. const tempState = oldState == 'showing' ? 'showing' : 'hidden';
  230. track.mode = tempState;
  231. goog.asserts.assert(
  232. track.cues,
  233. 'Cues should be accessible when mode is set to "' + tempState + '".');
  234. // Create a copy of the list to avoid errors while iterating.
  235. for (const cue of Array.from(track.cues)) {
  236. if (cue && predicate(cue)) {
  237. track.removeCue(cue);
  238. }
  239. }
  240. track.mode = oldState;
  241. }
  242. };