summaryrefslogtreecommitdiffstats
path: root/dom/media/webvtt/vtt.sys.mjs
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--dom/media/webvtt/vtt.sys.mjs1663
1 files changed, 1663 insertions, 0 deletions
diff --git a/dom/media/webvtt/vtt.sys.mjs b/dom/media/webvtt/vtt.sys.mjs
new file mode 100644
index 0000000000..8b4a830e7f
--- /dev/null
+++ b/dom/media/webvtt/vtt.sys.mjs
@@ -0,0 +1,1663 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Code below is vtt.js the JS WebVTT implementation.
+ * Current source code can be found at http://github.com/mozilla/vtt.js
+ *
+ * Code taken from commit b89bfd06cd788a68c67e03f44561afe833db0849
+ */
+/**
+ * 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 { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+XPCOMUtils.defineLazyPreferenceGetter(lazy, "supportPseudo",
+ "media.webvtt.pseudo.enabled", false);
+XPCOMUtils.defineLazyPreferenceGetter(lazy, "DEBUG_LOG",
+ "media.webvtt.debug.logging", false);
+
+function LOG(message) {
+ if (lazy.DEBUG_LOG) {
+ dump("[vtt] " + message + "\n");
+ }
+}
+
+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."
+ }
+};
+
+// See spec, https://w3c.github.io/webvtt/#collect-a-webvtt-timestamp.
+function collectTimeStamp(input) {
+ function computeSeconds(h, m, s, f) {
+ if (m > 59 || s > 59) {
+ return null;
+ }
+ // The attribute of the milli-seconds can only be three digits.
+ if (f.length !== 3) {
+ return null;
+ }
+ return (h | 0) * 3600 + (m | 0) * 60 + (s | 0) + (f | 0) / 1000;
+ }
+
+ let timestamp = input.match(/^(\d+:)?(\d{2}):(\d{2})\.(\d+)/);
+ if (!timestamp || timestamp.length !== 5) {
+ return null;
+ }
+
+ let hours = timestamp[1]? timestamp[1].replace(":", "") : 0;
+ let minutes = timestamp[2];
+ let seconds = timestamp[3];
+ let milliSeconds = timestamp[4];
+
+ return computeSeconds(hours, minutes, seconds, milliSeconds);
+}
+
+// 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 = {
+ set: function(k, v) {
+ if (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 (let n = 0; n < a.length; ++n) {
+ if (v === a[n]) {
+ this.set(k, v);
+ return true;
+ }
+ }
+ return false;
+ },
+ // Accept a setting if its a valid digits value (int or float)
+ digitsValue: function(k, v) {
+ if (/^-0+(\.[0]*)?$/.test(v)) { // special case for -0.0
+ this.set(k, 0.0);
+ } else if (/^-?\d+(\.[\d]*)?$/.test(v)) {
+ this.set(k, parseFloat(v));
+ }
+ },
+ // Accept a setting if its a valid percentage.
+ percent: function(k, v) {
+ let 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;
+ },
+ // Delete a setting
+ del: function (k) {
+ if (this.has(k)) {
+ delete this.values[k];
+ }
+ },
+};
+
+// 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) {
+ let groups = groupDelim ? input.split(groupDelim) : [input];
+ for (let i in groups) {
+ if (typeof groups[i] !== "string") {
+ continue;
+ }
+ let kv = groups[i].split(keyValueDelim);
+ if (kv.length !== 2) {
+ continue;
+ }
+ let k = kv[0];
+ let v = kv[1];
+ callback(k, v);
+ }
+}
+
+function parseCue(input, cue, regionList) {
+ // Remember the original input if we need to throw an error.
+ let oInput = input;
+ // 4.1 WebVTT timestamp
+ function consumeTimeStamp() {
+ let ts = collectTimeStamp(input);
+ if (ts === null) {
+ throw new ParsingError(ParsingError.Errors.BadTimeStamp,
+ "Malformed timestamp: " + oInput);
+ }
+ // Remove time stamp from input.
+ input = input.replace(/^[^\s\uFFFDa-zA-Z-]+/, "");
+ return ts;
+ }
+
+ // 4.4.2 WebVTT cue settings
+ function consumeCueSettings(input, cue) {
+ let settings = new Settings();
+ parseOptions(input, function (k, v) {
+ switch (k) {
+ case "region":
+ // Find the last region we parsed with the same region id.
+ for (let 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": {
+ let vals = v.split(",");
+ let vals0 = vals[0];
+ settings.digitsValue(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": {
+ let vals = v.split(",");
+ if (settings.percent(k, vals[0])) {
+ if (vals.length === 2) {
+ if (!settings.alt("positionAlign", vals[1], ["line-left", "center", "line-right"])) {
+ // Remove the "position" value because the "positionAlign" is not expected value.
+ // It will be set to default value below.
+ settings.del(k);
+ }
+ }
+ }
+ break;
+ }
+ case "size":
+ settings.percent(k, v);
+ break;
+ case "align":
+ settings.alt(k, v, ["start", "center", "end", "left", "right"]);
+ break;
+ }
+ }, /:/, /\t|\n|\f|\r| /); // groupDelim is ASCII whitespace
+
+ // Apply default values for any missing fields.
+ // https://w3c.github.io/webvtt/#collect-a-webvtt-block step 11.4.1.3
+ cue.region = settings.get("region", null);
+ cue.vertical = settings.get("vertical", "");
+ cue.line = settings.get("line", "auto");
+ cue.lineAlign = settings.get("lineAlign", "start");
+ cue.snapToLines = settings.get("snapToLines", true);
+ cue.size = settings.get("size", 100);
+ cue.align = settings.get("align", "center");
+ cue.position = settings.get("position", "auto");
+ cue.positionAlign = settings.get("positionAlign", "auto");
+ }
+
+ function skipWhitespace() {
+ input = input.replace(/^[ \f\n\r\t]+/, "");
+ }
+
+ // 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);
+}
+
+function emptyOrOnlyContainsWhiteSpaces(input) {
+ return input == "" || /^[ \f\n\r\t]+$/.test(input);
+}
+
+function containsTimeDirectionSymbol(input) {
+ return input.includes("-->");
+}
+
+function maybeIsTimeStampFormat(input) {
+ return /^\s*(\d+:)?(\d{2}):(\d{2})\.(\d+)\s*-->\s*(\d+:)?(\d{2}):(\d{2})\.(\d+)\s*/.test(input);
+}
+
+var ESCAPE = {
+ "&amp;": "&",
+ "&lt;": "<",
+ "&gt;": ">",
+ "&lrm;": "\u200e",
+ "&rlm;": "\u200f",
+ "&nbsp;": "\u00a0"
+};
+
+var TAG_NAME = {
+ c: "span",
+ i: "i",
+ b: "b",
+ u: "u",
+ ruby: "ruby",
+ rt: "rt",
+ v: "span",
+ lang: "span"
+};
+
+var TAG_ANNOTATION = {
+ v: "title",
+ lang: "lang"
+};
+
+var NEEDS_PARENT = {
+ rt: "ruby"
+};
+
+const PARSE_CONTENT_MODE = {
+ NORMAL_CUE: "normal_cue",
+ PSUEDO_CUE: "pseudo_cue",
+ DOCUMENT_FRAGMENT: "document_fragment",
+ REGION_CUE: "region_cue",
+}
+// Parse content into a document fragment.
+function parseContent(window, input, mode) {
+ 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;
+ }
+
+ let m = input.match(/^([^<]*)(<[^>]+>?)?/);
+ // The input doesn't contain a complete tag.
+ if (!m[0]) {
+ return null;
+ }
+ // 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) {
+ let tagName = TAG_NAME[type];
+ if (!tagName) {
+ return null;
+ }
+ let element = window.document.createElement(tagName);
+ let name = TAG_ANNOTATION[type];
+ if (name) {
+ element[name] = annotation ? annotation.trim() : "";
+ }
+ return element;
+ }
+
+ // https://w3c.github.io/webvtt/#webvtt-timestamp-object
+ // Return hhhhh:mm:ss.fff
+ function normalizedTimeStamp(secondsWithFrag) {
+ let totalsec = parseInt(secondsWithFrag, 10);
+ let hours = Math.floor(totalsec / 3600);
+ let minutes = Math.floor(totalsec % 3600 / 60);
+ let seconds = Math.floor(totalsec % 60);
+ if (hours < 10) {
+ hours = "0" + hours;
+ }
+ if (minutes < 10) {
+ minutes = "0" + minutes;
+ }
+ if (seconds < 10) {
+ seconds = "0" + seconds;
+ }
+ let f = secondsWithFrag.toString().split(".");
+ if (f[1]) {
+ f = f[1].slice(0, 3).padEnd(3, "0");
+ } else {
+ f = "000";
+ }
+ return hours + ':' + minutes + ':' + seconds + '.' + f;
+ }
+
+ let root;
+ switch (mode) {
+ case PARSE_CONTENT_MODE.PSUEDO_CUE:
+ root = window.document.createElement("span", {pseudo: "::cue"});
+ break;
+ case PARSE_CONTENT_MODE.NORMAL_CUE:
+ case PARSE_CONTENT_MODE.REGION_CUE:
+ root = window.document.createElement("span");
+ break;
+ case PARSE_CONTENT_MODE.DOCUMENT_FRAGMENT:
+ root = window.document.createDocumentFragment();
+ break;
+ }
+
+ if (!input) {
+ root.appendChild(window.document.createTextNode(""));
+ return root;
+ }
+
+ let current = root,
+ 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 = collectTimeStamp(t.substr(1, t.length - 1));
+ let node;
+ if (ts) {
+ // Timestamps are lead nodes as well.
+ node = window.document.createProcessingInstruction("timestamp", normalizedTimeStamp(ts));
+ current.appendChild(node);
+ continue;
+ }
+ let 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 root;
+}
+
+function StyleBox() {
+}
+
+// Apply styles to a div. If there is no div passed then it defaults to the
+// div on 'this'.
+StyleBox.prototype.applyStyles = function(styles, div) {
+ div = div || this.div;
+ for (let prop in styles) {
+ if (styles.hasOwnProperty(prop)) {
+ div.style[prop] = styles[prop];
+ }
+ }
+};
+
+StyleBox.prototype.formatStyle = function(val, unit) {
+ return val === 0 ? 0 : val + unit;
+};
+
+// TODO(alwu): remove StyleBox and change other style box to class-based.
+class StyleBoxBase {
+ applyStyles(styles, div) {
+ div = div || this.div;
+ Object.assign(div.style, styles);
+ }
+
+ 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 StyleBoxBase {
+ constructor(window, cue, containerBox) {
+ super();
+ this.cue = cue;
+ this.div = window.document.createElement("div");
+ this.cueDiv = parseContent(window, cue.text, lazy.supportPseudo ?
+ PARSE_CONTENT_MODE.PSUEDO_CUE : PARSE_CONTENT_MODE.NORMAL_CUE);
+ this.div.appendChild(this.cueDiv);
+
+ this.containerHeight = containerBox.height;
+ this.containerWidth = containerBox.width;
+ this.fontSize = this._getFontSize(containerBox);
+ this.isCueStyleBox = true;
+
+ // As pseudo element won't inherit the parent div's style, so we have to
+ // set the font size explicitly.
+ if (lazy.supportPseudo) {
+ this._applyDefaultStylesOnPseudoBackgroundNode();
+ } else {
+ this._applyDefaultStylesOnNonPseudoBackgroundNode();
+ }
+ this._applyDefaultStylesOnRootNode();
+ }
+
+ getCueBoxPositionAndSize() {
+ // As `top`, `left`, `width` and `height` are all represented by the
+ // percentage of the container, we need to convert them to the actual
+ // number according to the container's size.
+ const isWritingDirectionHorizontal = this.cue.vertical == "";
+ let top =
+ this.containerHeight * this._tranferPercentageToFloat(this.div.style.top),
+ left =
+ this.containerWidth * this._tranferPercentageToFloat(this.div.style.left),
+ width = isWritingDirectionHorizontal ?
+ this.containerWidth * this._tranferPercentageToFloat(this.div.style.width) :
+ this.div.clientWidthDouble,
+ height = isWritingDirectionHorizontal ?
+ this.div.clientHeightDouble :
+ this.containerHeight * this._tranferPercentageToFloat(this.div.style.height);
+ return { top, left, width, height };
+ }
+
+ getFirstLineBoxSize() {
+ // This size would be automatically adjusted by writing direction. When
+ // direction is horizontal, it represents box's height. When direction is
+ // vertical, it represents box's width.
+ return this.div.firstLineBoxBSize;
+ }
+
+ setBidiRule() {
+ // This function is a workaround which is used to force the reflow in order
+ // to use the correct alignment for bidi text. Now this function would be
+ // called after calculating the final position of the cue box to ensure the
+ // rendering result is correct. See bug1557882 comment3 for more details.
+ // TODO : remove this function and set `unicode-bidi` when initiailizing
+ // the CueStyleBox, after fixing bug1558431.
+ this.applyStyles({ "unicode-bidi": "plaintext" });
+ }
+
+ /**
+ * Following methods are private functions, should not use them outside this
+ * class.
+ */
+ _tranferPercentageToFloat(input) {
+ return input.replace("%", "") / 100.0;
+ }
+
+ _getFontSize(containerBox) {
+ // In https://www.w3.org/TR/webvtt1/#applying-css-properties, the spec
+ // said the font size is '5vh', which means 5% of the viewport height.
+ // However, if we use 'vh' as a basic unit, it would eventually become
+ // 5% of screen height, instead of video's viewport height. Therefore, we
+ // have to use 'px' here to make sure we have the correct font size.
+ return containerBox.height * 0.05 + "px";
+ }
+
+ _applyDefaultStylesOnPseudoBackgroundNode() {
+ // most of the properties have been defined in `::cue` in `html.css`, but
+ // there are some css variables we have to set them dynamically.
+ this.cueDiv.style.setProperty("--cue-font-size", this.fontSize, "important");
+ this.cueDiv.style.setProperty("--cue-writing-mode", this._getCueWritingMode(), "important");
+ }
+
+ _applyDefaultStylesOnNonPseudoBackgroundNode() {
+ // If cue div is not a pseudo element, we should set the default css style
+ // for it, the reason we need to set these attributes to cueDiv is because
+ // if we set background on the root node directly, if would cause filling
+ // too large area for the background color as the size of root node won't
+ // be adjusted by cue size.
+ this.applyStyles({
+ "background-color": "rgba(0, 0, 0, 0.8)",
+ }, this.cueDiv);
+ }
+
+ // spec https://www.w3.org/TR/webvtt1/#applying-css-properties
+ _applyDefaultStylesOnRootNode() {
+ // The variables writing-mode, top, left, width, and height are calculated
+ // in the spec 7.2, https://www.w3.org/TR/webvtt1/#processing-cue-settings
+ // spec 7.2.1, calculate 'writing-mode'.
+ const writingMode = this._getCueWritingMode();
+
+ // spec 7.2.2 ~ 7.2.7, calculate 'width', 'height', 'left' and 'top'.
+ const {width, height, left, top} = this._getCueSizeAndPosition();
+
+ this.applyStyles({
+ "position": "absolute",
+ // "unicode-bidi": "plaintext", (uncomment this line after fixing bug1558431)
+ "writing-mode": writingMode,
+ "top": top,
+ "left": left,
+ "width": width,
+ "height": height,
+ "overflow-wrap": "break-word",
+ // "text-wrap": "balance", (we haven't supported this CSS attribute yet)
+ "white-space": "pre-line",
+ "font": this.fontSize + " sans-serif",
+ "color": "rgba(255, 255, 255, 1)",
+ "white-space": "pre-line",
+ "text-align": this.cue.align,
+ });
+ }
+
+ _getCueWritingMode() {
+ const cue = this.cue;
+ if (cue.vertical == "") {
+ return "horizontal-tb";
+ }
+ return cue.vertical == "lr" ? "vertical-lr" : "vertical-rl";
+ }
+
+ _getCueSizeAndPosition() {
+ const cue = this.cue;
+ // spec 7.2.2, determine the value of maximum size for cue as per the
+ // appropriate rules from the following list.
+ let maximumSize;
+ let computedPosition = cue.computedPosition;
+ switch (cue.computedPositionAlign) {
+ case "line-left":
+ maximumSize = 100 - computedPosition;
+ break;
+ case "line-right":
+ maximumSize = computedPosition;
+ break;
+ case "center":
+ maximumSize = computedPosition <= 50 ?
+ computedPosition * 2 : (100 - computedPosition) * 2;
+ break;
+ }
+ const size = Math.min(cue.size, maximumSize);
+
+ // spec 7.2.5, determine the value of x-position or y-position for cue as
+ // per the appropriate rules from the following list.
+ let xPosition = 0.0, yPosition = 0.0;
+ const isWritingDirectionHorizontal = cue.vertical == "";
+ switch (cue.computedPositionAlign) {
+ case "line-left":
+ if (isWritingDirectionHorizontal) {
+ xPosition = cue.computedPosition;
+ } else {
+ yPosition = cue.computedPosition;
+ }
+ break;
+ case "center":
+ if (isWritingDirectionHorizontal) {
+ xPosition = cue.computedPosition - (size / 2);
+ } else {
+ yPosition = cue.computedPosition - (size / 2);
+ }
+ break;
+ case "line-right":
+ if (isWritingDirectionHorizontal) {
+ xPosition = cue.computedPosition - size;
+ } else {
+ yPosition = cue.computedPosition - size;
+ }
+ break;
+ }
+
+ // spec 7.2.6, determine the value of whichever of x-position or
+ // y-position is not yet calculated for cue as per the appropriate rules
+ // from the following list.
+ if (!cue.snapToLines) {
+ if (isWritingDirectionHorizontal) {
+ yPosition = cue.computedLine;
+ } else {
+ xPosition = cue.computedLine;
+ }
+ } else {
+ if (isWritingDirectionHorizontal) {
+ yPosition = 0;
+ } else {
+ xPosition = 0;
+ }
+ }
+ return {
+ left: xPosition + "%",
+ top: yPosition + "%",
+ width: isWritingDirectionHorizontal ? size + "%" : "auto",
+ height: isWritingDirectionHorizontal ? "auto" : size + "%",
+ };
+ }
+}
+
+function RegionNodeBox(window, region, container) {
+ StyleBox.call(this);
+
+ let boxLineHeight = container.height * 0.0533 // 0.0533vh ? 5.33vh
+ let boxHeight = boxLineHeight * region.lines;
+ let boxWidth = container.width * region.width / 100; // convert percentage to px
+
+ let regionNodeStyles = {
+ position: "absolute",
+ height: boxHeight + "px",
+ width: boxWidth + "px",
+ top: (region.viewportAnchorY * container.height / 100) - (region.regionAnchorY * boxHeight / 100) + "px",
+ left: (region.viewportAnchorX * container.width / 100) - (region.regionAnchorX * boxWidth / 100) + "px",
+ lineHeight: boxLineHeight + "px",
+ writingMode: "horizontal-tb",
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
+ wordWrap: "break-word",
+ overflowWrap: "break-word",
+ font: (boxLineHeight/1.3) + "px sans-serif",
+ color: "rgba(255, 255, 255, 1)",
+ overflow: "hidden",
+ minHeight: "0px",
+ maxHeight: boxHeight + "px",
+ display: "inline-flex",
+ flexFlow: "column",
+ justifyContent: "flex-end",
+ };
+
+ this.div = window.document.createElement("div");
+ this.div.id = region.id; // useless?
+ this.applyStyles(regionNodeStyles);
+}
+RegionNodeBox.prototype = _objCreate(StyleBox.prototype);
+RegionNodeBox.prototype.constructor = RegionNodeBox;
+
+function RegionCueStyleBox(window, cue) {
+ StyleBox.call(this);
+ this.cueDiv = parseContent(window, cue.text, PARSE_CONTENT_MODE.REGION_CUE);
+
+ let regionCueStyles = {
+ position: "relative",
+ writingMode: "horizontal-tb",
+ unicodeBidi: "plaintext",
+ width: "auto",
+ height: "auto",
+ textAlign: cue.align,
+ };
+ // TODO: fix me, LTR and RTL ? using margin replace the "left/right"
+ // 6.1.14.3.3
+ let offset = cue.computedPosition * cue.region.width / 100;
+ // 6.1.14.3.4
+ switch (cue.align) {
+ case "start":
+ case "left":
+ regionCueStyles.left = offset + "%";
+ regionCueStyles.right = "auto";
+ break;
+ case "end":
+ case "right":
+ regionCueStyles.left = "auto";
+ regionCueStyles.right = offset + "%";
+ break;
+ case "middle":
+ break;
+ }
+
+ this.div = window.document.createElement("div");
+ this.applyStyles(regionCueStyles);
+ this.div.appendChild(this.cueDiv);
+}
+RegionCueStyleBox.prototype = _objCreate(StyleBox.prototype);
+RegionCueStyleBox.prototype.constructor = RegionCueStyleBox;
+
+// 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 other boxes.
+class BoxPosition {
+ constructor(obj) {
+ // Get dimensions by calling getCueBoxPositionAndSize on a CueStyleBox, by
+ // getting offset properties from an HTMLElement (from the object or its
+ // `div` property), otherwise look at the regular box properties on the
+ // object.
+ const isHTMLElement = !obj.isCueStyleBox && (obj.div || obj.tagName);
+ obj = obj.isCueStyleBox ? obj.getCueBoxPositionAndSize() : obj.div || obj;
+ this.top = isHTMLElement ? obj.offsetTop : obj.top;
+ this.left = isHTMLElement ? obj.offsetLeft : obj.left;
+ this.width = isHTMLElement ? obj.offsetWidth : obj.width;
+ this.height = isHTMLElement ? obj.offsetHeight : obj.height;
+ // This value is smaller than 1 app unit (~= 0.0166 px).
+ this.fuzz = 0.01;
+ }
+
+ get bottom() {
+ return this.top + this.height;
+ }
+
+ get right() {
+ return this.left + this.width;
+ }
+
+ // This function is used for debugging, it will return the box's information.
+ getBoxInfoInChars() {
+ return `top=${this.top}, bottom=${this.bottom}, left=${this.left}, ` +
+ `right=${this.right}, width=${this.width}, height=${this.height}`;
+ }
+
+ // 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) {
+ switch (axis) {
+ case "+x":
+ LOG(`box's left moved from ${this.left} to ${this.left + toMove}`);
+ this.left += toMove;
+ break;
+ case "-x":
+ LOG(`box's left moved from ${this.left} to ${this.left - toMove}`);
+ this.left -= toMove;
+ break;
+ case "+y":
+ LOG(`box's top moved from ${this.top} to ${this.top + toMove}`);
+ this.top += toMove;
+ break;
+ case "-y":
+ LOG(`box's top moved from ${this.top} to ${this.top - toMove}`);
+ this.top -= toMove;
+ break;
+ }
+ }
+
+ // Check if this box overlaps another box, b2.
+ overlaps(b2) {
+ return (this.left < b2.right - this.fuzz) &&
+ (this.right > b2.left + this.fuzz) &&
+ (this.top < b2.bottom - this.fuzz) &&
+ (this.bottom > b2.top + this.fuzz);
+ }
+
+ // 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.fuzz) &&
+ (this.bottom <= container.bottom + this.fuzz) &&
+ (this.left >= container.left - this.fuzz) &&
+ (this.right <= container.right + this.fuzz);
+ }
+
+ // Check whether this box is passed over the specfic axis boundary. The axis
+ // is based on the canvas coordinates, the `+x` is rightward and `+y` is
+ // downward.
+ isOutsideTheAxisBoundary(container, axis) {
+ switch (axis) {
+ case "+x":
+ return this.right > container.right + this.fuzz;
+ case "-x":
+ return this.left < container.left - this.fuzz;
+ case "+y":
+ return this.bottom > container.bottom + this.fuzz;
+ case "-y":
+ return this.top < container.top - this.fuzz;
+ }
+ }
+
+ // 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);
+ }
+}
+
+BoxPosition.prototype.clone = function(){
+ return new BoxPosition(this);
+};
+
+function adjustBoxPosition(styleBox, containerBox, controlBarBox, outputBoxes) {
+ const cue = styleBox.cue;
+ const isWritingDirectionHorizontal = cue.vertical == "";
+ let box = new BoxPosition(styleBox);
+ if (!box.width || !box.height) {
+ LOG(`No way to adjust a box with zero width or height.`);
+ return;
+ }
+
+ // Spec 7.2.10, adjust the positions of boxes according to the appropriate
+ // steps from the following list. Also, we use offsetHeight/offsetWidth here
+ // in order to prevent the incorrect positioning caused by CSS transform
+ // scale.
+ const fullDimension = isWritingDirectionHorizontal ?
+ containerBox.height : containerBox.width;
+ if (cue.snapToLines) {
+ LOG(`Adjust position when 'snap-to-lines' is true.`);
+ // The step is the height or width of the line box. We should use font
+ // size directly, instead of using text box's width or height, because the
+ // width or height of the box would be changed when the text is wrapped to
+ // different line. Ex. if text is wrapped to two line, the height or width
+ // of the box would become 2 times of font size.
+ let step = styleBox.getFirstLineBoxSize();
+ if (step == 0) {
+ return;
+ }
+
+ // spec 7.2.10.4 ~ 7.2.10.6
+ let line = Math.floor(cue.computedLine + 0.5);
+ if (cue.vertical == "rl") {
+ line = -1 * (line + 1);
+ }
+
+ // spec 7.2.10.7 ~ 7.2.10.8
+ let position = step * line;
+ if (cue.vertical == "rl") {
+ position = position - box.width + step;
+ }
+
+ // spec 7.2.10.9
+ if (line < 0) {
+ position += fullDimension;
+ step = -1 * step;
+ }
+
+ // spec 7.2.10.10, move the box to the specific position along the direction.
+ const movingDirection = isWritingDirectionHorizontal ? "+y" : "+x";
+ box.move(movingDirection, position);
+
+ // spec 7.2.10.11, remember the position as specified position.
+ let specifiedPosition = box.clone();
+
+ // spec 7.2.10.12, let title area be a box that covers all of the video’s
+ // rendering area.
+ const titleAreaBox = containerBox.clone();
+ if (controlBarBox) {
+ titleAreaBox.height -= controlBarBox.height;
+ }
+
+ function isBoxOutsideTheRenderingArea() {
+ if (isWritingDirectionHorizontal) {
+ // the top side of the box is above the rendering area, or the bottom
+ // side of the box is below the rendering area.
+ return step < 0 && box.top < 0 ||
+ step > 0 && box.bottom > fullDimension;
+ }
+ // the left side of the box is outside the left side of the rendering
+ // area, or the right side of the box is outside the right side of the
+ // rendering area.
+ return step < 0 && box.left < 0 ||
+ step > 0 && box.right > fullDimension;
+ }
+
+ // spec 7.2.10.13, if none of the boxes in boxes would overlap any of the
+ // boxes in output, and all of the boxes in boxes are entirely within the
+ // title area box.
+ let switched = false;
+ while (!box.within(titleAreaBox) || box.overlapsAny(outputBoxes)) {
+ // spec 7.2.10.14, check if we need to switch the direction.
+ if (isBoxOutsideTheRenderingArea()) {
+ // spec 7.2.10.17, if `switched` is true, remove all the boxes in
+ // `boxes`, which means we shouldn't apply any CSS boxes for this cue.
+ // Therefore, returns null box.
+ if (switched) {
+ return null;
+ }
+ // spec 7.2.10.18 ~ 7.2.10.20
+ switched = true;
+ box = specifiedPosition.clone();
+ step = -1 * step;
+ }
+ // spec 7.2.10.15, moving box along the specific direction.
+ box.move(movingDirection, step);
+ }
+
+ if (isWritingDirectionHorizontal) {
+ styleBox.applyStyles({
+ top: getPercentagePosition(box.top, fullDimension),
+ });
+ } else {
+ styleBox.applyStyles({
+ left: getPercentagePosition(box.left, fullDimension),
+ });
+ }
+ } else {
+ LOG(`Adjust position when 'snap-to-lines' is false.`);
+ // (snap-to-lines if false) spec 7.2.10.1 ~ 7.2.10.2
+ if (cue.lineAlign != "start") {
+ const isCenterAlign = cue.lineAlign == "center";
+ const movingDirection = isWritingDirectionHorizontal ? "-y" : "-x";
+ if (isWritingDirectionHorizontal) {
+ box.move(movingDirection, isCenterAlign ? box.height : box.height / 2);
+ } else {
+ box.move(movingDirection, isCenterAlign ? box.width : box.width / 2);
+ }
+ }
+
+ // spec 7.2.10.3
+ let bestPosition = {},
+ specifiedPosition = box.clone(),
+ outsideAreaPercentage = 1; // Highest possible so the first thing we get is better.
+ let hasFoundBestPosition = false;
+
+ // For the different writing directions, we should have different priority
+ // for the moving direction. For example, if the writing direction is
+ // horizontal, which means the cues will grow from the top to the bottom,
+ // then moving cues along the `y` axis should be more important than moving
+ // cues along the `x` axis, and vice versa for those cues growing from the
+ // left to right, or from the right to the left. We don't follow the exact
+ // way which the spec requires, see the reason in bug1575460.
+ function getAxis(writingDirection) {
+ if (writingDirection == "") {
+ return ["+y", "-y", "+x", "-x"];
+ }
+ // Growing from left to right.
+ if (writingDirection == "lr") {
+ return ["+x", "-x", "+y", "-y"];
+ }
+ // Growing from right to left.
+ return ["-x", "+x", "+y", "-y"];
+ }
+ const axis = getAxis(cue.vertical);
+
+ // This factor effects the granularity of the moving unit, when using the
+ // factor=1 often moves too much and results in too many redudant spaces
+ // between boxes. So we can increase the factor to slightly reduce the
+ // move we do every time, but still can preverse the reasonable spaces
+ // between boxes.
+ const factor = 4;
+ const toMove = styleBox.getFirstLineBoxSize() / factor;
+ for (let i = 0; i < axis.length && !hasFoundBestPosition; i++) {
+ while (!box.isOutsideTheAxisBoundary(containerBox, axis[i]) &&
+ (!box.within(containerBox) || box.overlapsAny(outputBoxes))) {
+ box.move(axis[i], toMove);
+ }
+ // We found a spot where we aren't overlapping anything. This is our
+ // best position.
+ if (box.within(containerBox)) {
+ bestPosition = box.clone();
+ hasFoundBestPosition = true;
+ break;
+ }
+ let p = box.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 (outsideAreaPercentage > p) {
+ bestPosition = box.clone();
+ outsideAreaPercentage = p;
+ }
+ // Reset the box position to the specified position.
+ box = specifiedPosition.clone();
+ }
+
+ // Can not find a place to place this box inside the rendering area.
+ if (!box.within(containerBox)) {
+ return null;
+ }
+
+ styleBox.applyStyles({
+ top: getPercentagePosition(box.top, containerBox.height),
+ left: getPercentagePosition(box.left, containerBox.width),
+ });
+ }
+
+ // In order to not be affected by CSS scale, so we use '%' to make sure the
+ // cue can stick in the right position.
+ function getPercentagePosition(position, fullDimension) {
+ return (position / fullDimension) * 100 + "%";
+ }
+
+ return box;
+}
+
+export function WebVTT() {
+ this.isProcessingCues = false;
+ // Nothing
+}
+
+// Helper to allow strings to be decoded instead of the default binary utf8 data.
+WebVTT.StringDecoder = function() {
+ return {
+ decode: function(data) {
+ if (!data) {
+ return "";
+ }
+ if (typeof data !== "string") {
+ throw new Error("Error - expected string data.");
+ }
+ return decodeURIComponent(encodeURIComponent(data));
+ }
+ };
+};
+
+WebVTT.convertCueToDOMTree = function(window, cuetext) {
+ if (!window) {
+ return null;
+ }
+ return parseContent(window, cuetext, PARSE_CONTENT_MODE.DOCUMENT_FRAGMENT);
+};
+
+function clearAllCuesDiv(overlay) {
+ while (overlay.firstChild) {
+ overlay.firstChild.remove();
+ }
+}
+
+// It's used to record how many cues we process in the last `processCues` run.
+var lastDisplayedCueNums = 0;
+
+const DIV_COMPUTING_STATE = {
+ REUSE : 0,
+ REUSE_AND_CLEAR : 1,
+ COMPUTE_AND_CLEAR : 2
+};
+
+// Runs the processing model over the cues and regions passed to it.
+// Spec https://www.w3.org/TR/webvtt1/#processing-model
+// @parem window : JS window
+// @param cues : the VTT cues are going to be displayed.
+// @param overlay : A block level element (usually a div) that the computed cues
+// and regions will be placed into.
+// @param controls : A Control bar element. Cues' position will be
+// affected and repositioned according to it.
+function processCuesInternal(window, cues, overlay, controls) {
+ LOG(`=== processCues ===`);
+ if (!cues) {
+ LOG(`clear display and abort processing because of no cue.`);
+ clearAllCuesDiv(overlay);
+ lastDisplayedCueNums = 0;
+ return;
+ }
+
+ let controlBar, controlBarShown;
+ if (controls) {
+ // controls is a <div> that is the children of the UA Widget Shadow Root.
+ controlBar = controls.parentNode.getElementById("controlBar");
+ controlBarShown = controlBar ? !controlBar.hidden : false;
+ } else {
+ // There is no controls element. This only happen to UA Widget because
+ // it is created lazily.
+ controlBarShown = false;
+ }
+
+ /**
+ * This function is used to tell us if we have to recompute or reuse current
+ * cue's display state. Display state is a DIV element with corresponding
+ * CSS style to display cue on the screen. When the cue is being displayed
+ * first time, we will compute its display state. After that, we could reuse
+ * its state until following conditions happen.
+ * (1) control changes : it means the rendering area changes so we should
+ * recompute cues' position.
+ * (2) cue's `hasBeenReset` flag is true : it means cues' line or position
+ * property has been modified, we also need to recompute cues' position.
+ * (3) the amount of showing cues changes : it means some cue would disappear
+ * but other cues should stay at the same place without recomputing, so we
+ * can resume their display state.
+ */
+ function getDIVComputingState(cues) {
+ if (overlay.lastControlBarShownStatus != controlBarShown) {
+ return DIV_COMPUTING_STATE.COMPUTE_AND_CLEAR;
+ }
+
+ for (let i = 0; i < cues.length; i++) {
+ if (cues[i].hasBeenReset || !cues[i].displayState) {
+ return DIV_COMPUTING_STATE.COMPUTE_AND_CLEAR;
+ }
+ }
+
+ if (lastDisplayedCueNums != cues.length) {
+ return DIV_COMPUTING_STATE.REUSE_AND_CLEAR;
+ }
+ return DIV_COMPUTING_STATE.REUSE;
+ }
+
+ const divState = getDIVComputingState(cues);
+ overlay.lastControlBarShownStatus = controlBarShown;
+
+ if (divState == DIV_COMPUTING_STATE.REUSE) {
+ LOG(`reuse current cue's display state and abort processing`);
+ return;
+ }
+
+ clearAllCuesDiv(overlay);
+ let rootOfCues = window.document.createElement("div");
+ rootOfCues.style.position = "absolute";
+ rootOfCues.style.left = "0";
+ rootOfCues.style.right = "0";
+ rootOfCues.style.top = "0";
+ rootOfCues.style.bottom = "0";
+ overlay.appendChild(rootOfCues);
+
+ if (divState == DIV_COMPUTING_STATE.REUSE_AND_CLEAR) {
+ LOG(`clear display but reuse cues' display state.`);
+ for (let cue of cues) {
+ rootOfCues.appendChild(cue.displayState);
+ }
+ } else if (divState == DIV_COMPUTING_STATE.COMPUTE_AND_CLEAR) {
+ LOG(`clear display and recompute cues' display state.`);
+ let boxPositions = [],
+ containerBox = new BoxPosition(rootOfCues);
+
+ let styleBox, cue, controlBarBox;
+ if (controlBarShown) {
+ controlBarBox = new BoxPosition(controlBar);
+ // Add an empty output box that cover the same region as video control bar.
+ boxPositions.push(controlBarBox);
+ }
+
+ // https://w3c.github.io/webvtt/#processing-model 6.1.12.1
+ // Create regionNode
+ let regionNodeBoxes = {};
+ let regionNodeBox;
+
+ LOG(`lastDisplayedCueNums=${lastDisplayedCueNums}, currentCueNums=${cues.length}`);
+ lastDisplayedCueNums = cues.length;
+ for (let i = 0; i < cues.length; i++) {
+ cue = cues[i];
+ if (cue.region != null) {
+ // 6.1.14.1
+ styleBox = new RegionCueStyleBox(window, cue);
+
+ if (!regionNodeBoxes[cue.region.id]) {
+ // create regionNode
+ // Adjust the container hieght to exclude the controlBar
+ let adjustContainerBox = new BoxPosition(rootOfCues);
+ if (controlBarShown) {
+ adjustContainerBox.height -= controlBarBox.height;
+ adjustContainerBox.bottom += controlBarBox.height;
+ }
+ regionNodeBox = new RegionNodeBox(window, cue.region, adjustContainerBox);
+ regionNodeBoxes[cue.region.id] = regionNodeBox;
+ }
+ // 6.1.14.3
+ let currentRegionBox = regionNodeBoxes[cue.region.id];
+ let currentRegionNodeDiv = currentRegionBox.div;
+ // 6.1.14.3.2
+ // TODO: fix me, it looks like the we need to set/change "top" attribute at the styleBox.div
+ // to do the "scroll up", however, we do not implement it yet?
+ if (cue.region.scroll == "up" && currentRegionNodeDiv.childElementCount > 0) {
+ styleBox.div.style.transitionProperty = "top";
+ styleBox.div.style.transitionDuration = "0.433s";
+ }
+
+ currentRegionNodeDiv.appendChild(styleBox.div);
+ rootOfCues.appendChild(currentRegionNodeDiv);
+ cue.displayState = styleBox.div;
+ boxPositions.push(new BoxPosition(currentRegionBox));
+ } else {
+ // Compute the intial position and styles of the cue div.
+ styleBox = new CueStyleBox(window, cue, containerBox);
+ rootOfCues.appendChild(styleBox.div);
+
+ // Move the cue to correct position, we might get the null box if the
+ // result of algorithm doesn't want us to show the cue when we don't
+ // have any room for this cue.
+ let cueBox = adjustBoxPosition(styleBox, containerBox, controlBarBox, boxPositions);
+ if (cueBox) {
+ styleBox.setBidiRule();
+ // 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(cueBox);
+ LOG(`cue ${i}, ` + cueBox.getBoxInfoInChars());
+ } else {
+ LOG(`can not find a proper position to place cue ${i}`);
+ // Clear the display state and clear the reset flag in the cue as well,
+ // which controls whether the task for updating the cue display is
+ // dispatched.
+ cue.displayState = null;
+ rootOfCues.removeChild(styleBox.div);
+ }
+ }
+ }
+ } else {
+ LOG(`[ERROR] unknown div computing state`);
+ }
+};
+
+WebVTT.processCues = function(window, cues, overlay, controls) {
+ // When accessing `offsetXXX` attributes of element, it would trigger reflow
+ // and might result in a re-entry of this function. In order to avoid doing
+ // redundant computation, we would only do one processing at a time.
+ if (this.isProcessingCues) {
+ return;
+ }
+ this.isProcessingCues = true;
+ processCuesInternal(window, cues, overlay, controls);
+ this.isProcessingCues = false;
+};
+
+WebVTT.Parser = function(window, decoder) {
+ this.window = window;
+ this.state = "INITIAL";
+ this.substate = "";
+ this.substatebuffer = "";
+ this.buffer = "";
+ this.decoder = decoder || new TextDecoder("utf8");
+ this.regionList = [];
+ this.isPrevLineBlank = false;
+};
+
+WebVTT.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) {
+ // 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.
+ this.buffer += this.decoder.decode(data, {stream: true});
+ }
+
+ // This parser is line-based. Let's see if we have a line to parse.
+ while (/\r\n|\n|\r/.test(this.buffer)) {
+ let buffer = this.buffer;
+ let pos = 0;
+ while (buffer[pos] !== '\r' && buffer[pos] !== '\n') {
+ ++pos;
+ }
+ let line = buffer.substr(0, pos);
+ // Advance the buffer early in case we fail below.
+ if (buffer[pos] === '\r') {
+ ++pos;
+ }
+ if (buffer[pos] === '\n') {
+ ++pos;
+ }
+ this.buffer = buffer.substr(pos);
+
+ // Spec defined replacement.
+ line = line.replace(/[\u0000]/g, "\uFFFD");
+
+ // Detect the comment. We parse line on the fly, so we only check if the
+ // comment block is preceded by a blank line and won't check if it's
+ // followed by another blank line.
+ // https://www.w3.org/TR/webvtt1/#introduction-comments
+ // TODO (1703895): according to the spec, the comment represents as a
+ // comment block, so we need to refactor the parser in order to better
+ // handle the comment block.
+ if (this.isPrevLineBlank && /^NOTE($|[ \t])/.test(line)) {
+ LOG("Ignore comment that starts with 'NOTE'");
+ } else {
+ this.parseLine(line);
+ }
+ this.isPrevLineBlank = emptyOrOnlyContainsWhiteSpaces(line);
+ }
+
+ return this;
+ },
+ parseLine: function(line) {
+ let self = this;
+
+ function createCueIfNeeded() {
+ if (!self.cue) {
+ self.cue = new self.window.VTTCue(0, 0, "");
+ }
+ }
+
+ // Parsing cue identifier and the identifier should be unique.
+ // Return true if the input is a cue identifier.
+ function parseCueIdentifier(input) {
+ if (maybeIsTimeStampFormat(input)) {
+ self.state = "CUE";
+ return false;
+ }
+
+ createCueIfNeeded();
+ // TODO : ensure the cue identifier is unique among all cue identifiers.
+ self.cue.id = containsTimeDirectionSymbol(input) ? "" : input;
+ self.state = "CUE";
+ return true;
+ }
+
+ // Parsing the timestamp and cue settings.
+ // See spec, https://w3c.github.io/webvtt/#collect-webvtt-cue-timings-and-settings
+ function parseCueMayThrow(input) {
+ try {
+ createCueIfNeeded();
+ parseCue(input, self.cue, self.regionList);
+ self.state = "CUETEXT";
+ } catch (e) {
+ self.reportOrThrowError(e);
+ // In case of an error ignore rest of the cue.
+ self.cue = null;
+ self.state = "BADCUE";
+ }
+ }
+
+ // 3.4 WebVTT region and WebVTT region settings syntax
+ function parseRegion(input) {
+ let 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.digitsValue(k, v);
+ break;
+ case "regionanchor":
+ case "viewportanchor": {
+ let 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.
+ let 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;
+ }
+ }, /:/, /\t|\n|\f|\r| /); // groupDelim is ASCII whitespace
+ // https://infra.spec.whatwg.org/#ascii-whitespace, U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, U+0020 SPACE
+
+ // Create the region, using default values for any values that were not
+ // specified.
+ if (settings.has("id")) {
+ try {
+ let region = new self.window.VTTRegion();
+ region.id = settings.get("id", "");
+ 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
+ });
+ } catch(e) {
+ dump("VTTRegion Error " + e + "\n");
+ let regionPref = Services.prefs.getBoolPref("media.webvtt.regions.enabled");
+ dump("regionPref " + regionPref + "\n");
+ }
+ }
+ }
+
+ // Parsing the WebVTT signature, it contains parsing algo step1 to step9.
+ // See spec, https://w3c.github.io/webvtt/#file-parsing
+ function parseSignatureMayThrow(signature) {
+ if (!/^WEBVTT([ \t].*)?$/.test(signature)) {
+ throw new ParsingError(ParsingError.Errors.BadSignature);
+ } else {
+ self.state = "HEADER";
+ }
+ }
+
+ function parseRegionOrStyle(input) {
+ switch (self.substate) {
+ case "REGION":
+ parseRegion(input);
+ break;
+ case "STYLE":
+ // TODO : not supported yet.
+ break;
+ }
+ }
+ // Parsing the region and style information.
+ // See spec, https://w3c.github.io/webvtt/#collect-a-webvtt-block
+ //
+ // There are sereval things would appear in header,
+ // 1. Region or Style setting
+ // 2. Garbage (meaningless string)
+ // 3. Empty line
+ // 4. Cue's timestamp
+ // The case 4 happens when there is no line interval between the header
+ // and the cue blocks. In this case, we should preserve the line for the
+ // next phase parsing, returning "true".
+ function parseHeader(line) {
+ if (!self.substate && /^REGION|^STYLE/.test(line)) {
+ self.substate = /^REGION/.test(line) ? "REGION" : "STYLE";
+ return false;
+ }
+
+ if (self.substate === "REGION" || self.substate === "STYLE") {
+ if (maybeIsTimeStampFormat(line) ||
+ emptyOrOnlyContainsWhiteSpaces(line) ||
+ containsTimeDirectionSymbol(line)) {
+ parseRegionOrStyle(self.substatebuffer);
+ self.substatebuffer = "";
+ self.substate = null;
+
+ // This is the end of the region or style state.
+ return parseHeader(line);
+ }
+
+ if (/^REGION|^STYLE/.test(line)) {
+ // The line is another REGION/STYLE, parse and reset substatebuffer.
+ // Don't break the while loop to parse the next REGION/STYLE.
+ parseRegionOrStyle(self.substatebuffer);
+ self.substatebuffer = "";
+ self.substate = /^REGION/.test(line) ? "REGION" : "STYLE";
+ return false;
+ }
+
+ // We weren't able to parse the line as a header. Accumulate and
+ // return.
+ self.substatebuffer += " " + line;
+ return false;
+ }
+
+ if (emptyOrOnlyContainsWhiteSpaces(line)) {
+ // empty line, whitespaces, nothing to do.
+ return false;
+ }
+
+ if (maybeIsTimeStampFormat(line)) {
+ self.state = "CUE";
+ // We want to process the same line again.
+ return true;
+ }
+
+ // string contains "-->" or an ID
+ self.state = "ID";
+ return true;
+ }
+
+ try {
+ LOG(`state=${self.state}, line=${line}`)
+ // 5.1 WebVTT file parsing.
+ if (self.state === "INITIAL") {
+ parseSignatureMayThrow(line);
+ return;
+ }
+
+ if (self.state === "HEADER") {
+ // parseHeader returns false if the same line doesn't need to be
+ // parsed again.
+ if (!parseHeader(line)) {
+ return;
+ }
+ }
+
+ if (self.state === "ID") {
+ // If there is no cue identifier, read the next line.
+ if (line == "") {
+ return;
+ }
+
+ // If there is no cue identifier, parse the line again.
+ if (!parseCueIdentifier(line)) {
+ return self.parseLine(line);
+ }
+ return;
+ }
+
+ if (self.state === "CUE") {
+ parseCueMayThrow(line);
+ return;
+ }
+
+ if (self.state === "CUETEXT") {
+ // Report the cue when (1) get an empty line (2) get the "-->""
+ if (emptyOrOnlyContainsWhiteSpaces(line) ||
+ containsTimeDirectionSymbol(line)) {
+ // We are done parsing self cue.
+ self.oncue && self.oncue(self.cue);
+ self.cue = null;
+ self.state = "ID";
+
+ if (emptyOrOnlyContainsWhiteSpaces(line)) {
+ return;
+ }
+
+ // Reuse the same line.
+ return self.parseLine(line);
+ }
+ if (self.cue.text) {
+ self.cue.text += "\n";
+ }
+ self.cue.text += line;
+ return;
+ }
+
+ if (self.state === "BADCUE") {
+ // 54-62 - Collect and discard the remaining cue.
+ self.state = "ID";
+ return self.parseLine(line);
+ }
+ } 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 () {
+ let self = this;
+ try {
+ // Finish decoding the stream.
+ self.buffer += self.decoder.decode();
+ self.buffer += "\n\n";
+ self.parse();
+ } catch(e) {
+ self.reportOrThrowError(e);
+ }
+ self.isPrevLineBlank = false;
+ self.onflush && self.onflush();
+ return this;
+ }
+};
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-05 20:06:34 +0000