123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384 |
- /**
- * Copyright 2013 vtt.js Contributors
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
- import { optionalSelf } from './global';
- declare interface VTTCuePolyfill extends VTTCue {
- new (...args): VTTCuePolyfill;
- hasBeenReset: boolean;
- displayState: void;
- }
- export default (function () {
- if (optionalSelf?.VTTCue) {
- return self.VTTCue;
- }
- const AllowedDirections = ['', 'lr', 'rl'] as const;
- type Direction = (typeof AllowedDirections)[number];
- const AllowedAlignments = [
- 'start',
- 'middle',
- 'end',
- 'left',
- 'right',
- ] as const;
- type Alignment = (typeof AllowedAlignments)[number];
- function isAllowedValue<T, A>(allowed: T, value: string): A | false {
- if (typeof value !== 'string') {
- return false;
- }
- // necessary for assuring the generic conforms to the Array interface
- if (!Array.isArray(allowed)) {
- return false;
- }
- // reset the type so that the next narrowing works well
- const lcValue = value.toLowerCase() as any;
- // use the allow list to narrow the type to a specific subset of strings
- if (~allowed.indexOf(lcValue)) {
- return lcValue;
- }
- return false;
- }
- function findDirectionSetting(value: string) {
- return isAllowedValue<typeof AllowedDirections, Direction>(
- AllowedDirections,
- value,
- );
- }
- function findAlignSetting(value: string) {
- return isAllowedValue<typeof AllowedAlignments, Alignment>(
- AllowedAlignments,
- value,
- );
- }
- function extend(obj: Record<string, any>, ...rest: Record<string, any>[]) {
- let i = 1;
- for (; i < arguments.length; i++) {
- const cobj = arguments[i];
- for (const p in cobj) {
- obj[p] = cobj[p];
- }
- }
- return obj;
- }
- function VTTCue(startTime: number, endTime: number, text: string) {
- const cue = this as VTTCuePolyfill;
- const baseObj = { enumerable: true };
- /**
- * Shim implementation specific properties. These properties are not in
- * the spec.
- */
- // Lets us know when the VTTCue's data has changed in such a way that we need
- // to recompute its display state. This lets us compute its display state
- // lazily.
- cue.hasBeenReset = false;
- /**
- * VTTCue and TextTrackCue properties
- * http://dev.w3.org/html5/webvtt/#vttcue-interface
- */
- let _id = '';
- let _pauseOnExit = false;
- let _startTime = startTime;
- let _endTime = endTime;
- let _text = text;
- let _region = null;
- let _vertical: Direction = '';
- let _snapToLines = true;
- let _line: number | 'auto' = 'auto';
- let _lineAlign: Alignment = 'start';
- let _position = 50;
- let _positionAlign: Alignment = 'middle';
- let _size = 50;
- let _align: Alignment = 'middle';
- Object.defineProperty(
- cue,
- 'id',
- extend({}, baseObj, {
- get: function () {
- return _id;
- },
- set: function (value: string) {
- _id = '' + value;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'pauseOnExit',
- extend({}, baseObj, {
- get: function () {
- return _pauseOnExit;
- },
- set: function (value: boolean) {
- _pauseOnExit = !!value;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'startTime',
- extend({}, baseObj, {
- get: function () {
- return _startTime;
- },
- set: function (value: number) {
- if (typeof value !== 'number') {
- throw new TypeError('Start time must be set to a number.');
- }
- _startTime = value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'endTime',
- extend({}, baseObj, {
- get: function () {
- return _endTime;
- },
- set: function (value: number) {
- if (typeof value !== 'number') {
- throw new TypeError('End time must be set to a number.');
- }
- _endTime = value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'text',
- extend({}, baseObj, {
- get: function () {
- return _text;
- },
- set: function (value: string) {
- _text = '' + value;
- this.hasBeenReset = true;
- },
- }),
- );
- // todo: implement VTTRegion polyfill?
- Object.defineProperty(
- cue,
- 'region',
- extend({}, baseObj, {
- get: function () {
- return _region;
- },
- set: function (value: any) {
- _region = value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'vertical',
- extend({}, baseObj, {
- get: function () {
- return _vertical;
- },
- set: function (value: string) {
- const setting = findDirectionSetting(value);
- // Have to check for false because the setting an be an empty string.
- if (setting === false) {
- throw new SyntaxError(
- 'An invalid or illegal string was specified.',
- );
- }
- _vertical = setting;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'snapToLines',
- extend({}, baseObj, {
- get: function () {
- return _snapToLines;
- },
- set: function (value: boolean) {
- _snapToLines = !!value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'line',
- extend({}, baseObj, {
- get: function () {
- return _line;
- },
- set: function (value: number | 'auto') {
- if (typeof value !== 'number' && value !== 'auto') {
- throw new SyntaxError(
- 'An invalid number or illegal string was specified.',
- );
- }
- _line = value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'lineAlign',
- extend({}, baseObj, {
- get: function () {
- return _lineAlign;
- },
- set: function (value: string) {
- const setting = findAlignSetting(value);
- if (!setting) {
- throw new SyntaxError(
- 'An invalid or illegal string was specified.',
- );
- }
- _lineAlign = setting;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'position',
- extend({}, baseObj, {
- get: function () {
- return _position;
- },
- set: function (value: number) {
- if (value < 0 || value > 100) {
- throw new Error('Position must be between 0 and 100.');
- }
- _position = value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'positionAlign',
- extend({}, baseObj, {
- get: function () {
- return _positionAlign;
- },
- set: function (value: string) {
- const setting = findAlignSetting(value);
- if (!setting) {
- throw new SyntaxError(
- 'An invalid or illegal string was specified.',
- );
- }
- _positionAlign = setting;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'size',
- extend({}, baseObj, {
- get: function () {
- return _size;
- },
- set: function (value: number) {
- if (value < 0 || value > 100) {
- throw new Error('Size must be between 0 and 100.');
- }
- _size = value;
- this.hasBeenReset = true;
- },
- }),
- );
- Object.defineProperty(
- cue,
- 'align',
- extend({}, baseObj, {
- get: function () {
- return _align;
- },
- set: function (value: string) {
- const setting = findAlignSetting(value);
- if (!setting) {
- throw new SyntaxError(
- 'An invalid or illegal string was specified.',
- );
- }
- _align = setting;
- this.hasBeenReset = true;
- },
- }),
- );
- /**
- * Other <track> spec defined properties
- */
- // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#text-track-cue-display-state
- cue.displayState = undefined;
- }
- /**
- * VTTCue methods
- */
- VTTCue.prototype.getCueAsHTML = function () {
- // Assume WebVTT.convertCueToDOMTree is on the global.
- const WebVTT = (self as any).WebVTT;
- return WebVTT.convertCueToDOMTree(self, this.text);
- };
- // this is a polyfill hack
- return VTTCue as any as VTTCuePolyfill;
- })();
|