@playkit-js/playkit-js
Version:
[](https://github.com/kaltura/playkit-js/actions/workflows/run_canary.yaml) [ • 42.2 kB
text/typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import { Region } from './vtt-region';
import TextStyle from './text-style';
import TextTrack from './text-track';
/* eslint-disable */
/*
* 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.
*/
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
const fontScale = 1;
// Try to parse input as a time stamp.
function parseTimeStamp(input) {
function computeSeconds(h, m, s, f) {
return (h | 0) * 3600 + (m | 0) * 60 + (s | 0) + (f | 0) / 1000;
}
const m = input.match(/^(\d+):(\d{2})(:\d{2})?\.(\d{3})/);
if (!m) {
return null;
}
if (m[3]) {
// Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
return computeSeconds(m[1], m[2], m[3].replace(':', ''), m[4]);
} else if (m[1] > 59) {
// Timestamp takes the form of [hours]:[minutes].[milliseconds]
// First position is hours as it's over 59.
return computeSeconds(m[1], m[2], 0, m[4]);
} else {
// Timestamp takes the form of [minutes]:[seconds].[milliseconds]
return computeSeconds(0, m[1], m[2], m[4]);
}
}
const ESCAPE = {
'&': '&',
'<': '<',
'>': '>',
'‎': '\u200e',
'‏': '\u200f',
' ': '\u00a0'
};
const TAG_NAME = {
c: 'span',
i: 'i',
b: 'b',
u: 'u',
ruby: 'ruby',
rt: 'rt',
v: 'span',
lang: 'span'
};
const TAG_ANNOTATION = {
v: 'title',
lang: 'lang'
};
const NEEDS_PARENT = {
rt: 'ruby'
};
// A settings object holds key/value pairs and will ignore anything but the first
// assignment to a specific key.
function Settings() {
this.values = _objCreate(null);
}
Settings.prototype = {
// Only accept the first assignment to any key.
set: function (k, v) {
if (!this.get(k) && v !== '') {
this.values[k] = v;
}
},
// Return the value for a key, or a default value.
// If 'defaultKey' is passed then 'dflt' is assumed to be an object with
// a number of possible default values as properties where 'defaultKey' is
// the key of the property that will be chosen; otherwise it's assumed to be
// a single value.
get: function (k, dflt, defaultKey) {
if (defaultKey) {
return this.has(k) ? this.values[k] : dflt[defaultKey];
}
return this.has(k) ? this.values[k] : dflt;
},
// Check whether we have a value for a key.
has: function (k) {
return k in this.values;
},
// Accept a setting if its one of the given alternatives.
alt: function (k, v, a) {
for (var n = 0; n < a.length; ++n) {
if (v === a[n]) {
this.set(k, v);
break;
}
}
},
// Accept a setting if its a valid (signed) integer.
integer: function (k, v) {
if (/^-?\d+$/.test(v)) {
// integer
this.set(k, parseInt(v, 10));
}
},
// Accept a setting if its a valid percentage.
percent: function (k, v) {
var m;
if ((m = v.match(/^([\d]{1,3})(\.[\d]*)?%$/))) {
v = parseFloat(v);
if (v >= 0 && v <= 100) {
this.set(k, v);
return true;
}
}
return false;
}
};
// Helper function to parse input into groups separated by 'groupDelim', and
// interprete each group as a key/value pair separated by 'keyValueDelim'.
function parseOptions(input, callback, keyValueDelim, groupDelim) {
var groups = groupDelim ? input.split(groupDelim) : [input];
for (var i in groups) {
if (typeof groups[i] !== 'string') {
continue;
}
var kv = groups[i].split(keyValueDelim);
if (kv.length !== 2) {
continue;
}
var k = kv[0];
var v = kv[1];
callback(k, v);
}
}
function parseCue(input, cue, regionList) {
// Remember the original input if we need to throw an error.
var oInput = input;
// 4.1 WebVTT timestamp
function consumeTimeStamp() {
var ts = parseTimeStamp(input);
if (ts === null) {
throw new ParsingError(ParsingError.Errors.BadTimeStamp, 'Malformed timestamp: ' + oInput);
}
// Remove time stamp from input.
input = input.replace(/^[^\sa-zA-Z-]+/, '');
return ts;
}
// 4.4.2 WebVTT cue settings
function consumeCueSettings(input, cue) {
var settings = new Settings();
parseOptions(
input,
function (k, v) {
switch (k) {
case 'region':
// Find the last region we parsed with the same region id.
for (var i = regionList.length - 1; i >= 0; i--) {
if (regionList[i].id === v) {
settings.set(k, regionList[i].region);
break;
}
}
break;
case 'vertical':
settings.alt(k, v, ['rl', 'lr']);
break;
case 'line':
var vals = v.split(','),
vals0 = vals[0];
settings.integer(k, vals0);
settings.percent(k, vals0) ? settings.set('snapToLines', false) : null;
settings.alt(k, vals0, ['auto']);
if (vals.length === 2) {
settings.alt('lineAlign', vals[1], ['start', 'center', 'end']);
}
break;
case 'position':
vals = v.split(',');
settings.percent(k, vals[0]);
if (vals.length === 2) {
settings.alt('positionAlign', vals[1], ['start', 'center', 'end']);
}
break;
case 'size':
settings.percent(k, v);
break;
case 'align':
settings.alt(k, v, ['start', 'center', 'end', 'left', 'right']);
break;
}
},
/:/,
/\s/
);
// Apply default values for any missing fields.
cue.region = settings.get('region', null);
cue.vertical = settings.get('vertical', '');
cue.line = settings.get('line', cue.line || 'auto');
cue.lineAlign = settings.get('lineAlign', 'start');
cue.snapToLines = settings.get('snapToLines', true);
cue.size = settings.get('size', 100);
// Safari still uses the old middle value and won't accept center
try {
cue.align = settings.get('align', 'center');
} catch (e) {
cue.align = settings.get('align', 'middle');
}
cue.position = settings.get('position', cue.position || 'auto');
cue.positionAlign = settings.get(
'positionAlign',
{
start: 'start',
left: 'start',
center: 'center',
middle: 'center',
end: 'end',
right: 'end'
},
cue.align
);
}
function skipWhitespace() {
input = input.replace(/^\s+/, '');
}
// 4.1 WebVTT cue timings.
skipWhitespace();
cue.startTime = consumeTimeStamp(); // (1) collect cue start time
skipWhitespace();
if (input.substr(0, 3) !== '-->') {
// (3) next characters must match "-->"
throw new ParsingError(ParsingError.Errors.BadTimeStamp, "Malformed time stamp (time stamps must be separated by '-->'): " + oInput);
}
input = input.substr(3);
skipWhitespace();
cue.endTime = consumeTimeStamp(); // (5) collect cue end time
// 4.1 WebVTT cue settings list.
skipWhitespace();
consumeCueSettings(input, cue);
}
// Parse content into a document fragment.
function parseContent(window, input) {
function nextToken() {
// Check for end-of-string.
if (!input) {
return null;
}
// Consume 'n' characters from the input.
function consume(result) {
input = input.substr(result.length);
return result;
}
const m = input.match(/^([^<]*)(<[^>]+>?)?/);
// If there is some text before the next tag, return it, otherwise return
// the tag.
return consume(m[1] ? m[1] : m[2]);
}
// Unescape a string 's'.
function unescape1(e) {
return ESCAPE[e];
}
function unescape(s) {
let m;
while ((m = s.match(/&(amp|lt|gt|lrm|rlm|nbsp);/))) {
s = s.replace(m[0], unescape1);
}
return s;
}
function shouldAdd(current, element) {
return !NEEDS_PARENT[element.localName] || NEEDS_PARENT[element.localName] === current.localName;
}
// Create an element for this tag.
function createElement(type, annotation) {
const tagName = TAG_NAME[type];
if (!tagName) {
return null;
}
let element = window.document.createElement(tagName);
const name = TAG_ANNOTATION[type];
if (name && annotation) {
element[name] = annotation.trim();
}
return element;
}
let rootDiv = window.document.createElement('div'),
current = rootDiv,
t,
tagStack = [];
while ((t = nextToken()) !== null) {
if (t[0] === '<') {
if (t[1] === '/') {
// If the closing tag matches, move back up to the parent node.
if (tagStack.length && tagStack[tagStack.length - 1] === t.substr(2).replace('>', '')) {
tagStack.pop();
current = current.parentNode;
}
// Otherwise just ignore the end tag.
continue;
}
let ts = parseTimeStamp(t.substr(1, t.length - 2));
let node;
if (ts) {
// Timestamps are lead nodes as well.
node = window.document.createProcessingInstruction('timestamp', ts);
current.appendChild(node);
continue;
}
const m = t.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/);
// If we can't parse the tag, skip to the next tag.
if (!m) {
continue;
}
// Try to construct an element, and ignore the tag if we couldn't.
node = createElement(m[1], m[3]);
if (!node) {
continue;
}
// Determine if the tag should be added based on the context of where it
// is placed in the cuetext.
if (!shouldAdd(current, node)) {
continue;
}
// Set the class list (as a list of classes, separated by space).
if (m[2]) {
node.className = m[2].substr(1).replace('.', ' ');
}
// Append the node to the current node, and enter the scope of the new
// node.
tagStack.push(m[1]);
current.appendChild(node);
current = node;
continue;
}
// Text nodes are leaf nodes.
current.appendChild(window.document.createTextNode(unescape(t)));
}
return rootDiv;
}
// This is a list of all the Unicode characters that have a strong
// right-to-left category. What this means is that these characters are
// written right-to-left for sure. It was generated by pulling all the strong
// right-to-left characters out of the Unicode data table. That table can
// found at: http://www.unicode.org/Public/UNIDATA/UnicodeData.txt
const strongRTLRanges = [
[0x5be, 0x5be],
[0x5c0, 0x5c0],
[0x5c3, 0x5c3],
[0x5c6, 0x5c6],
[0x5d0, 0x5ea],
[0x5f0, 0x5f4],
[0x608, 0x608],
[0x60b, 0x60b],
[0x60d, 0x60d],
[0x61b, 0x61b],
[0x61e, 0x64a],
[0x66d, 0x66f],
[0x671, 0x6d5],
[0x6e5, 0x6e6],
[0x6ee, 0x6ef],
[0x6fa, 0x70d],
[0x70f, 0x710],
[0x712, 0x72f],
[0x74d, 0x7a5],
[0x7b1, 0x7b1],
[0x7c0, 0x7ea],
[0x7f4, 0x7f5],
[0x7fa, 0x7fa],
[0x800, 0x815],
[0x81a, 0x81a],
[0x824, 0x824],
[0x828, 0x828],
[0x830, 0x83e],
[0x840, 0x858],
[0x85e, 0x85e],
[0x8a0, 0x8a0],
[0x8a2, 0x8ac],
[0x200f, 0x200f],
[0xfb1d, 0xfb1d],
[0xfb1f, 0xfb28],
[0xfb2a, 0xfb36],
[0xfb38, 0xfb3c],
[0xfb3e, 0xfb3e],
[0xfb40, 0xfb41],
[0xfb43, 0xfb44],
[0xfb46, 0xfbc1],
[0xfbd3, 0xfd3d],
[0xfd50, 0xfd8f],
[0xfd92, 0xfdc7],
[0xfdf0, 0xfdfc],
[0xfe70, 0xfe74],
[0xfe76, 0xfefc],
[0x10800, 0x10805],
[0x10808, 0x10808],
[0x1080a, 0x10835],
[0x10837, 0x10838],
[0x1083c, 0x1083c],
[0x1083f, 0x10855],
[0x10857, 0x1085f],
[0x10900, 0x1091b],
[0x10920, 0x10939],
[0x1093f, 0x1093f],
[0x10980, 0x109b7],
[0x109be, 0x109bf],
[0x10a00, 0x10a00],
[0x10a10, 0x10a13],
[0x10a15, 0x10a17],
[0x10a19, 0x10a33],
[0x10a40, 0x10a47],
[0x10a50, 0x10a58],
[0x10a60, 0x10a7f],
[0x10b00, 0x10b35],
[0x10b40, 0x10b55],
[0x10b58, 0x10b72],
[0x10b78, 0x10b7f],
[0x10c00, 0x10c48],
[0x1ee00, 0x1ee03],
[0x1ee05, 0x1ee1f],
[0x1ee21, 0x1ee22],
[0x1ee24, 0x1ee24],
[0x1ee27, 0x1ee27],
[0x1ee29, 0x1ee32],
[0x1ee34, 0x1ee37],
[0x1ee39, 0x1ee39],
[0x1ee3b, 0x1ee3b],
[0x1ee42, 0x1ee42],
[0x1ee47, 0x1ee47],
[0x1ee49, 0x1ee49],
[0x1ee4b, 0x1ee4b],
[0x1ee4d, 0x1ee4f],
[0x1ee51, 0x1ee52],
[0x1ee54, 0x1ee54],
[0x1ee57, 0x1ee57],
[0x1ee59, 0x1ee59],
[0x1ee5b, 0x1ee5b],
[0x1ee5d, 0x1ee5d],
[0x1ee5f, 0x1ee5f],
[0x1ee61, 0x1ee62],
[0x1ee64, 0x1ee64],
[0x1ee67, 0x1ee6a],
[0x1ee6c, 0x1ee72],
[0x1ee74, 0x1ee77],
[0x1ee79, 0x1ee7c],
[0x1ee7e, 0x1ee7e],
[0x1ee80, 0x1ee89],
[0x1ee8b, 0x1ee9b],
[0x1eea1, 0x1eea3],
[0x1eea5, 0x1eea9],
[0x1eeab, 0x1eebb],
[0x10fffd, 0x10fffd]
];
function isStrongRTLChar(charCode) {
for (let i = 0; i < strongRTLRanges.length; i++) {
const currentRange = strongRTLRanges[i];
if (charCode >= currentRange[0] && charCode <= currentRange[1]) {
return true;
}
}
return false;
}
function determineBidi(cueDiv) {
let nodeStack = [],
text = '',
charCode;
if (!cueDiv || !cueDiv.childNodes) {
return 'ltr';
}
function pushNodes(nodeStack, node) {
for (let i = node.childNodes.length - 1; i >= 0; i--) {
nodeStack.push(node.childNodes[i]);
}
}
function nextTextNode(nodeStack) {
if (!nodeStack || !nodeStack.length) {
return null;
}
const node = nodeStack.pop(),
text = node.textContent || node.innerText;
if (text) {
// TODO: This should match all unicode type B characters (paragraph
// separator characters). See issue #115.
const m = text.match(/^.*(\n|\r)/);
if (m) {
nodeStack.length = 0;
return m[0];
}
return text;
}
if (node.tagName === 'ruby') {
return nextTextNode(nodeStack);
}
if (node.childNodes) {
pushNodes(nodeStack, node);
return nextTextNode(nodeStack);
}
}
pushNodes(nodeStack, cueDiv);
while ((text = nextTextNode(nodeStack))) {
for (let i = 0; i < text.length; i++) {
charCode = text.charCodeAt(i);
if (isStrongRTLChar(charCode)) {
return 'rtl';
}
}
}
return 'ltr';
}
function computeLinePos(cue) {
if (typeof cue.line === 'number' && (cue.snapToLines || (cue.line >= 0 && cue.line <= 100))) {
return cue.line;
}
if (!cue.track || !cue.track.textTrackList || !cue.track.textTrackList.mediaElement) {
return -1;
}
const track = cue.track;
const trackList = track.textTrackList;
let count = 0;
for (let i = 0; i < trackList.length && trackList[i] !== track; i++) {
if (trackList[i].mode === TextTrack.MODE.SHOWING) {
count++;
}
}
return ++count * -1;
}
class StyleBox {
constructor() {}
// Apply styles to a div. If there is no div passed then it defaults to the
// div on 'this'.
applyStyles(styles, div) {
div = div || this.div;
for (let prop in styles) {
if (styles.hasOwnProperty(prop)) {
div.style[prop] = styles[prop];
}
}
}
formatStyle(val, unit) {
return val === 0 ? 0 : val + unit;
}
}
// Constructs the computed display state of the cue (a div). Places the div
// into the overlay which should be a block level element (usually a div).
class CueStyleBox extends StyleBox {
constructor(window, cue, styleOptions) {
super();
const isIE8 = typeof navigator !== 'undefined' && /MSIE\s8\.0/.test(navigator.userAgent);
let color = 'rgba(255, 255, 255, 1)';
let backgroundColor = 'rgba(0, 0, 0, 0.8)';
let textShadow = '';
if (typeof WebVTTSet !== 'undefined') {
color = WebVTTSet.fontSet;
backgroundColor = WebVTTSet.backgroundSet;
textShadow = WebVTTSet.edgeSet;
}
if (isIE8) {
color = 'rgb(255, 255, 255)';
backgroundColor = 'rgb(0, 0, 0)';
}
this.cue = cue;
// Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will
// have inline positioning and will function as the cue background box.
this.cueDiv = parseContent(window, cue.text);
let styles = {
color: styleOptions.color,
backgroundColor: styleOptions.backgroundColor,
textShadow: styleOptions.textShadow,
position: 'relative',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'inline'
};
if (!isIE8) {
styles.writingMode = cue.vertical === '' ? 'horizontal-tb' : cue.vertical === 'lr' ? 'vertical-lr' : 'vertical-rl';
styles.unicodeBidi = 'plaintext';
}
this.applyStyles(styles, this.cueDiv);
const useDefaultAlignment = styleOptions.textAlign === 'default';
// Create an absolutely positioned div that will be used to position the cue
// div. Note, all WebVTT cue-setting alignments are equivalent to the CSS
// mirrors of them except "middle" which is "center" in CSS.
this.div = window.document.createElement('div');
let textAlign = cue.align === 'middle' ? 'center' : cue.align;
if (!useDefaultAlignment) {
textAlign = styleOptions.textAlign;
}
styles = {
textAlign,
font: styleOptions.font,
whiteSpace: 'pre-line',
position: 'absolute'
};
if (!isIE8) {
styles.direction = determineBidi(this.cueDiv);
styles.writingMode = cue.vertical === '' ? 'horizontal-tb' : cue.vertical === 'lr' ? 'vertical-lr' : ('vertical-rl'.stylesunicodeBidi = 'plaintext');
}
this.applyStyles(styles);
this.div.appendChild(this.cueDiv);
// Calculate the distance from the reference edge of the viewport to the text
// position of the cue box. The reference edge will be resolved later when
// the box orientation styles are applied.
let textPos = 0;
let align = cue.positionAlign || cue.align;
if (useDefaultAlignment) {
switch (align) {
case 'start':
case 'left':
case 'line-left':
textPos = cue.position;
break;
case 'center':
textPos = cue.position - cue.size / 2;
break;
case 'end':
case 'right':
case 'line-right':
textPos = cue.position - cue.size;
break;
}
}
// Horizontal box orientation; textPos is the distance from the left edge of the
// area to the left edge of the box and cue.size is the distance extending to
// the right from there.
if (cue.vertical === '') {
this.applyStyles({
left: this.formatStyle(textPos, '%'),
width: this.formatStyle(Math.min(cue.size, 100 - textPos) || cue.size, '%')
});
// Vertical box orientation; textPos is the distance from the top edge of the
// area to the top edge of the box and cue.size is the height extending
// downwards from there.
} else {
this.applyStyles({
top: this.formatStyle(textPos, '%'),
height: this.formatStyle(Math.min(cue.size, 100 - textPos) || cue.size, '%')
});
}
this.move = function (box) {
this.applyStyles({
top: this.formatStyle(box.top, 'px'),
bottom: this.formatStyle(box.bottom, 'px'),
left: this.formatStyle(box.left, 'px'),
right: this.formatStyle(box.right, 'px'),
height: this.formatStyle(box.height, 'px'),
width: this.formatStyle(box.width, 'px')
});
};
}
}
// Represents the co-ordinates of an Element in a way that we can easily
// compute things with such as if it overlaps or intersects with another Element.
// Can initialize it with either a StyleBox or another BoxPosition.
class BoxPosition {
constructor(obj) {
// Either a BoxPosition was passed in and we need to copy it, or a StyleBox
// was passed in and we need to copy the results of 'getBoundingClientRect'
// as the object returned is readonly. All co-ordinate values are in reference
// to the viewport origin (top left).
let lh, height, width, top;
if (obj.div) {
height = obj.div.offsetHeight;
width = obj.div.offsetWidth;
top = obj.div.offsetTop;
let rects;
rects = (rects = obj.div.childNodes) && (rects = rects[0]) && rects.getClientRects && rects.getClientRects();
obj = obj.div.getBoundingClientRect();
// In certain cases the outter div will be slightly larger then the sum of
// the inner div's lines. This could be due to bold text, etc, on some platforms.
// In this case we should get the average line height and use that. This will
// result in the desired behaviour.
lh = rects ? Math.max((rects[0] && rects[0].height) || 0, obj.height / rects.length) : 0;
}
this.left = obj.left;
this.right = obj.right;
this.top = obj.top || top;
this.height = obj.height || height;
this.bottom = obj.bottom || top + (obj.height || height);
this.width = obj.width || width;
this.lineHeight = lh || obj.lineHeight || 13;
}
// Move the box along a particular axis. Optionally pass in an amount to move
// the box. If no amount is passed then the default is the line height of the
// box.
move(axis, toMove) {
toMove = toMove !== undefined ? toMove : this.lineHeight;
switch (axis) {
case '+x':
this.left += toMove;
this.right += toMove;
break;
case '-x':
this.left -= toMove;
this.right -= toMove;
break;
case '+y':
this.top += toMove;
this.bottom += toMove;
break;
case '-y':
this.top -= toMove;
this.bottom -= toMove;
break;
}
}
// Check if this box overlaps another box, b2.
overlaps = function (b2) {
return this.left < b2.right && this.right > b2.left && this.top < b2.bottom && this.bottom > b2.top;
};
// Check if this box overlaps any other boxes in boxes.
overlapsAny(boxes) {
for (let i = 0; i < boxes.length; i++) {
if (this.overlaps(boxes[i])) {
return true;
}
}
return false;
}
// Check if this box is within another box.
within(container) {
return this.top >= container.top && this.bottom <= container.bottom && this.left >= container.left && this.right <= container.right;
}
// Check if this box is entirely within the container or it is overlapping
// on the edge opposite of the axis direction passed. For example, if "+x" is
// passed and the box is overlapping on the left edge of the container, then
// return true.
overlapsOppositeAxis(container, axis) {
switch (axis) {
case '+x':
return this.left < container.left;
case '-x':
return this.right > container.right;
case '+y':
return this.top < container.top;
case '-y':
return this.bottom > container.bottom;
}
}
// Find the percentage of the area that this box is overlapping with another
// box.
intersectPercentage(b2) {
let x = Math.max(0, Math.min(this.right, b2.right) - Math.max(this.left, b2.left)),
y = Math.max(0, Math.min(this.bottom, b2.bottom) - Math.max(this.top, b2.top)),
intersectArea = x * y;
return intersectArea / (this.height * this.width);
}
// Convert the positions from this box to CSS compatible positions using
// the reference container's positions. This has to be done because this
// box's positions are in reference to the viewport origin, whereas, CSS
// values are in referecne to their respective edges.
toCSSCompatValues(reference) {
return {
top: this.top - reference.top,
bottom: reference.bottom - this.bottom,
left: this.left - reference.left,
right: reference.right - this.right,
height: this.height,
width: this.width
};
}
// Get an object that represents the box's position without anything extra.
// Can pass a StyleBox, HTMLElement, or another BoxPositon.
static getSimpleBoxPosition(obj) {
let height = obj.div ? obj.div.offsetHeight : obj.tagName ? obj.offsetHeight : 0;
let width = obj.div ? obj.div.offsetWidth : obj.tagName ? obj.offsetWidth : 0;
let top = obj.div ? obj.div.offsetTop : obj.tagName ? obj.offsetTop : 0;
obj = obj.div ? obj.div.getBoundingClientRect() : obj.tagName ? obj.getBoundingClientRect() : obj;
return {
left: obj.left,
right: obj.right,
top: obj.top || top,
height: obj.height || height,
bottom: obj.bottom || top + (obj.height || height),
width: obj.width || width
};
}
}
// Move a StyleBox to its specified, or next best, position. The containerBox
// is the box that contains the StyleBox, such as a div. boxPositions are
// a list of other boxes that the styleBox can't overlap with.
function moveBoxToLinePosition(window, styleBox, containerBox, boxPositions) {
// Find the best position for a cue box, b, on the video. The axis parameter
// is a list of axis, the order of which, it will move the box along. For example:
// Passing ["+x", "-x"] will move the box first along the x axis in the positive
// direction. If it doesn't find a good position for it there it will then move
// it along the x axis in the negative direction.
function findBestPosition(b, axis) {
let bestPosition,
specifiedPosition = new BoxPosition(b),
percentage = 1; // Highest possible so the first thing we get is better.
for (let i = 0; i < axis.length; i++) {
while (b.overlapsOppositeAxis(containerBox, axis[i]) || (b.within(containerBox) && b.overlapsAny(boxPositions))) {
b.move(axis[i]);
}
// We found a spot where we aren't overlapping anything. This is our
// best position.
if (b.within(containerBox)) {
return b;
}
let p = b.intersectPercentage(containerBox);
// If we're outside the container box less then we were on our last try
// then remember this position as the best position.
if (percentage > p) {
bestPosition = new BoxPosition(b);
percentage = p;
}
// Reset the box position to the specified position.
b = new BoxPosition(specifiedPosition);
}
return bestPosition || specifiedPosition;
}
let boxPosition = new BoxPosition(styleBox),
cue = styleBox.cue,
linePos = computeLinePos(cue),
axis = [];
// If we have a line number to align the cue to.
if (cue.snapToLines) {
let size;
switch (cue.vertical) {
case '':
axis = ['+y', '-y'];
size = 'height';
break;
case 'rl':
axis = ['+x', '-x'];
size = 'width';
break;
case 'lr':
axis = ['-x', '+x'];
size = 'width';
break;
}
let step = boxPosition.lineHeight,
position = step * Math.round(linePos),
maxPosition = containerBox[size] + step,
initialAxis = axis[0];
// If the specified intial position is greater then the max position then
// clamp the box to the amount of steps it would take for the box to
// reach the max position.
if (Math.abs(position) > maxPosition) {
position = position < 0 ? -1 : 1;
position *= Math.ceil(maxPosition / step) * step;
}
// If computed line position returns negative then line numbers are
// relative to the bottom of the video instead of the top. Therefore, we
// need to increase our initial position by the length or width of the
// video, depending on the writing direction, and reverse our axis directions.
if (linePos < 0) {
position += cue.vertical === '' ? containerBox.height : containerBox.width;
axis = axis.reverse();
}
// Move the box to the specified position. This may not be its best
// position.
boxPosition.move(initialAxis, position);
} else {
// If we have a percentage line value for the cue.
let calculatedPercentage = (boxPosition.lineHeight / containerBox.height) * 100;
switch (cue.lineAlign) {
case 'center':
linePos -= calculatedPercentage / 2;
break;
case 'end':
linePos -= calculatedPercentage;
break;
}
// Apply initial line position to the cue box.
switch (cue.vertical) {
case '':
styleBox.applyStyles({
top: styleBox.formatStyle(linePos, '%')
});
break;
case 'rl':
styleBox.applyStyles({
left: styleBox.formatStyle(linePos, '%')
});
break;
case 'lr':
styleBox.applyStyles({
right: styleBox.formatStyle(linePos, '%')
});
break;
}
axis = ['+y', '-x', '+x', '-y'];
// Get the box position again after we've applied the specified positioning
// to it.
boxPosition = new BoxPosition(styleBox);
}
let bestPosition = findBestPosition(boxPosition, axis);
styleBox.move(bestPosition.toCSSCompatValues(containerBox));
}
function convertCueToDOMTree(window, cuetext) {
if (!window || !cuetext) {
return null;
}
return parseContent(window, cuetext);
}
const FONT_SIZE_PERCENT = 0.058;
const CUE_BACKGROUND_PADDING = '1.5%';
// Runs the processing model over the cues and regions passed to it.
// @param overlay A block level element (usually a div) that the computed cues
// and regions will be placed into.
function processCues(window, cues, overlay, style) {
if (!window || !cues || !overlay) {
return null;
}
// Remove all previous children.
while (overlay.firstChild) {
overlay.removeChild(overlay.firstChild);
}
let paddedOverlay = window.document.createElement('div');
paddedOverlay.style.position = 'absolute';
paddedOverlay.style.left = '0';
paddedOverlay.style.right = '0';
paddedOverlay.style.top = '0';
paddedOverlay.style.bottom = '0';
paddedOverlay.style.margin = CUE_BACKGROUND_PADDING;
overlay.appendChild(paddedOverlay);
// Determine if we need to compute the display states of the cues. This could
// be the case if a cue's state has been changed since the last computation or
// if it has not been computed yet.
function shouldCompute(cues) {
for (let i = 0; i < cues.length; i++) {
if (cues[i].hasBeenReset || !cues[i].displayState) {
return true;
}
}
return false;
}
// We don't need to recompute the cues' display states. Just reuse them.
if (!shouldCompute(cues)) {
for (let i = 0; i < cues.length; i++) {
paddedOverlay.appendChild(cues[i].displayState);
}
return;
}
let boxPositions = [],
containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
dimensionSize = containerBox.height < containerBox.width ? containerBox.height : containerBox.width,
fontSize = Math.round(dimensionSize * FONT_SIZE_PERCENT * 100) / 100;
let styleOptions = {
font: style.fontWeight + ' ' + fontSize * fontScale * style.implicitFontScale + 'px ' + style.fontFamily,
textAlign: style.textAlign,
color: TextStyle.toRGBA(style.fontColor, style.fontOpacity),
backgroundColor: TextStyle.toRGBA(style.backgroundColor, style.backgroundOpacity),
textShadow: style.getTextShadow()
};
(function () {
let styleBox, cue;
for (let i = 0; i < cues.length; i++) {
cue = cues[i];
// Compute the intial position and styles of the cue div.
styleBox = new CueStyleBox(window, cue, styleOptions);
paddedOverlay.appendChild(styleBox.div);
// Move the cue div to it's correct line position.
moveBoxToLinePosition(window, styleBox, containerBox, boxPositions);
// Remember the computed div so that we don't have to recompute it later
// if we don't have too.
cue.displayState = styleBox.div;
boxPositions.push(BoxPosition.getSimpleBoxPosition(styleBox));
}
})();
}
let Parser = function (window, decoder) {
this.window = window;
this.state = 'INITIAL';
this.buffer = '';
this.decoder = decoder || new TextDecoder('utf8');
this.regionList = [];
};
let StringDecoder = function () {
return {
decode: function (data) {
if (!data) {
return '';
}
if (typeof data !== 'string') {
throw new Error('Error - expected string data.');
}
return decodeURIComponent(encodeURIComponent(data));
}
};
};
var _objCreate =
Object.create ||
(function () {
function F() {}
return function (o) {
if (arguments.length !== 1) {
throw new Error('Object.create shim only accepts one parameter.');
}
F.prototype = o;
return new F();
};
})();
// Creates a new ParserError object from an errorData object. The errorData
// object should have default code and message properties. The default message
// property can be overriden by passing in a message parameter.
// See ParsingError.Errors below for acceptable errors.
function ParsingError(errorData, message) {
this.name = 'ParsingError';
this.code = errorData.code;
this.message = message || errorData.message;
}
ParsingError.prototype = _objCreate(Error.prototype);
ParsingError.prototype.constructor = ParsingError;
// ParsingError metadata for acceptable ParsingErrors.
ParsingError.Errors = {
BadSignature: {
code: 0,
message: 'Malformed WebVTT signature.'
},
BadTimeStamp: {
code: 1,
message: 'Malformed time stamp.'
}
};
Parser.prototype = {
// If the error is a ParsingError then report it to the consumer if
// possible. If it's not a ParsingError then throw it like normal.
reportOrThrowError: function (e) {
if (e instanceof ParsingError) {
this.onparsingerror && this.onparsingerror(e);
} else {
throw e;
}
},
parse: function (data) {
var self = this;
// If there is no data then we won't decode it, but will just try to parse
// whatever is in buffer already. This may occur in circumstances, for
// example when flush() is called.
if (data) {
// Try to decode the data that we received.
self.buffer += self.decoder.decode(data, { stream: true });
}
function collectNextLine() {
var buffer = self.buffer;
var pos = 0;
while (pos < buffer.length && buffer[pos] !== '\r' && buffer[pos] !== '\n') {
++pos;
}
var line = buffer.substr(0, pos);
// Advance the buffer early in case we fail below.
if (buffer[pos] === '\r') {
++pos;
}
if (buffer[pos] === '\n') {
++pos;
}
self.buffer = buffer.substr(pos);
return line;
}
// 3.4 WebVTT region and WebVTT region settings syntax
function parseRegion(input) {
var settings = new Settings();
parseOptions(
input,
function (k, v) {
switch (k) {
case 'id':
settings.set(k, v);
break;
case 'width':
settings.percent(k, v);
break;
case 'lines':
settings.integer(k, v);
break;
case 'regionanchor':
case 'viewportanchor':
var xy = v.split(',');
if (xy.length !== 2) {
break;
}
// We have to make sure both x and y parse, so use a temporary
// settings object here.
var anchor = new Settings();
anchor.percent('x', xy[0]);
anchor.percent('y', xy[1]);
if (!anchor.has('x') || !anchor.has('y')) {
break;
}
settings.set(k + 'X', anchor.get('x'));
settings.set(k + 'Y', anchor.get('y'));
break;
case 'scroll':
settings.alt(k, v, ['up']);
break;
}
},
/=/,
/\s/
);
// Create the region, using default values for any values that were not
// specified.
if (settings.has('id')) {
var region = new Region();
region.width = settings.get('width', 100);
region.lines = settings.get('lines', 3);
region.regionAnchorX = settings.get('regionanchorX', 0);
region.regionAnchorY = settings.get('regionanchorY', 100);
region.viewportAnchorX = settings.get('viewportanchorX', 0);
region.viewportAnchorY = settings.get('viewportanchorY', 100);
region.scroll = settings.get('scroll', '');
// Register the region.
self.onregion && self.onregion(region);
// Remember the VTTRegion for later in case we parse any VTTCues that
// reference it.
self.regionList.push({
id: settings.get('id'),
region: region
});
}
}
// 3.2 WebVTT metadata header syntax
function parseHeader(input) {
parseOptions(
input,
function (k, v) {
switch (k) {
case 'Region':
// 3.3 WebVTT region metadata header syntax
parseRegion(v);
break;
}
},
/:/
);
}
// 5.1 WebVTT file parsing.
try {
var line;
if (self.state === 'INITIAL') {
// We can't start parsing until we have the first line.
if (!/\r\n|\n/.test(self.buffer)) {
return this;
}
line = collectNextLine();
var m = line.match(/^WEBVTT([ \t].*)?$/);
if (!m || !m[0]) {
throw new ParsingError(ParsingError.Errors.BadSignature);
}
self.state = 'HEADER';
}
var alreadyCollectedLine = false;
while (self.buffer) {
// We can't parse a line until we have the full line.
if (!/\r\n|\n/.test(self.buffer)) {
return this;
}
if (!alreadyCollectedLine) {
line = collectNextLine();
} else {
alreadyCollectedLine = false;
}
switch (self.state) {
case 'HEADER':
// 13-18 - Allow a header (metadata) under the WEBVTT line.
if (/:/.test(line)) {
parseHeader(line);
} else if (!line) {
// An empty line terminates the header and starts the body (cues).
self.state = 'ID';
}
continue;
case 'NOTE':
// Ignore NOTE blocks.
if (!line) {
self.state = 'ID';
}
continue;
case 'ID':
// Check for the start of NOTE blocks.
if (/^NOTE($|[ \t])/.test(line)) {
self.state = 'NOTE';
break;
}
// 19-29 - Allow any number of line terminators, then initialize new cue values.
if (!line) {
continue;
}
self.cue = new VTTCue(0, 0, '');
self.state = 'CUE';
// 30-39 - Check if self line contains an optional identifier or timing data.
if (line.indexOf('-->') === -1) {
self.cue.id = line;
continue;
}
// Process line as start of a cue.
/*falls through*/
case 'CUE':
// 40 - Collect cue timings and settings.
try {
parseCue(line, self.cue, self.regionList);
} catch (e) {
self.reportOrThrowError(e);
// In case of an error ignore rest of the cue.
self.cue = null;
self.state = 'BADCUE';
continue;
}
self.state = 'CUETEXT';
continue;
case 'CUETEXT':
var hasSubstring = line.indexOf('-->') !== -1;
// 34 - If we have an empty line then report the cue.
// 35 - If we have the special substring '-->' then report the cue,
// but do not collect the line as we need to process the current
// one as a new cue.
if (!line || (hasSubstring && (alreadyCollectedLine = true))) {
// We are done parsing self cue.
self.oncue && self.oncue(self.cue);
self.cue = null;
self.state = 'ID';
continue;
}
if (self.cue.text) {
self.cue.text += '\n';
}
self.cue.text += line;
continue;
case 'BADCUE': // BADCUE
// 54-62 - Collect and discard the remaining cue.
if (!line) {
self.state = 'ID';
}
continue;
}
}
} catch (e) {
self.reportOrThrowError(e);
// If we are currently parsing a cue, report what we have.
if (self.state === 'CUETEXT' && self.cue && self.oncue) {
self.oncue(self.cue);
}
self.cue = null;
// Enter BADWEBVTT state if header was not parsed correctly otherwise
// another exception occurred so enter BADCUE state.
self.state = self.state === 'INITIAL' ? 'BADWEBVTT' : 'BADCUE';
}
return this;
},
flush: function () {
var self = this;
try {
// Finish decoding the stream.
self.buffer += self.decoder.decode();
// Synthesize the end of the current cue or region.
if (self.cue || self.state === 'HEADER') {
self.buffer += '\n\n';
self.parse();
}
// If we've flushed, parsed, and we're still on the INITIAL state then
// that means we don't have enough of the stream to parse the first
// line.
if (self.state === 'INITIAL') {
throw new ParsingError(ParsingError.Errors.BadSignature);
}
} catch (e) {
self.reportOrThrowError(e);
}
self.onflush && self.onflush();
return this;
}
};
export { processCues, convertCueToDOMTree, Parser, StringDecoder };