diff --git a/jquery.youtube-background.js b/jquery.youtube-background.js
index 0aaaf94..abfa42b 100644
--- a/jquery.youtube-background.js
+++ b/jquery.youtube-background.js
@@ -240,7 +240,8 @@
"volume": 1,
"no-cookie": true,
"force-on-low-battery": false,
- "lazyloading": false
+ "lazyloading": false,
+ "title": "Video background"
};
this.params = this.parseProperties(params, DEFAULTS, this.element, ["data-ytbg-", "data-vbg-"]);
if (this.params.pause) {
@@ -546,6 +547,8 @@
}
generatePlayerElement() {
const playerElement = document.createElement("iframe");
+ if (this.params.title)
+ playerElement.setAttribute("title", this.params.title);
playerElement.setAttribute("frameborder", 0);
playerElement.setAttribute("allow", "autoplay; mute");
if (this.params["lazyloading"])
@@ -728,9 +731,10 @@
// src/lib/vimeo-background.js
var VimeoBackground = class extends SuperVideoBackground {
constructor(elem, params, id, uid, factoryInstance) {
- super(elem, params, id, uid, "vimeo", factoryInstance);
+ super(elem, params, id.id, uid, "vimeo", factoryInstance);
if (!id)
return;
+ this.unlisted = id.unlisted;
if (this.is_mobile && !this.params.mobile)
return;
this.injectScript();
@@ -768,14 +772,17 @@
}
generatePlayerElement() {
const playerElement = document.createElement("iframe");
+ if (this.params.title)
+ playerElement.setAttribute("title", this.params.title);
playerElement.setAttribute("frameborder", 0);
playerElement.setAttribute("allow", "autoplay; mute");
if (this.params["lazyloading"])
playerElement.setAttribute("loading", "lazy");
return playerElement;
}
- generateSrcURL(id) {
- let src = "https://player.vimeo.com/video/" + id + "?background=1&controls=0";
+ generateSrcURL(id, unlisted) {
+ unlisted = unlisted ? `h=${unlisted}&` : "";
+ let src = `https://player.vimeo.com/video/${id}?${unlisted}background=1&controls=0`;
if (this.params.muted) {
src += "&muted=1";
}
@@ -795,7 +802,7 @@
}
injectPlayer() {
this.playerElement = this.generatePlayerElement();
- this.src = this.generateSrcURL(this.id);
+ this.src = this.generateSrcURL(this.id, this.unlisted);
this.playerElement.src = this.src;
this.playerElement.id = this.uid;
this.stylePlayerElement(this.playerElement);
@@ -969,6 +976,8 @@
}
generatePlayerElement() {
const playerElement = document.createElement("video");
+ if (this.params.title)
+ playerElement.setAttribute("title", this.params.title);
playerElement.setAttribute("playsinline", "");
if (this.params.loop)
playerElement.setAttribute("loop", "");
@@ -1232,7 +1241,7 @@
this.index[uid] = yb;
break;
case "VIMEO":
- const vm = new VimeoBackground(element, params, vid_data.id, uid, this);
+ const vm = new VimeoBackground(element, params, vid_data, uid, this);
this.index[uid] = vm;
break;
case "VIDEO":
@@ -1274,12 +1283,20 @@
const pts = link.match(this.re[k]);
if (pts && pts.length) {
this.re[k].lastIndex = 0;
- return {
+ const data = {
id: pts[1],
type: k,
regex_pts: pts,
link
};
+ if (k === "VIMEO") {
+ const unlistedQueryRegex = /(\?|&)h=([^=&#?]+)/;
+ const unlistedPathRegex = /\/[^\/\:\.]+(\:|\/)([^:?\/]+)\s?$/;
+ const unlistedQuery = link.match(unlistedPathRegex) || link.match(unlistedQueryRegex);
+ if (unlistedQuery)
+ data.unlisted = unlistedQuery[2];
+ }
+ return data;
}
}
return;
diff --git a/jquery.youtube-background.js.map b/jquery.youtube-background.js.map
index 03facc6..5781e9c 100644
--- a/jquery.youtube-background.js.map
+++ b/jquery.youtube-background.js.map
@@ -1,7 +1,7 @@
{
"version": 3,
"sources": ["src/lib/buttons.js", "node_modules/book-of-spells/src/helpers.mjs", "node_modules/book-of-spells/src/regex.mjs", "node_modules/book-of-spells/src/parsers.mjs", "node_modules/book-of-spells/src/dom.mjs", "node_modules/book-of-spells/src/browser.mjs", "src/lib/super-video-background.js", "src/lib/youtube-background.js", "src/lib/vimeo-background.js", "src/lib/video-background.js", "src/video-backgrounds.js", "src/main.js"],
- "sourcesContent": ["\nfunction buttonOn(buttonObj) {\n if (!buttonObj) return;\n buttonObj.element.classList.add(buttonObj.stateClassName);\n buttonObj.element.firstChild.classList.remove(buttonObj.stateChildClassNames[0]);\n buttonObj.element.firstChild.classList.add(buttonObj.stateChildClassNames[1]);\n buttonObj.element.setAttribute('aria-checked', false);\n}\n\nfunction buttonOff(buttonObj) {\n if (!buttonObj) return;\n buttonObj.element.classList.remove(buttonObj.stateClassName);\n buttonObj.element.firstChild.classList.add(buttonObj.stateChildClassNames[0]);\n buttonObj.element.firstChild.classList.remove(buttonObj.stateChildClassNames[1]);\n buttonObj.element.setAttribute('aria-checked', true);\n}\n\nexport function generateActionButton(obj, props) {\n const btn = document.createElement('button');\n btn.className = props.className;\n btn.innerHTML = props.innerHtml;\n btn.setAttribute('role', 'switch');\n btn.firstChild.classList.add(props.stateChildClassNames[0]);\n btn.setAttribute('aria-checked', !props.initialState);\n props.element = btn;\n\n if (obj.params[props.condition_parameter] === props.initialState) {\n buttonOn(props);\n }\n\n btn.addEventListener('click', function(e) {\n if (this.classList.contains(props.stateClassName)) {\n buttonOff(props);\n obj[props.actions[0]]();\n } else {\n buttonOn(props);\n obj[props.actions[1]]();\n }\n });\n\n obj.buttons[props.name] = {\n element: btn,\n button_properties: props\n };\n\n obj.controls_element.appendChild(btn);\n};\n", "/**\n * Shallow merges two objects together. Used to pass simple options to functions.\n * \n * @param {object} target The target object to merge into\n * @param {object} source The source object to merge from\n * @returns object The merged object, in this case the target object with the source object's properties merged into it\n * @example\n * const target = { foo: 'bar' }\n * const source = { bar: 'baz' }\n * shallowMerge(target, source) // { foo: 'bar', bar: 'baz' }\n */\nexport function shallowMerge(target, source) {\n for (const key in source) {\n target[key] = source[key]\n }\n\n return target\n}\n\n/**\n * Deep merge function that's mindful of arrays and objects\n * \n * @param {object} target The target object to merge into\n * @param {object} source The source object to merge from\n * @returns object The merged object, in this case the target object with the source object's properties merged into it\n * @example\n * const target = { foo: 'bar' }\n * const source = { bar: 'baz' }\n * deepMerge(target, source) // { foo: 'bar', bar: 'baz' }\n */\nexport function deepMerge(target, source) {\n if (isObject(source) && isObject(target)) {\n for (const key in source) {\n target[key] = deepMerge(target[key], source[key])\n }\n } else if (isArray(source) && isArray(target)) {\n for (let i = 0; i < source.length; i++) {\n target[i] = deepMerge(target[i], source[i])\n }\n } else {\n target = source\n }\n return target\n}\n\n/**\n * Deep clone function that's mindful of nested arrays and objects\n * \n * @param {object} o The object to clone\n * @returns object The cloned object\n * @example\n * const obj = { foo: 'bar' }\n * const clone = clone(obj)\n * clone.foo = 'baz'\n * console.log(obj.foo) // 'bar'\n * console.log(clone.foo) // 'baz'\n * console.log(obj === clone) // false\n * console.log(JSON.stringify(obj) === JSON.stringify(clone)) // true\n * @todo Check if faster than assign. This function is pretty old...\n */ \nexport function clone(o) {\n let res = null\n if (isArray(o)) {\n res = []\n for (const i in o) {\n res[i] = clone(o[i])\n }\n } else if (isObject(o)) {\n res = {}\n for (const i in o) {\n res[i] = clone(o[i])\n }\n } else {\n res = o\n }\n return res\n}\n\n/**\n * Check if an object is empty\n * \n * @param {object} o The object to check\n * @returns boolean True if the object is empty, false otherwise\n * @example\n * isEmptyObject({}) // => true\n * isEmptyObject({ foo: 'bar' }) // => false\n */\nexport function isEmptyObject(o) {\n for (const i in o) {\n return false\n }\n return true\n}\n\n/**\n * Check if an array is empty, substitute for Array.length === 0\n * \n * @param {array} o The array to check\n * @returns boolean True if the array is empty, false otherwise\n * @example\n * isEmptyArray([]) // => true\n * isEmptyArray([1, 2, 3]) // => false\n */\nexport function isEmptyArray(o) {\n return o.length === 0\n}\n\n/**\n * Check if a variable is empty\n * \n * @param {any} o The variable to check\n * @returns boolean True if the variable is empty, false otherwise\n * @example\n * isEmpty({}) // => true\n * isEmpty([]) // => true\n * isEmpty('') // => true\n * isEmpty(null) // => false\n * isEmpty(undefined) // => false\n * isEmpty(0) // => false\n */\nexport function isEmpty(o) {\n if (isObject(o)) {\n return isEmptyObject(o)\n } else if (isArray(o)) {\n return isEmptyArray(o)\n } else if (isString(o)) {\n return o === ''\n }\n return false\n}\n\n/**\n * Try to convert a string to a boolean\n * \n * @param {string} str The string to convert\n * @returns boolean The converted boolean or undefined if conversion failed\n * @example\n * stringToBoolean('true') // => true\n * stringToBoolean('false') // => false\n * stringToBoolean('foo') // => null\n */\nexport function stringToBoolean(str) {\n if (/^\\s*(true|false)\\s*$/i.test(str)) return str === 'true'\n}\n\n/**\n * Try to convert a string to a number\n * \n * @param {string} str The string to convert\n * @returns number The converted number or undefined if conversion failed\n * @example\n * stringToNumber('1') // => 1\n * stringToNumber('1.5') // => 1.5\n * stringToNumber('foo') // => null\n * stringToNumber('1foo') // => null\n */\nexport function stringToNumber(str) {\n if (/^\\s*\\d+\\s*$/.test(str)) return parseInt(str)\n if (/^\\s*[\\d.]+\\s*$/.test(str)) return parseFloat(str)\n}\n\n/**\n * Try to convert a string to an array\n * \n * @param {string} str The string to convert\n * @returns array The converted array or undefined if conversion failed\n * @example\n * stringToArray('[1, 2, 3]') // => [1, 2, 3]\n * stringToArray('foo') // => null\n * stringToArray('1') // => null\n * stringToArray('{\"foo\": \"bar\"}') // => null\n */\nexport function stringToArray(str) {\n if (!/^\\s*\\[.*\\]\\s*$/.test(str)) return\n try {\n return JSON.parse(str)\n } catch (e) {}\n}\n\n/**\n * Try to convert a string to an object\n * \n * @param {string} str The string to convert\n * @returns object The converted object or undefined if conversion failed\n * @example\n * stringToObject('{ \"foo\": \"bar\" }') // => { foo: 'bar' }\n * stringToObject('foo') // => null\n * stringToObject('1') // => null\n * stringToObject('[1, 2, 3]') // => null\n */\nexport function stringToObject(str) {\n if (!/^\\s*\\{.*\\}\\s*$/.test(str)) return\n try {\n return JSON.parse(str)\n } catch (e) {}\n}\n\n/**\n * Try to convert a string to a regex\n * \n * @param {string} str The string to convert\n * @returns regex The converted regex or undefined if conversion failed\n * @example\n * stringToRegex('/foo/i') // => /foo/i\n * stringToRegex('foo') // => null\n * stringToRegex('1') // => null\n */\nexport function stringToRegex(str) {\n if (!/^\\s*\\/.*\\/g?i?\\s*$/.test(str)) return\n try {\n return new RegExp(str)\n } catch (e) {}\n}\n\n/**\n * Try to convert a string to a primitive\n * \n * @param {string} str The string to convert\n * @returns {null|boolean|int|float|string} The converted primitive or input string if conversion failed\n * @example\n * stringToPrimitive('null') // => null\n * stringToPrimitive('true') // => true\n * stringToPrimitive('false') // => false\n * stringToPrimitive('1') // => 1\n * stringToPrimitive('1.5') // => 1.5\n * stringToPrimitive('foo') // => 'foo'\n * stringToPrimitive('1foo') // => '1foo'\n */\nexport function stringToPrimitive(str) {\n if (/^\\s*null\\s*$/.test(str)) return null\n const bool = stringToBoolean(str)\n if (bool !== undefined) return bool\n return stringToNumber(str) || str\n}\n\n/**\n * Try to convert a string to a data type\n * \n * @param {string} str The string to convert\n * @returns any The converted data type or input string if conversion failed\n * @example\n * stringToData('null') // => null\n * stringToData('true') // => true\n * stringToData('false') // => false\n * stringToData('1') // => 1\n * stringToData('1.5') // => 1.5\n * stringToData('foo') // => 'foo'\n * stringToData('1foo') // => '1foo'\n * stringToData('[1, 2, 3]') // => [1, 2, 3]\n * stringToData('{ \"foo\": \"bar\" }') // => { foo: 'bar' }\n * stringToData('/foo/i') // => /foo/i\n */\nexport function stringToType(str) {\n if (/^\\s*null\\s*$/.test(str)) return null\n const bool = stringToBoolean(str)\n if (bool !== undefined) return bool\n return stringToNumber(str) || stringToArray(str) || stringToObject(str) || stringToRegex(str) || str\n}\n\n/**\n * If provided variable is an object\n * \n * @param {any} o \n * @returns boolean\n * @example\n * isObject({}) // => true\n * isObject([]) // => false\n * isObject(null) // => false\n */\nexport function isObject(o) {\n return typeof o === 'object' && !Array.isArray(o) && o !== null\n}\n\n/**\n * If provided variable is an array. Just a wrapper for Array.isArray\n * \n * @param {any} o\n * @returns boolean\n * @example\n * isArray([]) // => true\n * isArray({}) // => false\n */\nexport function isArray(o) {\n return Array.isArray(o)\n}\n\n/**\n * If provided variable is a string. Just a wrapper for typeof === 'string'\n * \n * @param {any} o\n * @returns boolean\n * @example\n * isString('foo') // => true\n * isString({}) // => false\n */\nexport function isString(o) {\n return typeof o === 'string'\n}\n\n/**\n * If provided variable is a function, substitute for typeof === 'function'\n * \n * @param {any} o\n * @returns boolean\n * @example\n * isFunction(function() {}) // => true\n * isFunction({}) // => false\n */\nexport function isFunction(o) {\n return typeof o === 'function'\n}\n\n/**\n * If object property is a function\n * \n * @param {object} obj\n * @param {string} propertyName\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: function() {} }\n * propertyIsFunction(obj, 'foo') // => false\n * propertyIsFunction(obj, 'baz') // => true\n */\nexport function propertyIsFunction(obj, propertyName) {\n return obj.hasOwnProperty(propertyName) && isFunction(obj[propertyName])\n}\n\n/**\n * If object property is a string\n * \n * @param {object} obj\n * @param {string} propertyName\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: function() {} }\n * propertyIsString(obj, 'foo') // => true\n * propertyIsString(obj, 'baz') // => false\n */\nexport function propertyIsString(obj, propertyName) {\n return obj.hasOwnProperty(propertyName) && isString(obj[propertyName])\n}\n\n/**\n * Transforms a dash separated string to camelCase\n *\n * @param {string} str\n * @returns boolean\n * @example\n * transformDashToCamelCase('foo-bar') // => 'fooBar'\n * transformDashToCamelCase('foo-bar-baz') // => 'fooBarBaz'\n * transformDashToCamelCase('foo') // => 'foo'\n * transformDashToCamelCase('fooBarBaz-qux') // => 'fooBarBazQux'\n */\nexport function transformDashToCamelCase(str) {\n return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase() });\n}\n\n/**\n * Transforms a camelCase string to dash separated string\n * \n * @param {string} str\n * @returns boolean\n * @example\n * transformCamelCaseToDash('fooBar') // => 'foo-bar'\n * transformCamelCaseToDash('fooBarBaz') // => 'foo-bar-baz'\n * transformCamelCaseToDash('foo') // => 'foo'\n * transformDashToCamelCase('fooBarBaz-qux') // => 'foo-bar-baz-qux'\n */\nexport function transformCamelCaseToDash(str) {\n return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\n/**\n * Maps an array of objects by a property name\n * \n * @param {array} arr\n * @param {string} propertyName\n * @returns object\n * @example\n * const arr = [{ foo: 'bar' }, { foo: 'baz' }]\n * mapByProperty(arr, 'foo') // => { bar: { foo: 'bar' }, baz: { foo: 'baz' } }\n */\nexport function mapByProperty(arr, propertyName) {\n const res = {}\n for (let i = 0; i < arr.length; i++) {\n res[arr[i][propertyName]] = arr[i]\n }\n return res\n}\n\n/**\n * Maps an array of objects by a property name to another property name\n * \n * @param {array} arr\n * @param {string} keyPropertyName\n * @param {string} valuePropertyName\n * @returns object\n * @example\n * const arr = [{ foo: 'bar', baz: 'qux' }, { foo: 'quux', baz: 'corge' }]\n * mapPropertyToProperty(arr, 'foo', 'baz') // => { bar: 'qux', quux: 'corge' }\n */\nexport function mapPropertyToProperty(arr, keyPropertyName, valuePropertyName) {\n const res = {}\n for (let i = 0; i < arr.length; i++) {\n res[arr[i][keyPropertyName]] = arr[i][valuePropertyName]\n }\n return res\n}\n\n/**\n * Remove accents from a string\n * \n * @param {string} inputString\n * @returns string\n * @example\n * removeAccents('\u00E1\u00E9\u00ED\u00F3\u00FA') // => 'aeiou'\n * removeAccents('\u00C1\u00C9\u00CD\u00D3\u00DA') // => 'AEIOU'\n * removeAccents('se\u00F1or') // => 'senor'\n * removeAccents('\u0152') // => 'OE'\n */\nexport function removeAccents(inputString) {\n return inputString.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').replace(/\\\u0153/g, \"oe\").replace(/\\\u00E6/g, \"ae\").normalize('NFC')\n}\n\n/**\n * Strip HTML tags from a string\n * \n * @param {string} inputString\n * @returns string\n * @example\n * stripHTMLTags('
foo ') // => 'foo'\n * stripHTMLTags('
foo bar ') // => 'foo bar'\n */\nexport function stripHTMLTags(inputString) {\n return inputString.replace(/<[^>]*>/g, '')\n}\n\n/**\n * Slugify a string, e.g. 'Foo Bar' => 'foo-bar'. Similar to WordPress' sanitize_title(). Will remove accents and HTML tags.\n * \n * @param {string} str \n * @returns string\n * @example\n * slugify('Foo Bar') // => 'foo-bar'\n * slugify('Foo Bar
baz ') // => 'foo-bar-baz'\n */\nexport function slugify(str) {\n str = str.trim().toLowerCase()\n str = removeAccents(str)\n str = stripHTMLTags(str)\n return str.replace(/\\s+|\\.+|\\/+|\\\\+|\u2014+|\u2013+/g, '-').replace(/[^\\w0-9\\-]+/g, '').replace(/-{2,}/g, '-').replace(/^-|-$/g, '')\n}\n\n/**\n * Check if object has multiple properties\n * \n * @param {object} obj\n * @param {string|array} properties\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: 'qux' }\n * hasOwnProperties(obj, ['foo', 'baz']) // => true\n * hasOwnProperties(obj, ['foo', 'baz', 'qux']) // => false\n */\nexport function hasOwnProperties(obj, properties) {\n if(!isArray(properties)) properties = [properties]\n for (let i = 0; i < properties.length; i++) {\n if (!obj.hasOwnProperty(properties[i])) return false\n }\n return true\n}\n\n/**\n * Finds the closest number to the set goal in an array to a given number\n * \n * @param {number} goal Number to search for\n * @param {array} arr Array of numbers to search in\n * @returns number\n * @example\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9]) // => 9\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 11]) // => 9\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 9.5]) // => 9.5\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11) // => 10\n */\nexport function closestNumber(goal, arr) {\n return arr.reduce(function(prev, curr) {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev\n })\n}\n\n/**\n * Truncate a string to a given number of words\n * \n * @param {string} str String to truncate\n * @param {number} numWords Number of words to truncate to\n * @param {string} ellipsis Ellipsis to append to the end of the string\n * @returns string\n * @example\n * truncateString('foo bar baz', 2) // => 'foo bar\u2026'\n * truncateString('foo bar baz', 2, '...') // => 'foo bar...'\n * truncateString('foo bar. baz', 2, '...') // => 'foo bar. ...'\n */\nexport function truncateString(str, numWords, ellipsis = '\u2026') {\n const words = str.trim().split(' ')\n if (words.length <= numWords) return str\n if (numWords <= 0) return ''\n if (/[.?!]$/.test(words[numWords - 1]) && ellipsis.trim() !== '') ellipsis = ` ${ellipsis}`\n return words.slice(0, numWords).join(' ') + ellipsis\n}\n\n/**\n * Generates a random integer between two values, inclusive of both\n * \n * @param {number} min Minimum value\n * @param {number} max Maximum value\n * @param {boolean} safe Defaults to false, if true will use a cryptographically secure random number generator\n * @returns number\n * @example\n * randomIntInclusive(1, 10) // => 1\n * randomIntInclusive(1, 10) // => 10\n * randomIntInclusive(1, 10) // => 5\n */\nexport function randomIntInclusive(min, max, safe = false) {\n min = Number(min)\n max = Number(max)\n if (isNaN(min) || isNaN(max)) throw new TypeError('Both min and max must be numbers')\n if (min > max) [min, max] = [max, min]\n if (min === max) return min\n min = Math.round(min)\n max = Math.round(max)\n const rand = safe ? random() : Math.random()\n return Math.floor(rand * (max - min + 1)) + min\n}\n\n/**\n * Gets fixed number of digits after the decimal point\n * \n * @param {number} number Number to fix\n * @param {number} digits Number of digits to fix to\n * @returns number\n * @example\n * fixed(1.234, 2) // => 1.23\n * fixed(1.235, 2) // => 1.24\n * fixed(1.234) // => 1\n * fixed(1.234, 0) // => 1\n * fixed(1.234, 5) // => 1.234\n * @note Gotta ask myself why I wrote this function in the first place... \uD83E\uDD14 It's just not useful in a lot of cases lol...\n */\nexport function fixed(number, digits) {\n if (!digits) return parseInt(number)\n return parseFloat(number.toFixed(digits))\n}\n\n/**\n * Calculates the percentage of a number in relation to another number\n * \n * @param {number} num Number to calculate percentage of\n * @param {number} total Total number\n * @returns number\n * @example\n * percentage(1, 10) // => 10\n * percentage(5, 10) // => 50\n * percentage(10, 10) // => 100\n * percentage(0, 10) // => 0\n * percentage(10, 2) // => 500\n */\nexport function percentage(num, total) {\n if (!num || !total || Number.isNaN(num) || Number.isNaN(total)) return 0\n return num / total * 100\n}\n\nexport function pickProperties(obj, props) {\n const res = {}\n if (!props) return res\n if (!isArray(props)) props = [props]\n for (let i = 0; i < props.length; i++) {\n if (obj.hasOwnProperty(props[i])) res[props[i]] = obj[props[i]]\n }\n return res\n}\n\nexport function rejectProperties(obj, props, clone = true) {\n if (clone) obj = { ...obj }\n if (!props) return obj\n if (!isArray(props)) props = [props]\n for (let i = 0; i < props.length; i++) {\n if (obj.hasOwnProperty(props[i])) delete obj[props[i]]\n }\n return obj\n}\n\nexport function pickArrayElements(arr, indexes) {\n if (!isArray(arr)) return\n if (!isArray(indexes)) indexes = [indexes]\n const res = []\n for (let i = 0; i < indexes.length; i++) {\n if (arr.hasOwnProperty(indexes[i])) res.push(arr[indexes[i]])\n }\n return res\n}\n\nexport function rejectArrayElements(arr, indexes, clone = true) {\n if (clone) arr = [...arr]\n if (!isArray(arr)) return\n if (!isArray(indexes)) indexes = [indexes]\n for (let i = indexes.length - 1; i >= 0; i--) {\n if (arr.hasOwnProperty(indexes[i])) arr.splice(indexes[i], 1)\n }\n return arr\n}\n\n/**\n * Pick properties from an object or elements from an array\n * \n * @param {array} obj Object or array to pick properties or elements from\n * @param {array | string | number} props Properties to remove, can be an array of strings or a single string or number\n * @returns object | array | undefined\n * @example\n * \n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }) // => {}\n * pick({}, []) // => {}\n * pick(null, 'foo') // => undefined\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, undefined) // => {}\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, 'foo') // => { foo: 'bar'}\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, ['foo', 'baz']) // => { foo: 'bar', baz: 'qux' }\n * \n * pick(['foo', 'bar', 'baz'], []) // => []\n * pick([], []) // => []\n * pick(null, 0) // => undefined\n * pick(['foo', 'bar', 'baz'], undefined) // => []\n * pick(['foo', 'bar', 'baz'], 0) // => ['foo']\n * pick(['foo', 'bar', 'baz'], [0, 2]) // => ['foo', 'baz']\n * pick(['foo', 'bar', 'baz'], [0, 2, 3]) // => ['foo', 'baz']\n */\nexport function pick(obj, props) {\n return isObject(obj) ? pickProperties(obj, props) : pickArrayElements(obj, props)\n}\n\n/**\n * Remove properties from an object or elements from an array\n * \n * @param {array} obj Object or array to remove properties or elements from\n * @param {array | string | number} props Properties to remove, can be an array of strings or a single string or number\n * @param {boolean} clone Defaults to true, will clone the object or array before removing properties or elements.\n * @returns object | array | undefined\n * @example\n * \n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }) // => {}\n * reject({}, []) // => {}\n * reject(null, 'foo') // => undefined\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, undefined) // => {}\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, 'foo') // => { bar: 'baz', baz: 'qux' }\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, ['foo', 'baz']) // => { bar: 'baz' }\n * \n * reject(['foo', 'bar', 'baz'], []) // => []\n * reject([], []) // => []\n * reject(null, 0) // => undefined\n * reject(['foo', 'bar', 'baz'], undefined) // => []\n * reject(['foo', 'bar', 'baz'], 0) // => ['bar', 'baz']\n * reject(['foo', 'bar', 'baz'], [0, 2]) // => ['bar']\n * reject(['foo', 'bar', 'baz'], [0, 2, 3]) // => ['bar']\n */\nexport function reject(obj, props, clone = true) {\n return isObject(obj) ? rejectProperties(obj, props, clone) : rejectArrayElements(obj, props, clone)\n}\n\n/**\n * Basic timestamp first UID generator that's good enough for most use cases but not for security purposes.\n * There's an extremely small chance of collision, so create a map object to check for collisions if you're worried about that.\n * \n * - `Date.now().toString(16)` is used for the timestamp, which is a base16 representation of the current timestamp in milliseconds.\n * - `random().toString(16).substring(2)` is used for the random number, which is a base16 representation of a random number between 0 and 1, with the first two characters removed.\n * \n * @param {boolean} safe Defaults to false, if true will use a cryptographically secure random number generator for the random number improving security but reducing performance. If crypto is not available, will use Math.random() instead.\n * @returns string\n * @example\n * basicUID() // => '18d4613e4d2-750bf066ac6158'\n */\nexport function basicUID(safe = false) {\n const rand = safe ? random() : Math.random()\n return Date.now().toString(16)+'-'+rand.toString(16).substring(2)\n}\n\nfunction cryptoUUIDFallback() {\n return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>\n (c ^ Math.random() * 16 >> c / 4).toString(16)\n )\n}\n\n// Taken from https://stackoverflow.com/a/2117523/5437943\nfunction cryptoRandomUUIDFallback() {\n return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>\n (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)\n )\n}\n\n/**\n * Generates a UUID v4\n * - Uses crypto.randomUUID if available\n * - Uses crypto.getRandomValues if available\n * - Uses a fallback if neither is available, which is not safe because it uses Math.random() instead of a cryptographically secure random number generator\n * \n * I'm bad at crypto and bitwise operations, not my cup of tea, so I had to rely on StackOverflow for the fallback: https://stackoverflow.com/a/2117523/5437943\n * \n * @param {boolean} safe Defaults to true, if false will use a fallback that's not cryptographically secure but significantly faster\n * @returns string\n * @example\n * generateUUID() // UUID v4, example 09ed0fe4-8eb6-4c2a-a8d3-a862b7513294\n */\nexport function generateUUID(safe = true) {\n if (!crypto || !safe) return cryptoUUIDFallback()\n if (crypto.randomUUID) return crypto.randomUUID()\n if (crypto.getRandomValues) return cryptoRandomUUIDFallback();\n}\n\n/**\n * Generates a random number between 0 and 1, inclusive of 0 but not inclusive of 1.\n * \n * - Uses crypto.getRandomValues if available\n * - Uses Math.random() if crypto.getRandomValues is not available\n * \n * @returns number\n * @example\n * random() // => 0.123456789\n */\nexport function random() {\n if (!crypto) return Math.random()\n if (crypto.getRandomValues) return crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295 // 2^32 - 1 = 4294967295\n}\n", "/**\n * @module regex\n */\n\n/**\n * Regular expression for matching a YouTube video links and extracting their ID, works with both embed and watch URLs\n */\nexport const RE_YOUTUBE = /(?:youtube\\.com\\/(?:[^\\/]+\\/.+\\/|(?:v|e(?:mbed)?)\\/|.*[?&]v=)|youtu\\.be\\/)([^\"&?\\/ ]{11})/i\n\n/**\n * Regular expression for matching a Vimeo video links and extracting their ID, works with both embed and watch URLs, channels and groups\n */\nexport const RE_VIMEO = /(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)?|groups\\/(?:[^\\/]*)\\/videos\\/|album\\/(?:\\d+)\\/video\\/|video\\/|)(\\d+)(?:[a-zA-Z0-9_\\-]+)?/i\n\n/**\n * Regular expression for matching a video URLs\n */\nexport const RE_VIDEO = /\\/([^\\/]+\\.(?:mp4|ogg|ogv|ogm|webm|avi))\\s*$/i\n\n/**\n * Regular expression for matching a image URLs\n */\nexport const RE_IMAGE = /\\/([^\\/]+\\.(?:jpg|jpeg|png|gif|svg|webp))\\s*$/i\n\n/**\n * Regular expression for matching a URL parameters\n */\nexport const RE_URL_PARAMETER = /([^\\s=&]+)=?([^&\\s]+)?/\n\n/**\n * Regular expression for matching a HTML attribute and tag names, also for matching shortcode attributes and names\n */\nexport const RE_ATTRIBUTES = /\\s*(?:([a-z_]{1}[a-z0-9\\-_]*)=?(?:\"([^\"]+)\"|'([^']+)')*)\\s*/gi\n\n/**\n * Regular expression for matching a single attribute without value\n */\nexport const RE_ATTRIBUTE_WITHOUT_VALUE = /^\\s*([a-z_]{1}[a-z0-9\\-_]*)\\s*$/i\n\n/**\n * Regular expression for matching a single attribute with value\n */\nexport const RE_ATTRIBUTE_WITH_VALUE = /^\\s*([a-z_]{1}[a-z0-9\\-_]*)=(\"[^\"]+\"|'[^']+')\\s*$/i\n\n/**\n * Regular expression for matching the first or last quote of a string used for removing them\n */\nexport const RE_FIRST_OR_LAST_QUOTE = /^[\"']|[\"']$/g\n", "/** @module parsers */\n\nimport { isArray, isObject, isString, stringToType } from './helpers.mjs'\nimport { RE_ATTRIBUTES, RE_ATTRIBUTE_WITHOUT_VALUE, RE_ATTRIBUTE_WITH_VALUE, RE_URL_PARAMETER, RE_FIRST_OR_LAST_QUOTE } from './regex.mjs'\nimport { decodeHTML, encodeHTML } from './dom.mjs'\n\n/**\n * Parse a string of attributes and return an object\n * \n * @param {string} str\n * @returns object\n * @example\n * parseAttributes('button text=\"Click me\" data='{\"key\": \\\"value\"}' class=\"btn btn-primary\"')\n * // => { button: null, text: 'Click me', data: '{\"key\": \"value\"}', class: 'btn btn-primary' }\n */\nexport function parseAttributes(str) {\n\tconst re = RE_ATTRIBUTES\n\tconst reWithoutValue = RE_ATTRIBUTE_WITHOUT_VALUE\n\tconst reHasValue = RE_ATTRIBUTE_WITH_VALUE\n\tconst reReplaceFirstAndLastQuote = RE_FIRST_OR_LAST_QUOTE\n\t\n\tconst res = {}\n\tconst match = str.match(re)\n\n\tfor (let i = 0; i < match.length; i++) {\n\t\tconst m = match[i]\n\t\tif (m === '') continue\n\n\t\tif (reWithoutValue.test(m)) {\n\t\t\tconst [, key] = m.match(reWithoutValue)\n\t\t\tres[key] = null\n\t\t\treWithoutValue.lastIndex = 0\n\t\t} else if (reHasValue.test(m)) {\n\t\t\tconst [, key, value] = m.match(reHasValue)\n\t\t\tres[key] = stringToType(decodeHTML(value.replace(reReplaceFirstAndLastQuote, '')))\n\t\t\treReplaceFirstAndLastQuote.lastIndex = 0\n\t\t\treHasValue.lastIndex = 0\n\t\t}\n\t}\n\n\treturn res\n}\n\n/**\n * Serialize an object of key value pairs into a string of attributes\n * \n * @param {object} obj - The object to serialize\n * @returns {string} of attributes\n * @example\n * serializeAttributes({ button: null, text: 'Click me', data: '{\"key\": \"value\"}', class: 'btn btn-primary' }) // button text=\"Click me\" data=\"{\\\"key\\\": \\\"value\\\"}\" class=\"btn btn-primary\"\n */\nexport function serializeAttributes(obj) {\n\tconst res = []\n\n\tObject.keys(obj).forEach((key) => {\n\t\tlet value = obj[key]\n\t\tif (isObject(value) || isArray(value)) value = JSON.stringify(value)\n\t\tif (isString(value)) value = encodeHTML(value)\n\t\tconst valueString = value === null || value === undefined ? '' : `=\"${value}\"`\n\t\tres.push(`${key}${valueString}`)\n\t})\n\n\treturn res.join(' ')\n}\n\n/**\n * Encodes HTML entities in a string using the following rules:\n * \n * - & (ampersand) becomes &\n * - \" (double quote) becomes "\n * - ' (single quote) becomes '\n * - < (less than) becomes <\n * - > (greater than) becomes >\n * \n * It is different than dom.encodeHTML, which encodes all characters using the browser's DOMParser. This function only encodes the characters listed above and should be used when DOMParser is not available.\n * @see {@link module:dom.encodeHTML}\n * \n * @param {string} str - The string to encode\n * @returns {string} The encoded string\n * @example\n * htmlEncode('
Link ') // <a href="#">Link</a>\n */\nexport function encodeHtmlEntities(str) {\n\treturn str.replace(/[<>\"'\\&]/g, (m) => {\n\t\tswitch (m) {\n\t\t\tcase '<': return '<'\n\t\t\tcase '>': return '>'\n\t\t\tcase '\"': return '"'\n\t\t\tcase \"'\": return '''\n\t\t\tcase '&': return '&'\n\t\t}\n\t})\n}\n\n/**\n * Decodes HTML entities in a string using the following rules:\n * \n * - & becomes &\n * - " becomes \"\n * - ' becomes '\n * - < becomes <\n * - > becomes >\n * \n * It is different than dom.decodeHTML, which decodes all characters using the browser's DOMParser. This function only decodes the characters listed above and should be used when DOMParser is not available.\n * @see {@link module:dom.decodeHTML}\n * \n * @param {string} str - The string to decode\n * @returns {string} The decoded string\n * @example\n * htmlDecode('<a href="#">Link</a>') //
Link \n */\nexport function decodeHtmlEntities(str) {\n\treturn str.replace(/<|>|"|'|&/g, (m) => {\n\t\tswitch (m) {\n\t\t\tcase '<': return '<'\n\t\t\tcase '>': return '>'\n\t\t\tcase '"': return '\"'\n\t\t\tcase ''': return \"'\"\n\t\t\tcase '&': return '&'\n\t\t}\n\t})\n}\n\n\n/**\n * Parses a string of url parameters into an object of key value pairs\n * \n * @param {string} paramString - The string to parse without ? or # and with & as separator\n * @param {boolean} [decode=true] - Whether to decode the values or not\n * @returns {object} of key value pairs\n * @example\n * parseUrlParams('foo=true&baz=555') // { foo: true, baz: 555 }\n * parseUrlParams('foo=bar&baz=qux', false) // { foo: 'true', baz: '555' }\n * parseUrlParams('foo&bar&baz=qux') // { foo: undefined, bar: undefined, baz: 'qux' }\n */\nexport function parseUrlParameters(paramString, decode = true) {\n const res = {}\n\n const paramParts = paramString.split('&')\n paramParts.forEach((part) => {\n const m = part.match(RE_URL_PARAMETER)\n\t\tif (!m) return\n const key = m[1]\n const value = m[2]\n res[key] = value !== undefined && decode ? stringToType(decodeURIComponent(value)) : stringToType(value)\n\t\tRE_URL_PARAMETER.lastIndex = 0\n })\n\n return res\n}\n\n/**\n * Serialize an object of key value pairs into a string of url parameters\n * \n * @param {object} obj - The object to serialize\n * @param {boolean} [encode=true] - Whether to encode the values or not\n * @returns {string} of url parameters\n * @example\n * serializeUrlParams({ foo: true, baz: 555 }) // foo=true&baz=555\n * serializeUrlParams({ bar: undefined, baz: 'qux' }, false) // bar=&baz=qux\n */\nexport function serializeUrlParameters(obj, encode = true) {\n\tconst res = []\n\n\tObject.keys(obj).forEach((key) => {\n\t\tconst value = obj[key]\n\t\tif (value === undefined) return res.push(key)\n\t\tconst encodedValue = encode ? encodeURIComponent(value) : value\n\t\tres.push(`${key}=${encodedValue}`)\n\t})\n\n\treturn res.join('&')\n}\n\n/**\n * Parses a resolution string into a number. Resolution string is in the format of 'width:height', e.g. '16:9' \n * \n * @param {string} res Resolution string. Format is 'width:height', e.g. '16:9', or 'widthxheight', e.g. '16x9', or 'width-height', e.g. '16-9', or 'width/height', e.g. '16/9'\n * @returns number\n * @example\n * parseResolutionString('16:9') // => 1.7777777778\n * parseResolutionString('4:3') // => 1.3333333333\n * parseResolutionString('4x3') // => 1.3333333333\n * parseResolutionString('4-3') // => 1.3333333333\n */\nexport function parseResolutionString(res) {\n const DEFAULT_RESOLUTION = 1.7777777778 // 16:9\n if (!res || !res.length || /16[\\:x\\-\\/]{1}9/i.test(res)) return DEFAULT_RESOLUTION\n const pts = res.split(/\\s?[\\:x\\-\\/]{1}\\s?/i)\n if (pts.length < 2) return DEFAULT_RESOLUTION\n\n const w = parseInt(pts[0])\n const h = parseInt(pts[1])\n\n if (w === 0 || h === 0) return DEFAULT_RESOLUTION\n if (isNaN(w) || isNaN(h)) return DEFAULT_RESOLUTION\n\n return w/h;\n}\n", "/** @module dom */\n\nimport { transformDashToCamelCase, isArray, isString } from './helpers.mjs'\nimport { encodeHtmlEntities, decodeHtmlEntities } from './parsers.mjs'\n\n/**\n * Checks if an element is empty\n * \n * @param {HTMLElement} element \n * @returns boolean\n * @example\n * document.body.innerHTML = `\n *
\n *
foo
\n *
`\n * \n * isEmptyElement(document.getElementById('empty-element')) // => true\n * isEmptyElement(document.getElementById('non-empty-element1')) // => false\n * isEmptyElement(document.getElementById('non-empty-element2')) // => false\n */\nexport function isEmptyElement(element) {\n return element.innerHTML.trim() === ''\n}\n\n/**\n * Removes all elements matching a selector from the DOM\n * \n * @param {string|HTMLElement|Element} selector The selector to select elements to remove\n * @param {HTMLElement|Element} [from=document] The element to remove elements from\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * `\n * remove('#foo, #bar') // => removes #foo and #bar\n */\nexport function remove(selector, from = document) {\n const elements = query(selector, from)\n for (const element of elements) {\n element.remove()\n }\n}\n\n/**\n * Queries the DOM for a single element and returns it. Substitutes for `document.querySelector(selector)` and JQuery's `$(selector).first()`\n * \n * @param {string|HTMLElement|Element|Array
|NodeList} selector The selector to select an element\n * @param {HTMLElement|Element} [from=document] The element to query from\n * @returns {HTMLElement|Element}\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * querySingle('#foo') // =>
\n * querySingle(document.getElementById('foo')) // =>
\n * querySingle(document.querySelector('#foo')) // =>
\n */\nexport function querySingle(selector, from = document) {\n if (selector instanceof Element) return selector\n return from.querySelector(selector)\n}\n\n/**\n * Queries the DOM for elements and returns them. Substitutes for `document.querySelectorAll(selector)` and JQuery's `$(selector)`\n * \n * @param {string|HTMLElement|Element|Array|NodeList} selector The selector to select elements\n * @param {HTMLElement|Element} [from=document] The element to query from\n * @returns {Array|NodeList}\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * query('#foo') // => [
]\n * query(document.getElementById('foo')) // => [
]\n * query('div') // => [
,
,
]\n */\nexport function query(selector, from = document) {\n if (selector instanceof Array || selector instanceof NodeList) return selector\n if (selector instanceof Element) return [selector]\n if (from instanceof Element || from instanceof Document) return from.querySelectorAll(selector)\n if (isString(from)) from = query(from)\n if (!from instanceof Array && !from instanceof NodeList) return []\n const res = []\n for (const element of from) {\n res.push(...element.querySelectorAll(selector))\n }\n return res\n}\n\n/**\n * Sets element styles from passed object of styles. Can also transform dash-case to camelCase for CSS properties\n * \n * @param {HTMLElement} element The element to set styles on\n * @param {object} styles The object of styles to set\n * @param {boolean} transform Whether to transform dash-case to camelCase for CSS properties\n * @example\n * css(document.getElementById('foo'), { 'background-color': 'red', 'font-size': '16px' }, true) // => sets background-color and font-size\n * css(document.getElementById('foo'), { backgroundColor: 'red', fontSize: '16px' }) // => sets background-color and font-size\n */\nexport function css(element, styles, transform = false) {\n if (!element || !styles) return\n for (let property in styles) {\n if (transform) property = transformDashToCamelCase(property)\n element.style[property] = styles[property]\n }\n}\n\n/**\n * Decodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to decode the basic entities.\n * \n * @see {@link module:parsers.decodeHtmlEntities}\n * \n * @param {string} html The HTML string to decode\n * @returns {string} The decoded HTML string\n * @example\n * decodeHTML('<div>foo</div>') // => 'foo
'\n * decodeHTML('<div>foo</div><div>bar</div>') // => 'foo
bar
'\n */\nexport function decodeHTML(html) {\n if (typeof document === 'undefined') return decodeHtmlEntities(html)\n const txt = document.createElement('textarea')\n txt.innerHTML = html\n const res = txt.value\n txt.remove()\n return res\n}\n\n/**\n * Encodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to encode the basic entities.\n * \n * @see {@link module:parsers.encodeHtmlEntities}\n * \n * @param {string} html The HTML string to encode\n * @returns {string} The encoded HTML string\n * @example\n * encodeHTML('foo
') // => '<div>foo</div>'\n * encodeHTML('foo
bar
') // => '<div>foo</div><div>bar</div>'\n */\nexport function encodeHTML(html) {\n if (typeof document === 'undefined') return encodeHtmlEntities(html)\n const txt = document.createElement('textarea')\n txt.textContent = html\n const res = txt.innerHTML\n txt.remove()\n return res\n}\n\n/**\n * Inserts an element before another element\n * \n * @param {HTMLElement} targetElement The element to insert before\n * @param {HTMLElement} newElement The element to insert\n * @example\n * const target = document.getElementById('target')\n * const newElement = document.createElement('div')\n * newElement.id = 'newElement'\n * insertBeforeElement(target, newElement)\n * //
\n * //
\n */\nexport function insertBeforeElement(targetElement, newElement) {\n if (!targetElement || !newElement) return\n targetElement.parentNode.insertBefore(newElement, targetElement);\n}\n\n/**\n * Toggles an attribute value on an element\n * \n * @param {HTMLElement} element The element to toggle the attribute on\n * @param {string} attribute The attribute to toggle\n * @param {string} on Default: 'true'\n * @param {string} off Default: 'false'\n * @example\n * toggleAttributeValue(element, 'aria-expanded', 'true', 'false')\n * toggleAttributeValue(element, 'aria-expanded')\n */\nexport function toggleAttributeValue(element, attribute, on = 'true', off = 'false') {\n if (!element.hasAttribute(attribute)) return\n\n if (element.getAttribute(attribute) === on) {\n element.setAttribute(attribute, off)\n } else {\n element.setAttribute(attribute, on)\n }\n}\n\n/**\n * Converts a duration string to milliseconds integer\n * \n * @param {string} duration The duration string to convert, e.g. '1s', '100ms', '0.5s'\n * @returns {number} The duration in milliseconds\n * @example\n * convertToMilliseconds('1s') // 1000\n * convertToMilliseconds('100ms') // 100\n * convertToMilliseconds('0.5s') // 500\n * convertToMilliseconds('0.5') // 0\n * convertToMilliseconds('foo') // 0\n */\nexport function cssTimeToMilliseconds(duration) {\n const regExp = new RegExp('([0-9.]+)([a-z]+)', 'i')\n const matches = regExp.exec(duration)\n if (!matches) return 0\n \n const unit = matches[2]\n switch (unit) {\n case 'ms':\n return parseFloat(matches[1])\n case 's':\n return parseFloat(matches[1]) * 1000\n default:\n return 0\n }\n}\n\n/**\n * Returns a map of transition properties and durations\n * \n * @param {HTMLElement} element The element to get the transition properties and durations from\n * @returns {object} A map of transition properties and durations\n * @example\n * getTransitionDurations(element) // { height: 1000 } if transition in CSS is set to 'height 1s'\n * getTransitionDurations(element) // { height: 500, opacity: 1000 } if transition in CSS is set to 'height 0.5s, opacity 1s'\n */\nexport function getTransitionDurations(element) {\n if (!element) {}\n const styles = getComputedStyle(element)\n const transitionProperties = styles.getPropertyValue('transition-property').split(',')\n const transitionDurations = styles.getPropertyValue('transition-duration').split(',')\n \n const map = {}\n \n for (let i = 0; i < transitionProperties.length; i++) {\n const property = transitionProperties[i].trim()\n map[property] = transitionDurations.hasOwnProperty(i) ? cssTimeToMilliseconds(transitionDurations[i].trim()) : null\n }\n \n return map\n}\n\n/**\n * Check a list of elements if any of them matches a selector\n * \n * @param {Array|NodeList|HTMLElement} elements The elements to check\n * @param {string} selector The selector to check\n * @returns {boolean} True if any of the elements matches the selector, false otherwise\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * matchesAny(document.querySelectorAll('div'), '#foo') // => true\n * matchesAny(document.querySelectorAll('div'), '#qux') // => false\n */\nexport function matchesAny(elements, selector) {\n if (!elements || !selector || !elements.length) return false\n if (elements instanceof Element) elements = [elements]\n if (isString(elements)) elements = query(elements)\n for (const element of elements) {\n if (element.matches(selector)) return true\n }\n return false\n}\n\n/**\n * Check a list of elements if all of them matches a selector\n * \n * @param {Array|NodeList|HTMLElement} elements The elements to check\n * @param {string} selector The selector to check\n * @returns {boolean} True if all of the elements matches the selector, false otherwise\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * matchesAll(document.querySelectorAll('div'), 'div') // => true\n * matchesAll(document.querySelectorAll('div'), '#foo') // => false\n */\nexport function matchesAll(elements, selector) {\n if (!elements || !selector || !elements.length) return false\n if (elements instanceof Element) elements = [elements]\n if (isString(elements)) elements = query(elements)\n for (const element of elements) {\n if (!element.matches(selector)) return false\n }\n return true\n}\n\n\n/**\n * Detaches an element from the DOM and returns it\n * \n * @param {HTMLElement} element The element to detach\n * @example\n * detachElement(element)\n * // => element\n * console.log(element.parentNode) // => null\n */\nexport function detachElement(element) {\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n }\n return element\n}\n\n/**\n * Gets table data from a table element, a simple regular table element, or a table like structure.\n * Useful for scraping data.\n * \n * @param {string} selector The selector to select the table element\n * @param {Array|string|null} headers The headers to use for the data. If 'auto' is passed, the row containing th or the first row will be used as headers\n * @param {string} [rowSelector='tr'] The selector to select the rows\n * @param {string} [cellSelector='td'] The selector to select the cells\n * @returns {Array} An array of objects with the properties as keys and the cell values as values\n * @example\n * document.body.innerHTML = `\n * \n * \n * \n * Foo \n * Bar \n * \n * \n * \n * \n * Foo 1 \n * Bar 1 \n * \n * \n * Foo 2 \n * Bar 2 \n * \n * \n *
`\n * \n * getTableData('#table', ['foo', 'bar'])\n * // => [\n * // { foo: 'Foo 1', bar: 'Bar 1' },\n * // { foo: 'Foo 2', bar: 'Bar 2' }\n * // ]\n */\nexport function getTableData(selector, headers, rowSelector = 'tr', cellSelector = 'td', headerCellSelector = 'th') {\n const table = typeof selector === 'string' ? document.querySelector(selector) : selector\n const res = []\n const rows = table.querySelectorAll(rowSelector)\n let start = 0\n\n function iterateHeaders(arr) {\n if (!arr || !arr.length) return\n const res = []\n for (let i = 0; i < arr.length; i++) {\n res.push(arr[i].textContent.trim())\n }\n return res\n }\n\n if (headers && isString(headers) && headers === 'auto') {\n let headerCells = table.querySelectorAll(headerCellSelector)\n \n if (headerCells && headerCells.length) {\n headers = iterateHeaders(headerCells)\n } else {\n headers = iterateHeaders(rows[0].querySelectorAll(cellSelector))\n start = 1\n }\n }\n\n for (let i = start; i < rows.length; i++) {\n const row = rows[i]\n const cells = row.querySelectorAll(cellSelector)\n if (!cells || !cells.length) continue\n\n let rowData = []\n if (headers && isArray(headers) && headers.length) {\n rowData = {}\n for (let j = 0; j < headers.length; j++) {\n rowData[headers[j]] = cells[j] ? cells[j].textContent.trim() : null\n }\n } else {\n for (let j = 0; j < cells.length; j++) {\n rowData.push(cells[j].textContent.trim())\n }\n }\n res.push(rowData)\n }\n return res\n}\n\n/**\n * Parses HTML string to a DOM Node\n * \n * @param {string} html The HTML string to parse\n * @param {boolean} [allChildren=false] If true, all children of the body will be returned, otherwise only the first child\n * @returns {Node} The parsed DOM Node\n * @example\n * parseDOM('foo
') // => foo
\n * parseDOM('foo
bar
', true) // => NodeList(2)\u00A0[div, div]\n * parseDOM(document.getElementById('foo')) // =>
\n * parseDOM(document.querySelectorAll('div')) // => NodeList(2)\u00A0[div, div]\n */\nexport function parseDOM(html, allChildren) {\n if (html instanceof Element || html instanceof NodeList) return html\n const parser = new DOMParser()\n const doc = parser.parseFromString(html, 'text/html')\n return !allChildren ? doc.body.firstChild : doc.body.childNodes\n}\n\n/**\n * Loads an image form a provided source url and calls a callback when it's loaded\n * \n * @param {string} src The source url of the image\n * @param {Function} [callback] The callback to call when the image is loaded\n * @example\n * loadImage('https://example.com/image.png', () => {\n * console.log('Image loaded')\n * })\n */\nexport function loadImage(src, callback) {\n const img = new Image()\n if (callback)\n img.addEventListener('load', callback, false);\n img.src = src\n}\n\n/**\n * Delegate DOM events using MutationObserver with a fallback to document.addEventListener\n * \n * @param {string} selector The selector to select the elements to delegate the event to\n * @param {string} eventType The event type to delegate, like `click`\n * @param {Function} handler The handler to call when the event is triggered.\n * @returns {MutationObserver | null} The MutationObserver instance\n * @example\n * delegateEvent('.foo', 'click', (e, target) => {\n * console.log('Clicked on', target)\n * })\n */\nexport function delegateEvent(selector, eventType, handler) {\n if (typeof MutationObserver === 'undefined') {\n document.addEventListener(eventType, (e) => {\n const target = e.target.closest(selector)\n if (target) handler(e, target)\n })\n\n return null\n }\n\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (!(node instanceof HTMLElement)) continue\n if (!node.matches(selector)) continue\n node.addEventListener(eventType, (e) => {\n handler(e, e.currentTarget)\n })\n }\n }\n })\n\n for (const node of document.querySelectorAll(selector)) {\n node.addEventListener(eventType, (e) => {\n handler(e, e.currentTarget)\n })\n }\n\n observer.observe(document.body, { childList: true, subtree: true })\n return observer\n}\n\n/**\n * Run a handler on selected elements and on elements added to the DOM with the same selector, \n * or can be delegateEvent alias.\n * \n * @param {string} selector The selector to select the elements to run the handler on\n * @param {string | Function} eventTypeOrHandler The event type to delegate, like `click`, or the handler to call on every element\n * @param {Function} [handler] The handler to call when the event is triggered.\n * @returns {MutationObserver | null} The MutationObserver instance\n * @see delegateEvent\n * @example\n * on('.foo', (el) => {\n * console.log('Element', el, 'added to the DOM')\n * })\n * \n * on('.foo', 'click', (e, target) => {\n * console.log('Clicked on', target)\n * })\n */\nexport function on(selector, eventTypeOrHandler, handler) {\n if (isString(eventTypeOrHandler)) {\n return delegateEvent(selector, eventTypeOrHandler, handler)\n }\n\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (!(node instanceof HTMLElement)) continue\n if (!node.matches(selector)) continue\n eventTypeOrHandler(node)\n }\n }\n })\n\n for (const node of document.querySelectorAll(selector)) {\n eventTypeOrHandler(node)\n }\n\n observer.observe(document.body, { childList: true, subtree: true })\n\n return observer\n}\n\n/**\n * Adds one listener to multiple events\n * \n * @param {string|HTMLElement|NodeList} elements The elements or a selector for elements to add the event listeners to\n * @param {string|Array} events The event types to add the event listeners for, like `click mouseenter`\n * @param {Function} handler The handler to call when the event is triggered.\n * @param {object} [options] The options to pass to the event listeners\n * @example\n * addListenerForEvents('.foo', 'click mouseenter', (e) => { console.log(e.type) })\n */\nexport function addListenerForEvents(elements, events, handler, options) {\n if (elements instanceof Element) elements = [elements]\n if (typeof elements === 'string') elements = query(elements)\n\n const eventTypes = isArray(events) ? events : events.split(' ')\n for (const element of elements) {\n for (const eventType of eventTypes) {\n element.addEventListener(eventType, handler, options)\n }\n }\n}\n\n/**\n * Removes one listener from multiple registered events\n * \n * @param {string|HTMLElement|NodeList} elements The elements or a selector for elements to remove the event listeners from\n * @param {string|Array} events The event types to remove the event listeners for, like `click mouseenter`\n * @param {Function} handler The handler to remove\n * @param {object} [options] The options to pass to the event listeners\n * @example\n * removeListenerForEvents('.foo', 'click mouseenter', (e) => { console.log(e.type) })\n */\nexport function removeListenerForEvents(elements, events, handler, options) {\n if (elements instanceof Element) elements = [elements]\n if (typeof elements === 'string') elements = query(elements)\n\n const eventTypes = isArray(events) ? events : events.split(' ')\n for (const element of elements) {\n for (const eventType of eventTypes) {\n element.removeEventListener(eventType, handler, options)\n }\n }\n}\n\n/**\n * Resizes an element to cover its parent element while maintaining the aspect ratio\n * \n * @param {string|HTMLElement|NodeList} elements The elements or a selector for elements to resize\n * @param {number} [ratio=1] The ratio to maintain\n * @param {number} [offset=0] An offset to add to the parent element's width and height\n * @example\n * proportionalParentCoverResize('.foo', 16/9, 10)\n */\nexport function proportionalParentCoverResize(elements, ratio = 1, offset = 0) {\n if (elements instanceof Element) elements = [elements]\n if (typeof elements === 'string') elements = query(elements)\n\n for (const element of elements) {\n const h = element.parentNode.offsetHeight + offset\n const w = element.parentNode.offsetWidth + offset\n\n if (ratio > w/h) {\n element.style.width = h*ratio + 'px'\n element.style.height = h + 'px'\n } else {\n element.style.width = w + 'px'\n element.style.height = w/ratio + 'px'\n }\n }\n}\n\n/**\n * If provided element is visible. Checks if the element is not visibility hidden or display none, has no opacity, and has a width and height.\n * \n * @param {HTMLElement} element The element to check\n * @returns {boolean} True if the element is visible, false otherwise\n * \n * @example\n * isVisible(document.getElementById('foo'))\n */\nexport function isVisible(element) {\n if (!element) return false;\n const computedStyle = getComputedStyle(element);\n if (computedStyle.getPropertyValue('display') === 'none') return false;\n if (element.getAttribute('hidden') !== null || computedStyle.getPropertyValue('visibility') === 'hidden' || computedStyle.getPropertyValue('opacity') == \"0\") return false;\n return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)\n}\n\n/**\n * Swipe event handler\n * \n * @param {HTMLElement} element The element to listen for swipe gestures on\n * @param {Function} callback The callback to call when a swipe gesture is detected\n * @param {number} [threshold=150] The threshold in pixels to trigger the callback.\n * @param {number} [timeThreshold=0] The threshold in milliseconds to trigger the callback. Defaults to 0, which means the callback will be called regardless of the time it took to swipe.\n * @event swipestart Fires when a swipe gesture starts\n * @event swipeend Fires when a swipe gesture ends\n * @event swipe Fires when a swipe gesture is detected based on the thresholds\n * @example\n * onSwipe(document.getElementById('foo'), (e) => {\n * console.log(e.direction)\n * console.log(e.deltaX)\n * console.log(e.deltaY)\n * console.log(e.startX)\n * console.log(e.startY)\n * console.log(e.endX)\n * console.log(e.endY)\n * console.log(e.threshold)\n * console.log(e.type)\n * console.log(e.target)\n * console.log(e.horizontal)\n * console.log(e.vertical)\n * console.log(e.horizontalDirection)\n * console.log(e.verticalDirection)\n * console.log(e.timeElapsed)\n * console.log(e.timeThreshold)\n * })\n */\nexport function onSwipe(element, callback, threshold = 150, timeThreshold = 0) {\n let startX = 0\n let startY = 0\n let endX = 0\n let endY = 0\n let startTime = 0\n let endTime = 0\n\n if (!element) return\n if (element.getAttribute('swipe-enabled') === 'true') return\n element.setAttribute('swipe-enabled', 'true')\n\n const handleStart = function(e) {\n const carrier = e.touches ? e.touches[0] : e\n startX = carrier.clientX\n startY = carrier.clientY\n startTime = Date.now();\n element.dispatchEvent(new CustomEvent('swipestart', { detail: { startX, startY, startTime } }))\n }\n\n const handleEnd = function(e) {\n const carrier = e.changedTouches ? e.changedTouches[0] : e\n endX = carrier.clientX\n endY = carrier.clientY\n endTime = Date.now();\n handleSwipeGesture()\n element.dispatchEvent(new CustomEvent('swipeend', { detail: { startX, startY, startTime, endX, endY, endTime } }))\n }\n\n const handleSwipeGesture = function() {\n const deltaX = Math.abs(endX - startX)\n const deltaY = Math.abs(endY - startY)\n const horizontal = deltaX > threshold\n const vertical = deltaY > threshold\n const left = endX < startX\n const up = endY < startY\n const direction = []\n const timeElapsed = endTime - startTime;\n \n if (horizontal) direction.push(left ? 'left' : 'right')\n if (vertical) direction.push(up ? 'up' : 'down')\n\n let condition = direction.length && callback\n if (timeThreshold) condition = condition && timeElapsed <= timeThreshold\n \n if (condition) {\n const res = {\n target: element,\n deltaX: deltaX,\n deltaY: deltaY,\n startX: startX,\n startY: startY,\n endX: endX,\n endY: endY,\n threshold: threshold,\n horizontal: horizontal,\n vertical: vertical,\n horizontalDirection: left ? 'left' : 'right',\n verticalDirection: up ? 'up' : 'down',\n direction: direction.length === 1 ? direction[0] : direction,\n timeElapsed: timeElapsed,\n timeThreshold: timeThreshold\n }\n\n callback(res)\n delete res.target\n element.dispatchEvent(new CustomEvent('swipe', { detail: res })) \n }\n }\n\n element.addEventListener('touchstart', handleStart)\n element.addEventListener('touchend', handleEnd)\n element.addEventListener('mousedown', handleStart)\n element.addEventListener('mouseup', handleEnd)\n\n return {\n destroy: function() {\n element.removeEventListener('touchstart', handleStart)\n element.removeEventListener('touchend', handleEnd)\n element.removeEventListener('mousedown', handleStart)\n element.removeEventListener('mouseup', handleEnd)\n }\n }\n}\n", "/** @module browser */\n\nimport { isEmpty, isFunction } from './helpers.mjs'\nimport { css } from './dom.mjs'\nimport { parseUrlParameters } from './parsers.mjs'\n\nexport function isUserAgentIOS(str) {\n return /iPad|iPhone|iPod/i.test(str)\n}\n\nexport function isUserAgentMobile(str) {\n return /\\b(BlackBerry|webOS|iPhone|IEMobile)\\b/i.test(str) ||\n /\\b(Android|Windows Phone|iPad|iPod)\\b/i.test(str)\n}\n\nexport function isUserAgentSafari(str) {\n return /^((?!chrome|android|crios|fxios).)*safari/i.test(str)\n}\n\n/**\n * Check if the device is an iOS device\n * \n * @returns boolean True if the device is an iOS device, false otherwise\n */\nexport function isIOS() {\n return isUserAgentIOS(navigator.userAgent) && 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 1\n}\n\n/**\n * Check if the device is a mobile device\n * \n * @returns boolean True if the device is a mobile device, false otherwise\n */\nexport function isMobile() {\n if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints > 0\n\n if ('matchMedia' in window) return !!matchMedia('(pointer:coarse)').matches\n\n if ('orientation' in window) return true\n\n return isUserAgentMobile(navigator.userAgent)\n}\n\n/**\n * Check if the browser is Safari\n *\n * @returns boolean True if the browser is Safari, false otherwise\n */\nexport function isSafari() {\n if (navigator.hasOwnProperty('vendor')) /apple/i.test(navigator.vendor)\n return isUserAgentSafari(navigator.userAgent)\n}\n\n/**\n * Check if the browser is Safari on iOS\n * \n * @returns boolean True if the browser is Safari on iOS, false otherwise\n */\nexport function isIOSSafari() {\n return isIOS() && isSafari()\n}\n\n/**\n * A wrapper for the matchMedia function, cause with `matchMedia` you can only either add a listener or check the media query\n * this function does both.\n * \n * @param {string} query The media query to check\n * @param {function} [callback] The callback function to call when the media query changes\n * @returns {boolean} The result of the media query\n * \n * @example\n * mediaMatcher('(min-width: 768px)', (matches) => {\n * if (matches) {\n * // Do something\n * } else {\n * // Do something else\n * }\n * })\n * \n * // Or\n * \n * const isDesktop = mediaMatcher('(min-width: 768px)')\n */\nexport function mediaMatcher(query, callback) {\n if (isFunction(callback)) {\n matchMedia(query).addEventListener('change', (e) => {\n callback(e.matches)\n })\n\n const mql = matchMedia(query)\n callback(mql.matches)\n\n return mql.matches\n }\n\n return matchMedia(query).matches\n}\n\n/**\n * Get the scrollbar width\n * \n * When preventing scroll with html overflow hidden the scroll bar will disappear and the whole page will shift (if the scroll bar is visible that is).\n * To substitute for the scrollbar width we can add a padding to the body element.\n * \n * @returns {number} The scrollbar width\n * \n * @example\n * const scrollbarWidth = getScrollbarWidth() // 15 (on MacOS X Safari)\n */\nexport function getScrollbarWidth() {\n const scrollDiv = document.createElement('div')\n \n css(scrollDiv, {\n width: '100px',\n height: '100px',\n position: 'absolute',\n left: '-9999px',\n zIndex: '0',\n overflowX: 'hidden',\n overflowY: 'scroll'\n })\n\n document.body.appendChild(scrollDiv)\n const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth\n document.body.removeChild(scrollDiv)\n return scrollbarWidth\n}\n\n/**\n * Check if the vertical scrollbar is visible\n * \n * @param {number} [scrollbarWidth] The width of the scrollbar, defaults to getScrollbarWidth()\n * @returns {boolean} True if the vertical scrollbar is visible, false otherwise\n */\nexport function hasVerticalScrollbarVisible(scrollbarWidth) {\n if (scrollbarWidth === undefined) scrollbarWidth = getScrollbarWidth()\n return window.innerHeight < document.body.scrollHeight && scrollbarWidth > 0\n}\n\n/**\n * Check if the horizontal scrollbar is visible\n * \n * @param {number} [scrollbarWidth] The width of the scrollbar, defaults to getScrollbarWidth()\n * @returns {boolean} True if the horizontal scrollbar is visible, false otherwise\n */\nexport function hasHorizontalScrollbarVisible(scrollbarWidth) {\n if (scrollbarWidth === undefined) scrollbarWidth = getScrollbarWidth()\n return window.innerWidth < document.body.scrollWidth && scrollbarWidth > 0\n}\n\n/**\n * Disable the scroll on the page.\n * \n * @param {number} [shift=0] If greater than 0 the body will be shifted to the left by the width of the scrollbar, getScrollbarWidth() is used to provide this value \n */\nexport function disableScroll(shift) {\n const body = document.body\n if (shift && hasVerticalScrollbarVisible(shift)) body.style.paddingRight = `${shift}px`\n body.style.overflow = 'hidden'\n}\n\n/**\n * Enable the scroll on the page.\n * \n * @param {boolean} [shift=0] If greater than 0 the body will be shifted back to the left by the width of the scrollbar, getScrollbarWidth() is used to provide this value\n */\nexport function enableScroll(shift) {\n const body = document.body\n body.style.overflow = ''\n if (shift) body.style.paddingRight = ''\n}\n\n/**\n * Parses a string of url query parameters into an object of key value pairs. Converts the values to the correct type.\n * \n * @param {string} [entryQuery] - Optional query string to parse, without the starting ?, defaults to window.location.search without the starting ?\n * @returns {object} of key value pairs\n * @example\n * // url: https://example.com/?test&foo=bar&baz=qux\n * getQueryProperties() // { test: undefined, foo: 'bar', baz: 'qux' }\n */\nexport function getQueryProperties(entryQuery) {\n const query = entryQuery ? entryQuery : window.location.search.replace('?', '')\n if (isEmpty(query)) return {}\n\n return parseUrlParameters(query)\n}\n\n/**\n * Parses a string of url hash parameters into an object of key value pairs. Converts the values to the correct type.\n * \n * @param {string} [entryHash] - Optional hash string to parse, without the starting #, defaults to window.location.hash without the starting #\n * @returns {object} of key value pairs\n * @example\n * // url: https://example.com/#test&foo=bar&baz=qux\n * getHashProperties() // { test: undefined, foo: 'bar', baz: 'qux' }\n */\nexport function getHashProperties(entryHash) {\n const hash = entryHash ? entryHash : window.location.hash.replace('#', '')\n if (isEmpty(hash)) return {}\n\n return parseUrlParameters(hash)\n}\n\nfunction onHashChange(callback) {\n const hash = window.location.hash.replace('#', '')\n if (!isEmpty(hash)) callback(hash)\n}\n\n/**\n * Add a callback function to the hash change event\n * \n * @param {function} callback - The callback function to call when the hash changes\n * @param {string} [single] - Optional string to make sure the listener is initialized only once, defaults to window[single] which is set to true after the first call\n * @example\n * hashChange((hash) => {\n * // Do something with the hash\n * })\n */\nexport function hashChange(callback, single) {\n onHashChange(callback)\n \n if (single && window[single]) return\n if (single) window[single] = true\n \n window.addEventListener('hashchange', () => {\n onHashChange(callback)\n })\n}\n", "import { generateActionButton } from './buttons.js';\nimport { isArray, stringToType, isMobile, parseResolutionString, proportionalParentCoverResize, percentage, fixed } from 'book-of-spells';\n\nexport class SuperVideoBackground {\n constructor(elem, params, id, uid, type, factoryInstance) {\n if (!id) return;\n this.is_mobile = isMobile();\n this.type = type;\n this.id = id;\n this.factoryInstance = factoryInstance;\n\n this.element = elem;\n this.playerElement = null;\n this.uid = uid;\n this.element.setAttribute('data-vbg-uid', uid);\n\n this.buttons = {};\n this.isIntersecting = false;\n\n this.paused = false; // user requested pause. used for blocking intersection softPlay\n this.muted = false;\n this.currentState = 'notstarted';\n\n this.initialPlay = false;\n this.initialVolume = false;\n\n this.volume = 1;\n\n this.params = {};\n\n const DEFAULTS = {\n 'pause': false, //deprecated\n 'play-button': false,\n 'mute-button': false,\n 'autoplay': true,\n 'muted': true,\n 'loop': true,\n 'mobile': true,\n 'load-background': false,\n 'resolution': '16:9',\n 'inline-styles': true,\n 'fit-box': false,\n 'offset': 100, // since showinfo is deprecated and ignored after September 25, 2018. we add +100 to hide it in the overflow\n 'start-at': 0,\n 'end-at': 0,\n 'poster': null,\n 'always-play': false,\n 'volume': 1,\n 'no-cookie': true,\n 'force-on-low-battery': false,\n 'lazyloading': false\n };\n\n this.params = this.parseProperties(params, DEFAULTS, this.element, ['data-ytbg-', 'data-vbg-']);\n\n //pause deprecated\n if (this.params.pause) {\n this.params['play-button'] = this.params.pause;\n }\n\n this.params.resolution_mod = parseResolutionString(this.params.resolution);\n\n this.muted = this.params.muted;\n\n this.volume = this.params.volume;\n\n this.currentTime = this.params['start-at'] || 0;\n this.duration = this.params['end-at'] || 0;\n this.percentComplete = 0;\n if (this.params['start-at']) this.percentComplete = this.timeToPercentage(this.params['start-at']);\n\n this.buildWrapperHTML();\n\n if (this.is_mobile && !this.params.mobile) return;\n\n if (this.params['play-button']) {\n generateActionButton(this, {\n name: 'playing',\n className: 'play-toggle',\n innerHtml: 'foo ') // => 'foo'\n * stripHTMLTags('foo bar ') // => 'foo bar'\n */\nexport function stripHTMLTags(inputString) {\n return inputString.replace(/<[^>]*>/g, '')\n}\n\n/**\n * Slugify a string, e.g. 'Foo Bar' => 'foo-bar'. Similar to WordPress' sanitize_title(). Will remove accents and HTML tags.\n * \n * @param {string} str \n * @returns string\n * @example\n * slugify('Foo Bar') // => 'foo-bar'\n * slugify('Foo Bar baz ') // => 'foo-bar-baz'\n */\nexport function slugify(str) {\n str = str.trim().toLowerCase()\n str = removeAccents(str)\n str = stripHTMLTags(str)\n return str.replace(/\\s+|\\.+|\\/+|\\\\+|\u2014+|\u2013+/g, '-').replace(/[^\\w0-9\\-]+/g, '').replace(/-{2,}/g, '-').replace(/^-|-$/g, '')\n}\n\n/**\n * Check if object has multiple properties\n * \n * @param {object} obj\n * @param {string|array} properties\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: 'qux' }\n * hasOwnProperties(obj, ['foo', 'baz']) // => true\n * hasOwnProperties(obj, ['foo', 'baz', 'qux']) // => false\n */\nexport function hasOwnProperties(obj, properties) {\n if(!isArray(properties)) properties = [properties]\n for (let i = 0; i < properties.length; i++) {\n if (!obj.hasOwnProperty(properties[i])) return false\n }\n return true\n}\n\n/**\n * Finds the closest number to the set goal in an array to a given number\n * \n * @param {number} goal Number to search for\n * @param {array} arr Array of numbers to search in\n * @returns number\n * @example\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9]) // => 9\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 11]) // => 9\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 9.5]) // => 9.5\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11) // => 10\n */\nexport function closestNumber(goal, arr) {\n return arr.reduce(function(prev, curr) {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev\n })\n}\n\n/**\n * Truncate a string to a given number of words\n * \n * @param {string} str String to truncate\n * @param {number} numWords Number of words to truncate to\n * @param {string} ellipsis Ellipsis to append to the end of the string\n * @returns string\n * @example\n * truncateString('foo bar baz', 2) // => 'foo bar\u2026'\n * truncateString('foo bar baz', 2, '...') // => 'foo bar...'\n * truncateString('foo bar. baz', 2, '...') // => 'foo bar. ...'\n */\nexport function truncateString(str, numWords, ellipsis = '\u2026') {\n const words = str.trim().split(' ')\n if (words.length <= numWords) return str\n if (numWords <= 0) return ''\n if (/[.?!]$/.test(words[numWords - 1]) && ellipsis.trim() !== '') ellipsis = ` ${ellipsis}`\n return words.slice(0, numWords).join(' ') + ellipsis\n}\n\n/**\n * Generates a random integer between two values, inclusive of both\n * \n * @param {number} min Minimum value\n * @param {number} max Maximum value\n * @param {boolean} safe Defaults to false, if true will use a cryptographically secure random number generator\n * @returns number\n * @example\n * randomIntInclusive(1, 10) // => 1\n * randomIntInclusive(1, 10) // => 10\n * randomIntInclusive(1, 10) // => 5\n */\nexport function randomIntInclusive(min, max, safe = false) {\n min = Number(min)\n max = Number(max)\n if (isNaN(min) || isNaN(max)) throw new TypeError('Both min and max must be numbers')\n if (min > max) [min, max] = [max, min]\n if (min === max) return min\n min = Math.round(min)\n max = Math.round(max)\n const rand = safe ? random() : Math.random()\n return Math.floor(rand * (max - min + 1)) + min\n}\n\n/**\n * Gets fixed number of digits after the decimal point\n * \n * @param {number} number Number to fix\n * @param {number} digits Number of digits to fix to\n * @returns number\n * @example\n * fixed(1.234, 2) // => 1.23\n * fixed(1.235, 2) // => 1.24\n * fixed(1.234) // => 1\n * fixed(1.234, 0) // => 1\n * fixed(1.234, 5) // => 1.234\n * @note Gotta ask myself why I wrote this function in the first place... \uD83E\uDD14 It's just not useful in a lot of cases lol...\n */\nexport function fixed(number, digits) {\n if (!digits) return parseInt(number)\n return parseFloat(number.toFixed(digits))\n}\n\n/**\n * Calculates the percentage of a number in relation to another number\n * \n * @param {number} num Number to calculate percentage of\n * @param {number} total Total number\n * @returns number\n * @example\n * percentage(1, 10) // => 10\n * percentage(5, 10) // => 50\n * percentage(10, 10) // => 100\n * percentage(0, 10) // => 0\n * percentage(10, 2) // => 500\n */\nexport function percentage(num, total) {\n if (!num || !total || Number.isNaN(num) || Number.isNaN(total)) return 0\n return num / total * 100\n}\n\nexport function pickProperties(obj, props) {\n const res = {}\n if (!props) return res\n if (!isArray(props)) props = [props]\n for (let i = 0; i < props.length; i++) {\n if (obj.hasOwnProperty(props[i])) res[props[i]] = obj[props[i]]\n }\n return res\n}\n\nexport function rejectProperties(obj, props, clone = true) {\n if (clone) obj = { ...obj }\n if (!props) return obj\n if (!isArray(props)) props = [props]\n for (let i = 0; i < props.length; i++) {\n if (obj.hasOwnProperty(props[i])) delete obj[props[i]]\n }\n return obj\n}\n\nexport function pickArrayElements(arr, indexes) {\n if (!isArray(arr)) return\n if (!isArray(indexes)) indexes = [indexes]\n const res = []\n for (let i = 0; i < indexes.length; i++) {\n if (arr.hasOwnProperty(indexes[i])) res.push(arr[indexes[i]])\n }\n return res\n}\n\nexport function rejectArrayElements(arr, indexes, clone = true) {\n if (clone) arr = [...arr]\n if (!isArray(arr)) return\n if (!isArray(indexes)) indexes = [indexes]\n for (let i = indexes.length - 1; i >= 0; i--) {\n if (arr.hasOwnProperty(indexes[i])) arr.splice(indexes[i], 1)\n }\n return arr\n}\n\n/**\n * Pick properties from an object or elements from an array\n * \n * @param {array} obj Object or array to pick properties or elements from\n * @param {array | string | number} props Properties to remove, can be an array of strings or a single string or number\n * @returns object | array | undefined\n * @example\n * \n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }) // => {}\n * pick({}, []) // => {}\n * pick(null, 'foo') // => undefined\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, undefined) // => {}\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, 'foo') // => { foo: 'bar'}\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, ['foo', 'baz']) // => { foo: 'bar', baz: 'qux' }\n * \n * pick(['foo', 'bar', 'baz'], []) // => []\n * pick([], []) // => []\n * pick(null, 0) // => undefined\n * pick(['foo', 'bar', 'baz'], undefined) // => []\n * pick(['foo', 'bar', 'baz'], 0) // => ['foo']\n * pick(['foo', 'bar', 'baz'], [0, 2]) // => ['foo', 'baz']\n * pick(['foo', 'bar', 'baz'], [0, 2, 3]) // => ['foo', 'baz']\n */\nexport function pick(obj, props) {\n return isObject(obj) ? pickProperties(obj, props) : pickArrayElements(obj, props)\n}\n\n/**\n * Remove properties from an object or elements from an array\n * \n * @param {array} obj Object or array to remove properties or elements from\n * @param {array | string | number} props Properties to remove, can be an array of strings or a single string or number\n * @param {boolean} clone Defaults to true, will clone the object or array before removing properties or elements.\n * @returns object | array | undefined\n * @example\n * \n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }) // => {}\n * reject({}, []) // => {}\n * reject(null, 'foo') // => undefined\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, undefined) // => {}\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, 'foo') // => { bar: 'baz', baz: 'qux' }\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, ['foo', 'baz']) // => { bar: 'baz' }\n * \n * reject(['foo', 'bar', 'baz'], []) // => []\n * reject([], []) // => []\n * reject(null, 0) // => undefined\n * reject(['foo', 'bar', 'baz'], undefined) // => []\n * reject(['foo', 'bar', 'baz'], 0) // => ['bar', 'baz']\n * reject(['foo', 'bar', 'baz'], [0, 2]) // => ['bar']\n * reject(['foo', 'bar', 'baz'], [0, 2, 3]) // => ['bar']\n */\nexport function reject(obj, props, clone = true) {\n return isObject(obj) ? rejectProperties(obj, props, clone) : rejectArrayElements(obj, props, clone)\n}\n\n/**\n * Basic timestamp first UID generator that's good enough for most use cases but not for security purposes.\n * There's an extremely small chance of collision, so create a map object to check for collisions if you're worried about that.\n * \n * - `Date.now().toString(16)` is used for the timestamp, which is a base16 representation of the current timestamp in milliseconds.\n * - `random().toString(16).substring(2)` is used for the random number, which is a base16 representation of a random number between 0 and 1, with the first two characters removed.\n * \n * @param {boolean} safe Defaults to false, if true will use a cryptographically secure random number generator for the random number improving security but reducing performance. If crypto is not available, will use Math.random() instead.\n * @returns string\n * @example\n * basicUID() // => '18d4613e4d2-750bf066ac6158'\n */\nexport function basicUID(safe = false) {\n const rand = safe ? random() : Math.random()\n return Date.now().toString(16)+'-'+rand.toString(16).substring(2)\n}\n\nfunction cryptoUUIDFallback() {\n return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>\n (c ^ Math.random() * 16 >> c / 4).toString(16)\n )\n}\n\n// Taken from https://stackoverflow.com/a/2117523/5437943\nfunction cryptoRandomUUIDFallback() {\n return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>\n (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)\n )\n}\n\n/**\n * Generates a UUID v4\n * - Uses crypto.randomUUID if available\n * - Uses crypto.getRandomValues if available\n * - Uses a fallback if neither is available, which is not safe because it uses Math.random() instead of a cryptographically secure random number generator\n * \n * I'm bad at crypto and bitwise operations, not my cup of tea, so I had to rely on StackOverflow for the fallback: https://stackoverflow.com/a/2117523/5437943\n * \n * @param {boolean} safe Defaults to true, if false will use a fallback that's not cryptographically secure but significantly faster\n * @returns string\n * @example\n * generateUUID() // UUID v4, example 09ed0fe4-8eb6-4c2a-a8d3-a862b7513294\n */\nexport function generateUUID(safe = true) {\n if (!crypto || !safe) return cryptoUUIDFallback()\n if (crypto.randomUUID) return crypto.randomUUID()\n if (crypto.getRandomValues) return cryptoRandomUUIDFallback();\n}\n\n/**\n * Generates a random number between 0 and 1, inclusive of 0 but not inclusive of 1.\n * \n * - Uses crypto.getRandomValues if available\n * - Uses Math.random() if crypto.getRandomValues is not available\n * \n * @returns number\n * @example\n * random() // => 0.123456789\n */\nexport function random() {\n if (!crypto) return Math.random()\n if (crypto.getRandomValues) return crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295 // 2^32 - 1 = 4294967295\n}\n", "/**\n * @module regex\n */\n\n/**\n * Regular expression for matching a YouTube video links and extracting their ID, works with both embed and watch URLs\n */\nexport const RE_YOUTUBE = /(?:youtube\\.com\\/(?:[^\\/]+\\/.+\\/|(?:v|e(?:mbed)?)\\/|.*[?&]v=)|youtu\\.be\\/)([^\"&?\\/ ]{11})/i\n\n/**\n * Regular expression for matching a Vimeo video links and extracting their ID, works with both embed and watch URLs, channels and groups\n */\nexport const RE_VIMEO = /(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)?|groups\\/(?:[^\\/]*)\\/videos\\/|album\\/(?:\\d+)\\/video\\/|video\\/|)(\\d+)(?:[a-zA-Z0-9_\\-]+)?/i\n\n/**\n * Regular expression for matching a video URLs\n */\nexport const RE_VIDEO = /\\/([^\\/]+\\.(?:mp4|ogg|ogv|ogm|webm|avi))\\s*$/i\n\n/**\n * Regular expression for matching a image URLs\n */\nexport const RE_IMAGE = /\\/([^\\/]+\\.(?:jpg|jpeg|png|gif|svg|webp))\\s*$/i\n\n/**\n * Regular expression for matching a URL parameters\n */\nexport const RE_URL_PARAMETER = /([^\\s=&]+)=?([^&\\s]+)?/\n\n/**\n * Regular expression for matching a HTML attribute and tag names, also for matching shortcode attributes and names\n */\nexport const RE_ATTRIBUTES = /\\s*(?:([a-z_]{1}[a-z0-9\\-_]*)=?(?:\"([^\"]+)\"|'([^']+)')*)\\s*/gi\n\n/**\n * Regular expression for matching a single attribute without value\n */\nexport const RE_ATTRIBUTE_WITHOUT_VALUE = /^\\s*([a-z_]{1}[a-z0-9\\-_]*)\\s*$/i\n\n/**\n * Regular expression for matching a single attribute with value\n */\nexport const RE_ATTRIBUTE_WITH_VALUE = /^\\s*([a-z_]{1}[a-z0-9\\-_]*)=(\"[^\"]+\"|'[^']+')\\s*$/i\n\n/**\n * Regular expression for matching the first or last quote of a string used for removing them\n */\nexport const RE_FIRST_OR_LAST_QUOTE = /^[\"']|[\"']$/g\n", "/** @module parsers */\n\nimport { isArray, isObject, isString, stringToType } from './helpers.mjs'\nimport { RE_ATTRIBUTES, RE_ATTRIBUTE_WITHOUT_VALUE, RE_ATTRIBUTE_WITH_VALUE, RE_URL_PARAMETER, RE_FIRST_OR_LAST_QUOTE } from './regex.mjs'\nimport { decodeHTML, encodeHTML } from './dom.mjs'\n\n/**\n * Parse a string of attributes and return an object\n * \n * @param {string} str\n * @returns object\n * @example\n * parseAttributes('button text=\"Click me\" data='{\"key\": \\\"value\"}' class=\"btn btn-primary\"')\n * // => { button: null, text: 'Click me', data: '{\"key\": \"value\"}', class: 'btn btn-primary' }\n */\nexport function parseAttributes(str) {\n\tconst re = RE_ATTRIBUTES\n\tconst reWithoutValue = RE_ATTRIBUTE_WITHOUT_VALUE\n\tconst reHasValue = RE_ATTRIBUTE_WITH_VALUE\n\tconst reReplaceFirstAndLastQuote = RE_FIRST_OR_LAST_QUOTE\n\t\n\tconst res = {}\n\tconst match = str.match(re)\n\n\tfor (let i = 0; i < match.length; i++) {\n\t\tconst m = match[i]\n\t\tif (m === '') continue\n\n\t\tif (reWithoutValue.test(m)) {\n\t\t\tconst [, key] = m.match(reWithoutValue)\n\t\t\tres[key] = null\n\t\t\treWithoutValue.lastIndex = 0\n\t\t} else if (reHasValue.test(m)) {\n\t\t\tconst [, key, value] = m.match(reHasValue)\n\t\t\tres[key] = stringToType(decodeHTML(value.replace(reReplaceFirstAndLastQuote, '')))\n\t\t\treReplaceFirstAndLastQuote.lastIndex = 0\n\t\t\treHasValue.lastIndex = 0\n\t\t}\n\t}\n\n\treturn res\n}\n\n/**\n * Serialize an object of key value pairs into a string of attributes\n * \n * @param {object} obj - The object to serialize\n * @returns {string} of attributes\n * @example\n * serializeAttributes({ button: null, text: 'Click me', data: '{\"key\": \"value\"}', class: 'btn btn-primary' }) // button text=\"Click me\" data=\"{\\\"key\\\": \\\"value\\\"}\" class=\"btn btn-primary\"\n */\nexport function serializeAttributes(obj) {\n\tconst res = []\n\n\tObject.keys(obj).forEach((key) => {\n\t\tlet value = obj[key]\n\t\tif (isObject(value) || isArray(value)) value = JSON.stringify(value)\n\t\tif (isString(value)) value = encodeHTML(value)\n\t\tconst valueString = value === null || value === undefined ? '' : `=\"${value}\"`\n\t\tres.push(`${key}${valueString}`)\n\t})\n\n\treturn res.join(' ')\n}\n\n/**\n * Encodes HTML entities in a string using the following rules:\n * \n * - & (ampersand) becomes &\n * - \" (double quote) becomes "\n * - ' (single quote) becomes '\n * - < (less than) becomes <\n * - > (greater than) becomes >\n * \n * It is different than dom.encodeHTML, which encodes all characters using the browser's DOMParser. This function only encodes the characters listed above and should be used when DOMParser is not available.\n * @see {@link module:dom.encodeHTML}\n * \n * @param {string} str - The string to encode\n * @returns {string} The encoded string\n * @example\n * htmlEncode('Link ') // <a href="#">Link</a>\n */\nexport function encodeHtmlEntities(str) {\n\treturn str.replace(/[<>\"'\\&]/g, (m) => {\n\t\tswitch (m) {\n\t\t\tcase '<': return '<'\n\t\t\tcase '>': return '>'\n\t\t\tcase '\"': return '"'\n\t\t\tcase \"'\": return '''\n\t\t\tcase '&': return '&'\n\t\t}\n\t})\n}\n\n/**\n * Decodes HTML entities in a string using the following rules:\n * \n * - & becomes &\n * - " becomes \"\n * - ' becomes '\n * - < becomes <\n * - > becomes >\n * \n * It is different than dom.decodeHTML, which decodes all characters using the browser's DOMParser. This function only decodes the characters listed above and should be used when DOMParser is not available.\n * @see {@link module:dom.decodeHTML}\n * \n * @param {string} str - The string to decode\n * @returns {string} The decoded string\n * @example\n * htmlDecode('<a href="#">Link</a>') // Link \n */\nexport function decodeHtmlEntities(str) {\n\treturn str.replace(/<|>|"|'|&/g, (m) => {\n\t\tswitch (m) {\n\t\t\tcase '<': return '<'\n\t\t\tcase '>': return '>'\n\t\t\tcase '"': return '\"'\n\t\t\tcase ''': return \"'\"\n\t\t\tcase '&': return '&'\n\t\t}\n\t})\n}\n\n\n/**\n * Parses a string of url parameters into an object of key value pairs\n * \n * @param {string} paramString - The string to parse without ? or # and with & as separator\n * @param {boolean} [decode=true] - Whether to decode the values or not\n * @returns {object} of key value pairs\n * @example\n * parseUrlParams('foo=true&baz=555') // { foo: true, baz: 555 }\n * parseUrlParams('foo=bar&baz=qux', false) // { foo: 'true', baz: '555' }\n * parseUrlParams('foo&bar&baz=qux') // { foo: undefined, bar: undefined, baz: 'qux' }\n */\nexport function parseUrlParameters(paramString, decode = true) {\n const res = {}\n\n const paramParts = paramString.split('&')\n paramParts.forEach((part) => {\n const m = part.match(RE_URL_PARAMETER)\n\t\tif (!m) return\n const key = m[1]\n const value = m[2]\n res[key] = value !== undefined && decode ? stringToType(decodeURIComponent(value)) : stringToType(value)\n\t\tRE_URL_PARAMETER.lastIndex = 0\n })\n\n return res\n}\n\n/**\n * Serialize an object of key value pairs into a string of url parameters\n * \n * @param {object} obj - The object to serialize\n * @param {boolean} [encode=true] - Whether to encode the values or not\n * @returns {string} of url parameters\n * @example\n * serializeUrlParams({ foo: true, baz: 555 }) // foo=true&baz=555\n * serializeUrlParams({ bar: undefined, baz: 'qux' }, false) // bar=&baz=qux\n */\nexport function serializeUrlParameters(obj, encode = true) {\n\tconst res = []\n\n\tObject.keys(obj).forEach((key) => {\n\t\tconst value = obj[key]\n\t\tif (value === undefined) return res.push(key)\n\t\tconst encodedValue = encode ? encodeURIComponent(value) : value\n\t\tres.push(`${key}=${encodedValue}`)\n\t})\n\n\treturn res.join('&')\n}\n\n/**\n * Parses a resolution string into a number. Resolution string is in the format of 'width:height', e.g. '16:9' \n * \n * @param {string} res Resolution string. Format is 'width:height', e.g. '16:9', or 'widthxheight', e.g. '16x9', or 'width-height', e.g. '16-9', or 'width/height', e.g. '16/9'\n * @returns number\n * @example\n * parseResolutionString('16:9') // => 1.7777777778\n * parseResolutionString('4:3') // => 1.3333333333\n * parseResolutionString('4x3') // => 1.3333333333\n * parseResolutionString('4-3') // => 1.3333333333\n */\nexport function parseResolutionString(res) {\n const DEFAULT_RESOLUTION = 1.7777777778 // 16:9\n if (!res || !res.length || /16[\\:x\\-\\/]{1}9/i.test(res)) return DEFAULT_RESOLUTION\n const pts = res.split(/\\s?[\\:x\\-\\/]{1}\\s?/i)\n if (pts.length < 2) return DEFAULT_RESOLUTION\n\n const w = parseInt(pts[0])\n const h = parseInt(pts[1])\n\n if (w === 0 || h === 0) return DEFAULT_RESOLUTION\n if (isNaN(w) || isNaN(h)) return DEFAULT_RESOLUTION\n\n return w/h;\n}\n", "/** @module dom */\n\nimport { transformDashToCamelCase, isArray, isString } from './helpers.mjs'\nimport { encodeHtmlEntities, decodeHtmlEntities } from './parsers.mjs'\n\n/**\n * Checks if an element is empty\n * \n * @param {HTMLElement} element \n * @returns boolean\n * @example\n * document.body.innerHTML = `\n *
\n * foo
\n *
`\n * \n * isEmptyElement(document.getElementById('empty-element')) // => true\n * isEmptyElement(document.getElementById('non-empty-element1')) // => false\n * isEmptyElement(document.getElementById('non-empty-element2')) // => false\n */\nexport function isEmptyElement(element) {\n return element.innerHTML.trim() === ''\n}\n\n/**\n * Removes all elements matching a selector from the DOM\n * \n * @param {string|HTMLElement|Element} selector The selector to select elements to remove\n * @param {HTMLElement|Element} [from=document] The element to remove elements from\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * `\n * remove('#foo, #bar') // => removes #foo and #bar\n */\nexport function remove(selector, from = document) {\n const elements = query(selector, from)\n for (const element of elements) {\n element.remove()\n }\n}\n\n/**\n * Queries the DOM for a single element and returns it. Substitutes for `document.querySelector(selector)` and JQuery's `$(selector).first()`\n * \n * @param {string|HTMLElement|Element|Array|NodeList} selector The selector to select an element\n * @param {HTMLElement|Element} [from=document] The element to query from\n * @returns {HTMLElement|Element}\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * querySingle('#foo') // =>
\n * querySingle(document.getElementById('foo')) // =>
\n * querySingle(document.querySelector('#foo')) // =>
\n */\nexport function querySingle(selector, from = document) {\n if (selector instanceof Element) return selector\n return from.querySelector(selector)\n}\n\n/**\n * Queries the DOM for elements and returns them. Substitutes for `document.querySelectorAll(selector)` and JQuery's `$(selector)`\n * \n * @param {string|HTMLElement|Element|Array|NodeList} selector The selector to select elements\n * @param {HTMLElement|Element} [from=document] The element to query from\n * @returns {Array|NodeList}\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * query('#foo') // => [
]\n * query(document.getElementById('foo')) // => [
]\n * query('div') // => [
,
,
]\n */\nexport function query(selector, from = document) {\n if (selector instanceof Array || selector instanceof NodeList) return selector\n if (selector instanceof Element) return [selector]\n if (from instanceof Element || from instanceof Document) return from.querySelectorAll(selector)\n if (isString(from)) from = query(from)\n if (!from instanceof Array && !from instanceof NodeList) return []\n const res = []\n for (const element of from) {\n res.push(...element.querySelectorAll(selector))\n }\n return res\n}\n\n/**\n * Sets element styles from passed object of styles. Can also transform dash-case to camelCase for CSS properties\n * \n * @param {HTMLElement} element The element to set styles on\n * @param {object} styles The object of styles to set\n * @param {boolean} transform Whether to transform dash-case to camelCase for CSS properties\n * @example\n * css(document.getElementById('foo'), { 'background-color': 'red', 'font-size': '16px' }, true) // => sets background-color and font-size\n * css(document.getElementById('foo'), { backgroundColor: 'red', fontSize: '16px' }) // => sets background-color and font-size\n */\nexport function css(element, styles, transform = false) {\n if (!element || !styles) return\n for (let property in styles) {\n if (transform) property = transformDashToCamelCase(property)\n element.style[property] = styles[property]\n }\n}\n\n/**\n * Decodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to decode the basic entities.\n * \n * @see {@link module:parsers.decodeHtmlEntities}\n * \n * @param {string} html The HTML string to decode\n * @returns {string} The decoded HTML string\n * @example\n * decodeHTML('<div>foo</div>') // => 'foo
'\n * decodeHTML('<div>foo</div><div>bar</div>') // => 'foo
bar
'\n */\nexport function decodeHTML(html) {\n if (typeof document === 'undefined') return decodeHtmlEntities(html)\n const txt = document.createElement('textarea')\n txt.innerHTML = html\n const res = txt.value\n txt.remove()\n return res\n}\n\n/**\n * Encodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to encode the basic entities.\n * \n * @see {@link module:parsers.encodeHtmlEntities}\n * \n * @param {string} html The HTML string to encode\n * @returns {string} The encoded HTML string\n * @example\n * encodeHTML('foo
') // => '<div>foo</div>'\n * encodeHTML('foo
bar
') // => '<div>foo</div><div>bar</div>'\n */\nexport function encodeHTML(html) {\n if (typeof document === 'undefined') return encodeHtmlEntities(html)\n const txt = document.createElement('textarea')\n txt.textContent = html\n const res = txt.innerHTML\n txt.remove()\n return res\n}\n\n/**\n * Inserts an element before another element\n * \n * @param {HTMLElement} targetElement The element to insert before\n * @param {HTMLElement} newElement The element to insert\n * @example\n * const target = document.getElementById('target')\n * const newElement = document.createElement('div')\n * newElement.id = 'newElement'\n * insertBeforeElement(target, newElement)\n * //
\n * //
\n */\nexport function insertBeforeElement(targetElement, newElement) {\n if (!targetElement || !newElement) return\n targetElement.parentNode.insertBefore(newElement, targetElement);\n}\n\n/**\n * Toggles an attribute value on an element\n * \n * @param {HTMLElement} element The element to toggle the attribute on\n * @param {string} attribute The attribute to toggle\n * @param {string} on Default: 'true'\n * @param {string} off Default: 'false'\n * @example\n * toggleAttributeValue(element, 'aria-expanded', 'true', 'false')\n * toggleAttributeValue(element, 'aria-expanded')\n */\nexport function toggleAttributeValue(element, attribute, on = 'true', off = 'false') {\n if (!element.hasAttribute(attribute)) return\n\n if (element.getAttribute(attribute) === on) {\n element.setAttribute(attribute, off)\n } else {\n element.setAttribute(attribute, on)\n }\n}\n\n/**\n * Converts a duration string to milliseconds integer\n * \n * @param {string} duration The duration string to convert, e.g. '1s', '100ms', '0.5s'\n * @returns {number} The duration in milliseconds\n * @example\n * convertToMilliseconds('1s') // 1000\n * convertToMilliseconds('100ms') // 100\n * convertToMilliseconds('0.5s') // 500\n * convertToMilliseconds('0.5') // 0\n * convertToMilliseconds('foo') // 0\n */\nexport function cssTimeToMilliseconds(duration) {\n const regExp = new RegExp('([0-9.]+)([a-z]+)', 'i')\n const matches = regExp.exec(duration)\n if (!matches) return 0\n \n const unit = matches[2]\n switch (unit) {\n case 'ms':\n return parseFloat(matches[1])\n case 's':\n return parseFloat(matches[1]) * 1000\n default:\n return 0\n }\n}\n\n/**\n * Returns a map of transition properties and durations\n * \n * @param {HTMLElement} element The element to get the transition properties and durations from\n * @returns {object} A map of transition properties and durations\n * @example\n * getTransitionDurations(element) // { height: 1000 } if transition in CSS is set to 'height 1s'\n * getTransitionDurations(element) // { height: 500, opacity: 1000 } if transition in CSS is set to 'height 0.5s, opacity 1s'\n */\nexport function getTransitionDurations(element) {\n if (!element) {}\n const styles = getComputedStyle(element)\n const transitionProperties = styles.getPropertyValue('transition-property').split(',')\n const transitionDurations = styles.getPropertyValue('transition-duration').split(',')\n \n const map = {}\n \n for (let i = 0; i < transitionProperties.length; i++) {\n const property = transitionProperties[i].trim()\n map[property] = transitionDurations.hasOwnProperty(i) ? cssTimeToMilliseconds(transitionDurations[i].trim()) : null\n }\n \n return map\n}\n\n/**\n * Check a list of elements if any of them matches a selector\n * \n * @param {Array|NodeList|HTMLElement} elements The elements to check\n * @param {string} selector The selector to check\n * @returns {boolean} True if any of the elements matches the selector, false otherwise\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * matchesAny(document.querySelectorAll('div'), '#foo') // => true\n * matchesAny(document.querySelectorAll('div'), '#qux') // => false\n */\nexport function matchesAny(elements, selector) {\n if (!elements || !selector || !elements.length) return false\n if (elements instanceof Element) elements = [elements]\n if (isString(elements)) elements = query(elements)\n for (const element of elements) {\n if (element.matches(selector)) return true\n }\n return false\n}\n\n/**\n * Check a list of elements if all of them matches a selector\n * \n * @param {Array|NodeList|HTMLElement} elements The elements to check\n * @param {string} selector The selector to check\n * @returns {boolean} True if all of the elements matches the selector, false otherwise\n * @example\n * document.body.innerHTML = `\n *
\n *
\n *
`\n * \n * matchesAll(document.querySelectorAll('div'), 'div') // => true\n * matchesAll(document.querySelectorAll('div'), '#foo') // => false\n */\nexport function matchesAll(elements, selector) {\n if (!elements || !selector || !elements.length) return false\n if (elements instanceof Element) elements = [elements]\n if (isString(elements)) elements = query(elements)\n for (const element of elements) {\n if (!element.matches(selector)) return false\n }\n return true\n}\n\n\n/**\n * Detaches an element from the DOM and returns it\n * \n * @param {HTMLElement} element The element to detach\n * @example\n * detachElement(element)\n * // => element\n * console.log(element.parentNode) // => null\n */\nexport function detachElement(element) {\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n }\n return element\n}\n\n/**\n * Gets table data from a table element, a simple regular table element, or a table like structure.\n * Useful for scraping data.\n * \n * @param {string} selector The selector to select the table element\n * @param {Array|string|null} headers The headers to use for the data. If 'auto' is passed, the row containing th or the first row will be used as headers\n * @param {string} [rowSelector='tr'] The selector to select the rows\n * @param {string} [cellSelector='td'] The selector to select the cells\n * @returns {Array} An array of objects with the properties as keys and the cell values as values\n * @example\n * document.body.innerHTML = `\n * \n * \n * \n * Foo \n * Bar \n * \n * \n * \n * \n * Foo 1 \n * Bar 1 \n * \n * \n * Foo 2 \n * Bar 2 \n * \n * \n *
`\n * \n * getTableData('#table', ['foo', 'bar'])\n * // => [\n * // { foo: 'Foo 1', bar: 'Bar 1' },\n * // { foo: 'Foo 2', bar: 'Bar 2' }\n * // ]\n */\nexport function getTableData(selector, headers, rowSelector = 'tr', cellSelector = 'td', headerCellSelector = 'th') {\n const table = typeof selector === 'string' ? document.querySelector(selector) : selector\n const res = []\n const rows = table.querySelectorAll(rowSelector)\n let start = 0\n\n function iterateHeaders(arr) {\n if (!arr || !arr.length) return\n const res = []\n for (let i = 0; i < arr.length; i++) {\n res.push(arr[i].textContent.trim())\n }\n return res\n }\n\n if (headers && isString(headers) && headers === 'auto') {\n let headerCells = table.querySelectorAll(headerCellSelector)\n \n if (headerCells && headerCells.length) {\n headers = iterateHeaders(headerCells)\n } else {\n headers = iterateHeaders(rows[0].querySelectorAll(cellSelector))\n start = 1\n }\n }\n\n for (let i = start; i < rows.length; i++) {\n const row = rows[i]\n const cells = row.querySelectorAll(cellSelector)\n if (!cells || !cells.length) continue\n\n let rowData = []\n if (headers && isArray(headers) && headers.length) {\n rowData = {}\n for (let j = 0; j < headers.length; j++) {\n rowData[headers[j]] = cells[j] ? cells[j].textContent.trim() : null\n }\n } else {\n for (let j = 0; j < cells.length; j++) {\n rowData.push(cells[j].textContent.trim())\n }\n }\n res.push(rowData)\n }\n return res\n}\n\n/**\n * Parses HTML string to a DOM Node\n * \n * @param {string} html The HTML string to parse\n * @param {boolean} [allChildren=false] If true, all children of the body will be returned, otherwise only the first child\n * @returns {Node} The parsed DOM Node\n * @example\n * parseDOM('foo
') // => foo
\n * parseDOM('foo
bar
', true) // => NodeList(2)\u00A0[div, div]\n * parseDOM(document.getElementById('foo')) // =>
\n * parseDOM(document.querySelectorAll('div')) // => NodeList(2)\u00A0[div, div]\n */\nexport function parseDOM(html, allChildren) {\n if (html instanceof Element || html instanceof NodeList) return html\n const parser = new DOMParser()\n const doc = parser.parseFromString(html, 'text/html')\n return !allChildren ? doc.body.firstChild : doc.body.childNodes\n}\n\n/**\n * Loads an image form a provided source url and calls a callback when it's loaded\n * \n * @param {string} src The source url of the image\n * @param {Function} [callback] The callback to call when the image is loaded\n * @example\n * loadImage('https://example.com/image.png', () => {\n * console.log('Image loaded')\n * })\n */\nexport function loadImage(src, callback) {\n const img = new Image()\n if (callback)\n img.addEventListener('load', callback, false);\n img.src = src\n}\n\n/**\n * Delegate DOM events using MutationObserver with a fallback to document.addEventListener\n * \n * @param {string} selector The selector to select the elements to delegate the event to\n * @param {string} eventType The event type to delegate, like `click`\n * @param {Function} handler The handler to call when the event is triggered.\n * @returns {MutationObserver | null} The MutationObserver instance\n * @example\n * delegateEvent('.foo', 'click', (e, target) => {\n * console.log('Clicked on', target)\n * })\n */\nexport function delegateEvent(selector, eventType, handler) {\n if (typeof MutationObserver === 'undefined') {\n document.addEventListener(eventType, (e) => {\n const target = e.target.closest(selector)\n if (target) handler(e, target)\n })\n\n return null\n }\n\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (!(node instanceof HTMLElement)) continue\n if (!node.matches(selector)) continue\n node.addEventListener(eventType, (e) => {\n handler(e, e.currentTarget)\n })\n }\n }\n })\n\n for (const node of document.querySelectorAll(selector)) {\n node.addEventListener(eventType, (e) => {\n handler(e, e.currentTarget)\n })\n }\n\n observer.observe(document.body, { childList: true, subtree: true })\n return observer\n}\n\n/**\n * Run a handler on selected elements and on elements added to the DOM with the same selector, \n * or can be delegateEvent alias.\n * \n * @param {string} selector The selector to select the elements to run the handler on\n * @param {string | Function} eventTypeOrHandler The event type to delegate, like `click`, or the handler to call on every element\n * @param {Function} [handler] The handler to call when the event is triggered.\n * @returns {MutationObserver | null} The MutationObserver instance\n * @see delegateEvent\n * @example\n * on('.foo', (el) => {\n * console.log('Element', el, 'added to the DOM')\n * })\n * \n * on('.foo', 'click', (e, target) => {\n * console.log('Clicked on', target)\n * })\n */\nexport function on(selector, eventTypeOrHandler, handler) {\n if (isString(eventTypeOrHandler)) {\n return delegateEvent(selector, eventTypeOrHandler, handler)\n }\n\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (!(node instanceof HTMLElement)) continue\n if (!node.matches(selector)) continue\n eventTypeOrHandler(node)\n }\n }\n })\n\n for (const node of document.querySelectorAll(selector)) {\n eventTypeOrHandler(node)\n }\n\n observer.observe(document.body, { childList: true, subtree: true })\n\n return observer\n}\n\n/**\n * Adds one listener to multiple events\n * \n * @param {string|HTMLElement|NodeList} elements The elements or a selector for elements to add the event listeners to\n * @param {string|Array} events The event types to add the event listeners for, like `click mouseenter`\n * @param {Function} handler The handler to call when the event is triggered.\n * @param {object} [options] The options to pass to the event listeners\n * @example\n * addListenerForEvents('.foo', 'click mouseenter', (e) => { console.log(e.type) })\n */\nexport function addListenerForEvents(elements, events, handler, options) {\n if (elements instanceof Element) elements = [elements]\n if (typeof elements === 'string') elements = query(elements)\n\n const eventTypes = isArray(events) ? events : events.split(' ')\n for (const element of elements) {\n for (const eventType of eventTypes) {\n element.addEventListener(eventType, handler, options)\n }\n }\n}\n\n/**\n * Removes one listener from multiple registered events\n * \n * @param {string|HTMLElement|NodeList} elements The elements or a selector for elements to remove the event listeners from\n * @param {string|Array} events The event types to remove the event listeners for, like `click mouseenter`\n * @param {Function} handler The handler to remove\n * @param {object} [options] The options to pass to the event listeners\n * @example\n * removeListenerForEvents('.foo', 'click mouseenter', (e) => { console.log(e.type) })\n */\nexport function removeListenerForEvents(elements, events, handler, options) {\n if (elements instanceof Element) elements = [elements]\n if (typeof elements === 'string') elements = query(elements)\n\n const eventTypes = isArray(events) ? events : events.split(' ')\n for (const element of elements) {\n for (const eventType of eventTypes) {\n element.removeEventListener(eventType, handler, options)\n }\n }\n}\n\n/**\n * Resizes an element to cover its parent element while maintaining the aspect ratio\n * \n * @param {string|HTMLElement|NodeList} elements The elements or a selector for elements to resize\n * @param {number} [ratio=1] The ratio to maintain\n * @param {number} [offset=0] An offset to add to the parent element's width and height\n * @example\n * proportionalParentCoverResize('.foo', 16/9, 10)\n */\nexport function proportionalParentCoverResize(elements, ratio = 1, offset = 0) {\n if (elements instanceof Element) elements = [elements]\n if (typeof elements === 'string') elements = query(elements)\n\n for (const element of elements) {\n const h = element.parentNode.offsetHeight + offset\n const w = element.parentNode.offsetWidth + offset\n\n if (ratio > w/h) {\n element.style.width = h*ratio + 'px'\n element.style.height = h + 'px'\n } else {\n element.style.width = w + 'px'\n element.style.height = w/ratio + 'px'\n }\n }\n}\n\n/**\n * If provided element is visible. Checks if the element is not visibility hidden or display none, has no opacity, and has a width and height.\n * \n * @param {HTMLElement} element The element to check\n * @returns {boolean} True if the element is visible, false otherwise\n * \n * @example\n * isVisible(document.getElementById('foo'))\n */\nexport function isVisible(element) {\n if (!element) return false;\n const computedStyle = getComputedStyle(element);\n if (computedStyle.getPropertyValue('display') === 'none') return false;\n if (element.getAttribute('hidden') !== null || computedStyle.getPropertyValue('visibility') === 'hidden' || computedStyle.getPropertyValue('opacity') == \"0\") return false;\n return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)\n}\n\n/**\n * Swipe event handler\n * \n * @param {HTMLElement} element The element to listen for swipe gestures on\n * @param {Function} callback The callback to call when a swipe gesture is detected\n * @param {number} [threshold=150] The threshold in pixels to trigger the callback.\n * @param {number} [timeThreshold=0] The threshold in milliseconds to trigger the callback. Defaults to 0, which means the callback will be called regardless of the time it took to swipe.\n * @event swipestart Fires when a swipe gesture starts\n * @event swipeend Fires when a swipe gesture ends\n * @event swipe Fires when a swipe gesture is detected based on the thresholds\n * @example\n * onSwipe(document.getElementById('foo'), (e) => {\n * console.log(e.direction)\n * console.log(e.deltaX)\n * console.log(e.deltaY)\n * console.log(e.startX)\n * console.log(e.startY)\n * console.log(e.endX)\n * console.log(e.endY)\n * console.log(e.threshold)\n * console.log(e.type)\n * console.log(e.target)\n * console.log(e.horizontal)\n * console.log(e.vertical)\n * console.log(e.horizontalDirection)\n * console.log(e.verticalDirection)\n * console.log(e.timeElapsed)\n * console.log(e.timeThreshold)\n * })\n */\nexport function onSwipe(element, callback, threshold = 150, timeThreshold = 0) {\n let startX = 0\n let startY = 0\n let endX = 0\n let endY = 0\n let startTime = 0\n let endTime = 0\n\n if (!element) return\n if (element.getAttribute('swipe-enabled') === 'true') return\n element.setAttribute('swipe-enabled', 'true')\n\n const handleStart = function(e) {\n const carrier = e.touches ? e.touches[0] : e\n startX = carrier.clientX\n startY = carrier.clientY\n startTime = Date.now();\n element.dispatchEvent(new CustomEvent('swipestart', { detail: { startX, startY, startTime } }))\n }\n\n const handleEnd = function(e) {\n const carrier = e.changedTouches ? e.changedTouches[0] : e\n endX = carrier.clientX\n endY = carrier.clientY\n endTime = Date.now();\n handleSwipeGesture()\n element.dispatchEvent(new CustomEvent('swipeend', { detail: { startX, startY, startTime, endX, endY, endTime } }))\n }\n\n const handleSwipeGesture = function() {\n const deltaX = Math.abs(endX - startX)\n const deltaY = Math.abs(endY - startY)\n const horizontal = deltaX > threshold\n const vertical = deltaY > threshold\n const left = endX < startX\n const up = endY < startY\n const direction = []\n const timeElapsed = endTime - startTime;\n \n if (horizontal) direction.push(left ? 'left' : 'right')\n if (vertical) direction.push(up ? 'up' : 'down')\n\n let condition = direction.length && callback\n if (timeThreshold) condition = condition && timeElapsed <= timeThreshold\n \n if (condition) {\n const res = {\n target: element,\n deltaX: deltaX,\n deltaY: deltaY,\n startX: startX,\n startY: startY,\n endX: endX,\n endY: endY,\n threshold: threshold,\n horizontal: horizontal,\n vertical: vertical,\n horizontalDirection: left ? 'left' : 'right',\n verticalDirection: up ? 'up' : 'down',\n direction: direction.length === 1 ? direction[0] : direction,\n timeElapsed: timeElapsed,\n timeThreshold: timeThreshold\n }\n\n callback(res)\n delete res.target\n element.dispatchEvent(new CustomEvent('swipe', { detail: res })) \n }\n }\n\n element.addEventListener('touchstart', handleStart)\n element.addEventListener('touchend', handleEnd)\n element.addEventListener('mousedown', handleStart)\n element.addEventListener('mouseup', handleEnd)\n\n return {\n destroy: function() {\n element.removeEventListener('touchstart', handleStart)\n element.removeEventListener('touchend', handleEnd)\n element.removeEventListener('mousedown', handleStart)\n element.removeEventListener('mouseup', handleEnd)\n }\n }\n}\n", "/** @module browser */\n\nimport { isEmpty, isFunction } from './helpers.mjs'\nimport { css } from './dom.mjs'\nimport { parseUrlParameters } from './parsers.mjs'\n\nexport function isUserAgentIOS(str) {\n return /iPad|iPhone|iPod/i.test(str)\n}\n\nexport function isUserAgentMobile(str) {\n return /\\b(BlackBerry|webOS|iPhone|IEMobile)\\b/i.test(str) ||\n /\\b(Android|Windows Phone|iPad|iPod)\\b/i.test(str)\n}\n\nexport function isUserAgentSafari(str) {\n return /^((?!chrome|android|crios|fxios).)*safari/i.test(str)\n}\n\n/**\n * Check if the device is an iOS device\n * \n * @returns boolean True if the device is an iOS device, false otherwise\n */\nexport function isIOS() {\n return isUserAgentIOS(navigator.userAgent) && 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 1\n}\n\n/**\n * Check if the device is a mobile device\n * \n * @returns boolean True if the device is a mobile device, false otherwise\n */\nexport function isMobile() {\n if ('maxTouchPoints' in navigator) return navigator.maxTouchPoints > 0\n\n if ('matchMedia' in window) return !!matchMedia('(pointer:coarse)').matches\n\n if ('orientation' in window) return true\n\n return isUserAgentMobile(navigator.userAgent)\n}\n\n/**\n * Check if the browser is Safari\n *\n * @returns boolean True if the browser is Safari, false otherwise\n */\nexport function isSafari() {\n if (navigator.hasOwnProperty('vendor')) /apple/i.test(navigator.vendor)\n return isUserAgentSafari(navigator.userAgent)\n}\n\n/**\n * Check if the browser is Safari on iOS\n * \n * @returns boolean True if the browser is Safari on iOS, false otherwise\n */\nexport function isIOSSafari() {\n return isIOS() && isSafari()\n}\n\n/**\n * A wrapper for the matchMedia function, cause with `matchMedia` you can only either add a listener or check the media query\n * this function does both.\n * \n * @param {string} query The media query to check\n * @param {function} [callback] The callback function to call when the media query changes\n * @returns {boolean} The result of the media query\n * \n * @example\n * mediaMatcher('(min-width: 768px)', (matches) => {\n * if (matches) {\n * // Do something\n * } else {\n * // Do something else\n * }\n * })\n * \n * // Or\n * \n * const isDesktop = mediaMatcher('(min-width: 768px)')\n */\nexport function mediaMatcher(query, callback) {\n if (isFunction(callback)) {\n matchMedia(query).addEventListener('change', (e) => {\n callback(e.matches)\n })\n\n const mql = matchMedia(query)\n callback(mql.matches)\n\n return mql.matches\n }\n\n return matchMedia(query).matches\n}\n\n/**\n * Get the scrollbar width\n * \n * When preventing scroll with html overflow hidden the scroll bar will disappear and the whole page will shift (if the scroll bar is visible that is).\n * To substitute for the scrollbar width we can add a padding to the body element.\n * \n * @returns {number} The scrollbar width\n * \n * @example\n * const scrollbarWidth = getScrollbarWidth() // 15 (on MacOS X Safari)\n */\nexport function getScrollbarWidth() {\n const scrollDiv = document.createElement('div')\n \n css(scrollDiv, {\n width: '100px',\n height: '100px',\n position: 'absolute',\n left: '-9999px',\n zIndex: '0',\n overflowX: 'hidden',\n overflowY: 'scroll'\n })\n\n document.body.appendChild(scrollDiv)\n const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth\n document.body.removeChild(scrollDiv)\n return scrollbarWidth\n}\n\n/**\n * Check if the vertical scrollbar is visible\n * \n * @param {number} [scrollbarWidth] The width of the scrollbar, defaults to getScrollbarWidth()\n * @returns {boolean} True if the vertical scrollbar is visible, false otherwise\n */\nexport function hasVerticalScrollbarVisible(scrollbarWidth) {\n if (scrollbarWidth === undefined) scrollbarWidth = getScrollbarWidth()\n return window.innerHeight < document.body.scrollHeight && scrollbarWidth > 0\n}\n\n/**\n * Check if the horizontal scrollbar is visible\n * \n * @param {number} [scrollbarWidth] The width of the scrollbar, defaults to getScrollbarWidth()\n * @returns {boolean} True if the horizontal scrollbar is visible, false otherwise\n */\nexport function hasHorizontalScrollbarVisible(scrollbarWidth) {\n if (scrollbarWidth === undefined) scrollbarWidth = getScrollbarWidth()\n return window.innerWidth < document.body.scrollWidth && scrollbarWidth > 0\n}\n\n/**\n * Disable the scroll on the page.\n * \n * @param {number} [shift=0] If greater than 0 the body will be shifted to the left by the width of the scrollbar, getScrollbarWidth() is used to provide this value \n */\nexport function disableScroll(shift) {\n const body = document.body\n if (shift && hasVerticalScrollbarVisible(shift)) body.style.paddingRight = `${shift}px`\n body.style.overflow = 'hidden'\n}\n\n/**\n * Enable the scroll on the page.\n * \n * @param {boolean} [shift=0] If greater than 0 the body will be shifted back to the left by the width of the scrollbar, getScrollbarWidth() is used to provide this value\n */\nexport function enableScroll(shift) {\n const body = document.body\n body.style.overflow = ''\n if (shift) body.style.paddingRight = ''\n}\n\n/**\n * Parses a string of url query parameters into an object of key value pairs. Converts the values to the correct type.\n * \n * @param {string} [entryQuery] - Optional query string to parse, without the starting ?, defaults to window.location.search without the starting ?\n * @returns {object} of key value pairs\n * @example\n * // url: https://example.com/?test&foo=bar&baz=qux\n * getQueryProperties() // { test: undefined, foo: 'bar', baz: 'qux' }\n */\nexport function getQueryProperties(entryQuery) {\n const query = entryQuery ? entryQuery : window.location.search.replace('?', '')\n if (isEmpty(query)) return {}\n\n return parseUrlParameters(query)\n}\n\n/**\n * Parses a string of url hash parameters into an object of key value pairs. Converts the values to the correct type.\n * \n * @param {string} [entryHash] - Optional hash string to parse, without the starting #, defaults to window.location.hash without the starting #\n * @returns {object} of key value pairs\n * @example\n * // url: https://example.com/#test&foo=bar&baz=qux\n * getHashProperties() // { test: undefined, foo: 'bar', baz: 'qux' }\n */\nexport function getHashProperties(entryHash) {\n const hash = entryHash ? entryHash : window.location.hash.replace('#', '')\n if (isEmpty(hash)) return {}\n\n return parseUrlParameters(hash)\n}\n\nfunction onHashChange(callback) {\n const hash = window.location.hash.replace('#', '')\n if (!isEmpty(hash)) callback(hash)\n}\n\n/**\n * Add a callback function to the hash change event\n * \n * @param {function} callback - The callback function to call when the hash changes\n * @param {string} [single] - Optional string to make sure the listener is initialized only once, defaults to window[single] which is set to true after the first call\n * @example\n * hashChange((hash) => {\n * // Do something with the hash\n * })\n */\nexport function hashChange(callback, single) {\n onHashChange(callback)\n \n if (single && window[single]) return\n if (single) window[single] = true\n \n window.addEventListener('hashchange', () => {\n onHashChange(callback)\n })\n}\n", "import { generateActionButton } from './buttons.js';\nimport { isArray, stringToType, isMobile, parseResolutionString, proportionalParentCoverResize, percentage, fixed } from 'book-of-spells';\n\nexport class SuperVideoBackground {\n constructor(elem, params, id, uid, type, factoryInstance) {\n if (!id) return;\n this.is_mobile = isMobile();\n this.type = type;\n this.id = id;\n this.factoryInstance = factoryInstance;\n\n this.element = elem;\n this.playerElement = null;\n this.uid = uid;\n this.element.setAttribute('data-vbg-uid', uid);\n\n this.buttons = {};\n this.isIntersecting = false;\n\n this.paused = false; // user requested pause. used for blocking intersection softPlay\n this.muted = false;\n this.currentState = 'notstarted';\n\n this.initialPlay = false;\n this.initialVolume = false;\n\n this.volume = 1;\n\n this.params = {};\n\n const DEFAULTS = {\n 'pause': false, //deprecated\n 'play-button': false,\n 'mute-button': false,\n 'autoplay': true,\n 'muted': true,\n 'loop': true,\n 'mobile': true,\n 'load-background': false,\n 'resolution': '16:9',\n 'inline-styles': true,\n 'fit-box': false,\n 'offset': 100, // since showinfo is deprecated and ignored after September 25, 2018. we add +100 to hide it in the overflow\n 'start-at': 0,\n 'end-at': 0,\n 'poster': null,\n 'always-play': false,\n 'volume': 1,\n 'no-cookie': true,\n 'force-on-low-battery': false,\n 'lazyloading': false,\n 'title': 'Video background'\n };\n\n this.params = this.parseProperties(params, DEFAULTS, this.element, ['data-ytbg-', 'data-vbg-']);\n\n //pause deprecated\n if (this.params.pause) {\n this.params['play-button'] = this.params.pause;\n }\n\n this.params.resolution_mod = parseResolutionString(this.params.resolution);\n\n this.muted = this.params.muted;\n\n this.volume = this.params.volume;\n\n this.currentTime = this.params['start-at'] || 0;\n this.duration = this.params['end-at'] || 0;\n this.percentComplete = 0;\n if (this.params['start-at']) this.percentComplete = this.timeToPercentage(this.params['start-at']);\n\n this.buildWrapperHTML();\n\n if (this.is_mobile && !this.params.mobile) return;\n\n if (this.params['play-button']) {\n generateActionButton(this, {\n name: 'playing',\n className: 'play-toggle',\n innerHtml: 't&&(this.duration=t),this.currentTime>t&&this.onVideoEnded()}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}shouldPlay(){return this.currentState==="ended"&&!this.params.loop?!1:!!(this.params["always-play"]&&this.currentState!=="playing"||this.isIntersecting&&this.params.autoplay&&this.currentState!=="playing")}mobileLowBatteryAutoplayHack(){if(!this.params["force-on-low-battery"]||!this.is_mobile&&this.params.mobile)return;const t=function(){!this.initialPlay&&this.params.autoplay&&this.params.muted&&(this.softPlay(),!this.isIntersecting&&!this.params["always-play"]&&this.softPause())};document.addEventListener("touchstart",t.bind(this),{once:!0})}parseProperties(t,e,i,s){let a={};if(!t)a=e;else for(let r in e)a[r]=t.hasOwnProperty(r)?t[r]:e[r];if(!i)return a;for(let r in a){let n;if(S(s))for(let o=0;o=this.duration){this.currentState="ended",this.dispatchEvent("video-background-state-change"),this.onVideoEnded(),this.stopTimeUpdateTimer();return}this.dispatchEvent("video-background-time-update")}}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.player.playVideo()),this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-ready")}onVideoStateChange(t){this.currentState=this.convertState(t.data),this.currentState==="ended"&&this.onVideoEnded(),this.currentState==="notstarted"&&this.params.autoplay&&(this.seekTo(this.params["start-at"]),this.player.playVideo()),this.currentState==="playing"&&this.onVideoPlay(),this.currentState==="paused"&&this.onVideoPause(),this.dispatchEvent("video-background-state-change")}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1);const t=this.player.getCurrentTime();this.params["start-at"]&&t=this.duration&&this.seekTo(this.params["start-at"]),this.duration||this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-play"),this.startTimeUpdateTimer()}onVideoPause(){this.stopTimeUpdateTimer(),this.dispatchEvent("video-background-pause")}onVideoEnded(){if(this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.player.playVideo()}seek(t){this.seekTo(this.percentageToTime(t),!0)}seekTo(t,e=!0){this.player&&(this.player.seekTo(t,e),this.dispatchEvent("video-background-seeked"))}softPause(){!this.player||this.currentState==="paused"||(this.stopTimeUpdateTimer(),this.player.pauseVideo())}softPlay(){!this.player||this.currentState==="playing"||this.player.playVideo()}play(){this.player&&(this.paused=!1,this.player.playVideo())}pause(){this.player&&(this.paused=!0,this.stopTimeUpdateTimer(),this.player.pauseVideo())}unmute(){this.player&&(this.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.unMute(),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.mute(),this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.getVolume()/100}setVolume(t){this.player&&(this.volume=t,this.player.setVolume(t*100),this.dispatchEvent("video-background-volume-change"))}},g=class extends h{constructor(t,e,i,s,a){super(t,e,i,s,"vimeo",a),i&&(this.is_mobile&&!this.params.mobile||(this.injectScript(),this.player=null,this.injectPlayer(),this.initVimeoPlayer()))}injectScript(){if(window.hasOwnProperty("Vimeo")||document.querySelector('script[src="https://player.vimeo.com/api/player.js"]'))return;const t=document.createElement("script");window.hasOwnProperty("onVimeoIframeAPIReady")&&typeof window.onVimeoIframeAPIReady=="function"&&t.addEventListener("load",()=>{window.onVimeoIframeAPIReady()}),t.src="https://player.vimeo.com/api/player.js";const e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}initVimeoPlayer(){!window.hasOwnProperty("Vimeo")||this.player!==null||(this.player=new Vimeo.Player(this.playerElement),this.player.on("loaded",this.onVideoPlayerReady.bind(this)),this.player.on("ended",this.onVideoEnded.bind(this)),this.player.on("play",this.onVideoPlay.bind(this)),this.player.on("pause",this.onVideoPause.bind(this)),this.player.on("bufferstart",this.onVideoBuffering.bind(this)),this.player.on("timeupdate",this.onVideoTimeUpdate.bind(this)),this.volume!==1&&!this.muted&&this.setVolume(this.volume))}onVideoError(t){console.error(t)}generatePlayerElement(){const t=document.createElement("iframe");return t.setAttribute("frameborder",0),t.setAttribute("allow","autoplay; mute"),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}generateSrcURL(t){let e="https://player.vimeo.com/video/"+t+"?background=1&controls=0";return this.params.muted&&(e+="&muted=1"),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(e+="&autoplay=1"),this.params.loop&&(e+="&loop=1&autopause=0"),this.params["no-cookie"]&&(e+="&dnt=1"),this.params["start-at"]&&(e+="#t="+this.params["start-at"]+"s"),e}injectPlayer(){this.playerElement=this.generatePlayerElement(),this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.playerElement.id=this.uid,this.stylePlayerElement(this.playerElement),this.element.appendChild(this.playerElement),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(m);!e||!e.length||(this.id=e[1],this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src),this.loadBackground(this.id))}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&this.player.play(),this.player.getDuration().then(t=>{this.setDuration(t)}),this.dispatchEvent("video-background-ready")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoTimeUpdate(t){this.currentTime=t.seconds,this.percentComplete=this.timeToPercentage(t.seconds),this.dispatchEvent("video-background-time-update"),this.setDuration(t.duration),this.params["end-at"]&&this.duration&&t.seconds>=this.duration&&this.onVideoEnded()}onVideoBuffering(){this.updateState("buffering")}onVideoPlay(t){if(this.setDuration(t.duration),!this.initialPlay&&(this.initialPlay=!0,this.playerElement.style.opacity=1,this.player.setLoop(this.params.loop),!(this.params.autoplay&&(this.params["always-play"]||this.isIntersecting))))return this.player.pause();const e=t.seconds;this.params["start-at"]&&e=this.duration&&this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){this.player&&(this.player.setCurrentTime(t),this.dispatchEvent("video-background-seeked"))}softPause(){!this.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||this.player.play()}play(){this.player&&(this.paused=!1,this.player.play())}pause(){this.player&&(this.paused=!0,this.player.pause())}unmute(){this.player&&(this.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.setMuted(!1),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.setMuted(!0),this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.getVolume()}setVolume(t){this.player&&(this.volume=t,this.player.setVolume(t),this.dispatchEvent("video-background-volume-change"))}},R=class extends h{constructor(t,e,i,s,a){super(t,e,i.link,s,"video",a),!(!i||!i.link)&&(this.is_mobile&&!this.params.mobile||(this.src=i.link,this.ext=/(?:\.([^.]+))?$/.exec(i.id)[1],this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.player=null,this.buttons={},this.MIME_MAP={ogv:"video/ogg",ogm:"video/ogg",ogg:"video/ogg",avi:"video/avi",mp4:"video/mp4",webm:"video/webm"},this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.injectPlayer(),this.mobileLowBatteryAutoplayHack(),this.dispatchEvent("video-background-ready")))}generatePlayerElement(){const t=document.createElement("video");return t.setAttribute("playsinline",""),this.params.loop&&t.setAttribute("loop",""),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(t.setAttribute("autoplay",""),t.autoplay=!0),this.muted&&(t.setAttribute("muted",""),t.muted=!0),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}injectPlayer(){this.player=this.generatePlayerElement(),this.playerElement=this.player,this.volume!==1&&!this.muted&&this.setVolume(this.volume),this.playerElement.setAttribute("id",this.uid),this.stylePlayerElement(this.playerElement),this.player.addEventListener("loadedmetadata",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("durationchange",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("canplay",this.onVideoCanPlay.bind(this)),this.player.addEventListener("timeupdate",this.onVideoTimeUpdate.bind(this)),this.player.addEventListener("play",this.onVideoPlay.bind(this)),this.player.addEventListener("pause",this.onVideoPause.bind(this)),this.player.addEventListener("waiting",this.onVideoBuffering.bind(this)),this.player.addEventListener("ended",this.onVideoEnded.bind(this)),this.element.appendChild(this.playerElement);const t=document.createElement("source");t.setAttribute("src",this.src),t.setAttribute("type",this.mime),this.playerElement.appendChild(t),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(c);if(!e||!e.length)return;this.id=e[1],this.ext=/(?:\.([^.]+))?$/.exec(this.id)[1],this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.playerElement.innerHTML="";const i=document.createElement("source");i.setAttribute("src",t),i.setAttribute("type",this.mime),this.playerElement.appendChild(i),this.src=t,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src)}onVideoLoadedMetadata(){this.setDuration(this.player.duration)}onVideoCanPlay(){this.setDuration(this.player.duration)}onVideoTimeUpdate(){this.currentTime=this.player.currentTime,this.percentComplete=this.timeToPercentage(this.player.currentTime),this.dispatchEvent("video-background-time-update"),this.params["end-at"]&&this.currentTime>=this.duration&&this.onVideoEnded()}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1);const t=this.player.currentTime;this.params["start-at"]&&t<=this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.duration&&t>=this.duration&&this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.onVideoPlay()}onVideoBuffering(){this.updateState("buffering")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){if(this.player){if(this.player.hasOwnProperty("fastSeek")){this.player.fastSeek(t);return}this.player.currentTime=t,this.dispatchEvent("video-background-seeked")}}softPause(){!this.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||this.player.play()}play(){this.player&&(this.paused=!1,this.player.play())}pause(){this.player&&(this.paused=!0,this.player.pause())}unmute(){this.player&&(this.muted=!1,this.player.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.muted=!0,this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.volume}setVolume(t){this.player&&(this.volume=t,this.player.volume=t,this.dispatchEvent("video-background-volume-change"))}},b=class{constructor(t,e){this.elements=t,this.elements instanceof Element&&(this.elements=[this.elements]),typeof this.elements=="string"&&(this.elements=document.querySelectorAll(t)),this.index={};const i=this;if(this.intersectionObserver=null,"IntersectionObserver"in window&&(this.intersectionObserver=new IntersectionObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");if(r&&i.index.hasOwnProperty(r)&&a.isIntersecting){i.index[r].isIntersecting=!0;try{i.index[r].player&&!i.index[r].paused&&i.index[r].softPlay()}catch{}}else{i.index[r].isIntersecting=!1;try{i.index[r].player&&i.index[r].softPause()}catch{}}})})),this.resizeObserver=null,"ResizeObserver"in window?this.resizeObserver=new ResizeObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");r&&i.index.hasOwnProperty(r)&&window.requestAnimationFrame(()=>i.index[r].resize())})}):window.addEventListener("resize",function(){for(let s in i.index)window.requestAnimationFrame(()=>i.index[s].resize(i.index[s].playerElement))}),this.initPlayers(),!(!this.elements||!this.elements.length)){for(let s=0;s{function l(t){t&&(t.element.classList.add(t.stateClassName),t.element.firstChild.classList.remove(t.stateChildClassNames[0]),t.element.firstChild.classList.add(t.stateChildClassNames[1]),t.element.setAttribute("aria-checked",!1))}function E(t){t&&(t.element.classList.remove(t.stateClassName),t.element.firstChild.classList.add(t.stateChildClassNames[0]),t.element.firstChild.classList.remove(t.stateChildClassNames[1]),t.element.setAttribute("aria-checked",!0))}function u(t,e){const i=document.createElement("button");i.className=e.className,i.innerHTML=e.innerHtml,i.setAttribute("role","switch"),i.firstChild.classList.add(e.stateChildClassNames[0]),i.setAttribute("aria-checked",!e.initialState),e.element=i,t.params[e.condition_parameter]===e.initialState&&l(e),i.addEventListener("click",function(s){this.classList.contains(e.stateClassName)?(E(e),t[e.actions[0]]()):(l(e),t[e.actions[1]]())}),t.buttons[e.name]={element:i,button_properties:e},t.controls_element.appendChild(i)}function w(t){if(/^\s*(true|false)\s*$/i.test(t))return t==="true"}function k(t){if(/^\s*\d+\s*$/.test(t))return parseInt(t);if(/^\s*[\d.]+\s*$/.test(t))return parseFloat(t)}function T(t){if(/^\s*\[.*\]\s*$/.test(t))try{return JSON.parse(t)}catch{}}function V(t){if(/^\s*\{.*\}\s*$/.test(t))try{return JSON.parse(t)}catch{}}function P(t){if(/^\s*\/.*\/g?i?\s*$/.test(t))try{return new RegExp(t)}catch{}}function A(t){if(/^\s*null\s*$/.test(t))return null;const e=w(t);return e!==void 0?e:k(t)||T(t)||V(t)||P(t)||t}function S(t){return Array.isArray(t)}function x(t){return typeof t=="string"}function d(t,e,i=!1){if(t=Number(t),e=Number(e),isNaN(t)||isNaN(e))throw new TypeError("Both min and max must be numbers");if(t>e&&([t,e]=[e,t]),t===e)return t;t=Math.round(t),e=Math.round(e);const s=i?N():Math.random();return Math.floor(s*(e-t+1))+t}function I(t,e){return e?parseFloat(t.toFixed(e)):parseInt(t)}function C(t,e){return!t||!e||Number.isNaN(t)||Number.isNaN(e)?0:t/e*100}function N(){if(!crypto)return Math.random();if(crypto.getRandomValues)return crypto.getRandomValues(new Uint32Array(1))[0]/4294967295}var p=/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,m=/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i,c=/\/([^\/]+\.(?:mp4|ogg|ogv|ogm|webm|avi))\s*$/i;function L(t){const e=1.7777777778;if(!t||!t.length||/16[\:x\-\/]{1}9/i.test(t))return e;const i=t.split(/\s?[\:x\-\/]{1}\s?/i);if(i.length<2)return e;const s=parseInt(i[0]),a=parseInt(i[1]);return s===0||a===0||isNaN(s)||isNaN(a)?e:s/a}function y(t,e=document){if(t instanceof Array||t instanceof NodeList)return t;if(t instanceof Element)return[t];if(e instanceof Element||e instanceof Document)return e.querySelectorAll(t);if(x(e)&&(e=y(e)),!e instanceof Array&&!e instanceof NodeList)return[];const i=[];for(const s of e)i.push(...s.querySelectorAll(t));return i}function O(t,e=1,i=0){t instanceof Element&&(t=[t]),typeof t=="string"&&(t=y(t));for(const s of t){const a=s.parentNode.offsetHeight+i,r=s.parentNode.offsetWidth+i;e>r/a?(s.style.width=a*e+"px",s.style.height=a+"px"):(s.style.width=r+"px",s.style.height=r/e+"px")}}function U(t){return/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(t)||/\b(Android|Windows Phone|iPad|iPod)\b/i.test(t)}function R(){return"maxTouchPoints"in navigator?navigator.maxTouchPoints>0:"matchMedia"in window?!!matchMedia("(pointer:coarse)").matches:"orientation"in window?!0:U(navigator.userAgent)}var h=class{constructor(t,e,i,s,a,r){if(!i)return;this.is_mobile=R(),this.type=a,this.id=i,this.factoryInstance=r,this.element=t,this.playerElement=null,this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.buttons={},this.isIntersecting=!1,this.paused=!1,this.muted=!1,this.currentState="notstarted",this.initialPlay=!1,this.initialVolume=!1,this.volume=1,this.params={};const n={pause:!1,"play-button":!1,"mute-button":!1,autoplay:!0,muted:!0,loop:!0,mobile:!0,"load-background":!1,resolution:"16:9","inline-styles":!0,"fit-box":!1,offset:100,"start-at":0,"end-at":0,poster:null,"always-play":!1,volume:1,"no-cookie":!0,"force-on-low-battery":!1,lazyloading:!1,title:"Video background"};this.params=this.parseProperties(e,n,this.element,["data-ytbg-","data-vbg-"]),this.params.pause&&(this.params["play-button"]=this.params.pause),this.params.resolution_mod=L(this.params.resolution),this.muted=this.params.muted,this.volume=this.params.volume,this.currentTime=this.params["start-at"]||0,this.duration=this.params["end-at"]||0,this.percentComplete=0,this.params["start-at"]&&(this.percentComplete=this.timeToPercentage(this.params["start-at"])),this.buildWrapperHTML(),!(this.is_mobile&&!this.params.mobile)&&(this.params["play-button"]&&u(this,{name:"playing",className:"play-toggle",innerHtml:'t&&(this.duration=t),this.currentTime>t&&this.onVideoEnded()}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}shouldPlay(){return this.currentState==="ended"&&!this.params.loop?!1:!!(this.params["always-play"]&&this.currentState!=="playing"||this.isIntersecting&&this.params.autoplay&&this.currentState!=="playing")}mobileLowBatteryAutoplayHack(){if(!this.params["force-on-low-battery"]||!this.is_mobile&&this.params.mobile)return;const t=function(){!this.initialPlay&&this.params.autoplay&&this.params.muted&&(this.softPlay(),!this.isIntersecting&&!this.params["always-play"]&&this.softPause())};document.addEventListener("touchstart",t.bind(this),{once:!0})}parseProperties(t,e,i,s){let a={};if(!t)a=e;else for(let r in e)a[r]=t.hasOwnProperty(r)?t[r]:e[r];if(!i)return a;for(let r in a){let n;if(S(s))for(let o=0;o=this.duration){this.currentState="ended",this.dispatchEvent("video-background-state-change"),this.onVideoEnded(),this.stopTimeUpdateTimer();return}this.dispatchEvent("video-background-time-update")}}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.player.playVideo()),this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-ready")}onVideoStateChange(t){this.currentState=this.convertState(t.data),this.currentState==="ended"&&this.onVideoEnded(),this.currentState==="notstarted"&&this.params.autoplay&&(this.seekTo(this.params["start-at"]),this.player.playVideo()),this.currentState==="playing"&&this.onVideoPlay(),this.currentState==="paused"&&this.onVideoPause(),this.dispatchEvent("video-background-state-change")}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1);const t=this.player.getCurrentTime();this.params["start-at"]&&t=this.duration&&this.seekTo(this.params["start-at"]),this.duration||this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-play"),this.startTimeUpdateTimer()}onVideoPause(){this.stopTimeUpdateTimer(),this.dispatchEvent("video-background-pause")}onVideoEnded(){if(this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.player.playVideo()}seek(t){this.seekTo(this.percentageToTime(t),!0)}seekTo(t,e=!0){this.player&&(this.player.seekTo(t,e),this.dispatchEvent("video-background-seeked"))}softPause(){!this.player||this.currentState==="paused"||(this.stopTimeUpdateTimer(),this.player.pauseVideo())}softPlay(){!this.player||this.currentState==="playing"||this.player.playVideo()}play(){this.player&&(this.paused=!1,this.player.playVideo())}pause(){this.player&&(this.paused=!0,this.stopTimeUpdateTimer(),this.player.pauseVideo())}unmute(){this.player&&(this.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.unMute(),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.mute(),this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.getVolume()/100}setVolume(t){this.player&&(this.volume=t,this.player.setVolume(t*100),this.dispatchEvent("video-background-volume-change"))}},g=class extends h{constructor(t,e,i,s,a){super(t,e,i.id,s,"vimeo",a),i&&(this.unlisted=i.unlisted,!(this.is_mobile&&!this.params.mobile)&&(this.injectScript(),this.player=null,this.injectPlayer(),this.initVimeoPlayer()))}injectScript(){if(window.hasOwnProperty("Vimeo")||document.querySelector('script[src="https://player.vimeo.com/api/player.js"]'))return;const t=document.createElement("script");window.hasOwnProperty("onVimeoIframeAPIReady")&&typeof window.onVimeoIframeAPIReady=="function"&&t.addEventListener("load",()=>{window.onVimeoIframeAPIReady()}),t.src="https://player.vimeo.com/api/player.js";const e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}initVimeoPlayer(){!window.hasOwnProperty("Vimeo")||this.player!==null||(this.player=new Vimeo.Player(this.playerElement),this.player.on("loaded",this.onVideoPlayerReady.bind(this)),this.player.on("ended",this.onVideoEnded.bind(this)),this.player.on("play",this.onVideoPlay.bind(this)),this.player.on("pause",this.onVideoPause.bind(this)),this.player.on("bufferstart",this.onVideoBuffering.bind(this)),this.player.on("timeupdate",this.onVideoTimeUpdate.bind(this)),this.volume!==1&&!this.muted&&this.setVolume(this.volume))}onVideoError(t){console.error(t)}generatePlayerElement(){const t=document.createElement("iframe");return this.params.title&&t.setAttribute("title",this.params.title),t.setAttribute("frameborder",0),t.setAttribute("allow","autoplay; mute"),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}generateSrcURL(t,e){e=e?`h=${e}&`:"";let i=`https://player.vimeo.com/video/${t}?${e}background=1&controls=0`;return this.params.muted&&(i+="&muted=1"),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(i+="&autoplay=1"),this.params.loop&&(i+="&loop=1&autopause=0"),this.params["no-cookie"]&&(i+="&dnt=1"),this.params["start-at"]&&(i+="#t="+this.params["start-at"]+"s"),i}injectPlayer(){this.playerElement=this.generatePlayerElement(),this.src=this.generateSrcURL(this.id,this.unlisted),this.playerElement.src=this.src,this.playerElement.id=this.uid,this.stylePlayerElement(this.playerElement),this.element.appendChild(this.playerElement),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(m);!e||!e.length||(this.id=e[1],this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src),this.loadBackground(this.id))}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&this.player.play(),this.player.getDuration().then(t=>{this.setDuration(t)}),this.dispatchEvent("video-background-ready")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoTimeUpdate(t){this.currentTime=t.seconds,this.percentComplete=this.timeToPercentage(t.seconds),this.dispatchEvent("video-background-time-update"),this.setDuration(t.duration),this.params["end-at"]&&this.duration&&t.seconds>=this.duration&&this.onVideoEnded()}onVideoBuffering(){this.updateState("buffering")}onVideoPlay(t){if(this.setDuration(t.duration),!this.initialPlay&&(this.initialPlay=!0,this.playerElement.style.opacity=1,this.player.setLoop(this.params.loop),!(this.params.autoplay&&(this.params["always-play"]||this.isIntersecting))))return this.player.pause();const e=t.seconds;this.params["start-at"]&&e=this.duration&&this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){this.player&&(this.player.setCurrentTime(t),this.dispatchEvent("video-background-seeked"))}softPause(){!this.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||this.player.play()}play(){this.player&&(this.paused=!1,this.player.play())}pause(){this.player&&(this.paused=!0,this.player.pause())}unmute(){this.player&&(this.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.setMuted(!1),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.setMuted(!0),this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.getVolume()}setVolume(t){this.player&&(this.volume=t,this.player.setVolume(t),this.dispatchEvent("video-background-volume-change"))}},B=class extends h{constructor(t,e,i,s,a){super(t,e,i.link,s,"video",a),!(!i||!i.link)&&(this.is_mobile&&!this.params.mobile||(this.src=i.link,this.ext=/(?:\.([^.]+))?$/.exec(i.id)[1],this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.player=null,this.buttons={},this.MIME_MAP={ogv:"video/ogg",ogm:"video/ogg",ogg:"video/ogg",avi:"video/avi",mp4:"video/mp4",webm:"video/webm"},this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.injectPlayer(),this.mobileLowBatteryAutoplayHack(),this.dispatchEvent("video-background-ready")))}generatePlayerElement(){const t=document.createElement("video");return this.params.title&&t.setAttribute("title",this.params.title),t.setAttribute("playsinline",""),this.params.loop&&t.setAttribute("loop",""),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(t.setAttribute("autoplay",""),t.autoplay=!0),this.muted&&(t.setAttribute("muted",""),t.muted=!0),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}injectPlayer(){this.player=this.generatePlayerElement(),this.playerElement=this.player,this.volume!==1&&!this.muted&&this.setVolume(this.volume),this.playerElement.setAttribute("id",this.uid),this.stylePlayerElement(this.playerElement),this.player.addEventListener("loadedmetadata",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("durationchange",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("canplay",this.onVideoCanPlay.bind(this)),this.player.addEventListener("timeupdate",this.onVideoTimeUpdate.bind(this)),this.player.addEventListener("play",this.onVideoPlay.bind(this)),this.player.addEventListener("pause",this.onVideoPause.bind(this)),this.player.addEventListener("waiting",this.onVideoBuffering.bind(this)),this.player.addEventListener("ended",this.onVideoEnded.bind(this)),this.element.appendChild(this.playerElement);const t=document.createElement("source");t.setAttribute("src",this.src),t.setAttribute("type",this.mime),this.playerElement.appendChild(t),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(c);if(!e||!e.length)return;this.id=e[1],this.ext=/(?:\.([^.]+))?$/.exec(this.id)[1],this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.playerElement.innerHTML="";const i=document.createElement("source");i.setAttribute("src",t),i.setAttribute("type",this.mime),this.playerElement.appendChild(i),this.src=t,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src)}onVideoLoadedMetadata(){this.setDuration(this.player.duration)}onVideoCanPlay(){this.setDuration(this.player.duration)}onVideoTimeUpdate(){this.currentTime=this.player.currentTime,this.percentComplete=this.timeToPercentage(this.player.currentTime),this.dispatchEvent("video-background-time-update"),this.params["end-at"]&&this.currentTime>=this.duration&&this.onVideoEnded()}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1);const t=this.player.currentTime;this.params["start-at"]&&t<=this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.duration&&t>=this.duration&&this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.onVideoPlay()}onVideoBuffering(){this.updateState("buffering")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){if(this.player){if(this.player.hasOwnProperty("fastSeek")){this.player.fastSeek(t);return}this.player.currentTime=t,this.dispatchEvent("video-background-seeked")}}softPause(){!this.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||this.player.play()}play(){this.player&&(this.paused=!1,this.player.play())}pause(){this.player&&(this.paused=!0,this.player.pause())}unmute(){this.player&&(this.muted=!1,this.player.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.muted=!0,this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.volume}setVolume(t){this.player&&(this.volume=t,this.player.volume=t,this.dispatchEvent("video-background-volume-change"))}},b=class{constructor(t,e){this.elements=t,this.elements instanceof Element&&(this.elements=[this.elements]),typeof this.elements=="string"&&(this.elements=document.querySelectorAll(t)),this.index={};const i=this;if(this.intersectionObserver=null,"IntersectionObserver"in window&&(this.intersectionObserver=new IntersectionObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");if(r&&i.index.hasOwnProperty(r)&&a.isIntersecting){i.index[r].isIntersecting=!0;try{i.index[r].player&&!i.index[r].paused&&i.index[r].softPlay()}catch{}}else{i.index[r].isIntersecting=!1;try{i.index[r].player&&i.index[r].softPause()}catch{}}})})),this.resizeObserver=null,"ResizeObserver"in window?this.resizeObserver=new ResizeObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");r&&i.index.hasOwnProperty(r)&&window.requestAnimationFrame(()=>i.index[r].resize())})}):window.addEventListener("resize",function(){for(let s in i.index)window.requestAnimationFrame(()=>i.index[s].resize(i.index[s].playerElement))}),this.initPlayers(),!(!this.elements||!this.elements.length)){for(let s=0;s this.setProgress(this.vbgInstance.percentComplete));\n }\n\n onDestroyed(event) {\n this.vbgInstance = null;\n requestAnimationFrame(() => this.setProgress(0));\n }\n\n onInput(event) {\n this.lock = true;\n requestAnimationFrame(() => this.setProgress(event.target.value));\n }\n\n onChange(event) {\n this.lock = false;\n requestAnimationFrame(() => this.setProgress(event.target.value));\n if (this.vbgInstance) {\n this.vbgInstance.seek(event.target.value);\n if (this.vbgInstance.playerElement && this.vbgInstance.playerElement.style.opacity === 0) this.vbgInstance.playerElement.style.opacity = 1;\n }\n}\n\n setProgress(value) {\n if (this.progressElem) this.progressElem.value = value;\n if (this.inputElem) this.inputElem.value = value;\n }\n}\n\nexport class VideoBackgroundGroup {\n constructor(selector, videoBackgroundSelector, videoBackgroundFactoryInstance) {\n this.element = selector;\n if (typeof this.element === 'string') this.element = document.querySelector(selector);\n if (!this.element) return;\n this.elements = this.element.querySelectorAll(videoBackgroundSelector || '[data-vbg]');\n if (!this.elements.length) return;\n\n this.videoBackgroundFactoryInstance = videoBackgroundFactoryInstance;\n this.stack = [];\n this.map = new Map();\n this.current = 0;\n this.currentElement = null;\n this.currentInstance = null;\n\n this.playing = false;\n this.muted = true;\n\n for (let i = 0; i < this.elements.length; i++) {\n const element = this.elements[i];\n if (!element.hasAttribute('data-vbg-uid') && this.videoBackgroundFactoryInstance) this.videoBackgroundFactoryInstance.add(element);\n this.stack.push(element);\n this.map.set(element, i);\n \n if (i === 0) {\n this.current = 0;\n this.currentElement = element;\n if (this.videoBackgroundFactoryInstance) this.currentInstance = this.videoBackgroundFactoryInstance.get(element);\n }\n element.addEventListener('video-background-ended', this.onVideoEnded.bind(this));\n element.addEventListener('video-background-seeked', this.onVideoSeeked.bind(this));\n element.addEventListener('video-background-pause', this.onVideoPause.bind(this));\n element.addEventListener('video-background-ready', this.onVideoReady.bind(this));\n element.addEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this), { once: true });\n element.addEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this), { once: true });\n }\n }\n\n setVideoBackgroundFactoryInstance(event) {\n if (this.videoBackgroundFactoryInstance) return;\n this.videoBackgroundFactoryInstance = event.detail.factoryInstance;\n if (!this.currentInstance) this.currentInstance = this.videoBackgroundFactoryInstance.get(this.currentElement);\n }\n\n onVideoReady(event) {\n if (this.stack[this.current] !== event.detail.element) return;\n this.setVideoBackgroundFactoryInstance(event);\n const videoBackground = event.detail;\n if (videoBackground.params.muted) this.muted = true;\n if (!videoBackground.isIntersecting) return;\n if (!videoBackground.params.autoplay) return;\n this.playing = true;\n if (videoBackground.currentState === 'playing') return;\n videoBackground.softPlay();\n }\n\n onVideoPause(event) {;\n this.setVideoBackgroundFactoryInstance(event);\n const stackIndex = this.map.get(event.detail.element);\n if (stackIndex === this.current) return;\n }\n\n levelSeekBars() {\n for (let i = 0; i < this.stack.length; i++) {\n if (i === this.current) continue;\n const seekBarElem = this.getSeekBar(this.videoBackgroundFactoryInstance.get(this.stack[i]));\n if (!seekBarElem) continue;\n if (i < this.current) {\n this.setProgress(seekBarElem, 100);\n } else {\n this.setProgress(seekBarElem, 0);\n }\n }\n }\n\n getSeekBar(currentInstance) {\n if (!currentInstance) return;\n const uid = currentInstance.uid;\n const element = document.querySelector(`.js-seek-bar-wrap[data-target-uid=\"${uid}\"]`);\n if (!element) return;\n return element;\n }\n\n setProgress(seekBarElem, value) {\n if (!seekBarElem) return;\n const progressElem = seekBarElem.querySelector('.js-seek-bar-progress');\n const inputElem = seekBarElem.querySelector('.js-seek-bar');\n if (progressElem) progressElem.value = value;\n if (inputElem) inputElem.value = value;\n }\n\n onVideoSeeked(event) {\n const current = this.map.get(event.detail.element);\n if (this.current !== current) this.setCurrent(current, true);\n }\n\n setCurrent(index, seek) {\n const previous = this.current;\n if (index >= this.stack.length) index = 0;\n if (index < 0) index = this.stack.length - 1;\n const previousInstance = this.videoBackgroundFactoryInstance.get(this.stack[previous]);\n this.current = index;\n this.currentInstance = this.videoBackgroundFactoryInstance.get(this.stack[this.current]);\n this.currentElement = this.stack[this.current];\n \n this.stack[previous].style.display = 'none';\n this.currentElement.style.display = 'block';\n\n if (!seek) {\n const seekBarElem = this.getSeekBar(this.currentInstance);\n if (seekBarElem) this.setProgress(seekBarElem, 0);\n this.currentInstance.seek(0);\n }\n\n setTimeout(() => {\n if (this.currentInstance.currentState !== 'playing') this.currentInstance.play();\n }, 100);\n if (previousInstance && previousInstance.currentState !== 'paused') previousInstance.pause();\n\n setTimeout(this.levelSeekBars.bind(this), 100);\n\n if (index >= this.stack.length) this.dispatchEvent('video-background-group-forward-rewind');\n if (index < 0) this.dispatchEvent('video-background-group-backward-rewind');\n }\n\n dispatchEvent(name) {\n this.element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: this }));\n }\n\n onVideoEnded(event) {\n if (event.detail.element !== this.currentElement) return;\n this.next();\n }\n\n next() {\n this.setCurrent(this.current + 1);\n this.dispatchEvent('video-background-group-next');\n }\n\n prev() {\n this.setCurrent(this.current - 1);\n this.dispatchEvent('video-background-group-previous');\n }\n\n unmute() {\n for (let i = 0; i < this.stack.length; i++) {\n const instance = this.videoBackgroundFactoryInstance.get(this.stack[i]);\n if (!instance) continue;\n instance.unmute();\n }\n\n this.muted = false;\n this.dispatchEvent('video-background-group-umnute');\n }\n\n mute() {\n for (let i = 0; i < this.stack.length; i++) {\n const instance = this.videoBackgroundFactoryInstance.get(this.stack[i]);\n if (!instance) continue;\n instance.mute();\n }\n\n this.muted = true;\n this.dispatchEvent('video-background-group-mute');\n }\n\n pause() {\n this.currentInstance.pause();\n this.playing = false;\n this.dispatchEvent('video-background-group-previous');\n }\n\n play() {\n this.currentInstance.play();\n this.playing = true;\n this.dispatchEvent('video-background-group-previous');\n }\n\n destroy() {\n for (let i = 0; i < this.elements.length; i++) {\n const element = this.elements[i];\n element.removeEventListener('video-background-ended', this.onVideoEnded.bind(this));\n element.removeEventListener('video-background-seeked', this.onVideoSeeked.bind(this));\n element.removeEventListener('video-background-pause', this.onVideoPause.bind(this));\n element.removeEventListener('video-background-ready', this.onVideoReady.bind(this));\n element.removeEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this));\n element.removeEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this));\n }\n }\n}\n\nexport class PlayToggle {\n constructor(playToggleElem, vbgInstance) {\n if (!playToggleElem) return;\n \n this.element = playToggleElem;\n this.targetSelector = this.element.getAttribute('data-target');\n\n if (!this.targetSelector) return;\n this.active = false;\n\n if (this.element.hasAttribute('aria-checked')) {\n this.active = this.element.getAttribute('aria-checked') === 'true';\n } else {\n this.element.setAttribute('aria-checked', this.active);\n }\n\n this.element.setAttribute('role', 'switch');\n\n this.targetElem = document.querySelector(this.targetSelector);\n if (!this.targetElem) return;\n\n if (vbgInstance) this.vbgInstance = vbgInstance;\n\n this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));\n this.targetElem.addEventListener('video-background-state-change', this.onStateChange.bind(this));\n this.targetElem.addEventListener('video-background-play', this.onPlay.bind(this));\n this.targetElem.addEventListener('video-background-pause', this.onPause.bind(this));\n this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));\n\n this.element.addEventListener('click', this.onClick.bind(this));\n }\n\n onReady(event) {\n this.vbgInstance = event.detail;\n }\n\n onStateChange(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = this.vbgInstance.currentState === 'playing' || this.vbgInstance.currentState === 'buffering';\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onPlay(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = true;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onPause(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onDestroyed(event) {\n this.vbgInstance = null;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onClick(event) {\n if (!this.vbgInstance) return;\n if (this.active) {\n this.vbgInstance.pause();\n } else {\n this.vbgInstance.play();\n }\n }\n}\n\nexport class MuteToggle {\n constructor(muteToggleElem, vbgInstance) {\n if (!muteToggleElem) return;\n \n this.element = muteToggleElem;\n this.targetSelector = this.element.getAttribute('data-target');\n\n if (!this.targetSelector) return;\n this.active = false;\n\n if (this.element.hasAttribute('aria-checked')) {\n this.active = this.element.getAttribute('aria-checked') === 'true';\n } else {\n this.element.setAttribute('aria-checked', this.active);\n }\n\n this.element.setAttribute('role', 'switch');\n\n this.targetElem = document.querySelector(this.targetSelector);\n if (!this.targetElem) return;\n\n if (vbgInstance) this.vbgInstance = vbgInstance;\n\n this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));\n this.targetElem.addEventListener('video-background-mute', this.onMute.bind(this));\n this.targetElem.addEventListener('video-background-unmute', this.onUnmute.bind(this));\n this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));\n\n this.element.addEventListener('click', this.onClick.bind(this));\n }\n\n onReady(event) {\n this.vbgInstance = event.detail;\n if (this.vbgInstance.params.muted) {\n this.active = true;\n this.element.setAttribute('aria-checked', this.active);\n }\n }\n\n onMute(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = true;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onUnmute(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onDestroyed(event) {\n this.vbgInstance = null;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onClick(event) {\n if (!this.vbgInstance) return;\n if (this.active) {\n this.vbgInstance.unmute();\n } else {\n this.vbgInstance.mute();\n }\n }\n}\n\n// TODO: this can be achieved with custom elements... Maybe it's finally time to use them?\nclass GeneralFactory {\n constructor(selector, callback, uidAttribute = 'data-uid') {\n this.instances = {};\n this.selector = selector;\n this.elements = [];\n this.callback = callback;\n this.uidAttribute = uidAttribute;\n\n if (!callback || typeof callback !== 'function') return;\n\n if (typeof this.selector === 'string') {\n this.elements = document.querySelectorAll(this.selector);\n }\n\n if (this.selector instanceof Element) {\n this.elements = [this.selector];\n }\n\n if (this.selector instanceof NodeList) {\n this.elements = this.selector;\n }\n\n for (let i = 0; i < this.elements.length; i++) {\n this.add(this.elements[i]);\n\n // TODO: maybe manage elements array?\n }\n }\n\n basicUID() {\n return Date.now().toString(36) + Math.random().toString(36).substring(2);\n }\n\n generateUID() {\n let tempuid = this.basicUID();\n if (!this.instances.hasOwnProperty(tempuid)) return tempuid;\n return this.generateUID();\n }\n\n add(element) {\n let id = element.getAttribute('id');\n if (!id || this.instances.hasOwnProperty(id)) {\n id = element.getAttribute(this.uidAttribute);\n\n if (!id || this.instances.hasOwnProperty(id)) {\n id = this.generateUID();\n element.setAttribute(this.uidAttribute, id);\n }\n }\n\n if (this.callback && typeof this.callback === 'function') \n this.instances[id] = this.callback(element, id, this);\n }\n\n getID(element) {\n if (!element) return;\n if (typeof element === 'string') return element;\n const id = element.getAttribute('id');\n if (id && this.instances.hasOwnProperty(id)) return id;\n const uid = element.getAttribute(this.uidAttribute);\n if (uid && this.instances.hasOwnProperty(uid)) return uid;\n }\n\n get(element) {\n if (!element) return;\n const id = this.getID(element);\n if (!id) return;\n return this.instances[id];\n }\n\n destroy(element) {\n if (!element) return;\n const id = this.getID(element);\n if (!id) return;\n const instance = this.instances[id];\n if (instance.hasOwnProperty('destroy') && typeof instance.destroy == 'function') this.instances[id].destroy();\n delete this.instances[id];\n }\n\n destroyAll() {\n for (const uid in this.instances) {\n const instance = this.instances[uid];\n if (instance.hasOwnProperty('destroy') && typeof instance.destroy == 'function') instance.destroy();\n delete this.instances[uid];\n }\n }\n}\n\nexport class VideoBackgroundGroups extends GeneralFactory {\n constructor(selector = '.js-vbg-group', videoBackgroundSelector, videoBackgroundFactoryInstance) {\n super(selector, (element, id, factoryInstance) => new VideoBackgroundGroup(element, videoBackgroundSelector, videoBackgroundFactoryInstance));\n }\n}\n", "import { SeekBar, PlayToggle, MuteToggle, VideoBackgroundGroup, VideoBackgroundGroups } from \"./lib/controls\";\n\nwindow.SeekBar = SeekBar;\nwindow.PlayToggle = PlayToggle;\nwindow.MuteToggle = MuteToggle;\nwindow.VideoBackgroundGroup = VideoBackgroundGroup;\nwindow.VideoBackgroundGroups = VideoBackgroundGroups;\n"],
- "mappings": "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",
+ "sourcesContent": ["export class SeekBar {\n constructor(element, vbgInstance) {\n this.lock = false;\n if (!element) return;\n this.element = element;\n if (this.element.hasAttribute('data-target-uid')) return;\n this.progressElem = this.element.querySelector('.js-seek-bar-progress');\n this.inputElem = this.element.querySelector('.js-seek-bar');\n this.targetSelector = this.element.getAttribute('data-target');\n if (this.targetSelector) this.targetElem = document.querySelector(this.targetSelector);\n if (!this.targetSelector && vbgInstance) this.targetElem = vbgInstance.element;\n if (!this.targetElem) return;\n\n if (vbgInstance) this.setVBGInstance(vbgInstance);\n \n this.targetElem.addEventListener('video-background-time-update', this.onTimeUpdate.bind(this));\n this.targetElem.addEventListener('video-background-play', this.onReady.bind(this));\n this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));\n this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));\n\n this.inputElem.addEventListener('input', this.onInput.bind(this));\n this.inputElem.addEventListener('change', this.onChange.bind(this));\n }\n\n setVBGInstance(vbgInstance) {\n if (this.vbgInstance) return;\n this.vbgInstance = vbgInstance;\n this.element.setAttribute('data-target-uid', vbgInstance.uid);\n }\n\n onReady(event) {\n this.setVBGInstance(event.detail);\n }\n\n onTimeUpdate(event) {\n this.setVBGInstance(event.detail);\n if (!this.lock) requestAnimationFrame(() => this.setProgress(this.vbgInstance.percentComplete));\n }\n\n onDestroyed(event) {\n this.vbgInstance = null;\n requestAnimationFrame(() => this.setProgress(0));\n }\n\n onInput(event) {\n this.lock = true;\n requestAnimationFrame(() => this.setProgress(event.target.value));\n }\n\n onChange(event) {\n this.lock = false;\n requestAnimationFrame(() => this.setProgress(event.target.value));\n if (this.vbgInstance) {\n this.vbgInstance.seek(event.target.value);\n if (this.vbgInstance.playerElement && this.vbgInstance.playerElement.style.opacity === 0) this.vbgInstance.playerElement.style.opacity = 1;\n }\n}\n\n setProgress(value) {\n if (this.progressElem) this.progressElem.value = value;\n if (this.inputElem) this.inputElem.value = value;\n }\n}\n\nexport class VideoBackgroundGroup {\n constructor(selector, videoBackgroundSelector, videoBackgroundFactoryInstance) {\n this.element = selector;\n if (typeof this.element === 'string') this.element = document.querySelector(selector);\n if (!this.element) return;\n this.elements = this.element.querySelectorAll(videoBackgroundSelector || '[data-vbg]');\n if (!this.elements.length) return;\n\n this.videoBackgroundFactoryInstance = videoBackgroundFactoryInstance;\n this.stack = [];\n this.map = new Map();\n this.current = 0;\n this.currentElement = null;\n this.currentInstance = null;\n\n this.playing = false;\n this.muted = true;\n\n for (let i = 0; i < this.elements.length; i++) {\n const element = this.elements[i];\n if (!element.hasAttribute('data-vbg-uid') && this.videoBackgroundFactoryInstance) this.videoBackgroundFactoryInstance.add(element);\n this.stack.push(element);\n this.map.set(element, i);\n \n if (i === 0) {\n this.current = 0;\n this.currentElement = element;\n if (this.videoBackgroundFactoryInstance) this.currentInstance = this.videoBackgroundFactoryInstance.get(element);\n }\n element.addEventListener('video-background-ended', this.onVideoEnded.bind(this));\n element.addEventListener('video-background-seeked', this.onVideoSeeked.bind(this));\n element.addEventListener('video-background-pause', this.onVideoPause.bind(this));\n element.addEventListener('video-background-ready', this.onVideoReady.bind(this));\n element.addEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this), { once: true });\n element.addEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this), { once: true });\n }\n }\n\n setVideoBackgroundFactoryInstance(event) {\n if (this.videoBackgroundFactoryInstance) return;\n this.videoBackgroundFactoryInstance = event.detail.factoryInstance;\n if (!this.currentInstance) this.currentInstance = this.videoBackgroundFactoryInstance.get(this.currentElement);\n }\n\n onVideoReady(event) {\n if (this.stack[this.current] !== event.detail.element) return;\n this.setVideoBackgroundFactoryInstance(event);\n const videoBackground = event.detail;\n if (videoBackground.params.muted) this.muted = true;\n if (!videoBackground.isIntersecting) return;\n if (!videoBackground.params.autoplay) return;\n this.playing = true;\n if (videoBackground.currentState === 'playing') return;\n videoBackground.softPlay();\n }\n\n onVideoPause(event) {;\n this.setVideoBackgroundFactoryInstance(event);\n const stackIndex = this.map.get(event.detail.element);\n if (stackIndex === this.current) return;\n }\n\n levelSeekBars() {\n for (let i = 0; i < this.stack.length; i++) {\n if (i === this.current) continue;\n const seekBarElem = this.getSeekBar(this.videoBackgroundFactoryInstance.get(this.stack[i]));\n if (!seekBarElem) continue;\n if (i < this.current) {\n this.setProgress(seekBarElem, 100);\n } else {\n this.setProgress(seekBarElem, 0);\n }\n }\n }\n\n getSeekBar(currentInstance) {\n if (!currentInstance) return;\n const uid = currentInstance.uid;\n const element = document.querySelector(`.js-seek-bar-wrap[data-target-uid=\"${uid}\"]`);\n if (!element) return;\n return element;\n }\n\n setProgress(seekBarElem, value) {\n if (!seekBarElem) return;\n const progressElem = seekBarElem.querySelector('.js-seek-bar-progress');\n const inputElem = seekBarElem.querySelector('.js-seek-bar');\n if (progressElem) progressElem.value = value;\n if (inputElem) inputElem.value = value;\n }\n\n onVideoSeeked(event) {\n const current = this.map.get(event.detail.element);\n if (this.current !== current) this.setCurrent(current, true);\n }\n\n setCurrent(index, seek) {\n const previous = this.current;\n if (index >= this.stack.length) index = 0;\n if (index < 0) index = this.stack.length - 1;\n const previousInstance = this.videoBackgroundFactoryInstance.get(this.stack[previous]);\n this.current = index;\n this.currentInstance = this.videoBackgroundFactoryInstance.get(this.stack[this.current]);\n this.currentElement = this.stack[this.current];\n \n this.stack[previous].style.display = 'none';\n this.currentElement.style.display = 'block';\n\n if (!seek) {\n const seekBarElem = this.getSeekBar(this.currentInstance);\n if (seekBarElem) this.setProgress(seekBarElem, 0);\n this.currentInstance.seek(0);\n }\n\n setTimeout(() => {\n if (this.currentInstance.currentState !== 'playing') this.currentInstance.play();\n }, 100);\n if (previousInstance && previousInstance.currentState !== 'paused') previousInstance.pause();\n\n setTimeout(this.levelSeekBars.bind(this), 100);\n\n if (index >= this.stack.length) this.dispatchEvent('video-background-group-forward-rewind');\n if (index < 0) this.dispatchEvent('video-background-group-backward-rewind');\n }\n\n dispatchEvent(name) {\n this.element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: this }));\n }\n\n onVideoEnded(event) {\n if (event.detail.element !== this.currentElement) return;\n this.next();\n }\n\n next() {\n this.setCurrent(this.current + 1);\n this.dispatchEvent('video-background-group-next');\n }\n\n prev() {\n this.setCurrent(this.current - 1);\n this.dispatchEvent('video-background-group-previous');\n }\n\n unmute() {\n for (let i = 0; i < this.stack.length; i++) {\n const instance = this.videoBackgroundFactoryInstance.get(this.stack[i]);\n if (!instance) continue;\n instance.unmute();\n }\n\n this.muted = false;\n this.dispatchEvent('video-background-group-umnute');\n }\n\n mute() {\n for (let i = 0; i < this.stack.length; i++) {\n const instance = this.videoBackgroundFactoryInstance.get(this.stack[i]);\n if (!instance) continue;\n instance.mute();\n }\n\n this.muted = true;\n this.dispatchEvent('video-background-group-mute');\n }\n\n pause() {\n this.currentInstance.pause();\n this.playing = false;\n this.dispatchEvent('video-background-group-pause');\n }\n\n play() {\n this.currentInstance.play();\n this.playing = true;\n this.dispatchEvent('video-background-group-play');\n }\n\n destroy() {\n for (let i = 0; i < this.elements.length; i++) {\n const element = this.elements[i];\n element.removeEventListener('video-background-ended', this.onVideoEnded.bind(this));\n element.removeEventListener('video-background-seeked', this.onVideoSeeked.bind(this));\n element.removeEventListener('video-background-pause', this.onVideoPause.bind(this));\n element.removeEventListener('video-background-ready', this.onVideoReady.bind(this));\n element.removeEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this));\n element.removeEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this));\n }\n }\n}\n\nexport class PlayToggle {\n constructor(playToggleElem, vbgInstance) {\n if (!playToggleElem) return;\n \n this.element = playToggleElem;\n this.targetSelector = this.element.getAttribute('data-target');\n\n if (!this.targetSelector) return;\n this.active = false;\n\n if (this.element.hasAttribute('aria-checked')) {\n this.active = this.element.getAttribute('aria-checked') === 'true';\n } else {\n this.element.setAttribute('aria-checked', this.active);\n }\n\n this.element.setAttribute('role', 'switch');\n\n this.targetElem = document.querySelector(this.targetSelector);\n if (!this.targetElem) return;\n\n if (vbgInstance) this.vbgInstance = vbgInstance;\n\n this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));\n this.targetElem.addEventListener('video-background-state-change', this.onStateChange.bind(this));\n this.targetElem.addEventListener('video-background-play', this.onPlay.bind(this));\n this.targetElem.addEventListener('video-background-pause', this.onPause.bind(this));\n this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));\n\n this.element.addEventListener('click', this.onClick.bind(this));\n }\n\n onReady(event) {\n this.vbgInstance = event.detail;\n }\n\n onStateChange(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = this.vbgInstance.currentState === 'playing' || this.vbgInstance.currentState === 'buffering';\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onPlay(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = true;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onPause(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onDestroyed(event) {\n this.vbgInstance = null;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onClick(event) {\n if (!this.vbgInstance) return;\n if (this.active) {\n this.vbgInstance.pause();\n } else {\n this.vbgInstance.play();\n }\n }\n}\n\nexport class MuteToggle {\n constructor(muteToggleElem, vbgInstance) {\n if (!muteToggleElem) return;\n \n this.element = muteToggleElem;\n this.targetSelector = this.element.getAttribute('data-target');\n\n if (!this.targetSelector) return;\n this.active = false;\n\n if (this.element.hasAttribute('aria-checked')) {\n this.active = this.element.getAttribute('aria-checked') === 'true';\n } else {\n this.element.setAttribute('aria-checked', this.active);\n }\n\n this.element.setAttribute('role', 'switch');\n\n this.targetElem = document.querySelector(this.targetSelector);\n if (!this.targetElem) return;\n\n if (vbgInstance) this.vbgInstance = vbgInstance;\n\n this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));\n this.targetElem.addEventListener('video-background-mute', this.onMute.bind(this));\n this.targetElem.addEventListener('video-background-unmute', this.onUnmute.bind(this));\n this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));\n\n this.element.addEventListener('click', this.onClick.bind(this));\n }\n\n onReady(event) {\n this.vbgInstance = event.detail;\n if (this.vbgInstance.params.muted) {\n this.active = true;\n this.element.setAttribute('aria-checked', this.active);\n }\n }\n\n onMute(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = true;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onUnmute(event) {\n if (!this.vbgInstance) this.vbgInstance = event.detail;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onDestroyed(event) {\n this.vbgInstance = null;\n this.active = false;\n this.element.setAttribute('aria-checked', this.active);\n }\n\n onClick(event) {\n if (!this.vbgInstance) return;\n if (this.active) {\n this.vbgInstance.unmute();\n } else {\n this.vbgInstance.mute();\n }\n }\n}\n\n// TODO: this can be achieved with custom elements... Maybe it's finally time to use them?\nclass GeneralFactory {\n constructor(selector, callback, uidAttribute = 'data-uid') {\n this.instances = {};\n this.selector = selector;\n this.elements = [];\n this.callback = callback;\n this.uidAttribute = uidAttribute;\n\n if (!callback || typeof callback !== 'function') return;\n\n if (typeof this.selector === 'string') {\n this.elements = document.querySelectorAll(this.selector);\n }\n\n if (this.selector instanceof Element) {\n this.elements = [this.selector];\n }\n\n if (this.selector instanceof NodeList) {\n this.elements = this.selector;\n }\n\n for (let i = 0; i < this.elements.length; i++) {\n this.add(this.elements[i]);\n\n // TODO: maybe manage elements array?\n }\n }\n\n basicUID() {\n return Date.now().toString(36) + Math.random().toString(36).substring(2);\n }\n\n generateUID() {\n let tempuid = this.basicUID();\n if (!this.instances.hasOwnProperty(tempuid)) return tempuid;\n return this.generateUID();\n }\n\n add(element) {\n let id = element.getAttribute('id');\n if (!id || this.instances.hasOwnProperty(id)) {\n id = element.getAttribute(this.uidAttribute);\n\n if (!id || this.instances.hasOwnProperty(id)) {\n id = this.generateUID();\n element.setAttribute(this.uidAttribute, id);\n }\n }\n\n if (this.callback && typeof this.callback === 'function') \n this.instances[id] = this.callback(element, id, this);\n }\n\n getID(element) {\n if (!element) return;\n if (typeof element === 'string') return element;\n const id = element.getAttribute('id');\n if (id && this.instances.hasOwnProperty(id)) return id;\n const uid = element.getAttribute(this.uidAttribute);\n if (uid && this.instances.hasOwnProperty(uid)) return uid;\n }\n\n get(element) {\n if (!element) return;\n const id = this.getID(element);\n if (!id) return;\n return this.instances[id];\n }\n\n destroy(element) {\n if (!element) return;\n const id = this.getID(element);\n if (!id) return;\n const instance = this.instances[id];\n if (instance.hasOwnProperty('destroy') && typeof instance.destroy == 'function') this.instances[id].destroy();\n delete this.instances[id];\n }\n\n destroyAll() {\n for (const uid in this.instances) {\n const instance = this.instances[uid];\n if (instance.hasOwnProperty('destroy') && typeof instance.destroy == 'function') instance.destroy();\n delete this.instances[uid];\n }\n }\n}\n\nexport class VideoBackgroundGroups extends GeneralFactory {\n constructor(selector = '.js-vbg-group', videoBackgroundSelector, videoBackgroundFactoryInstance) {\n super(selector, (element, id, factoryInstance) => new VideoBackgroundGroup(element, videoBackgroundSelector, videoBackgroundFactoryInstance));\n }\n}\n", "import { SeekBar, PlayToggle, MuteToggle, VideoBackgroundGroup, VideoBackgroundGroups } from \"./lib/controls\";\n\nwindow.SeekBar = SeekBar;\nwindow.PlayToggle = PlayToggle;\nwindow.MuteToggle = MuteToggle;\nwindow.VideoBackgroundGroup = VideoBackgroundGroup;\nwindow.VideoBackgroundGroups = VideoBackgroundGroups;\n"],
+ "mappings": "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",
"names": []
}
diff --git a/youtube-background-experimental.min.js b/youtube-background-experimental.min.js
index 65dc410..7ab0eee 100644
--- a/youtube-background-experimental.min.js
+++ b/youtube-background-experimental.min.js
@@ -1,2 +1,2 @@
/* youtube-background v1.1.5 | https://github.com/stamat/youtube-background | MIT License */
-(()=>{var a=class{constructor(t,e){this.lock=!1,t&&(this.element=t,!this.element.hasAttribute("data-target-uid")&&(this.progressElem=this.element.querySelector(".js-seek-bar-progress"),this.inputElem=this.element.querySelector(".js-seek-bar"),this.targetSelector=this.element.getAttribute("data-target"),this.targetSelector&&(this.targetElem=document.querySelector(this.targetSelector)),!this.targetSelector&&e&&(this.targetElem=e.element),this.targetElem&&(e&&this.setVBGInstance(e),this.targetElem.addEventListener("video-background-time-update",this.onTimeUpdate.bind(this)),this.targetElem.addEventListener("video-background-play",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-ready",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-destroyed",this.onDestroyed.bind(this)),this.inputElem.addEventListener("input",this.onInput.bind(this)),this.inputElem.addEventListener("change",this.onChange.bind(this)))))}setVBGInstance(t){this.vbgInstance||(this.vbgInstance=t,this.element.setAttribute("data-target-uid",t.uid))}onReady(t){this.setVBGInstance(t.detail)}onTimeUpdate(t){this.setVBGInstance(t.detail),this.lock||requestAnimationFrame(()=>this.setProgress(this.vbgInstance.percentComplete))}onDestroyed(t){this.vbgInstance=null,requestAnimationFrame(()=>this.setProgress(0))}onInput(t){this.lock=!0,requestAnimationFrame(()=>this.setProgress(t.target.value))}onChange(t){this.lock=!1,requestAnimationFrame(()=>this.setProgress(t.target.value)),this.vbgInstance&&(this.vbgInstance.seek(t.target.value),this.vbgInstance.playerElement&&this.vbgInstance.playerElement.style.opacity===0&&(this.vbgInstance.playerElement.style.opacity=1))}setProgress(t){this.progressElem&&(this.progressElem.value=t),this.inputElem&&(this.inputElem.value=t)}},r=class{constructor(t,e,i){if(this.element=t,typeof this.element=="string"&&(this.element=document.querySelector(t)),!!this.element&&(this.elements=this.element.querySelectorAll(e||"[data-vbg]"),!!this.elements.length)){this.videoBackgroundFactoryInstance=i,this.stack=[],this.map=new Map,this.current=0,this.currentElement=null,this.currentInstance=null,this.playing=!1,this.muted=!0;for(let s=0;s=this.stack.length&&(t=0),t<0&&(t=this.stack.length-1);const s=this.videoBackgroundFactoryInstance.get(this.stack[i]);if(this.current=t,this.currentInstance=this.videoBackgroundFactoryInstance.get(this.stack[this.current]),this.currentElement=this.stack[this.current],this.stack[i].style.display="none",this.currentElement.style.display="block",!e){const n=this.getSeekBar(this.currentInstance);n&&this.setProgress(n,0),this.currentInstance.seek(0)}setTimeout(()=>{this.currentInstance.currentState!=="playing"&&this.currentInstance.play()},100),s&&s.currentState!=="paused"&&s.pause(),setTimeout(this.levelSeekBars.bind(this),100),t>=this.stack.length&&this.dispatchEvent("video-background-group-forward-rewind"),t<0&&this.dispatchEvent("video-background-group-backward-rewind")}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}onVideoEnded(t){t.detail.element===this.currentElement&&this.next()}next(){this.setCurrent(this.current+1),this.dispatchEvent("video-background-group-next")}prev(){this.setCurrent(this.current-1),this.dispatchEvent("video-background-group-previous")}unmute(){for(let t=0;tnew r(s,e,i))}};window.SeekBar=a,window.PlayToggle=h,window.MuteToggle=c,window.VideoBackgroundGroup=r,window.VideoBackgroundGroups=d})();
+(()=>{var a=class{constructor(t,e){this.lock=!1,t&&(this.element=t,!this.element.hasAttribute("data-target-uid")&&(this.progressElem=this.element.querySelector(".js-seek-bar-progress"),this.inputElem=this.element.querySelector(".js-seek-bar"),this.targetSelector=this.element.getAttribute("data-target"),this.targetSelector&&(this.targetElem=document.querySelector(this.targetSelector)),!this.targetSelector&&e&&(this.targetElem=e.element),this.targetElem&&(e&&this.setVBGInstance(e),this.targetElem.addEventListener("video-background-time-update",this.onTimeUpdate.bind(this)),this.targetElem.addEventListener("video-background-play",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-ready",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-destroyed",this.onDestroyed.bind(this)),this.inputElem.addEventListener("input",this.onInput.bind(this)),this.inputElem.addEventListener("change",this.onChange.bind(this)))))}setVBGInstance(t){this.vbgInstance||(this.vbgInstance=t,this.element.setAttribute("data-target-uid",t.uid))}onReady(t){this.setVBGInstance(t.detail)}onTimeUpdate(t){this.setVBGInstance(t.detail),this.lock||requestAnimationFrame(()=>this.setProgress(this.vbgInstance.percentComplete))}onDestroyed(t){this.vbgInstance=null,requestAnimationFrame(()=>this.setProgress(0))}onInput(t){this.lock=!0,requestAnimationFrame(()=>this.setProgress(t.target.value))}onChange(t){this.lock=!1,requestAnimationFrame(()=>this.setProgress(t.target.value)),this.vbgInstance&&(this.vbgInstance.seek(t.target.value),this.vbgInstance.playerElement&&this.vbgInstance.playerElement.style.opacity===0&&(this.vbgInstance.playerElement.style.opacity=1))}setProgress(t){this.progressElem&&(this.progressElem.value=t),this.inputElem&&(this.inputElem.value=t)}},r=class{constructor(t,e,i){if(this.element=t,typeof this.element=="string"&&(this.element=document.querySelector(t)),!!this.element&&(this.elements=this.element.querySelectorAll(e||"[data-vbg]"),!!this.elements.length)){this.videoBackgroundFactoryInstance=i,this.stack=[],this.map=new Map,this.current=0,this.currentElement=null,this.currentInstance=null,this.playing=!1,this.muted=!0;for(let s=0;s=this.stack.length&&(t=0),t<0&&(t=this.stack.length-1);const s=this.videoBackgroundFactoryInstance.get(this.stack[i]);if(this.current=t,this.currentInstance=this.videoBackgroundFactoryInstance.get(this.stack[this.current]),this.currentElement=this.stack[this.current],this.stack[i].style.display="none",this.currentElement.style.display="block",!e){const n=this.getSeekBar(this.currentInstance);n&&this.setProgress(n,0),this.currentInstance.seek(0)}setTimeout(()=>{this.currentInstance.currentState!=="playing"&&this.currentInstance.play()},100),s&&s.currentState!=="paused"&&s.pause(),setTimeout(this.levelSeekBars.bind(this),100),t>=this.stack.length&&this.dispatchEvent("video-background-group-forward-rewind"),t<0&&this.dispatchEvent("video-background-group-backward-rewind")}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}onVideoEnded(t){t.detail.element===this.currentElement&&this.next()}next(){this.setCurrent(this.current+1),this.dispatchEvent("video-background-group-next")}prev(){this.setCurrent(this.current-1),this.dispatchEvent("video-background-group-previous")}unmute(){for(let t=0;tnew r(s,e,i))}};window.SeekBar=a,window.PlayToggle=h,window.MuteToggle=c,window.VideoBackgroundGroup=r,window.VideoBackgroundGroups=d})();