{"version":3,"file":"video-player.CQnyMvGJ.js","sources":["../../../../../node_modules/global/document.js","../../../../../node_modules/global/window.js","../../../../../node_modules/@brightcove/player-loader/dist/brightcove-player-loader.es.js","../../../../../packages/web-components/src/lib/components/video-player/video-player-utils.ts","../../../../../packages/web-components/src/lib/components/video-player/video-player.ts"],"sourcesContent":["var topLevel = typeof global !== 'undefined' ? global :\n typeof window !== 'undefined' ? window : {}\nvar minDoc = require('min-document');\n\nvar doccy;\n\nif (typeof document !== 'undefined') {\n doccy = document;\n} else {\n doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'];\n\n if (!doccy) {\n doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'] = minDoc;\n }\n}\n\nmodule.exports = doccy;\n","var win;\n\nif (typeof window !== \"undefined\") {\n win = window;\n} else if (typeof global !== \"undefined\") {\n win = global;\n} else if (typeof self !== \"undefined\"){\n win = self;\n} else {\n win = {};\n}\n\nmodule.exports = win;\n","/*! @name @brightcove/player-loader @version 1.8.0 @license Apache-2.0 */\nimport document from 'global/document';\nimport window from 'global/window';\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nvar version = \"1.8.0\";\n\n/*! @name @brightcove/player-url @version 1.2.0 @license Apache-2.0 */\nvar version$1 = \"1.2.0\";\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\n\n// The parameters that may include JSON.\nvar JSON_ALLOWED_PARAMS = ['catalogSearch', 'catalogSequence'];\n\n// The parameters that may be set as query string parameters for iframes.\nvar IFRAME_ALLOWED_QUERY_PARAMS = ['adConfigId', 'applicationId', 'catalogSearch', 'catalogSequence', 'playlistId', 'playlistVideoId', 'videoId'];\n\n/**\n * Gets the value of a parameter and encodes it as a string.\n *\n * For certain keys, JSON is allowed and will be encoded.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @param {string} key\n * The key in the params object.\n *\n * @return {string|undefined}\n * The encoded value - or `undefined` if none.\n */\nvar getQueryParamValue = function getQueryParamValue(params, key) {\n\n if (!params || params[key] === undefined) {\n return;\n }\n\n // If it's not a string, such as with a catalog search or sequence, we\n // try to encode it as JSON.\n if (typeof params[key] !== 'string' && JSON_ALLOWED_PARAMS.indexOf(key) !== -1) {\n try {\n return encodeURIComponent(JSON.stringify(params[key]));\n } catch (x) {\n\n // If it's not a string and we can't encode as JSON, it's ignored entirely.\n return;\n }\n }\n\n return encodeURIComponent(String(params[key]).trim()) || undefined;\n};\n\n/**\n * In some cases, we need to add query string parameters to an iframe URL.\n *\n * @private\n * @param {Object} params\n * An object of query parameters.\n *\n * @return {string}\n * A query string starting with `?`. If no valid parameters are given,\n * returns an empty string.\n */\nvar getQueryString = function getQueryString(params) {\n return Object.keys(params).filter(function (k) {\n return IFRAME_ALLOWED_QUERY_PARAMS.indexOf(k) !== -1;\n }).reduce(function (qs, k) {\n var value = getQueryParamValue(params, k);\n\n if (value !== undefined) {\n qs += qs ? '&' : '?';\n qs += encodeURIComponent(k) + '=' + value;\n }\n\n return qs;\n }, '');\n};\n\n/**\n * Generate a URL to a Brightcove Player.\n *\n * @param {Object} params\n * A set of parameters describing the player URL to create.\n *\n * @param {string} params.accountId\n * A Brightcove account ID.\n *\n * @param {string} [params.playerId=\"default\"]\n * A Brightcove player ID.\n *\n * @param {string} [params.embedId=\"default\"]\n * A Brightcove player embed ID.\n *\n * @param {boolean} [params.iframe=false]\n * Whether to return a URL for an HTML document to be embedded in\n * an iframe.\n *\n * @param {boolean} [params.minified=true]\n * When the `iframe` argument is `false`, this can be used to control\n * whether the minified or unminified JavaScript URL is returned.\n *\n * @param {string} [params.base=\"https://players.brightcove.net\"]\n * A base CDN protocol and hostname. Mainly used for testing.\n *\n * @return {string}\n * A URL to a Brightcove Player.\n */\nvar brightcovePlayerUrl = function brightcovePlayerUrl(_ref) {\n var accountId = _ref.accountId,\n _ref$base = _ref.base,\n base = _ref$base === undefined ? 'https://players.brightcove.net' : _ref$base,\n _ref$playerId = _ref.playerId,\n playerId = _ref$playerId === undefined ? 'default' : _ref$playerId,\n _ref$embedId = _ref.embedId,\n embedId = _ref$embedId === undefined ? 'default' : _ref$embedId,\n _ref$iframe = _ref.iframe,\n iframe = _ref$iframe === undefined ? false : _ref$iframe,\n _ref$minified = _ref.minified,\n minified = _ref$minified === undefined ? true : _ref$minified,\n _ref$queryParams = _ref.queryParams,\n queryParams = _ref$queryParams === undefined ? null : _ref$queryParams;\n\n var ext = '';\n\n if (iframe) {\n ext += 'html';\n } else {\n if (minified) {\n ext += 'min.';\n }\n ext += 'js';\n }\n\n if (base.charAt(base.length - 1) === '/') {\n base = base.substring(0, base.length - 1);\n }\n\n var qs = '';\n\n if (iframe && queryParams && (typeof queryParams === 'undefined' ? 'undefined' : _typeof(queryParams)) === 'object') {\n qs = getQueryString(queryParams);\n }\n\n accountId = encodeURIComponent(accountId);\n playerId = encodeURIComponent(playerId);\n embedId = encodeURIComponent(embedId);\n\n return base + '/' + accountId + '/' + playerId + '_' + embedId + '/index.' + ext + qs;\n};\n\n/**\n * The version of this module.\n *\n * @type {string}\n */\nbrightcovePlayerUrl.VERSION = version$1;\n\nvar DEFAULTS = {\n embedId: 'default',\n embedType: 'in-page',\n playerId: 'default',\n Promise: window.Promise,\n refNodeInsert: 'append'\n};\nvar DEFAULT_ASPECT_RATIO = '16:9';\nvar DEFAULT_IFRAME_HORIZONTAL_PLAYLIST = false;\nvar DEFAULT_MAX_WIDTH = '100%';\nvar EMBED_TAG_NAME_VIDEO = 'video';\nvar EMBED_TAG_NAME_VIDEOJS = 'video-js';\nvar EMBED_TYPE_IN_PAGE = 'in-page';\nvar EMBED_TYPE_IFRAME = 'iframe';\nvar REF_NODE_INSERT_APPEND = 'append';\nvar REF_NODE_INSERT_PREPEND = 'prepend';\nvar REF_NODE_INSERT_BEFORE = 'before';\nvar REF_NODE_INSERT_AFTER = 'after';\nvar REF_NODE_INSERT_REPLACE = 'replace';\nvar JSON_ALLOWED_ATTRS = ['catalogSearch', 'catalogSequence'];\n\nvar BASE_URL = 'https://players.brightcove.net/';\n/**\n * Gets the URL to a player on CDN.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @return {string}\n * A URL.\n */\n\nvar getUrl = function getUrl(params) {\n if (params.playerUrl) {\n return params.playerUrl;\n }\n\n var accountId = params.accountId,\n playerId = params.playerId,\n embedId = params.embedId,\n embedOptions = params.embedOptions;\n var iframe = params.embedType === EMBED_TYPE_IFRAME;\n return brightcovePlayerUrl({\n accountId: accountId,\n playerId: playerId,\n embedId: embedId,\n iframe: iframe,\n base: BASE_URL,\n // The unminified embed option is the exact reverse of the minified option\n // here.\n minified: embedOptions ? !embedOptions.unminified : true,\n // Pass the entire params object as query params. This is safe because\n // @brightcove/player-url only accepts a whitelist of parameters. Anything\n // else will be ignored.\n queryParams: params\n });\n};\n/**\n * Function used to get the base URL - primarily for testing.\n *\n * @private\n * @return {string}\n * The current base URL.\n */\n\n\nvar getBaseUrl = function getBaseUrl() {\n return BASE_URL;\n};\n/**\n * Function used to set the base URL - primarily for testing.\n *\n * @private\n * @param {string} baseUrl\n * A new base URL (instead of Brightcove CDN).\n */\n\n\nvar setBaseUrl = function setBaseUrl(baseUrl) {\n BASE_URL = baseUrl;\n};\n\nvar urls = {\n getUrl: getUrl,\n getBaseUrl: getBaseUrl,\n setBaseUrl: setBaseUrl\n};\n\n/**\n * Is this value an element?\n *\n * @param {Element} el\n * A maybe element.\n *\n * @return {boolean}\n * Whether or not the value is a element.\n */\n\nvar isEl = function isEl(el) {\n return Boolean(el && el.nodeType === 1);\n};\n/**\n * Is this value an element with a parent node?\n *\n * @param {Element} el\n * A maybe element.\n *\n * @return {boolean}\n * Whether or not the value is a element with a parent node.\n */\n\n\nvar isElInDom = function isElInDom(el) {\n return Boolean(isEl(el) && el.parentNode);\n};\n/**\n * Creates an iframe embed code.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @return {Element}\n * The DOM element that will ultimately be passed to the `bc()` function.\n */\n\n\nvar createIframeEmbed = function createIframeEmbed(params) {\n var el = document.createElement('iframe');\n el.setAttribute('allow', 'autoplay;encrypted-media;fullscreen');\n el.setAttribute('allowfullscreen', 'allowfullscreen');\n el.src = urls.getUrl(params);\n return el;\n};\n/**\n * Creates an in-page embed code.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @return {Element}\n * The DOM element that will ultimately be passed to the `bc()` function.\n */\n\n\nvar createInPageEmbed = function createInPageEmbed(params) {\n var embedOptions = params.embedOptions; // We DO NOT include the data-account, data-player, or data-embed attributes\n // here because we will be manually initializing the player.\n\n var paramsToAttrs = {\n adConfigId: 'data-ad-config-id',\n applicationId: 'data-application-id',\n catalogSearch: 'data-catalog-search',\n catalogSequence: 'data-catalog-sequence',\n deliveryConfigId: 'data-delivery-config-id',\n playlistId: 'data-playlist-id',\n playlistVideoId: 'data-playlist-video-id',\n poster: 'poster',\n videoId: 'data-video-id'\n };\n var tagName = embedOptions && embedOptions.tagName || EMBED_TAG_NAME_VIDEOJS;\n var el = document.createElement(tagName);\n Object.keys(paramsToAttrs).filter(function (key) {\n return params[key];\n }).forEach(function (key) {\n var value; // If it's not a string, such as with a catalog search or sequence, we\n // try to encode it as JSON.\n\n if (typeof params[key] !== 'string' && JSON_ALLOWED_ATTRS.indexOf(key) !== -1) {\n try {\n value = JSON.stringify(params[key]); // If it fails, don't set anything.\n } catch (x) {\n return;\n }\n } else {\n value = String(params[key]).trim();\n }\n\n el.setAttribute(paramsToAttrs[key], value);\n });\n el.setAttribute('controls', 'controls');\n el.classList.add('video-js');\n return el;\n};\n/**\n * Wraps an element in responsive intrinsic ratio elements.\n *\n * @private\n * @param {string} embedType\n * The type of the embed.\n *\n * @param {Object} embedOptions\n * Embed options from the params.\n *\n * @param {Element} el\n * The DOM element.\n *\n * @return {Element}\n * A new element (if needed).\n */\n\n\nvar wrapResponsive = function wrapResponsive(embedType, embedOptions, el) {\n if (!embedOptions.responsive) {\n return el;\n }\n\n el.style.position = 'absolute';\n el.style.top = '0px';\n el.style.right = '0px';\n el.style.bottom = '0px';\n el.style.left = '0px';\n el.style.width = '100%';\n el.style.height = '100%';\n\n var responsive = _extends({\n aspectRatio: DEFAULT_ASPECT_RATIO,\n iframeHorizontalPlaylist: DEFAULT_IFRAME_HORIZONTAL_PLAYLIST,\n maxWidth: DEFAULT_MAX_WIDTH\n }, embedOptions.responsive); // This value is validate at a higher level, so we can trust that it's in the\n // correct format.\n\n\n var aspectRatio = responsive.aspectRatio.split(':').map(Number);\n var inner = document.createElement('div');\n var paddingTop = aspectRatio[1] / aspectRatio[0] * 100; // For iframes with a horizontal playlist, the playlist takes up 20% of the\n // vertical space (if shown); so, adjust the vertical size of the embed to\n // avoid black bars.\n\n if (embedType === EMBED_TYPE_IFRAME && responsive.iframeHorizontalPlaylist) {\n paddingTop *= 1.25;\n }\n\n inner.style.paddingTop = paddingTop + '%';\n inner.appendChild(el);\n var outer = document.createElement('div');\n outer.style.position = 'relative';\n outer.style.display = 'block';\n outer.style.maxWidth = responsive.maxWidth;\n outer.appendChild(inner);\n return outer;\n};\n/**\n * Wraps an element in a Picture-in-Picture plugin container.\n *\n * @private\n * @param {Object} embedOptions\n * Embed options from the params.\n *\n * @param {Element} el\n * The DOM element.\n *\n * @return {Element}\n * A new element (if needed).\n */\n\n\nvar wrapPip = function wrapPip(embedOptions, el) {\n if (!embedOptions.pip) {\n return el;\n }\n\n var pip = document.createElement('div');\n pip.classList.add('vjs-pip-container');\n pip.appendChild(el);\n return pip;\n};\n/**\n * Wraps a bare embed element with necessary parent elements, depending on\n * embed options given in params.\n *\n * @private\n * @param {string} embedType\n * The type of the embed.\n *\n * @param {Object} embedOptions\n * Embed options from the params.\n *\n * @param {Element} embed\n * The embed DOM element.\n *\n * @return {Element}\n * A new element (if needed) or the embed itself.\n */\n\n\nvar wrapEmbed = function wrapEmbed(embedType, embedOptions, embed) {\n if (!embedOptions) {\n return embed;\n }\n\n return wrapPip(embedOptions, wrapResponsive(embedType, embedOptions, embed));\n};\n/**\n * Inserts a previously-created embed element into the page based on params.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @param {Element} embed\n * The embed DOM element.\n *\n * @return {Element}\n * The embed DOM element.\n */\n\n\nvar insertEmbed = function insertEmbed(params, embed) {\n var refNode = params.refNode,\n refNodeInsert = params.refNodeInsert;\n var refNodeParent = refNode.parentNode; // Wrap the embed, if needed, in container elements to support various\n // plugins.\n\n var wrapped = wrapEmbed(params.embedType, params.embedOptions, embed); // Decide where to insert the wrapped embed.\n\n if (refNodeInsert === REF_NODE_INSERT_BEFORE) {\n refNodeParent.insertBefore(wrapped, refNode);\n } else if (refNodeInsert === REF_NODE_INSERT_AFTER) {\n refNodeParent.insertBefore(wrapped, refNode.nextElementSibling || null);\n } else if (refNodeInsert === REF_NODE_INSERT_REPLACE) {\n refNodeParent.replaceChild(wrapped, refNode);\n } else if (refNodeInsert === REF_NODE_INSERT_PREPEND) {\n refNode.insertBefore(wrapped, refNode.firstChild || null); // Append is the default.\n } else {\n refNode.appendChild(wrapped);\n } // If the playlist embed option is provided, we need to add a playlist element\n // immediately after the embed. This has to happen after the embed is inserted\n // into the DOM (above).\n\n\n if (params.embedOptions && params.embedOptions.playlist) {\n var playlistTagName = params.embedOptions.playlist.legacy ? 'ul' : 'div';\n var playlist = document.createElement(playlistTagName);\n playlist.classList.add('vjs-playlist');\n embed.parentNode.insertBefore(playlist, embed.nextElementSibling || null);\n } // Clean up internal reference to the refNode to avoid potential memory\n // leaks in case the params get persisted somewhere. We won't need it beyond\n // this point.\n\n\n params.refNode = null; // Return the original embed element that can be passed to `bc()`.\n\n return embed;\n};\n/**\n * Handles `onEmbedCreated` callback invocation.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @param {Element} embed\n * The embed DOM element.\n *\n * @return {Element}\n * A possibly-new DOM element.\n */\n\n\nvar onEmbedCreated = function onEmbedCreated(params, embed) {\n if (typeof params.onEmbedCreated !== 'function') {\n return embed;\n }\n\n var result = params.onEmbedCreated(embed);\n\n if (isEl(result)) {\n return result;\n }\n\n return embed;\n};\n/**\n * Creates an embed code of the appropriate type, runs any customizations\n * necessary, and inserts it into the DOM.\n *\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @return {Element}\n * The DOM element that will ultimately be passed to the `bc()`\n * function. Even when customized or wrapped, the return value will be\n * the target element.\n */\n\n\nvar createEmbed = function createEmbed(params) {\n var embed = params.embedType === EMBED_TYPE_IFRAME ? createIframeEmbed(params) : createInPageEmbed(params);\n return insertEmbed(params, onEmbedCreated(params, embed));\n};\n\n//\n// The keys follow the format \"accountId_playerId_embedId\" where accountId is\n// optional and defaults to \"*\". This happens when we detect pre-existing\n// player globals.\n\nvar actualCache = new window.Map();\n/**\n * Get the cache key given some properties.\n *\n * @private\n * @param {Object} props\n * Properties describing the player record to cache.\n *\n * @param {string} props.playerId\n * A player ID.\n *\n * @param {string} props.embedId\n * An embed ID.\n *\n * @param {string} [props.accountId=\"*\"]\n * An optional account ID. This is optional because when we search for\n * pre-existing players to avoid downloads, we will not necessarily\n * know the account ID.\n *\n * @return {string}\n * A key to be used in the script cache.\n */\n\nvar key = function key(_ref) {\n var accountId = _ref.accountId,\n playerId = _ref.playerId,\n embedId = _ref.embedId;\n return (accountId || '*') + \"_\" + playerId + \"_\" + embedId;\n};\n/**\n * Add an entry to the script cache.\n *\n * @private\n * @param {Object} props\n * Properties describing the player record to cache.\n *\n * @param {string} props.playerId\n * A player ID.\n *\n * @param {string} props.embedId\n * An embed ID.\n *\n * @param {string} [props.accountId=\"*\"]\n * An optional account ID. This is optional because when we search for\n * pre-existing players to avoid downloads, we will not necessarily\n * know the account ID. If not given, we assume that no script was\n * downloaded for this player.\n */\n\n\nvar store = function store(props) {\n actualCache.set(key(props), props.accountId ? urls.getUrl(props) : '');\n};\n/**\n * Checks if the script cache has an entry.\n *\n * @private\n * @param {Object} props\n * Properties describing the player record to cache.\n *\n * @param {string} props.playerId\n * A player ID.\n *\n * @param {string} props.embedId\n * An embed ID.\n *\n * @param {string} [props.accountId=\"*\"]\n * An optional account ID. This is optional because when we search for\n * pre-existing players to avoid downloads, we will not necessarily\n * know the account ID.\n *\n * @return {boolean}\n * Will be `true` if there is a matching cache entry.\n */\n\n\nvar has = function has(props) {\n return actualCache.has(key(props));\n};\n/**\n * Gets a cache entry.\n *\n * @private\n * @param {Object} props\n * Properties describing the player record to cache.\n *\n * @param {string} props.playerId\n * A player ID.\n *\n * @param {string} props.embedId\n * An embed ID.\n *\n * @param {string} [props.accountId=\"*\"]\n * An optional account ID. This is optional because when we search for\n * pre-existing players to avoid downloads, we will not necessarily\n * know the account ID.\n *\n * @return {string}\n * A cache entry - a URL or empty string.\n *\n */\n\n\nvar get = function get(props) {\n return actualCache.get(key(props));\n};\n/**\n * Clears the cache.\n */\n\n\nvar clear = function clear() {\n actualCache.clear();\n};\n/**\n * Iterates over the cache.\n *\n * @param {Function} fn\n * A callback function that will be called with a value and a key\n * for each item in the cache.\n */\n\n\nvar forEach = function forEach(fn) {\n actualCache.forEach(fn);\n};\n\nvar playerScriptCache = {\n clear: clear,\n forEach: forEach,\n get: get,\n has: has,\n key: key,\n store: store\n};\n\nvar REGEX_PLAYER_EMBED = /^([A-Za-z0-9]+)_([A-Za-z0-9]+)$/;\n/**\n * Gets an array of current per-player/per-embed `bc` globals that are\n * attached to the `bc` global (e.g. `bc.abc123xyz_default`).\n *\n * If `bc` is not defined, returns an empty array.\n *\n * @private\n * @return {string[]}\n * An array of keys.\n */\n\nvar getBcGlobalKeys = function getBcGlobalKeys() {\n return window.bc ? Object.keys(window.bc).filter(function (k) {\n return REGEX_PLAYER_EMBED.test(k);\n }) : [];\n};\n/**\n * Gets known global object keys that Brightcove Players may create.\n *\n * @private\n * @return {string[]}\n * An array of global variables that were added during testing.\n */\n\n\nvar getGlobalKeys = function getGlobalKeys() {\n return Object.keys(window).filter(function (k) {\n return /^videojs/i.test(k) || /^(bc)$/.test(k);\n });\n};\n/**\n * Dispose all players from a copy of Video.js.\n *\n * @param {Function} videojs\n * A copy of Video.js.\n */\n\n\nvar disposeAll = function disposeAll(videojs) {\n if (!videojs) {\n return;\n }\n\n Object.keys(videojs.players).forEach(function (k) {\n var p = videojs.players[k];\n\n if (p) {\n p.dispose();\n }\n });\n};\n/**\n * Resets environment state.\n *\n * This will dispose ALL Video.js players on the page and remove ALL `bc` and\n * `videojs` globals it finds.\n */\n\n\nvar reset = function reset() {\n // Remove all script elements from the DOM.\n playerScriptCache.forEach(function (value, key) {\n // If no script URL is associated, skip it.\n if (!value) {\n return;\n } // Find all script elements and remove them.\n\n\n Array.prototype.slice.call(document.querySelectorAll(\"script[src=\\\"\" + value + \"\\\"]\")).forEach(function (el) {\n return el.parentNode.removeChild(el);\n });\n }); // Clear the internal cache that have been downloaded.\n\n playerScriptCache.clear(); // Dispose any remaining players from the `videojs` global.\n\n disposeAll(window.videojs); // There may be other `videojs` instances lurking in the bowels of the\n // `bc` global. This should eliminate any of those.\n\n getBcGlobalKeys().forEach(function (k) {\n return disposeAll(window.bc[k].videojs);\n }); // Delete any global object keys that were created.\n\n getGlobalKeys().forEach(function (k) {\n delete window[k];\n });\n};\n/**\n * At runtime, populate the cache with pre-detected players. This allows\n * people who have bundled their player or included a script tag before this\n * runs to not have to re-download players.\n */\n\n\nvar detectPlayers = function detectPlayers() {\n getBcGlobalKeys().forEach(function (k) {\n var matches = k.match(REGEX_PLAYER_EMBED);\n var props = {\n playerId: matches[1],\n embedId: matches[2]\n };\n\n if (!playerScriptCache.has(props)) {\n playerScriptCache.store(props);\n }\n });\n};\n\nvar env = {\n detectPlayers: detectPlayers,\n reset: reset\n};\n\nenv.detectPlayers();\n/**\n * Is this value a function?\n *\n * @private\n * @param {Function} fn\n * A maybe function.\n *\n * @return {boolean}\n * Whether or not the value is a function.\n */\n\nvar isFn = function isFn(fn) {\n return typeof fn === 'function';\n};\n/**\n * Checks whether an embedType parameter is valid.\n *\n * @private\n * @param {string} embedType\n * The value to test.\n *\n * @return {boolean}\n * Whether the value is valid.\n */\n\n\nvar isValidEmbedType = function isValidEmbedType(embedType) {\n return embedType === EMBED_TYPE_IN_PAGE || embedType === EMBED_TYPE_IFRAME;\n};\n/**\n * Checks whether an embedOptions.tagName parameter is valid.\n *\n * @private\n * @param {string} tagName\n * The value to test.\n *\n * @return {boolean}\n * Whether the value is valid.\n */\n\n\nvar isValidTagName = function isValidTagName(tagName) {\n return tagName === EMBED_TAG_NAME_VIDEOJS || tagName === EMBED_TAG_NAME_VIDEO;\n};\n/**\n * Checks whether a refNodeInsert parameter is valid.\n *\n * @private\n * @param {string} refNodeInsert\n * The value to test.\n *\n * @return {boolean}\n * Whether the value is valid.\n */\n\n\nvar isValidRootInsert = function isValidRootInsert(refNodeInsert) {\n return refNodeInsert === REF_NODE_INSERT_APPEND || refNodeInsert === REF_NODE_INSERT_PREPEND || refNodeInsert === REF_NODE_INSERT_BEFORE || refNodeInsert === REF_NODE_INSERT_AFTER || refNodeInsert === REF_NODE_INSERT_REPLACE;\n};\n/**\n * Checks parameters and throws an error on validation problems.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @throws {Error} If accountId is missing.\n * @throws {Error} If refNode is missing or invalid.\n * @throws {Error} If embedType is missing or invalid.\n * @throws {Error} If attempting to use an iframe embed with options.\n * @throws {Error} If attempting to use embedOptions.responsiveIframe with a\n * non-iframe embed.\n * @throws {Error} If refNodeInsert is missing or invalid.\n */\n\n\nvar checkParams = function checkParams(params) {\n var accountId = params.accountId,\n embedOptions = params.embedOptions,\n embedType = params.embedType,\n options = params.options,\n refNode = params.refNode,\n refNodeInsert = params.refNodeInsert;\n\n if (!accountId) {\n throw new Error('accountId is required');\n } else if (!isElInDom(refNode)) {\n throw new Error('refNode must resolve to a node attached to the DOM');\n } else if (!isValidEmbedType(embedType)) {\n throw new Error('embedType is missing or invalid');\n } else if (embedType === EMBED_TYPE_IFRAME && options) {\n throw new Error('cannot use options with an iframe embed');\n } else if (embedOptions && embedOptions.tagName !== undefined && !isValidTagName(embedOptions.tagName)) {\n throw new Error(\"embedOptions.tagName is invalid (value: \\\"\" + embedOptions.tagName + \"\\\")\");\n } else if (embedOptions && embedOptions.responsive && embedOptions.responsive.aspectRatio && !/^\\d+\\:\\d+$/.test(embedOptions.responsive.aspectRatio)) {\n throw new Error(\"embedOptions.responsive.aspectRatio must be in the \\\"n:n\\\" format (value: \\\"\" + embedOptions.responsive.aspectRatio + \"\\\")\");\n } else if (!isValidRootInsert(refNodeInsert)) {\n throw new Error('refNodeInsert is missing or invalid');\n }\n};\n/**\n * Normalizes a `refNode` param to an element - or `null`.\n *\n * @private\n * @param {Element|string} refNode\n * The value of a `refNode` param.\n *\n * @return {Element|null}\n * A DOM element or `null` if the `refNode` was given as a string and\n * did not match an element.\n */\n\n\nvar resolveRefNode = function resolveRefNode(refNode) {\n if (isElInDom(refNode)) {\n return refNode;\n }\n\n if (typeof refNode === 'string') {\n return document.querySelector(refNode);\n }\n\n return null;\n};\n/**\n * Initializes a player and returns it.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @param {Element} embed\n * An element that will be passed to the `bc()` function.\n *\n * @param {Function} resolve\n * A function to call if a player is successfully initialized.\n *\n * @param {Function} reject\n * A function to call if a player fails to be initialized.\n *\n * @return {Object}\n * A success object whose `ref` is a player.\n */\n\n\nvar initPlayer = function initPlayer(params, embed, resolve, reject) {\n var embedId = params.embedId,\n playerId = params.playerId;\n var bc = window.bc[playerId + \"_\" + embedId] || window.bc;\n\n if (!bc) {\n return reject(new Error(\"missing bc function for \" + playerId));\n }\n\n playerScriptCache.store(params);\n var player;\n\n try {\n player = bc(embed, params.options); // Add a PLAYER_LOADER property to bcinfo to indicate this player was\n // loaded via that mechanism.\n\n if (player.bcinfo) {\n player.bcinfo.PLAYER_LOADER = true;\n }\n } catch (x) {\n var message = 'Could not initialize the Brightcove Player.'; // Update the rejection message based on known conditions that can cause it.\n\n if (params.embedOptions.tagName === EMBED_TAG_NAME_VIDEOJS) {\n message += ' You are attempting to embed using a \"video-js\" element.' + ' Please ensure that your Player is v6.11.0 or newer in order to' + ' support this embed type. Alternatively, pass `\"video\"` for' + ' `embedOptions.tagName`.';\n }\n\n return reject(new Error(message));\n }\n\n resolve({\n type: EMBED_TYPE_IN_PAGE,\n ref: player\n });\n};\n/**\n * Loads a player from CDN and embeds it.\n *\n * @private\n * @param {Object} params\n * A parameters object. See README for details.\n *\n * @param {Function} resolve\n * A function to call if a player is successfully initialized.\n *\n * @param {Function} reject\n * A function to call if a player fails to be initialized.\n */\n\n\nvar loadPlayer = function loadPlayer(params, resolve, reject) {\n params.refNode = resolveRefNode(params.refNode);\n checkParams(params);\n var refNode = params.refNode,\n refNodeInsert = params.refNodeInsert; // Store a reference to the refNode parent. When we use the replace method,\n // we'll need it as the location to store the script element.\n\n var refNodeParent = refNode.parentNode;\n var embed = createEmbed(params); // If this is an iframe, all we need to do is create the embed code and\n // inject it. Because there is no reliable way to hook into an iframe from\n // the parent page, we simply resolve immediately upon creating the embed.\n\n if (params.embedType === EMBED_TYPE_IFRAME) {\n resolve({\n type: EMBED_TYPE_IFRAME,\n ref: embed\n });\n return;\n } // If we've already downloaded this script or detected a matching global, we\n // should have the proper `bc` global and can bypass the script creation\n // process.\n\n\n if (playerScriptCache.has(params)) {\n return initPlayer(params, embed, resolve, reject);\n }\n\n var script = document.createElement('script');\n\n script.onload = function () {\n return initPlayer(params, embed, resolve, reject);\n };\n\n script.onerror = function () {\n reject(new Error('player script could not be downloaded'));\n };\n\n script.async = true;\n script.charset = 'utf-8';\n script.src = urls.getUrl(params);\n\n if (refNodeInsert === REF_NODE_INSERT_REPLACE) {\n refNodeParent.appendChild(script);\n } else {\n refNode.appendChild(script);\n }\n};\n/**\n * A function for asynchronously loading a Brightcove Player into a web page.\n *\n * @param {Object} parameters\n * A parameters object. See README for details.\n *\n * @return {Promise|undefined}\n * A Promise, if possible.\n */\n\n\nvar brightcovePlayerLoader = function brightcovePlayerLoader(parameters) {\n var params = _extends({}, DEFAULTS, parameters);\n\n var Promise = params.Promise,\n onSuccess = params.onSuccess,\n onFailure = params.onFailure; // When Promise is not available or any success/failure callback is given,\n // do not attempt to use Promises.\n\n if (!isFn(Promise) || isFn(onSuccess) || isFn(onFailure)) {\n return loadPlayer(params, isFn(onSuccess) ? onSuccess : function () {}, isFn(onFailure) ? onFailure : function (err) {\n throw err;\n });\n } // Promises are supported, use 'em.\n\n\n return new Promise(function (resolve, reject) {\n return loadPlayer(params, resolve, reject);\n });\n};\n/**\n * Expose a non-writable, non-configurable property on the\n * `brightcovePlayerLoader` function.\n *\n * @private\n * @param {string} key\n * The property key.\n *\n * @param {string|Function} value\n * The value.\n */\n\n\nvar expose = function expose(key, value) {\n Object.defineProperty(brightcovePlayerLoader, key, {\n configurable: false,\n enumerable: true,\n value: value,\n writable: false\n });\n};\n/**\n * Get the base URL for players. By default, this will be the Brightcove CDN.\n *\n * @return {string}\n * The current base URL.\n */\n\n\nexpose('getBaseUrl', function () {\n return urls.getBaseUrl();\n});\n/**\n * Set the base URL for players. By default, this will be the Brightcove CDN,\n * but can be overridden with this function.\n *\n * @param {string} baseUrl\n * A new base URL (instead of Brightcove CDN).\n */\n\nexpose('setBaseUrl', function (baseUrl) {\n urls.setBaseUrl(baseUrl);\n});\n/**\n * Get the URL for a player.\n */\n\nexpose('getUrl', function (options) {\n return urls.getUrl(options);\n});\n/**\n * Completely resets global state.\n *\n * This will dispose ALL Video.js players on the page and remove ALL `bc` and\n * `videojs` globals it finds.\n */\n\nexpose('reset', function () {\n return env.reset();\n}); // Define some read-only constants on the exported function.\n\n[['EMBED_TAG_NAME_VIDEO', EMBED_TAG_NAME_VIDEO], ['EMBED_TAG_NAME_VIDEOJS', EMBED_TAG_NAME_VIDEOJS], ['EMBED_TYPE_IN_PAGE', EMBED_TYPE_IN_PAGE], ['EMBED_TYPE_IFRAME', EMBED_TYPE_IFRAME], ['REF_NODE_INSERT_APPEND', REF_NODE_INSERT_APPEND], ['REF_NODE_INSERT_PREPEND', REF_NODE_INSERT_PREPEND], ['REF_NODE_INSERT_BEFORE', REF_NODE_INSERT_BEFORE], ['REF_NODE_INSERT_AFTER', REF_NODE_INSERT_AFTER], ['REF_NODE_INSERT_REPLACE', REF_NODE_INSERT_REPLACE], ['VERSION', version]].forEach(function (arr) {\n expose(arr[0], arr[1]);\n});\n\nexport default brightcovePlayerLoader;\n","import sanitizeHTML from 'sanitize-html';\n\nexport const ALLOWED_TAGS_LIST = sanitizeHTML.defaults.allowedTags.concat([\n 'pds-link',\n 'pds-button',\n]);\n","import brightcovePlayerLoader from '@brightcove/player-loader';\nimport { html, nothing } from 'lit';\nimport sanitizeHTML from 'sanitize-html';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { required } from '../../decorators/required';\nimport { PdsElement } from '../PdsElement';\nimport lightDomStyles from './video-player-light-dom.scss?inline';\nimport { ALLOWED_TAGS_LIST } from './video-player-utils';\nimport '../link/link';\nimport '../text-passage/text-passage';\nimport '@principal/design-system-icons-web/clock';\n\n/**\n * @summary A brightcove video player component\n * @fires pds-video-player-play A custom event dispatched on playing the video\n * @fires pds-video-player-ended A custom event dispatched on the video ending\n * @fires pds-video-player-progress A custom event dispatched on hitting 25%/50%/75%/90% progress milestones of the video\n *\n */\n@customElement('pds-video-player', {\n category: 'component',\n type: 'component',\n styles: {},\n})\nexport class PdsVideoPlayer extends PdsElement {\n connectedCallback() {\n super.connectedCallback();\n this.initLocalization();\n }\n\n /**\n * Style variant\n * - Default The video displays with rounded corners\n * - **alt** The video displays with square corners\n */\n @property()\n variant: 'default' | 'alt' = 'default';\n\n /**\n * Aspect ratio for the video to display in\n */\n @property()\n aspectRatio? = '16:9';\n\n /**\n * The URL to the brightcove video. This is a **required** property.\n */\n @required\n @property()\n videoUrl: string;\n\n /**\n * The URL to the video transcript. This is a **required** property.\n */\n @required\n @property()\n videoPlayerTextTracks: string;\n\n /**\n * A title to display under the video; if provided, will also be used to replace the video title for screen readers\n */\n @property()\n videoTitle: string = '';\n\n /**\n * A description to display under the video; should only be used if videoTitle is provided, and it will display between the title and transcript link\n * Should be passed in as a string of HTML, sanitization is handled within PDS\n */\n @property()\n videoDescription: string = '';\n\n /**\n * Determines whether to show the video duration beneath the video or not\n */\n @property()\n hideVideoDuration: boolean = false;\n\n /**\n * @internal\n */\n @query('.pds-c-video-player')\n videoPlayer: HTMLElement;\n\n /**\n * @internal\n */\n @state()\n percentage: string = '25%';\n\n /**\n * @internal\n */\n @state()\n videoDuration: string;\n\n /**\n * @internal\n */\n @state()\n numberOfVideos: number = 1;\n\n /**\n * @internal\n */\n @state()\n brightcoveVideoTitle: string;\n\n /**\n * @internal\n */\n // Splitting out for screen reader only text usage\n @state()\n minutes: string;\n\n /**\n * @internal\n */\n // Splitting out for screen reader only text usage\n @state()\n seconds: string;\n\n /**\n * @internal\n */\n get classNames() {\n return {\n /* This is equivalent to doing\n * 'primary': this.variant === 'primary',\n * 'secondary': this.variant === 'secondary',\n */\n [this.variant]: !!this.variant,\n };\n }\n\n formatDuration = (\n duration: number,\n hideVideoDuration: boolean,\n ): { minutes: string; seconds: string; videoDuration: string } => {\n let calculatedVideoDuration = duration.toString();\n const calculatedMinutes = Math.floor(duration / 60).toString();\n const calculatedSeconds = (duration % 60).toString().split('.')[0];\n\n if (hideVideoDuration === false) {\n calculatedVideoDuration = ` ${calculatedMinutes}:${calculatedSeconds.padStart(\n 2,\n '0',\n )}`;\n } else {\n calculatedVideoDuration = '';\n }\n\n return {\n minutes: calculatedMinutes,\n seconds: calculatedSeconds,\n videoDuration: calculatedVideoDuration,\n };\n };\n\n /**\n * This method compares the current timestamp of a video with the total length of the video\n * It then returns a boolean so we can dispatch an event when a user gets to 25%, 50%, 75%, and 90% of a video\n */\n compareTimeProgress(\n percentage: string,\n currentTime: number,\n videoLength: number,\n percentageSetterFunction: Function,\n ) {\n let dispatchEvent = false;\n // These calculations find where the percentage marks are on the current video\n const twentyFivePercent = videoLength / 4;\n const fiftyPercent = videoLength / 2;\n const seventyFivePercent = videoLength * 0.75;\n const ninetyPercent = videoLength * 0.9;\n\n // This switch manages dispatching the custom event at the correct percentage of the way through the video.\n // It ensures that each event is only dispatched once by checking both if the current time is over the percentage mark calculated above in addition to the this.percentage value\n switch (percentage) {\n // This case is needed so that if the video is over 90% and the time is updated it doesn't go back down to the default case\n case '100%':\n break;\n // If this.percentage is set to 90% and the video is over 90% watched\n case '90%':\n if (currentTime > Math.floor(ninetyPercent)) {\n percentageSetterFunction('100%');\n dispatchEvent = true;\n }\n break;\n // If this.percentage is set to 75% and the video is over 75% watched\n case '75%':\n if (currentTime > Math.floor(seventyFivePercent)) {\n percentageSetterFunction('90%');\n dispatchEvent = true;\n }\n break;\n // If this.percentage is set to 50% and the video is over 50% watched\n case '50%':\n if (currentTime > Math.floor(fiftyPercent)) {\n percentageSetterFunction('75%');\n dispatchEvent = true;\n }\n break;\n // If this.percentage is set to 25% and the video is over 25% watched\n case '25%':\n if (currentTime > Math.floor(twentyFivePercent)) {\n percentageSetterFunction('50%');\n dispatchEvent = true;\n }\n break;\n // If this.percentage isn't set, default it to 25%\n default:\n percentageSetterFunction('25%');\n }\n\n return dispatchEvent;\n }\n\n retrieveVideoInformationFromUrl = (videoUrl: string) => {\n let accountId;\n let playerId;\n let videoId;\n\n const videoInfoArray = videoUrl.match(\n /players\\.brightcove\\.net(\\/\\d+\\/)(.+_default).*(videoId=\\d+)/,\n );\n\n // Get required video params for API call from passed in URL\n if (videoInfoArray && videoInfoArray.length === 4) {\n [, accountId] = videoInfoArray[1].split('/');\n [playerId] = videoInfoArray[2].split('_default');\n [, videoId] = videoInfoArray[3].split('videoId=');\n }\n\n return { accountId, playerId, videoId };\n };\n\n handleLoadstart = ({\n player,\n hideVideoDuration,\n }: {\n player: {\n target: { player: { mediainfo: { duration: string; name: string } } };\n };\n hideVideoDuration: boolean;\n }) => {\n const {\n minutes,\n seconds,\n videoDuration: calculatedVideoDuration,\n } = this.formatDuration(\n Number(player.target.player.mediainfo.duration),\n hideVideoDuration,\n );\n return {\n brightcoveVideoTitle: player.target.player.mediainfo.name,\n minutes,\n seconds,\n videoDuration: calculatedVideoDuration,\n };\n };\n\n handleTimeupdate = ({\n player,\n elementToFireEventFrom,\n videoUrl,\n percentage,\n percentageSetterFunction,\n minutes,\n seconds,\n }: {\n player: {\n target: {\n player: {\n controlBar: { currentTimeDisplay: { formattedTime_: string } };\n };\n };\n };\n elementToFireEventFrom: HTMLElement;\n videoUrl: string;\n percentage: string;\n percentageSetterFunction: Function;\n minutes: string;\n seconds: string;\n }) => {\n const customEvent = new CustomEvent('pds-video-player-progress', {\n bubbles: true,\n composed: true,\n detail: {\n summary: videoUrl,\n percentage,\n },\n });\n\n // This is the user's current watch time of the video\n const formattedCurrentTime =\n // eslint-disable-next-line no-underscore-dangle\n player.target.player.controlBar.currentTimeDisplay.formattedTime_;\n\n // The brightcove player object returns the user's current watch time as a formatted time, so we need to turn it back to a number to be able to compare it to the video length\n const currentTimeArray = formattedCurrentTime.split(':');\n const currentMinutes = Math.floor(Number(currentTimeArray[0]) * 60);\n const currentSeconds = Math.floor(Number(currentTimeArray[1]));\n const currentTime = currentSeconds + currentMinutes;\n\n // This is the total length of the video\n const videoLength = Number(minutes) * 60 + Number(seconds);\n\n if (\n this.compareTimeProgress(\n percentage,\n currentTime,\n videoLength,\n percentageSetterFunction,\n ) === true\n ) {\n elementToFireEventFrom.dispatchEvent(customEvent);\n }\n };\n\n handleEnded = ({\n videoUrl,\n elementToFireEventFrom,\n }: {\n videoUrl: string;\n elementToFireEventFrom: HTMLElement;\n }) => {\n const customEvent = new CustomEvent('pds-video-player-ended', {\n bubbles: true,\n composed: true,\n detail: {\n summary: videoUrl,\n },\n });\n\n elementToFireEventFrom.dispatchEvent(customEvent);\n };\n\n handlePlay = ({\n videoUrl,\n elementToFireEventFrom,\n }: {\n videoUrl: string;\n elementToFireEventFrom: HTMLElement;\n }) => {\n const customEvent = new CustomEvent('pds-video-player-play', {\n bubbles: true,\n composed: true,\n detail: {\n summary: videoUrl,\n },\n });\n\n elementToFireEventFrom.dispatchEvent(customEvent);\n };\n\n protected override async firstUpdated() {\n super.firstUpdated();\n\n const lightDomExists = document.head.querySelector(\n '#pds-video-player-styles',\n );\n\n if (!lightDomExists) {\n const lightDomStyle = document.createElement('style');\n lightDomStyle.id = 'pds-video-player-styles';\n lightDomStyle.innerHTML = lightDomStyles.toString();\n document.head.appendChild(lightDomStyle);\n }\n\n const { accountId, playerId, videoId } =\n this.retrieveVideoInformationFromUrl(this.videoUrl);\n\n const videoPlayer = await brightcovePlayerLoader({\n refNode: this.videoPlayer,\n refNodeInsert: 'append',\n accountId,\n playerId,\n embedId: 'default',\n videoId,\n options: {\n aspectRatio: this.aspectRatio,\n },\n });\n\n videoPlayer.ref.on(\n 'loadstart',\n (player: {\n target: { player: { mediainfo: { duration: string; name: string } } };\n }) => {\n const { brightcoveVideoTitle, minutes, seconds, videoDuration } =\n this.handleLoadstart({\n player,\n hideVideoDuration: this.hideVideoDuration,\n });\n this.brightcoveVideoTitle = brightcoveVideoTitle;\n this.minutes = minutes;\n this.seconds = seconds;\n this.videoDuration = videoDuration;\n },\n );\n\n /**\n * Utilizes the Brightcove play event to dispatch a custom event\n * Used for GA4 tracking for when a user plays a video\n */\n videoPlayer.ref.on('play', () => {\n this.handlePlay({\n videoUrl: this.videoUrl,\n elementToFireEventFrom: this,\n });\n });\n\n /**\n * Utilizes the Brightcove ended event to dispatch a custom event\n * Used for GA4 tracking for when a user gets to the end of a video\n */\n videoPlayer.ref.on('ended', () => {\n this.handleEnded({\n videoUrl: this.videoUrl,\n elementToFireEventFrom: this,\n });\n });\n\n /**\n * Utilizes the Brightcove timeupdate event to dispatch a custom event\n * Used for GA4 tracking of when a user gets to 25%, 50%, 75%, and 90% of a video\n */\n videoPlayer.ref.on(\n 'timeupdate',\n (player: {\n target: {\n player: {\n controlBar: { currentTimeDisplay: { formattedTime_: string } };\n };\n };\n }) => {\n this.handleTimeupdate({\n player,\n elementToFireEventFrom: this,\n videoUrl: this.videoUrl,\n percentage: this.percentage,\n // eslint-disable-next-line no-return-assign\n percentageSetterFunction: (percent: string) =>\n (this.percentage = percent),\n minutes: this.minutes,\n seconds: this.seconds,\n });\n },\n );\n\n const videosOnPage = document.querySelectorAll('pds-video-player');\n\n videosOnPage.forEach((video) => {\n const videoPlayerElement = video.querySelector('.pds-c-video-player');\n const videoPlayerDescription = video.querySelector(\n '.pds-c-video-player__description',\n );\n\n if (videoPlayerElement && videoPlayerDescription) {\n videoPlayerElement.setAttribute(\n 'aria-describedby',\n `videoplayerdescription-${this.numberOfVideos}`,\n );\n videoPlayerDescription.id = `videoplayerdescription-${this.numberOfVideos}`;\n this.numberOfVideos += 1;\n }\n });\n }\n\n /**\n * @internal\n */\n setVideoTitle = () => {\n if (ifDefined(this.videoTitle)) {\n return html`