diff --git a/.gitignore b/.gitignore
index f717b674f..05403027d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ dist/
transcoder.log
chat.db
.yp.key
+
+!webroot/js/web_modules/**/dist
diff --git a/webroot/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js b/webroot/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js
new file mode 100644
index 000000000..b6a2b4ef8
--- /dev/null
+++ b/webroot/js/web_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js
@@ -0,0 +1,58119 @@
+import { c as createCommonjsModule, a as commonjsGlobal, g as getDefaultExportFromCjs } from '../../../common/_commonjsHelpers-37fa8da4.js';
+import { d as document_1, w as window_1$1 } from '../../../common/window-2f8a9a85.js';
+
+var _extends_1 = createCommonjsModule(function (module) {
+function _extends() {
+ module.exports = _extends = Object.assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+
+ return target;
+ };
+
+ return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+});
+
+function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return self;
+}
+
+var assertThisInitialized = _assertThisInitialized;
+
+var _typeof_1 = createCommonjsModule(function (module) {
+function _typeof(obj) {
+ "@babel/helpers - typeof";
+
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+ module.exports = _typeof = function _typeof(obj) {
+ return typeof obj;
+ };
+ } else {
+ module.exports = _typeof = function _typeof(obj) {
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+ };
+ }
+
+ return _typeof(obj);
+}
+
+module.exports = _typeof;
+});
+
+var getPrototypeOf = createCommonjsModule(function (module) {
+function _getPrototypeOf(o) {
+ module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+}
+
+module.exports = _getPrototypeOf;
+});
+
+function _inheritsLoose(subClass, superClass) {
+ subClass.prototype = Object.create(superClass.prototype);
+ subClass.prototype.constructor = subClass;
+ subClass.__proto__ = superClass;
+}
+
+var inheritsLoose = _inheritsLoose;
+
+var tuple = SafeParseTuple;
+
+function SafeParseTuple(obj, reviver) {
+ var json;
+ var error = null;
+
+ try {
+ json = JSON.parse(obj, reviver);
+ } catch (err) {
+ error = err;
+ }
+
+ return [error, json]
+}
+
+var keycode = createCommonjsModule(function (module, exports) {
+// Source: http://jsfiddle.net/vWx8V/
+// http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes
+
+/**
+ * Conenience method returns corresponding value for given keyName or keyCode.
+ *
+ * @param {Mixed} keyCode {Number} or keyName {String}
+ * @return {Mixed}
+ * @api public
+ */
+
+function keyCode(searchInput) {
+ // Keyboard Events
+ if (searchInput && 'object' === typeof searchInput) {
+ var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+ if (hasKeyCode) searchInput = hasKeyCode;
+ }
+
+ // Numbers
+ if ('number' === typeof searchInput) return names[searchInput]
+
+ // Everything else (cast to string)
+ var search = String(searchInput);
+
+ // check codes
+ var foundNamedKey = codes[search.toLowerCase()];
+ if (foundNamedKey) return foundNamedKey
+
+ // check aliases
+ var foundNamedKey = aliases[search.toLowerCase()];
+ if (foundNamedKey) return foundNamedKey
+
+ // weird character?
+ if (search.length === 1) return search.charCodeAt(0)
+
+ return undefined
+}
+
+/**
+ * Compares a keyboard event with a given keyCode or keyName.
+ *
+ * @param {Event} event Keyboard event that should be tested
+ * @param {Mixed} keyCode {Number} or keyName {String}
+ * @return {Boolean}
+ * @api public
+ */
+keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+ if (event && 'object' === typeof event) {
+ var keyCode = event.which || event.keyCode || event.charCode;
+ if (keyCode === null || keyCode === undefined) { return false; }
+ if (typeof nameOrCode === 'string') {
+ // check codes
+ var foundNamedKey = codes[nameOrCode.toLowerCase()];
+ if (foundNamedKey) { return foundNamedKey === keyCode; }
+
+ // check aliases
+ var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+ if (foundNamedKey) { return foundNamedKey === keyCode; }
+ } else if (typeof nameOrCode === 'number') {
+ return nameOrCode === keyCode;
+ }
+ return false;
+ }
+};
+
+exports = module.exports = keyCode;
+
+/**
+ * Get by name
+ *
+ * exports.code['enter'] // => 13
+ */
+
+var codes = exports.code = exports.codes = {
+ 'backspace': 8,
+ 'tab': 9,
+ 'enter': 13,
+ 'shift': 16,
+ 'ctrl': 17,
+ 'alt': 18,
+ 'pause/break': 19,
+ 'caps lock': 20,
+ 'esc': 27,
+ 'space': 32,
+ 'page up': 33,
+ 'page down': 34,
+ 'end': 35,
+ 'home': 36,
+ 'left': 37,
+ 'up': 38,
+ 'right': 39,
+ 'down': 40,
+ 'insert': 45,
+ 'delete': 46,
+ 'command': 91,
+ 'left command': 91,
+ 'right command': 93,
+ 'numpad *': 106,
+ 'numpad +': 107,
+ 'numpad -': 109,
+ 'numpad .': 110,
+ 'numpad /': 111,
+ 'num lock': 144,
+ 'scroll lock': 145,
+ 'my computer': 182,
+ 'my calculator': 183,
+ ';': 186,
+ '=': 187,
+ ',': 188,
+ '-': 189,
+ '.': 190,
+ '/': 191,
+ '`': 192,
+ '[': 219,
+ '\\': 220,
+ ']': 221,
+ "'": 222
+};
+
+// Helper aliases
+
+var aliases = exports.aliases = {
+ 'windows': 91,
+ '⇧': 16,
+ '⌥': 18,
+ '⌃': 17,
+ '⌘': 91,
+ 'ctl': 17,
+ 'control': 17,
+ 'option': 18,
+ 'pause': 19,
+ 'break': 19,
+ 'caps': 20,
+ 'return': 13,
+ 'escape': 27,
+ 'spc': 32,
+ 'spacebar': 32,
+ 'pgup': 33,
+ 'pgdn': 34,
+ 'ins': 45,
+ 'del': 46,
+ 'cmd': 91
+};
+
+/*!
+ * Programatically add the following
+ */
+
+// lower case chars
+for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32;
+
+// numbers
+for (var i = 48; i < 58; i++) codes[i - 48] = i;
+
+// function keys
+for (i = 1; i < 13; i++) codes['f'+i] = i + 111;
+
+// numpad keys
+for (i = 0; i < 10; i++) codes['numpad '+i] = i + 96;
+
+/**
+ * Get by code
+ *
+ * exports.name[13] // => 'Enter'
+ */
+
+var names = exports.names = exports.title = {}; // title for backward compat
+
+// Create reverse mapping
+for (i in codes) names[codes[i]] = i;
+
+// Add aliases
+for (var alias in aliases) {
+ codes[alias] = aliases[alias];
+}
+});
+
+var win;
+
+if (typeof window !== "undefined") {
+ win = window;
+} else if (typeof commonjsGlobal !== "undefined") {
+ win = commonjsGlobal;
+} else if (typeof self !== "undefined"){
+ win = self;
+} else {
+ win = {};
+}
+
+var window_1 = win;
+
+var isFunction_1 = isFunction;
+
+var toString = Object.prototype.toString;
+
+function isFunction (fn) {
+ if (!fn) {
+ return false
+ }
+ var string = toString.call(fn);
+ return string === '[object Function]' ||
+ (typeof fn === 'function' && string !== '[object RegExp]') ||
+ (typeof window !== 'undefined' &&
+ // IE8 and below
+ (fn === window.setTimeout ||
+ fn === window.alert ||
+ fn === window.confirm ||
+ fn === window.prompt))
+}
+
+/**
+ * @license
+ * slighly modified parse-headers 2.0.2
+ * Copyright (c) 2014 David Björklund
+ * Available under the MIT license
+ *
+ */
+
+var parseHeaders = function(headers) {
+ var result = {};
+
+ if (!headers) {
+ return result;
+ }
+
+ headers.trim().split('\n').forEach(function(row) {
+ var index = row.indexOf(':');
+ var key = row.slice(0, index).trim().toLowerCase();
+ var value = row.slice(index + 1).trim();
+
+ if (typeof(result[key]) === 'undefined') {
+ result[key] = value;
+ } else if (Array.isArray(result[key])) {
+ result[key].push(value);
+ } else {
+ result[key] = [ result[key], value ];
+ }
+ });
+
+ return result;
+};
+
+var xhr = createXHR;
+// Allow use of default import syntax in TypeScript
+var _default = createXHR;
+createXHR.XMLHttpRequest = window_1.XMLHttpRequest || noop;
+createXHR.XDomainRequest = "withCredentials" in (new createXHR.XMLHttpRequest()) ? createXHR.XMLHttpRequest : window_1.XDomainRequest;
+
+forEachArray(["get", "put", "post", "patch", "head", "delete"], function(method) {
+ createXHR[method === "delete" ? "del" : method] = function(uri, options, callback) {
+ options = initParams(uri, options, callback);
+ options.method = method.toUpperCase();
+ return _createXHR(options)
+ };
+});
+
+function forEachArray(array, iterator) {
+ for (var i = 0; i < array.length; i++) {
+ iterator(array[i]);
+ }
+}
+
+function isEmpty(obj){
+ for(var i in obj){
+ if(obj.hasOwnProperty(i)) return false
+ }
+ return true
+}
+
+function initParams(uri, options, callback) {
+ var params = uri;
+
+ if (isFunction_1(options)) {
+ callback = options;
+ if (typeof uri === "string") {
+ params = {uri:uri};
+ }
+ } else {
+ params = _extends_1({}, options, {uri: uri});
+ }
+
+ params.callback = callback;
+ return params
+}
+
+function createXHR(uri, options, callback) {
+ options = initParams(uri, options, callback);
+ return _createXHR(options)
+}
+
+function _createXHR(options) {
+ if(typeof options.callback === "undefined"){
+ throw new Error("callback argument missing")
+ }
+
+ var called = false;
+ var callback = function cbOnce(err, response, body){
+ if(!called){
+ called = true;
+ options.callback(err, response, body);
+ }
+ };
+
+ function readystatechange() {
+ if (xhr.readyState === 4) {
+ setTimeout(loadFunc, 0);
+ }
+ }
+
+ function getBody() {
+ // Chrome with requestType=blob throws errors arround when even testing access to responseText
+ var body = undefined;
+
+ if (xhr.response) {
+ body = xhr.response;
+ } else {
+ body = xhr.responseText || getXml(xhr);
+ }
+
+ if (isJson) {
+ try {
+ body = JSON.parse(body);
+ } catch (e) {}
+ }
+
+ return body
+ }
+
+ function errorFunc(evt) {
+ clearTimeout(timeoutTimer);
+ if(!(evt instanceof Error)){
+ evt = new Error("" + (evt || "Unknown XMLHttpRequest Error") );
+ }
+ evt.statusCode = 0;
+ return callback(evt, failureResponse)
+ }
+
+ // will load the data & process the response in a special response object
+ function loadFunc() {
+ if (aborted) return
+ var status;
+ clearTimeout(timeoutTimer);
+ if(options.useXDR && xhr.status===undefined) {
+ //IE8 CORS GET successful response doesn't have a status field, but body is fine
+ status = 200;
+ } else {
+ status = (xhr.status === 1223 ? 204 : xhr.status);
+ }
+ var response = failureResponse;
+ var err = null;
+
+ if (status !== 0){
+ response = {
+ body: getBody(),
+ statusCode: status,
+ method: method,
+ headers: {},
+ url: uri,
+ rawRequest: xhr
+ };
+ if(xhr.getAllResponseHeaders){ //remember xhr can in fact be XDR for CORS in IE
+ response.headers = parseHeaders(xhr.getAllResponseHeaders());
+ }
+ } else {
+ err = new Error("Internal XMLHttpRequest Error");
+ }
+ return callback(err, response, response.body)
+ }
+
+ var xhr = options.xhr || null;
+
+ if (!xhr) {
+ if (options.cors || options.useXDR) {
+ xhr = new createXHR.XDomainRequest();
+ }else {
+ xhr = new createXHR.XMLHttpRequest();
+ }
+ }
+
+ var key;
+ var aborted;
+ var uri = xhr.url = options.uri || options.url;
+ var method = xhr.method = options.method || "GET";
+ var body = options.body || options.data;
+ var headers = xhr.headers = options.headers || {};
+ var sync = !!options.sync;
+ var isJson = false;
+ var timeoutTimer;
+ var failureResponse = {
+ body: undefined,
+ headers: {},
+ statusCode: 0,
+ method: method,
+ url: uri,
+ rawRequest: xhr
+ };
+
+ if ("json" in options && options.json !== false) {
+ isJson = true;
+ headers["accept"] || headers["Accept"] || (headers["Accept"] = "application/json"); //Don't override existing accept header declared by user
+ if (method !== "GET" && method !== "HEAD") {
+ headers["content-type"] || headers["Content-Type"] || (headers["Content-Type"] = "application/json"); //Don't override existing accept header declared by user
+ body = JSON.stringify(options.json === true ? body : options.json);
+ }
+ }
+
+ xhr.onreadystatechange = readystatechange;
+ xhr.onload = loadFunc;
+ xhr.onerror = errorFunc;
+ // IE9 must have onprogress be set to a unique function.
+ xhr.onprogress = function () {
+ // IE must die
+ };
+ xhr.onabort = function(){
+ aborted = true;
+ };
+ xhr.ontimeout = errorFunc;
+ xhr.open(method, uri, !sync, options.username, options.password);
+ //has to be after open
+ if(!sync) {
+ xhr.withCredentials = !!options.withCredentials;
+ }
+ // Cannot set timeout with sync request
+ // not setting timeout on the xhr object, because of old webkits etc. not handling that correctly
+ // both npm's request and jquery 1.x use this kind of timeout, so this is being consistent
+ if (!sync && options.timeout > 0 ) {
+ timeoutTimer = setTimeout(function(){
+ if (aborted) return
+ aborted = true;//IE9 may still call readystatechange
+ xhr.abort("timeout");
+ var e = new Error("XMLHttpRequest timeout");
+ e.code = "ETIMEDOUT";
+ errorFunc(e);
+ }, options.timeout );
+ }
+
+ if (xhr.setRequestHeader) {
+ for(key in headers){
+ if(headers.hasOwnProperty(key)){
+ xhr.setRequestHeader(key, headers[key]);
+ }
+ }
+ } else if (options.headers && !isEmpty(options.headers)) {
+ throw new Error("Headers cannot be set on an XDomainRequest object")
+ }
+
+ if ("responseType" in options) {
+ xhr.responseType = options.responseType;
+ }
+
+ if ("beforeSend" in options &&
+ typeof options.beforeSend === "function"
+ ) {
+ options.beforeSend(xhr);
+ }
+
+ // Microsoft Edge browser sends "undefined" when send is called with undefined value.
+ // XMLHttpRequest spec says to pass null as body to indicate no body
+ // See https://github.com/naugtur/xhr/issues/100.
+ xhr.send(body || null);
+
+ return xhr
+
+
+}
+
+function getXml(xhr) {
+ // xhr.responseXML will throw Exception "InvalidStateError" or "DOMException"
+ // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML.
+ try {
+ if (xhr.responseType === "document") {
+ return xhr.responseXML
+ }
+ var firefoxBugTakenEffect = xhr.responseXML && xhr.responseXML.documentElement.nodeName === "parsererror";
+ if (xhr.responseType === "" && !firefoxBugTakenEffect) {
+ return xhr.responseXML
+ }
+ } catch (e) {}
+
+ return null
+}
+
+function noop() {}
+xhr.default = _default;
+
+/**
+ * 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: */
+
+
+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."
+ }
+};
+
+// 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;
+ }
+
+ var m = input.match(/^(\d+):(\d{1,2})(:\d{1,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]);
+ }
+}
+
+// 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", "");
+ try {
+ cue.line = settings.get("line", "auto");
+ } catch (e) {}
+ 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");
+ }
+ try {
+ cue.position = settings.get("position", "auto");
+ } catch (e) {
+ cue.position = settings.get("position", {
+ start: 0,
+ left: 0,
+ center: 50,
+ middle: 50,
+ end: 100,
+ right: 100
+ }, cue.align);
+ }
+
+
+ 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);
+}
+
+var TEXTAREA_ELEMENT = document_1.createElement("textarea");
+
+var TAG_NAME = {
+ c: "span",
+ i: "i",
+ b: "b",
+ u: "u",
+ ruby: "ruby",
+ rt: "rt",
+ v: "span",
+ lang: "span"
+};
+
+// 5.1 default text color
+// 5.2 default text background color is equivalent to text color with bg_ prefix
+var DEFAULT_COLOR_CLASS = {
+ white: 'rgba(255,255,255,1)',
+ lime: 'rgba(0,255,0,1)',
+ cyan: 'rgba(0,255,255,1)',
+ red: 'rgba(255,0,0,1)',
+ yellow: 'rgba(255,255,0,1)',
+ magenta: 'rgba(255,0,255,1)',
+ blue: 'rgba(0,0,255,1)',
+ black: 'rgba(0,0,0,1)'
+};
+
+var TAG_ANNOTATION = {
+ v: "title",
+ lang: "lang"
+};
+
+var NEEDS_PARENT = {
+ rt: "ruby"
+};
+
+// 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;
+ }
+
+ var 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]);
+ }
+
+ function unescape(s) {
+ TEXTAREA_ELEMENT.innerHTML = s;
+ s = TEXTAREA_ELEMENT.textContent;
+ TEXTAREA_ELEMENT.textContent = "";
+ 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) {
+ var tagName = TAG_NAME[type];
+ if (!tagName) {
+ return null;
+ }
+ var element = window.document.createElement(tagName);
+ var name = TAG_ANNOTATION[type];
+ if (name && annotation) {
+ element[name] = annotation.trim();
+ }
+ return element;
+ }
+
+ var 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;
+ }
+ var ts = parseTimeStamp(t.substr(1, t.length - 2));
+ var node;
+ if (ts) {
+ // Timestamps are lead nodes as well.
+ node = window.document.createProcessingInstruction("timestamp", ts);
+ current.appendChild(node);
+ continue;
+ }
+ var 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]) {
+ var classes = m[2].split('.');
+
+ classes.forEach(function(cl) {
+ var bgColor = /^bg_/.test(cl);
+ // slice out `bg_` if it's a background color
+ var colorName = bgColor ? cl.slice(3) : cl;
+
+ if (DEFAULT_COLOR_CLASS.hasOwnProperty(colorName)) {
+ var propName = bgColor ? 'background-color' : 'color';
+ var propValue = DEFAULT_COLOR_CLASS[colorName];
+
+ node.style[propName] = propValue;
+ }
+ });
+
+ node.className = classes.join(' ');
+ }
+ // 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
+var 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 (var i = 0; i < strongRTLRanges.length; i++) {
+ var currentRange = strongRTLRanges[i];
+ if (charCode >= currentRange[0] && charCode <= currentRange[1]) {
+ return true;
+ }
+ }
+
+ return false;
+}
+
+function determineBidi(cueDiv) {
+ var nodeStack = [],
+ text = "",
+ charCode;
+
+ if (!cueDiv || !cueDiv.childNodes) {
+ return "ltr";
+ }
+
+ function pushNodes(nodeStack, node) {
+ for (var i = node.childNodes.length - 1; i >= 0; i--) {
+ nodeStack.push(node.childNodes[i]);
+ }
+ }
+
+ function nextTextNode(nodeStack) {
+ if (!nodeStack || !nodeStack.length) {
+ return null;
+ }
+
+ var 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.
+ var 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 (var 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;
+ }
+ var track = cue.track,
+ trackList = track.textTrackList,
+ count = 0;
+ for (var i = 0; i < trackList.length && trackList[i] !== track; i++) {
+ if (trackList[i].mode === "showing") {
+ count++;
+ }
+ }
+ return ++count * -1;
+}
+
+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 (var prop in styles) {
+ if (styles.hasOwnProperty(prop)) {
+ div.style[prop] = styles[prop];
+ }
+ }
+};
+
+StyleBox.prototype.formatStyle = function(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).
+function CueStyleBox(window, cue, styleOptions) {
+ StyleBox.call(this);
+ 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);
+ var styles = {
+ color: "rgba(255, 255, 255, 1)",
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
+ position: "relative",
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ display: "inline",
+ writingMode: cue.vertical === "" ? "horizontal-tb"
+ : cue.vertical === "lr" ? "vertical-lr"
+ : "vertical-rl",
+ unicodeBidi: "plaintext"
+ };
+
+ this.applyStyles(styles, this.cueDiv);
+
+ // 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 instead of center on Safari.
+ this.div = window.document.createElement("div");
+ styles = {
+ direction: determineBidi(this.cueDiv),
+ writingMode: cue.vertical === "" ? "horizontal-tb"
+ : cue.vertical === "lr" ? "vertical-lr"
+ : "vertical-rl",
+ unicodeBidi: "plaintext",
+ textAlign: cue.align === "middle" ? "center" : cue.align,
+ font: styleOptions.font,
+ whiteSpace: "pre-line",
+ position: "absolute"
+ };
+
+ 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.
+ var textPos = 0;
+ switch (cue.positionAlign) {
+ case "start":
+ textPos = cue.position;
+ break;
+ case "center":
+ textPos = cue.position - (cue.size / 2);
+ break;
+ case "end":
+ 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(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(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")
+ });
+ };
+}
+CueStyleBox.prototype = _objCreate(StyleBox.prototype);
+CueStyleBox.prototype.constructor = CueStyleBox;
+
+// 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.
+function BoxPosition(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).
+ var lh, height, width, top;
+ if (obj.div) {
+ height = obj.div.offsetHeight;
+ width = obj.div.offsetWidth;
+ top = obj.div.offsetTop;
+
+ var 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 !== undefined ? lh : obj.lineHeight;
+}
+
+// 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.
+BoxPosition.prototype.move = function(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.
+BoxPosition.prototype.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.
+BoxPosition.prototype.overlapsAny = function(boxes) {
+ for (var i = 0; i < boxes.length; i++) {
+ if (this.overlaps(boxes[i])) {
+ return true;
+ }
+ }
+ return false;
+};
+
+// Check if this box is within another box.
+BoxPosition.prototype.within = function(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.
+BoxPosition.prototype.overlapsOppositeAxis = function(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.
+BoxPosition.prototype.intersectPercentage = function(b2) {
+ var 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.
+BoxPosition.prototype.toCSSCompatValues = function(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.
+BoxPosition.getSimpleBoxPosition = function(obj) {
+ var height = obj.div ? obj.div.offsetHeight : obj.tagName ? obj.offsetHeight : 0;
+ var width = obj.div ? obj.div.offsetWidth : obj.tagName ? obj.offsetWidth : 0;
+ var top = obj.div ? obj.div.offsetTop : obj.tagName ? obj.offsetTop : 0;
+
+ obj = obj.div ? obj.div.getBoundingClientRect() :
+ obj.tagName ? obj.getBoundingClientRect() : obj;
+ var ret = {
+ 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
+ };
+ return ret;
+};
+
+// 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) {
+ var bestPosition,
+ specifiedPosition = new BoxPosition(b),
+ percentage = 1; // Highest possible so the first thing we get is better.
+
+ for (var 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;
+ }
+ var 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;
+ }
+
+ var 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) {
+ var 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;
+ }
+
+ var 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.
+ var 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);
+ }
+
+ var bestPosition = findBestPosition(boxPosition, axis);
+ styleBox.move(bestPosition.toCSSCompatValues(containerBox));
+}
+
+function WebVTT$1() {
+ // Nothing
+}
+
+// Helper to allow strings to be decoded instead of the default binary utf8 data.
+WebVTT$1.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$1.convertCueToDOMTree = function(window, cuetext) {
+ if (!window || !cuetext) {
+ return null;
+ }
+ return parseContent(window, cuetext);
+};
+
+var FONT_SIZE_PERCENT = 0.05;
+var FONT_STYLE = "sans-serif";
+var 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.
+WebVTT$1.processCues = function(window, cues, overlay) {
+ if (!window || !cues || !overlay) {
+ return null;
+ }
+
+ // Remove all previous children.
+ while (overlay.firstChild) {
+ overlay.removeChild(overlay.firstChild);
+ }
+
+ var 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 (var 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 (var i = 0; i < cues.length; i++) {
+ paddedOverlay.appendChild(cues[i].displayState);
+ }
+ return;
+ }
+
+ var boxPositions = [],
+ containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
+ fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
+ var styleOptions = {
+ font: fontSize + "px " + FONT_STYLE
+ };
+
+ (function() {
+ var styleBox, cue;
+
+ for (var 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));
+ }
+ })();
+};
+
+WebVTT$1.Parser = function(window, vttjs, decoder) {
+ if (!decoder) {
+ decoder = vttjs;
+ vttjs = {};
+ }
+ if (!vttjs) {
+ vttjs = {};
+ }
+
+ this.window = window;
+ this.vttjs = vttjs;
+ this.state = "INITIAL";
+ this.buffer = "";
+ this.decoder = decoder || new TextDecoder("utf8");
+ this.regionList = [];
+};
+
+WebVTT$1.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 (self.vttjs.VTTRegion || self.window.VTTRegion)();
+ 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
+ });
+ }
+ }
+
+ // draft-pantos-http-live-streaming-20
+ // https://tools.ietf.org/html/draft-pantos-http-live-streaming-20#section-3.5
+ // 3.5 WebVTT
+ function parseTimestampMap(input) {
+ var settings = new Settings();
+
+ parseOptions(input, function(k, v) {
+ switch(k) {
+ case "MPEGT":
+ settings.integer(k + 'S', v);
+ break;
+ case "LOCA":
+ settings.set(k + 'L', parseTimeStamp(v));
+ break;
+ }
+ }, /[^\d]:/, /,/);
+
+ self.ontimestampmap && self.ontimestampmap({
+ "MPEGTS": settings.get("MPEGTS"),
+ "LOCAL": settings.get("LOCAL")
+ });
+ }
+
+ // 3.2 WebVTT metadata header syntax
+ function parseHeader(input) {
+ if (input.match(/X-TIMESTAMP-MAP/)) {
+ // This line contains HLS X-TIMESTAMP-MAP metadata
+ parseOptions(input, function(k, v) {
+ switch(k) {
+ case "X-TIMESTAMP-MAP":
+ parseTimestampMap(v);
+ break;
+ }
+ }, /=/);
+ } else {
+ 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 (self.vttjs.VTTCue || self.window.VTTCue)(0, 0, "");
+ // Safari still uses the old middle value and won't accept center
+ try {
+ self.cue.align = "center";
+ } catch (e) {
+ self.cue.align = "middle";
+ }
+ 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.replace(/\u2028/g, '\n').replace(/u2029/g, '\n');
+ 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;
+ }
+};
+
+var vtt = WebVTT$1;
+
+/**
+ * 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.
+ */
+
+var autoKeyword = "auto";
+var directionSetting = {
+ "": 1,
+ "lr": 1,
+ "rl": 1
+};
+var alignSetting = {
+ "start": 1,
+ "center": 1,
+ "end": 1,
+ "left": 1,
+ "right": 1,
+ "auto": 1,
+ "line-left": 1,
+ "line-right": 1
+};
+
+function findDirectionSetting(value) {
+ if (typeof value !== "string") {
+ return false;
+ }
+ var dir = directionSetting[value.toLowerCase()];
+ return dir ? value.toLowerCase() : false;
+}
+
+function findAlignSetting(value) {
+ if (typeof value !== "string") {
+ return false;
+ }
+ var align = alignSetting[value.toLowerCase()];
+ return align ? value.toLowerCase() : false;
+}
+
+function VTTCue(startTime, endTime, text) {
+ /**
+ * Shim implementation specific properties. These properties are not in
+ * the spec.
+ */
+
+ // Lets us know when the VTTCue's data has changed in such a way that we need
+ // to recompute its display state. This lets us compute its display state
+ // lazily.
+ this.hasBeenReset = false;
+
+ /**
+ * VTTCue and TextTrackCue properties
+ * http://dev.w3.org/html5/webvtt/#vttcue-interface
+ */
+
+ var _id = "";
+ var _pauseOnExit = false;
+ var _startTime = startTime;
+ var _endTime = endTime;
+ var _text = text;
+ var _region = null;
+ var _vertical = "";
+ var _snapToLines = true;
+ var _line = "auto";
+ var _lineAlign = "start";
+ var _position = "auto";
+ var _positionAlign = "auto";
+ var _size = 100;
+ var _align = "center";
+
+ Object.defineProperties(this, {
+ "id": {
+ enumerable: true,
+ get: function() {
+ return _id;
+ },
+ set: function(value) {
+ _id = "" + value;
+ }
+ },
+
+ "pauseOnExit": {
+ enumerable: true,
+ get: function() {
+ return _pauseOnExit;
+ },
+ set: function(value) {
+ _pauseOnExit = !!value;
+ }
+ },
+
+ "startTime": {
+ enumerable: true,
+ get: function() {
+ return _startTime;
+ },
+ set: function(value) {
+ if (typeof value !== "number") {
+ throw new TypeError("Start time must be set to a number.");
+ }
+ _startTime = value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "endTime": {
+ enumerable: true,
+ get: function() {
+ return _endTime;
+ },
+ set: function(value) {
+ if (typeof value !== "number") {
+ throw new TypeError("End time must be set to a number.");
+ }
+ _endTime = value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "text": {
+ enumerable: true,
+ get: function() {
+ return _text;
+ },
+ set: function(value) {
+ _text = "" + value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "region": {
+ enumerable: true,
+ get: function() {
+ return _region;
+ },
+ set: function(value) {
+ _region = value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "vertical": {
+ enumerable: true,
+ get: function() {
+ return _vertical;
+ },
+ set: function(value) {
+ var setting = findDirectionSetting(value);
+ // Have to check for false because the setting an be an empty string.
+ if (setting === false) {
+ throw new SyntaxError("Vertical: an invalid or illegal direction string was specified.");
+ }
+ _vertical = setting;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "snapToLines": {
+ enumerable: true,
+ get: function() {
+ return _snapToLines;
+ },
+ set: function(value) {
+ _snapToLines = !!value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "line": {
+ enumerable: true,
+ get: function() {
+ return _line;
+ },
+ set: function(value) {
+ if (typeof value !== "number" && value !== autoKeyword) {
+ throw new SyntaxError("Line: an invalid number or illegal string was specified.");
+ }
+ _line = value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "lineAlign": {
+ enumerable: true,
+ get: function() {
+ return _lineAlign;
+ },
+ set: function(value) {
+ var setting = findAlignSetting(value);
+ if (!setting) {
+ console.warn("lineAlign: an invalid or illegal string was specified.");
+ } else {
+ _lineAlign = setting;
+ this.hasBeenReset = true;
+ }
+ }
+ },
+
+ "position": {
+ enumerable: true,
+ get: function() {
+ return _position;
+ },
+ set: function(value) {
+ if (value < 0 || value > 100) {
+ throw new Error("Position must be between 0 and 100.");
+ }
+ _position = value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "positionAlign": {
+ enumerable: true,
+ get: function() {
+ return _positionAlign;
+ },
+ set: function(value) {
+ var setting = findAlignSetting(value);
+ if (!setting) {
+ console.warn("positionAlign: an invalid or illegal string was specified.");
+ } else {
+ _positionAlign = setting;
+ this.hasBeenReset = true;
+ }
+ }
+ },
+
+ "size": {
+ enumerable: true,
+ get: function() {
+ return _size;
+ },
+ set: function(value) {
+ if (value < 0 || value > 100) {
+ throw new Error("Size must be between 0 and 100.");
+ }
+ _size = value;
+ this.hasBeenReset = true;
+ }
+ },
+
+ "align": {
+ enumerable: true,
+ get: function() {
+ return _align;
+ },
+ set: function(value) {
+ var setting = findAlignSetting(value);
+ if (!setting) {
+ throw new SyntaxError("align: an invalid or illegal alignment string was specified.");
+ }
+ _align = setting;
+ this.hasBeenReset = true;
+ }
+ }
+ });
+
+ /**
+ * Other