// 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 };