vttcue.ts 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. /**
  2. * Copyright 2013 vtt.js Contributors
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the 'License');
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an 'AS IS' BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. import { optionalSelf } from './global';
  17. declare interface VTTCuePolyfill extends VTTCue {
  18. new (...args): VTTCuePolyfill;
  19. hasBeenReset: boolean;
  20. displayState: void;
  21. }
  22. export default (function () {
  23. if (optionalSelf?.VTTCue) {
  24. return self.VTTCue;
  25. }
  26. const AllowedDirections = ['', 'lr', 'rl'] as const;
  27. type Direction = (typeof AllowedDirections)[number];
  28. const AllowedAlignments = [
  29. 'start',
  30. 'middle',
  31. 'end',
  32. 'left',
  33. 'right',
  34. ] as const;
  35. type Alignment = (typeof AllowedAlignments)[number];
  36. function isAllowedValue<T, A>(allowed: T, value: string): A | false {
  37. if (typeof value !== 'string') {
  38. return false;
  39. }
  40. // necessary for assuring the generic conforms to the Array interface
  41. if (!Array.isArray(allowed)) {
  42. return false;
  43. }
  44. // reset the type so that the next narrowing works well
  45. const lcValue = value.toLowerCase() as any;
  46. // use the allow list to narrow the type to a specific subset of strings
  47. if (~allowed.indexOf(lcValue)) {
  48. return lcValue;
  49. }
  50. return false;
  51. }
  52. function findDirectionSetting(value: string) {
  53. return isAllowedValue<typeof AllowedDirections, Direction>(
  54. AllowedDirections,
  55. value,
  56. );
  57. }
  58. function findAlignSetting(value: string) {
  59. return isAllowedValue<typeof AllowedAlignments, Alignment>(
  60. AllowedAlignments,
  61. value,
  62. );
  63. }
  64. function extend(obj: Record<string, any>, ...rest: Record<string, any>[]) {
  65. let i = 1;
  66. for (; i < arguments.length; i++) {
  67. const cobj = arguments[i];
  68. for (const p in cobj) {
  69. obj[p] = cobj[p];
  70. }
  71. }
  72. return obj;
  73. }
  74. function VTTCue(startTime: number, endTime: number, text: string) {
  75. const cue = this as VTTCuePolyfill;
  76. const baseObj = { enumerable: true };
  77. /**
  78. * Shim implementation specific properties. These properties are not in
  79. * the spec.
  80. */
  81. // Lets us know when the VTTCue's data has changed in such a way that we need
  82. // to recompute its display state. This lets us compute its display state
  83. // lazily.
  84. cue.hasBeenReset = false;
  85. /**
  86. * VTTCue and TextTrackCue properties
  87. * http://dev.w3.org/html5/webvtt/#vttcue-interface
  88. */
  89. let _id = '';
  90. let _pauseOnExit = false;
  91. let _startTime = startTime;
  92. let _endTime = endTime;
  93. let _text = text;
  94. let _region = null;
  95. let _vertical: Direction = '';
  96. let _snapToLines = true;
  97. let _line: number | 'auto' = 'auto';
  98. let _lineAlign: Alignment = 'start';
  99. let _position = 50;
  100. let _positionAlign: Alignment = 'middle';
  101. let _size = 50;
  102. let _align: Alignment = 'middle';
  103. Object.defineProperty(
  104. cue,
  105. 'id',
  106. extend({}, baseObj, {
  107. get: function () {
  108. return _id;
  109. },
  110. set: function (value: string) {
  111. _id = '' + value;
  112. },
  113. }),
  114. );
  115. Object.defineProperty(
  116. cue,
  117. 'pauseOnExit',
  118. extend({}, baseObj, {
  119. get: function () {
  120. return _pauseOnExit;
  121. },
  122. set: function (value: boolean) {
  123. _pauseOnExit = !!value;
  124. },
  125. }),
  126. );
  127. Object.defineProperty(
  128. cue,
  129. 'startTime',
  130. extend({}, baseObj, {
  131. get: function () {
  132. return _startTime;
  133. },
  134. set: function (value: number) {
  135. if (typeof value !== 'number') {
  136. throw new TypeError('Start time must be set to a number.');
  137. }
  138. _startTime = value;
  139. this.hasBeenReset = true;
  140. },
  141. }),
  142. );
  143. Object.defineProperty(
  144. cue,
  145. 'endTime',
  146. extend({}, baseObj, {
  147. get: function () {
  148. return _endTime;
  149. },
  150. set: function (value: number) {
  151. if (typeof value !== 'number') {
  152. throw new TypeError('End time must be set to a number.');
  153. }
  154. _endTime = value;
  155. this.hasBeenReset = true;
  156. },
  157. }),
  158. );
  159. Object.defineProperty(
  160. cue,
  161. 'text',
  162. extend({}, baseObj, {
  163. get: function () {
  164. return _text;
  165. },
  166. set: function (value: string) {
  167. _text = '' + value;
  168. this.hasBeenReset = true;
  169. },
  170. }),
  171. );
  172. // todo: implement VTTRegion polyfill?
  173. Object.defineProperty(
  174. cue,
  175. 'region',
  176. extend({}, baseObj, {
  177. get: function () {
  178. return _region;
  179. },
  180. set: function (value: any) {
  181. _region = value;
  182. this.hasBeenReset = true;
  183. },
  184. }),
  185. );
  186. Object.defineProperty(
  187. cue,
  188. 'vertical',
  189. extend({}, baseObj, {
  190. get: function () {
  191. return _vertical;
  192. },
  193. set: function (value: string) {
  194. const setting = findDirectionSetting(value);
  195. // Have to check for false because the setting an be an empty string.
  196. if (setting === false) {
  197. throw new SyntaxError(
  198. 'An invalid or illegal string was specified.',
  199. );
  200. }
  201. _vertical = setting;
  202. this.hasBeenReset = true;
  203. },
  204. }),
  205. );
  206. Object.defineProperty(
  207. cue,
  208. 'snapToLines',
  209. extend({}, baseObj, {
  210. get: function () {
  211. return _snapToLines;
  212. },
  213. set: function (value: boolean) {
  214. _snapToLines = !!value;
  215. this.hasBeenReset = true;
  216. },
  217. }),
  218. );
  219. Object.defineProperty(
  220. cue,
  221. 'line',
  222. extend({}, baseObj, {
  223. get: function () {
  224. return _line;
  225. },
  226. set: function (value: number | 'auto') {
  227. if (typeof value !== 'number' && value !== 'auto') {
  228. throw new SyntaxError(
  229. 'An invalid number or illegal string was specified.',
  230. );
  231. }
  232. _line = value;
  233. this.hasBeenReset = true;
  234. },
  235. }),
  236. );
  237. Object.defineProperty(
  238. cue,
  239. 'lineAlign',
  240. extend({}, baseObj, {
  241. get: function () {
  242. return _lineAlign;
  243. },
  244. set: function (value: string) {
  245. const setting = findAlignSetting(value);
  246. if (!setting) {
  247. throw new SyntaxError(
  248. 'An invalid or illegal string was specified.',
  249. );
  250. }
  251. _lineAlign = setting;
  252. this.hasBeenReset = true;
  253. },
  254. }),
  255. );
  256. Object.defineProperty(
  257. cue,
  258. 'position',
  259. extend({}, baseObj, {
  260. get: function () {
  261. return _position;
  262. },
  263. set: function (value: number) {
  264. if (value < 0 || value > 100) {
  265. throw new Error('Position must be between 0 and 100.');
  266. }
  267. _position = value;
  268. this.hasBeenReset = true;
  269. },
  270. }),
  271. );
  272. Object.defineProperty(
  273. cue,
  274. 'positionAlign',
  275. extend({}, baseObj, {
  276. get: function () {
  277. return _positionAlign;
  278. },
  279. set: function (value: string) {
  280. const setting = findAlignSetting(value);
  281. if (!setting) {
  282. throw new SyntaxError(
  283. 'An invalid or illegal string was specified.',
  284. );
  285. }
  286. _positionAlign = setting;
  287. this.hasBeenReset = true;
  288. },
  289. }),
  290. );
  291. Object.defineProperty(
  292. cue,
  293. 'size',
  294. extend({}, baseObj, {
  295. get: function () {
  296. return _size;
  297. },
  298. set: function (value: number) {
  299. if (value < 0 || value > 100) {
  300. throw new Error('Size must be between 0 and 100.');
  301. }
  302. _size = value;
  303. this.hasBeenReset = true;
  304. },
  305. }),
  306. );
  307. Object.defineProperty(
  308. cue,
  309. 'align',
  310. extend({}, baseObj, {
  311. get: function () {
  312. return _align;
  313. },
  314. set: function (value: string) {
  315. const setting = findAlignSetting(value);
  316. if (!setting) {
  317. throw new SyntaxError(
  318. 'An invalid or illegal string was specified.',
  319. );
  320. }
  321. _align = setting;
  322. this.hasBeenReset = true;
  323. },
  324. }),
  325. );
  326. /**
  327. * Other <track> spec defined properties
  328. */
  329. // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track-cue-display-state
  330. cue.displayState = undefined;
  331. }
  332. /**
  333. * VTTCue methods
  334. */
  335. VTTCue.prototype.getCueAsHTML = function () {
  336. // Assume WebVTT.convertCueToDOMTree is on the global.
  337. const WebVTT = (self as any).WebVTT;
  338. return WebVTT.convertCueToDOMTree(self, this.text);
  339. };
  340. // this is a polyfill hack
  341. return VTTCue as any as VTTCuePolyfill;
  342. })();