\" + this.localize(this.labelText_) + \"\\xA0<\/span>\"\n });\n\n this.contentEl_ = createEl('span', {\n className: className + \"-display\"\n }, {\n \/\/ tell screen readers not to automatically read the time as it changes\n 'aria-live': 'off',\n \/\/ span elements have no implicit role, but some screen readers (notably VoiceOver)\n \/\/ treat them as a break between items in the DOM when using arrow keys\n \/\/ (or left-to-right swipes on iOS) to read contents of a page. Using\n \/\/ role='presentation' causes VoiceOver to NOT treat this span as a break.\n 'role': 'presentation'\n });\n el.appendChild(this.contentEl_);\n return el;\n };\n\n _proto.dispose = function dispose() {\n this.contentEl_ = null;\n this.textNode_ = null;\n\n _Component.prototype.dispose.call(this);\n }\n \/**\n * Updates the time display text node with a new time\n *\n * @param {number} [time=0] the time to update to\n *\n * @private\n *\/\n ;\n\n _proto.updateTextNode_ = function updateTextNode_(time) {\n var _this2 = this;\n\n if (time === void 0) {\n time = 0;\n }\n\n time = formatTime(time);\n\n if (this.formattedTime_ === time) {\n return;\n }\n\n this.formattedTime_ = time;\n this.requestAnimationFrame(function () {\n if (!_this2.contentEl_) {\n return;\n }\n\n var oldNode = _this2.textNode_;\n _this2.textNode_ = document.createTextNode(_this2.formattedTime_);\n\n if (!_this2.textNode_) {\n return;\n }\n\n if (oldNode) {\n _this2.contentEl_.replaceChild(_this2.textNode_, oldNode);\n } else {\n _this2.contentEl_.appendChild(_this2.textNode_);\n }\n });\n }\n \/**\n * To be filled out in the child class, should update the displayed time\n * in accordance with the fact that the current time has changed.\n *\n * @param {EventTarget~Event} [event]\n * The `timeupdate` event that caused this to run.\n *\n * @listens Player#timeupdate\n *\/\n ;\n\n _proto.updateContent = function updateContent(event) {};\n\n return TimeDisplay;\n }(Component);\n \/**\n * The text that is added to the `TimeDisplay` for screen reader users.\n *\n * @type {string}\n * @private\n *\/\n\n\n TimeDisplay.prototype.labelText_ = 'Time';\n \/**\n * The text that should display over the `TimeDisplay`s controls. Added to for localization.\n *\n * @type {string}\n * @private\n *\n * @deprecated in v7; controlText_ is not used in non-active display Components\n *\/\n\n TimeDisplay.prototype.controlText_ = 'Time';\n Component.registerComponent('TimeDisplay', TimeDisplay);\n\n \/**\n * Displays the current time\n *\n * @extends Component\n *\/\n\n var CurrentTimeDisplay = \/*#__PURE__*\/function (_TimeDisplay) {\n inheritsLoose(CurrentTimeDisplay, _TimeDisplay);\n\n function CurrentTimeDisplay() {\n return _TimeDisplay.apply(this, arguments) || this;\n }\n\n var _proto = CurrentTimeDisplay.prototype;\n\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n _proto.buildCSSClass = function buildCSSClass() {\n return 'vjs-current-time';\n }\n \/**\n * Update current time display\n *\n * @param {EventTarget~Event} [event]\n * The `timeupdate` event that caused this function to run.\n *\n * @listens Player#timeupdate\n *\/\n ;\n\n _proto.updateContent = function updateContent(event) {\n \/\/ Allows for smooth scrubbing, when player can't keep up.\n var time;\n\n if (this.player_.ended()) {\n time = this.player_.duration();\n } else {\n time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();\n }\n\n this.updateTextNode_(time);\n };\n\n return CurrentTimeDisplay;\n }(TimeDisplay);\n \/**\n * The text that is added to the `CurrentTimeDisplay` for screen reader users.\n *\n * @type {string}\n * @private\n *\/\n\n\n CurrentTimeDisplay.prototype.labelText_ = 'Current Time';\n \/**\n * The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.\n *\n * @type {string}\n * @private\n *\n * @deprecated in v7; controlText_ is not used in non-active display Components\n *\/\n\n CurrentTimeDisplay.prototype.controlText_ = 'Current Time';\n Component.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay);\n\n \/**\n * Displays the duration\n *\n * @extends Component\n *\/\n\n var DurationDisplay = \/*#__PURE__*\/function (_TimeDisplay) {\n inheritsLoose(DurationDisplay, _TimeDisplay);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function DurationDisplay(player, options) {\n var _this;\n\n _this = _TimeDisplay.call(this, player, options) || this; \/\/ we do not want to\/need to throttle duration changes,\n \/\/ as they should always display the changed duration as\n \/\/ it has changed\n\n _this.on(player, 'durationchange', _this.updateContent); \/\/ Listen to loadstart because the player duration is reset when a new media element is loaded,\n \/\/ but the durationchange on the user agent will not fire.\n \/\/ @see [Spec]{@link https:\/\/www.w3.org\/TR\/2011\/WD-html5-20110113\/video.html#media-element-load-algorithm}\n\n\n _this.on(player, 'loadstart', _this.updateContent); \/\/ Also listen for timeupdate (in the parent) and loadedmetadata because removing those\n \/\/ listeners could have broken dependent applications\/libraries. These\n \/\/ can likely be removed for 7.0.\n\n\n _this.on(player, 'loadedmetadata', _this.updateContent);\n\n return _this;\n }\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n\n\n var _proto = DurationDisplay.prototype;\n\n _proto.buildCSSClass = function buildCSSClass() {\n return 'vjs-duration';\n }\n \/**\n * Update duration time display.\n *\n * @param {EventTarget~Event} [event]\n * The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused\n * this function to be called.\n *\n * @listens Player#durationchange\n * @listens Player#timeupdate\n * @listens Player#loadedmetadata\n *\/\n ;\n\n _proto.updateContent = function updateContent(event) {\n var duration = this.player_.duration();\n this.updateTextNode_(duration);\n };\n\n return DurationDisplay;\n }(TimeDisplay);\n \/**\n * The text that is added to the `DurationDisplay` for screen reader users.\n *\n * @type {string}\n * @private\n *\/\n\n\n DurationDisplay.prototype.labelText_ = 'Duration';\n \/**\n * The text that should display over the `DurationDisplay`s controls. Added to for localization.\n *\n * @type {string}\n * @private\n *\n * @deprecated in v7; controlText_ is not used in non-active display Components\n *\/\n\n DurationDisplay.prototype.controlText_ = 'Duration';\n Component.registerComponent('DurationDisplay', DurationDisplay);\n\n \/**\n * The separator between the current time and duration.\n * Can be hidden if it's not needed in the design.\n *\n * @extends Component\n *\/\n\n var TimeDivider = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(TimeDivider, _Component);\n\n function TimeDivider() {\n return _Component.apply(this, arguments) || this;\n }\n\n var _proto = TimeDivider.prototype;\n\n \/**\n * Create the component's DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-time-control vjs-time-divider',\n innerHTML: '\/<\/span><\/div>'\n }, {\n \/\/ this element and its contents can be hidden from assistive techs since\n \/\/ it is made extraneous by the announcement of the control text\n \/\/ for the current time and duration displays\n 'aria-hidden': true\n });\n };\n\n return TimeDivider;\n }(Component);\n\n Component.registerComponent('TimeDivider', TimeDivider);\n\n \/**\n * Displays the time left in the video\n *\n * @extends Component\n *\/\n\n var RemainingTimeDisplay = \/*#__PURE__*\/function (_TimeDisplay) {\n inheritsLoose(RemainingTimeDisplay, _TimeDisplay);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function RemainingTimeDisplay(player, options) {\n var _this;\n\n _this = _TimeDisplay.call(this, player, options) || this;\n\n _this.on(player, 'durationchange', _this.updateContent);\n\n return _this;\n }\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n\n\n var _proto = RemainingTimeDisplay.prototype;\n\n _proto.buildCSSClass = function buildCSSClass() {\n return 'vjs-remaining-time';\n }\n \/**\n * Create the `Component`'s DOM element with the \"minus\" characted prepend to the time\n *\n * @return {Element}\n * The element that was created.\n *\/\n ;\n\n _proto.createEl = function createEl$1() {\n var el = _TimeDisplay.prototype.createEl.call(this);\n\n el.insertBefore(createEl('span', {}, {\n 'aria-hidden': true\n }, '-'), this.contentEl_);\n return el;\n }\n \/**\n * Update remaining time display.\n *\n * @param {EventTarget~Event} [event]\n * The `timeupdate` or `durationchange` event that caused this to run.\n *\n * @listens Player#timeupdate\n * @listens Player#durationchange\n *\/\n ;\n\n _proto.updateContent = function updateContent(event) {\n if (typeof this.player_.duration() !== 'number') {\n return;\n }\n\n var time; \/\/ @deprecated We should only use remainingTimeDisplay\n \/\/ as of video.js 7\n\n if (this.player_.ended()) {\n time = 0;\n } else if (this.player_.remainingTimeDisplay) {\n time = this.player_.remainingTimeDisplay();\n } else {\n time = this.player_.remainingTime();\n }\n\n this.updateTextNode_(time);\n };\n\n return RemainingTimeDisplay;\n }(TimeDisplay);\n \/**\n * The text that is added to the `RemainingTimeDisplay` for screen reader users.\n *\n * @type {string}\n * @private\n *\/\n\n\n RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';\n \/**\n * The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.\n *\n * @type {string}\n * @private\n *\n * @deprecated in v7; controlText_ is not used in non-active display Components\n *\/\n\n RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';\n Component.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay);\n\n \/**\n * Displays the live indicator when duration is Infinity.\n *\n * @extends Component\n *\/\n\n var LiveDisplay = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(LiveDisplay, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function LiveDisplay(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n\n _this.updateShowing();\n\n _this.on(_this.player(), 'durationchange', _this.updateShowing);\n\n return _this;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = LiveDisplay.prototype;\n\n _proto.createEl = function createEl$1() {\n var el = _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-live-control vjs-control'\n });\n\n this.contentEl_ = createEl('div', {\n className: 'vjs-live-display',\n innerHTML: \"\" + this.localize('Stream Type') + \"\\xA0<\/span>\" + this.localize('LIVE')\n }, {\n 'aria-live': 'off'\n });\n el.appendChild(this.contentEl_);\n return el;\n };\n\n _proto.dispose = function dispose() {\n this.contentEl_ = null;\n\n _Component.prototype.dispose.call(this);\n }\n \/**\n * Check the duration to see if the LiveDisplay should be showing or not. Then show\/hide\n * it accordingly\n *\n * @param {EventTarget~Event} [event]\n * The {@link Player#durationchange} event that caused this function to run.\n *\n * @listens Player#durationchange\n *\/\n ;\n\n _proto.updateShowing = function updateShowing(event) {\n if (this.player().duration() === Infinity) {\n this.show();\n } else {\n this.hide();\n }\n };\n\n return LiveDisplay;\n }(Component);\n\n Component.registerComponent('LiveDisplay', LiveDisplay);\n\n \/**\n * Displays the live indicator when duration is Infinity.\n *\n * @extends Component\n *\/\n\n var SeekToLive = \/*#__PURE__*\/function (_Button) {\n inheritsLoose(SeekToLive, _Button);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function SeekToLive(player, options) {\n var _this;\n\n _this = _Button.call(this, player, options) || this;\n\n _this.updateLiveEdgeStatus();\n\n if (_this.player_.liveTracker) {\n _this.on(_this.player_.liveTracker, 'liveedgechange', _this.updateLiveEdgeStatus);\n }\n\n return _this;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = SeekToLive.prototype;\n\n _proto.createEl = function createEl$1() {\n var el = _Button.prototype.createEl.call(this, 'button', {\n className: 'vjs-seek-to-live-control vjs-control'\n });\n\n this.textEl_ = createEl('span', {\n className: 'vjs-seek-to-live-text',\n innerHTML: this.localize('LIVE')\n }, {\n 'aria-hidden': 'true'\n });\n el.appendChild(this.textEl_);\n return el;\n }\n \/**\n * Update the state of this button if we are at the live edge\n * or not\n *\/\n ;\n\n _proto.updateLiveEdgeStatus = function updateLiveEdgeStatus(e) {\n \/\/ default to live edge\n if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {\n this.setAttribute('aria-disabled', true);\n this.addClass('vjs-at-live-edge');\n this.controlText('Seek to live, currently playing live');\n } else {\n this.setAttribute('aria-disabled', false);\n this.removeClass('vjs-at-live-edge');\n this.controlText('Seek to live, currently behind live');\n }\n }\n \/**\n * On click bring us as near to the live point as possible.\n * This requires that we wait for the next `live-seekable-change`\n * event which will happen every segment length seconds.\n *\/\n ;\n\n _proto.handleClick = function handleClick() {\n this.player_.liveTracker.seekToLiveEdge();\n }\n \/**\n * Dispose of the element and stop tracking\n *\/\n ;\n\n _proto.dispose = function dispose() {\n if (this.player_.liveTracker) {\n this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatus);\n }\n\n this.textEl_ = null;\n\n _Button.prototype.dispose.call(this);\n };\n\n return SeekToLive;\n }(Button);\n\n SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';\n Component.registerComponent('SeekToLive', SeekToLive);\n\n \/**\n * Keep a number between a min and a max value\n *\n * @param {number} number\n * The number to clamp\n *\n * @param {number} min\n * The minimum value\n * @param {number} max\n * The maximum value\n *\n * @return {number}\n * the clamped number\n *\/\n var clamp = function clamp(number, min, max) {\n number = Number(number);\n return Math.min(max, Math.max(min, isNaN(number) ? min : number));\n };\n\n \/**\n * The base functionality for a slider. Can be vertical or horizontal.\n * For instance the volume bar or the seek bar on a video is a slider.\n *\n * @extends Component\n *\/\n\n var Slider = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(Slider, _Component);\n\n \/**\n * Create an instance of this class\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function Slider(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this; \/\/ Set property names to bar to match with the child Slider class is looking for\n\n _this.bar = _this.getChild(_this.options_.barName); \/\/ Set a horizontal or vertical class on the slider depending on the slider type\n\n _this.vertical(!!_this.options_.vertical);\n\n _this.enable();\n\n return _this;\n }\n \/**\n * Are controls are currently enabled for this slider or not.\n *\n * @return {boolean}\n * true if controls are enabled, false otherwise\n *\/\n\n\n var _proto = Slider.prototype;\n\n _proto.enabled = function enabled() {\n return this.enabled_;\n }\n \/**\n * Enable controls for this slider if they are disabled\n *\/\n ;\n\n _proto.enable = function enable() {\n if (this.enabled()) {\n return;\n }\n\n this.on('mousedown', this.handleMouseDown);\n this.on('touchstart', this.handleMouseDown);\n this.on('keydown', this.handleKeyDown);\n this.on('click', this.handleClick); \/\/ TODO: deprecated, controlsvisible does not seem to be fired\n\n this.on(this.player_, 'controlsvisible', this.update);\n\n if (this.playerEvent) {\n this.on(this.player_, this.playerEvent, this.update);\n }\n\n this.removeClass('disabled');\n this.setAttribute('tabindex', 0);\n this.enabled_ = true;\n }\n \/**\n * Disable controls for this slider if they are enabled\n *\/\n ;\n\n _proto.disable = function disable() {\n if (!this.enabled()) {\n return;\n }\n\n var doc = this.bar.el_.ownerDocument;\n this.off('mousedown', this.handleMouseDown);\n this.off('touchstart', this.handleMouseDown);\n this.off('keydown', this.handleKeyDown);\n this.off('click', this.handleClick);\n this.off(this.player_, 'controlsvisible', this.update);\n this.off(doc, 'mousemove', this.handleMouseMove);\n this.off(doc, 'mouseup', this.handleMouseUp);\n this.off(doc, 'touchmove', this.handleMouseMove);\n this.off(doc, 'touchend', this.handleMouseUp);\n this.removeAttribute('tabindex');\n this.addClass('disabled');\n\n if (this.playerEvent) {\n this.off(this.player_, this.playerEvent, this.update);\n }\n\n this.enabled_ = false;\n }\n \/**\n * Create the `Slider`s DOM element.\n *\n * @param {string} type\n * Type of element to create.\n *\n * @param {Object} [props={}]\n * List of properties in Object form.\n *\n * @param {Object} [attributes={}]\n * list of attributes in Object form.\n *\n * @return {Element}\n * The element that gets created.\n *\/\n ;\n\n _proto.createEl = function createEl(type, props, attributes) {\n if (props === void 0) {\n props = {};\n }\n\n if (attributes === void 0) {\n attributes = {};\n }\n\n \/\/ Add the slider element class to all sub classes\n props.className = props.className + ' vjs-slider';\n props = assign({\n tabIndex: 0\n }, props);\n attributes = assign({\n 'role': 'slider',\n 'aria-valuenow': 0,\n 'aria-valuemin': 0,\n 'aria-valuemax': 100,\n 'tabIndex': 0\n }, attributes);\n return _Component.prototype.createEl.call(this, type, props, attributes);\n }\n \/**\n * Handle `mousedown` or `touchstart` events on the `Slider`.\n *\n * @param {EventTarget~Event} event\n * `mousedown` or `touchstart` event that triggered this function\n *\n * @listens mousedown\n * @listens touchstart\n * @fires Slider#slideractive\n *\/\n ;\n\n _proto.handleMouseDown = function handleMouseDown(event) {\n var doc = this.bar.el_.ownerDocument;\n\n if (event.type === 'mousedown') {\n event.preventDefault();\n } \/\/ Do not call preventDefault() on touchstart in Chrome\n \/\/ to avoid console warnings. Use a 'touch-action: none' style\n \/\/ instead to prevent unintented scrolling.\n \/\/ https:\/\/developers.google.com\/web\/updates\/2017\/01\/scrolling-intervention\n\n\n if (event.type === 'touchstart' && !IS_CHROME) {\n event.preventDefault();\n }\n\n blockTextSelection();\n this.addClass('vjs-sliding');\n \/**\n * Triggered when the slider is in an active state\n *\n * @event Slider#slideractive\n * @type {EventTarget~Event}\n *\/\n\n this.trigger('slideractive');\n this.on(doc, 'mousemove', this.handleMouseMove);\n this.on(doc, 'mouseup', this.handleMouseUp);\n this.on(doc, 'touchmove', this.handleMouseMove);\n this.on(doc, 'touchend', this.handleMouseUp);\n this.handleMouseMove(event);\n }\n \/**\n * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.\n * The `mousemove` and `touchmove` events will only only trigger this function during\n * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and\n * {@link Slider#handleMouseUp}.\n *\n * @param {EventTarget~Event} event\n * `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered\n * this function\n *\n * @listens mousemove\n * @listens touchmove\n *\/\n ;\n\n _proto.handleMouseMove = function handleMouseMove(event) {}\n \/**\n * Handle `mouseup` or `touchend` events on the `Slider`.\n *\n * @param {EventTarget~Event} event\n * `mouseup` or `touchend` event that triggered this function.\n *\n * @listens touchend\n * @listens mouseup\n * @fires Slider#sliderinactive\n *\/\n ;\n\n _proto.handleMouseUp = function handleMouseUp() {\n var doc = this.bar.el_.ownerDocument;\n unblockTextSelection();\n this.removeClass('vjs-sliding');\n \/**\n * Triggered when the slider is no longer in an active state.\n *\n * @event Slider#sliderinactive\n * @type {EventTarget~Event}\n *\/\n\n this.trigger('sliderinactive');\n this.off(doc, 'mousemove', this.handleMouseMove);\n this.off(doc, 'mouseup', this.handleMouseUp);\n this.off(doc, 'touchmove', this.handleMouseMove);\n this.off(doc, 'touchend', this.handleMouseUp);\n this.update();\n }\n \/**\n * Update the progress bar of the `Slider`.\n *\n * @return {number}\n * The percentage of progress the progress bar represents as a\n * number from 0 to 1.\n *\/\n ;\n\n _proto.update = function update() {\n var _this2 = this;\n\n \/\/ In VolumeBar init we have a setTimeout for update that pops and update\n \/\/ to the end of the execution stack. The player is destroyed before then\n \/\/ update will cause an error\n \/\/ If there's no bar...\n if (!this.el_ || !this.bar) {\n return;\n } \/\/ clamp progress between 0 and 1\n \/\/ and only round to four decimal places, as we round to two below\n\n\n var progress = this.getProgress();\n\n if (progress === this.progress_) {\n return progress;\n }\n\n this.progress_ = progress;\n this.requestAnimationFrame(function () {\n \/\/ Set the new bar width or height\n var sizeKey = _this2.vertical() ? 'height' : 'width'; \/\/ Convert to a percentage for css value\n\n _this2.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';\n });\n return progress;\n }\n \/**\n * Get the percentage of the bar that should be filled\n * but clamped and rounded.\n *\n * @return {number}\n * percentage filled that the slider is\n *\/\n ;\n\n _proto.getProgress = function getProgress() {\n return Number(clamp(this.getPercent(), 0, 1).toFixed(4));\n }\n \/**\n * Calculate distance for slider\n *\n * @param {EventTarget~Event} event\n * The event that caused this function to run.\n *\n * @return {number}\n * The current position of the Slider.\n * - position.x for vertical `Slider`s\n * - position.y for horizontal `Slider`s\n *\/\n ;\n\n _proto.calculateDistance = function calculateDistance(event) {\n var position = getPointerPosition(this.el_, event);\n\n if (this.vertical()) {\n return position.y;\n }\n\n return position.x;\n }\n \/**\n * Handle a `keydown` event on the `Slider`. Watches for left, rigth, up, and down\n * arrow keys. This function will only be called when the slider has focus. See\n * {@link Slider#handleFocus} and {@link Slider#handleBlur}.\n *\n * @param {EventTarget~Event} event\n * the `keydown` event that caused this function to run.\n *\n * @listens keydown\n *\/\n ;\n\n _proto.handleKeyDown = function handleKeyDown(event) {\n \/\/ Left and Down Arrows\n if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {\n event.preventDefault();\n event.stopPropagation();\n this.stepBack(); \/\/ Up and Right Arrows\n } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {\n event.preventDefault();\n event.stopPropagation();\n this.stepForward();\n } else {\n \/\/ Pass keydown handling up for unsupported keys\n _Component.prototype.handleKeyDown.call(this, event);\n }\n }\n \/**\n * Listener for click events on slider, used to prevent clicks\n * from bubbling up to parent elements like button menus.\n *\n * @param {Object} event\n * Event that caused this object to run\n *\/\n ;\n\n _proto.handleClick = function handleClick(event) {\n event.stopPropagation();\n event.preventDefault();\n }\n \/**\n * Get\/set if slider is horizontal for vertical\n *\n * @param {boolean} [bool]\n * - true if slider is vertical,\n * - false is horizontal\n *\n * @return {boolean}\n * - true if slider is vertical, and getting\n * - false if the slider is horizontal, and getting\n *\/\n ;\n\n _proto.vertical = function vertical(bool) {\n if (bool === undefined) {\n return this.vertical_ || false;\n }\n\n this.vertical_ = !!bool;\n\n if (this.vertical_) {\n this.addClass('vjs-slider-vertical');\n } else {\n this.addClass('vjs-slider-horizontal');\n }\n };\n\n return Slider;\n }(Component);\n\n Component.registerComponent('Slider', Slider);\n\n var percentify = function percentify(time, end) {\n return clamp(time \/ end * 100, 0, 100).toFixed(2) + '%';\n };\n \/**\n * Shows loading progress\n *\n * @extends Component\n *\/\n\n\n var LoadProgressBar = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(LoadProgressBar, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function LoadProgressBar(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n _this.partEls_ = [];\n\n _this.on(player, 'progress', _this.update);\n\n return _this;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = LoadProgressBar.prototype;\n\n _proto.createEl = function createEl$1() {\n var el = _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-load-progress'\n });\n\n var wrapper = createEl('span', {\n className: 'vjs-control-text'\n });\n var loadedText = createEl('span', {\n textContent: this.localize('Loaded')\n });\n var separator = document.createTextNode(': ');\n this.percentageEl_ = createEl('span', {\n className: 'vjs-control-text-loaded-percentage',\n textContent: '0%'\n });\n el.appendChild(wrapper);\n wrapper.appendChild(loadedText);\n wrapper.appendChild(separator);\n wrapper.appendChild(this.percentageEl_);\n return el;\n };\n\n _proto.dispose = function dispose() {\n this.partEls_ = null;\n this.percentageEl_ = null;\n\n _Component.prototype.dispose.call(this);\n }\n \/**\n * Update progress bar\n *\n * @param {EventTarget~Event} [event]\n * The `progress` event that caused this function to run.\n *\n * @listens Player#progress\n *\/\n ;\n\n _proto.update = function update(event) {\n var _this2 = this;\n\n this.requestAnimationFrame(function () {\n var liveTracker = _this2.player_.liveTracker;\n\n var buffered = _this2.player_.buffered();\n\n var duration = liveTracker && liveTracker.isLive() ? liveTracker.seekableEnd() : _this2.player_.duration();\n\n var bufferedEnd = _this2.player_.bufferedEnd();\n\n var children = _this2.partEls_;\n var percent = percentify(bufferedEnd, duration);\n\n if (_this2.percent_ !== percent) {\n \/\/ update the width of the progress bar\n _this2.el_.style.width = percent; \/\/ update the control-text\n\n textContent(_this2.percentageEl_, percent);\n _this2.percent_ = percent;\n } \/\/ add child elements to represent the individual buffered time ranges\n\n\n for (var i = 0; i < buffered.length; i++) {\n var start = buffered.start(i);\n var end = buffered.end(i);\n var part = children[i];\n\n if (!part) {\n part = _this2.el_.appendChild(createEl());\n children[i] = part;\n } \/\/ only update if changed\n\n\n if (part.dataset.start === start && part.dataset.end === end) {\n continue;\n }\n\n part.dataset.start = start;\n part.dataset.end = end; \/\/ set the percent based on the width of the progress bar (bufferedEnd)\n\n part.style.left = percentify(start, bufferedEnd);\n part.style.width = percentify(end - start, bufferedEnd);\n } \/\/ remove unused buffered range elements\n\n\n for (var _i = children.length; _i > buffered.length; _i--) {\n _this2.el_.removeChild(children[_i - 1]);\n }\n\n children.length = buffered.length;\n });\n };\n\n return LoadProgressBar;\n }(Component);\n\n Component.registerComponent('LoadProgressBar', LoadProgressBar);\n\n \/**\n * Time tooltips display a time above the progress bar.\n *\n * @extends Component\n *\/\n\n var TimeTooltip = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(TimeTooltip, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The {@link Player} that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function TimeTooltip(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n _this.update = throttle(bind(assertThisInitialized(_this), _this.update), UPDATE_REFRESH_INTERVAL);\n return _this;\n }\n \/**\n * Create the time tooltip DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = TimeTooltip.prototype;\n\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-time-tooltip'\n }, {\n 'aria-hidden': 'true'\n });\n }\n \/**\n * Updates the position of the time tooltip relative to the `SeekBar`.\n *\n * @param {Object} seekBarRect\n * The `ClientRect` for the {@link SeekBar} element.\n *\n * @param {number} seekBarPoint\n * A number from 0 to 1, representing a horizontal reference point\n * from the left edge of the {@link SeekBar}\n *\/\n ;\n\n _proto.update = function update(seekBarRect, seekBarPoint, content) {\n var tooltipRect = getBoundingClientRect(this.el_);\n var playerRect = getBoundingClientRect(this.player_.el());\n var seekBarPointPx = seekBarRect.width * seekBarPoint; \/\/ do nothing if either rect isn't available\n \/\/ for example, if the player isn't in the DOM for testing\n\n if (!playerRect || !tooltipRect) {\n return;\n } \/\/ This is the space left of the `seekBarPoint` available within the bounds\n \/\/ of the player. We calculate any gap between the left edge of the player\n \/\/ and the left edge of the `SeekBar` and add the number of pixels in the\n \/\/ `SeekBar` before hitting the `seekBarPoint`\n\n\n var spaceLeftOfPoint = seekBarRect.left - playerRect.left + seekBarPointPx; \/\/ This is the space right of the `seekBarPoint` available within the bounds\n \/\/ of the player. We calculate the number of pixels from the `seekBarPoint`\n \/\/ to the right edge of the `SeekBar` and add to that any gap between the\n \/\/ right edge of the `SeekBar` and the player.\n\n var spaceRightOfPoint = seekBarRect.width - seekBarPointPx + (playerRect.right - seekBarRect.right); \/\/ This is the number of pixels by which the tooltip will need to be pulled\n \/\/ further to the right to center it over the `seekBarPoint`.\n\n var pullTooltipBy = tooltipRect.width \/ 2; \/\/ Adjust the `pullTooltipBy` distance to the left or right depending on\n \/\/ the results of the space calculations above.\n\n if (spaceLeftOfPoint < pullTooltipBy) {\n pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;\n } else if (spaceRightOfPoint < pullTooltipBy) {\n pullTooltipBy = spaceRightOfPoint;\n } \/\/ Due to the imprecision of decimal\/ratio based calculations and varying\n \/\/ rounding behaviors, there are cases where the spacing adjustment is off\n \/\/ by a pixel or two. This adds insurance to these calculations.\n\n\n if (pullTooltipBy < 0) {\n pullTooltipBy = 0;\n } else if (pullTooltipBy > tooltipRect.width) {\n pullTooltipBy = tooltipRect.width;\n }\n\n this.el_.style.right = \"-\" + pullTooltipBy + \"px\";\n this.write(content);\n }\n \/**\n * Write the time to the tooltip DOM element.\n *\n * @param {string} content\n * The formatted time for the tooltip.\n *\/\n ;\n\n _proto.write = function write(content) {\n textContent(this.el_, content);\n }\n \/**\n * Updates the position of the time tooltip relative to the `SeekBar`.\n *\n * @param {Object} seekBarRect\n * The `ClientRect` for the {@link SeekBar} element.\n *\n * @param {number} seekBarPoint\n * A number from 0 to 1, representing a horizontal reference point\n * from the left edge of the {@link SeekBar}\n *\n * @param {number} time\n * The time to update the tooltip to, not used during live playback\n *\n * @param {Function} cb\n * A function that will be called during the request animation frame\n * for tooltips that need to do additional animations from the default\n *\/\n ;\n\n _proto.updateTime = function updateTime(seekBarRect, seekBarPoint, time, cb) {\n var _this2 = this;\n\n \/\/ If there is an existing rAF ID, cancel it so we don't over-queue.\n if (this.rafId_) {\n this.cancelAnimationFrame(this.rafId_);\n }\n\n this.rafId_ = this.requestAnimationFrame(function () {\n var content;\n\n var duration = _this2.player_.duration();\n\n if (_this2.player_.liveTracker && _this2.player_.liveTracker.isLive()) {\n var liveWindow = _this2.player_.liveTracker.liveWindow();\n\n var secondsBehind = liveWindow - seekBarPoint * liveWindow;\n content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);\n } else {\n content = formatTime(time, duration);\n }\n\n _this2.update(seekBarRect, seekBarPoint, content);\n\n if (cb) {\n cb();\n }\n });\n };\n\n return TimeTooltip;\n }(Component);\n\n Component.registerComponent('TimeTooltip', TimeTooltip);\n\n \/**\n * Used by {@link SeekBar} to display media playback progress as part of the\n * {@link ProgressControl}.\n *\n * @extends Component\n *\/\n\n var PlayProgressBar = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(PlayProgressBar, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The {@link Player} that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function PlayProgressBar(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n _this.update = throttle(bind(assertThisInitialized(_this), _this.update), UPDATE_REFRESH_INTERVAL);\n return _this;\n }\n \/**\n * Create the the DOM element for this class.\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = PlayProgressBar.prototype;\n\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-play-progress vjs-slider-bar'\n }, {\n 'aria-hidden': 'true'\n });\n }\n \/**\n * Enqueues updates to its own DOM as well as the DOM of its\n * {@link TimeTooltip} child.\n *\n * @param {Object} seekBarRect\n * The `ClientRect` for the {@link SeekBar} element.\n *\n * @param {number} seekBarPoint\n * A number from 0 to 1, representing a horizontal reference point\n * from the left edge of the {@link SeekBar}\n *\/\n ;\n\n _proto.update = function update(seekBarRect, seekBarPoint) {\n var timeTooltip = this.getChild('timeTooltip');\n\n if (!timeTooltip) {\n return;\n }\n\n var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();\n timeTooltip.updateTime(seekBarRect, seekBarPoint, time);\n };\n\n return PlayProgressBar;\n }(Component);\n \/**\n * Default options for {@link PlayProgressBar}.\n *\n * @type {Object}\n * @private\n *\/\n\n\n PlayProgressBar.prototype.options_ = {\n children: []\n }; \/\/ Time tooltips should not be added to a player on mobile devices\n\n if (!IS_IOS && !IS_ANDROID) {\n PlayProgressBar.prototype.options_.children.push('timeTooltip');\n }\n\n Component.registerComponent('PlayProgressBar', PlayProgressBar);\n\n \/**\n * The {@link MouseTimeDisplay} component tracks mouse movement over the\n * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}\n * indicating the time which is represented by a given point in the\n * {@link ProgressControl}.\n *\n * @extends Component\n *\/\n\n var MouseTimeDisplay = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(MouseTimeDisplay, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The {@link Player} that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function MouseTimeDisplay(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n _this.update = throttle(bind(assertThisInitialized(_this), _this.update), UPDATE_REFRESH_INTERVAL);\n return _this;\n }\n \/**\n * Create the DOM element for this class.\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = MouseTimeDisplay.prototype;\n\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-mouse-display'\n });\n }\n \/**\n * Enqueues updates to its own DOM as well as the DOM of its\n * {@link TimeTooltip} child.\n *\n * @param {Object} seekBarRect\n * The `ClientRect` for the {@link SeekBar} element.\n *\n * @param {number} seekBarPoint\n * A number from 0 to 1, representing a horizontal reference point\n * from the left edge of the {@link SeekBar}\n *\/\n ;\n\n _proto.update = function update(seekBarRect, seekBarPoint) {\n var _this2 = this;\n\n var time = seekBarPoint * this.player_.duration();\n this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, function () {\n _this2.el_.style.left = seekBarRect.width * seekBarPoint + \"px\";\n });\n };\n\n return MouseTimeDisplay;\n }(Component);\n \/**\n * Default options for `MouseTimeDisplay`\n *\n * @type {Object}\n * @private\n *\/\n\n\n MouseTimeDisplay.prototype.options_ = {\n children: ['timeTooltip']\n };\n Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);\n\n var STEP_SECONDS = 5; \/\/ The multiplier of STEP_SECONDS that PgUp\/PgDown move the timeline.\n\n var PAGE_KEY_MULTIPLIER = 12;\n \/**\n * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}\n * as its `bar`.\n *\n * @extends Slider\n *\/\n\n var SeekBar = \/*#__PURE__*\/function (_Slider) {\n inheritsLoose(SeekBar, _Slider);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function SeekBar(player, options) {\n var _this;\n\n _this = _Slider.call(this, player, options) || this;\n\n _this.setEventHandlers_();\n\n return _this;\n }\n \/**\n * Sets the event handlers\n *\n * @private\n *\/\n\n\n var _proto = SeekBar.prototype;\n\n _proto.setEventHandlers_ = function setEventHandlers_() {\n this.update_ = bind(this, this.update);\n this.update = throttle(this.update_, UPDATE_REFRESH_INTERVAL);\n this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);\n\n if (this.player_.liveTracker) {\n this.on(this.player_.liveTracker, 'liveedgechange', this.update);\n } \/\/ when playing, let's ensure we smoothly update the play progress bar\n \/\/ via an interval\n\n\n this.updateInterval = null;\n this.on(this.player_, ['playing'], this.enableInterval_);\n this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_); \/\/ we don't need to update the play progress if the document is hidden,\n \/\/ also, this causes the CPU to spike and eventually crash the page on IE11.\n\n if ('hidden' in document && 'visibilityState' in document) {\n this.on(document, 'visibilitychange', this.toggleVisibility_);\n }\n };\n\n _proto.toggleVisibility_ = function toggleVisibility_(e) {\n if (document.hidden) {\n this.disableInterval_(e);\n } else {\n this.enableInterval_(); \/\/ we just switched back to the page and someone may be looking, so, update ASAP\n\n this.update();\n }\n };\n\n _proto.enableInterval_ = function enableInterval_() {\n if (this.updateInterval) {\n return;\n }\n\n this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);\n };\n\n _proto.disableInterval_ = function disableInterval_(e) {\n if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e.type !== 'ended') {\n return;\n }\n\n if (!this.updateInterval) {\n return;\n }\n\n this.clearInterval(this.updateInterval);\n this.updateInterval = null;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n ;\n\n _proto.createEl = function createEl() {\n return _Slider.prototype.createEl.call(this, 'div', {\n className: 'vjs-progress-holder'\n }, {\n 'aria-label': this.localize('Progress Bar')\n });\n }\n \/**\n * This function updates the play progress bar and accessibility\n * attributes to whatever is passed in.\n *\n * @param {EventTarget~Event} [event]\n * The `timeupdate` or `ended` event that caused this to run.\n *\n * @listens Player#timeupdate\n *\n * @return {number}\n * The current percent at a number from 0-1\n *\/\n ;\n\n _proto.update = function update(event) {\n var _this2 = this;\n\n var percent = _Slider.prototype.update.call(this);\n\n this.requestAnimationFrame(function () {\n var currentTime = _this2.player_.ended() ? _this2.player_.duration() : _this2.getCurrentTime_();\n var liveTracker = _this2.player_.liveTracker;\n\n var duration = _this2.player_.duration();\n\n if (liveTracker && liveTracker.isLive()) {\n duration = _this2.player_.liveTracker.liveCurrentTime();\n }\n\n if (_this2.percent_ !== percent) {\n \/\/ machine readable value of progress bar (percentage complete)\n _this2.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));\n\n _this2.percent_ = percent;\n }\n\n if (_this2.currentTime_ !== currentTime || _this2.duration_ !== duration) {\n \/\/ human readable value of progress bar (time complete)\n _this2.el_.setAttribute('aria-valuetext', _this2.localize('progress bar timing: currentTime={1} duration={2}', [formatTime(currentTime, duration), formatTime(duration, duration)], '{1} of {2}'));\n\n _this2.currentTime_ = currentTime;\n _this2.duration_ = duration;\n } \/\/ update the progress bar time tooltip with the current time\n\n\n if (_this2.bar) {\n _this2.bar.update(getBoundingClientRect(_this2.el()), _this2.getProgress());\n }\n });\n return percent;\n }\n \/**\n * Get the value of current time but allows for smooth scrubbing,\n * when player can't keep up.\n *\n * @return {number}\n * The current time value to display\n *\n * @private\n *\/\n ;\n\n _proto.getCurrentTime_ = function getCurrentTime_() {\n return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();\n }\n \/**\n * Get the percentage of media played so far.\n *\n * @return {number}\n * The percentage of media played so far (0 to 1).\n *\/\n ;\n\n _proto.getPercent = function getPercent() {\n var currentTime = this.getCurrentTime_();\n var percent;\n var liveTracker = this.player_.liveTracker;\n\n if (liveTracker && liveTracker.isLive()) {\n percent = (currentTime - liveTracker.seekableStart()) \/ liveTracker.liveWindow(); \/\/ prevent the percent from changing at the live edge\n\n if (liveTracker.atLiveEdge()) {\n percent = 1;\n }\n } else {\n percent = currentTime \/ this.player_.duration();\n }\n\n return percent;\n }\n \/**\n * Handle mouse down on seek bar\n *\n * @param {EventTarget~Event} event\n * The `mousedown` event that caused this to run.\n *\n * @listens mousedown\n *\/\n ;\n\n _proto.handleMouseDown = function handleMouseDown(event) {\n if (!isSingleLeftClick(event)) {\n return;\n } \/\/ Stop event propagation to prevent double fire in progress-control.js\n\n\n event.stopPropagation();\n this.player_.scrubbing(true);\n this.videoWasPlaying = !this.player_.paused();\n this.player_.pause();\n\n _Slider.prototype.handleMouseDown.call(this, event);\n }\n \/**\n * Handle mouse move on seek bar\n *\n * @param {EventTarget~Event} event\n * The `mousemove` event that caused this to run.\n *\n * @listens mousemove\n *\/\n ;\n\n _proto.handleMouseMove = function handleMouseMove(event) {\n if (!isSingleLeftClick(event)) {\n return;\n }\n\n var newTime;\n var distance = this.calculateDistance(event);\n var liveTracker = this.player_.liveTracker;\n\n if (!liveTracker || !liveTracker.isLive()) {\n newTime = distance * this.player_.duration(); \/\/ Don't let video end while scrubbing.\n\n if (newTime === this.player_.duration()) {\n newTime = newTime - 0.1;\n }\n } else {\n var seekableStart = liveTracker.seekableStart();\n var seekableEnd = liveTracker.liveCurrentTime();\n newTime = seekableStart + distance * liveTracker.liveWindow(); \/\/ Don't let video end while scrubbing.\n\n if (newTime >= seekableEnd) {\n newTime = seekableEnd;\n } \/\/ Compensate for precision differences so that currentTime is not less\n \/\/ than seekable start\n\n\n if (newTime <= seekableStart) {\n newTime = seekableStart + 0.1;\n } \/\/ On android seekableEnd can be Infinity sometimes,\n \/\/ this will cause newTime to be Infinity, which is\n \/\/ not a valid currentTime.\n\n\n if (newTime === Infinity) {\n return;\n }\n } \/\/ Set new time (tell player to seek to new time)\n\n\n this.player_.currentTime(newTime);\n };\n\n _proto.enable = function enable() {\n _Slider.prototype.enable.call(this);\n\n var mouseTimeDisplay = this.getChild('mouseTimeDisplay');\n\n if (!mouseTimeDisplay) {\n return;\n }\n\n mouseTimeDisplay.show();\n };\n\n _proto.disable = function disable() {\n _Slider.prototype.disable.call(this);\n\n var mouseTimeDisplay = this.getChild('mouseTimeDisplay');\n\n if (!mouseTimeDisplay) {\n return;\n }\n\n mouseTimeDisplay.hide();\n }\n \/**\n * Handle mouse up on seek bar\n *\n * @param {EventTarget~Event} event\n * The `mouseup` event that caused this to run.\n *\n * @listens mouseup\n *\/\n ;\n\n _proto.handleMouseUp = function handleMouseUp(event) {\n _Slider.prototype.handleMouseUp.call(this, event); \/\/ Stop event propagation to prevent double fire in progress-control.js\n\n\n if (event) {\n event.stopPropagation();\n }\n\n this.player_.scrubbing(false);\n \/**\n * Trigger timeupdate because we're done seeking and the time has changed.\n * This is particularly useful for if the player is paused to time the time displays.\n *\n * @event Tech#timeupdate\n * @type {EventTarget~Event}\n *\/\n\n this.player_.trigger({\n type: 'timeupdate',\n target: this,\n manuallyTriggered: true\n });\n\n if (this.videoWasPlaying) {\n silencePromise(this.player_.play());\n } else {\n \/\/ We're done seeking and the time has changed.\n \/\/ If the player is paused, make sure we display the correct time on the seek bar.\n this.update_();\n }\n }\n \/**\n * Move more quickly fast forward for keyboard-only users\n *\/\n ;\n\n _proto.stepForward = function stepForward() {\n this.player_.currentTime(this.player_.currentTime() + STEP_SECONDS);\n }\n \/**\n * Move more quickly rewind for keyboard-only users\n *\/\n ;\n\n _proto.stepBack = function stepBack() {\n this.player_.currentTime(this.player_.currentTime() - STEP_SECONDS);\n }\n \/**\n * Toggles the playback state of the player\n * This gets called when enter or space is used on the seekbar\n *\n * @param {EventTarget~Event} event\n * The `keydown` event that caused this function to be called\n *\n *\/\n ;\n\n _proto.handleAction = function handleAction(event) {\n if (this.player_.paused()) {\n this.player_.play();\n } else {\n this.player_.pause();\n }\n }\n \/**\n * Called when this SeekBar has focus and a key gets pressed down.\n * Supports the following keys:\n *\n * Space or Enter key fire a click event\n * Home key moves to start of the timeline\n * End key moves to end of the timeline\n * Digit \"0\" through \"9\" keys move to 0%, 10% ... 80%, 90% of the timeline\n * PageDown key moves back a larger step than ArrowDown\n * PageUp key moves forward a large step\n *\n * @param {EventTarget~Event} event\n * The `keydown` event that caused this function to be called.\n *\n * @listens keydown\n *\/\n ;\n\n _proto.handleKeyDown = function handleKeyDown(event) {\n if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {\n event.preventDefault();\n event.stopPropagation();\n this.handleAction(event);\n } else if (keycode.isEventKey(event, 'Home')) {\n event.preventDefault();\n event.stopPropagation();\n this.player_.currentTime(0);\n } else if (keycode.isEventKey(event, 'End')) {\n event.preventDefault();\n event.stopPropagation();\n this.player_.currentTime(this.player_.duration());\n } else if (\/^[0-9]$\/.test(keycode(event))) {\n event.preventDefault();\n event.stopPropagation();\n var gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 \/ 100.0;\n this.player_.currentTime(this.player_.duration() * gotoFraction);\n } else if (keycode.isEventKey(event, 'PgDn')) {\n event.preventDefault();\n event.stopPropagation();\n this.player_.currentTime(this.player_.currentTime() - STEP_SECONDS * PAGE_KEY_MULTIPLIER);\n } else if (keycode.isEventKey(event, 'PgUp')) {\n event.preventDefault();\n event.stopPropagation();\n this.player_.currentTime(this.player_.currentTime() + STEP_SECONDS * PAGE_KEY_MULTIPLIER);\n } else {\n \/\/ Pass keydown handling up for unsupported keys\n _Slider.prototype.handleKeyDown.call(this, event);\n }\n };\n\n return SeekBar;\n }(Slider);\n \/**\n * Default options for the `SeekBar`\n *\n * @type {Object}\n * @private\n *\/\n\n\n SeekBar.prototype.options_ = {\n children: ['loadProgressBar', 'playProgressBar'],\n barName: 'playProgressBar'\n }; \/\/ MouseTimeDisplay tooltips should not be added to a player on mobile devices\n\n if (!IS_IOS && !IS_ANDROID) {\n SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');\n }\n\n Component.registerComponent('SeekBar', SeekBar);\n\n \/**\n * The Progress Control component contains the seek bar, load progress,\n * and play progress.\n *\n * @extends Component\n *\/\n\n var ProgressControl = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(ProgressControl, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function ProgressControl(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n _this.handleMouseMove = throttle(bind(assertThisInitialized(_this), _this.handleMouseMove), UPDATE_REFRESH_INTERVAL);\n _this.throttledHandleMouseSeek = throttle(bind(assertThisInitialized(_this), _this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);\n\n _this.enable();\n\n return _this;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = ProgressControl.prototype;\n\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-progress-control vjs-control'\n });\n }\n \/**\n * When the mouse moves over the `ProgressControl`, the pointer position\n * gets passed down to the `MouseTimeDisplay` component.\n *\n * @param {EventTarget~Event} event\n * The `mousemove` event that caused this function to run.\n *\n * @listen mousemove\n *\/\n ;\n\n _proto.handleMouseMove = function handleMouseMove(event) {\n var seekBar = this.getChild('seekBar');\n\n if (!seekBar) {\n return;\n }\n\n var playProgressBar = seekBar.getChild('playProgressBar');\n var mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');\n\n if (!playProgressBar && !mouseTimeDisplay) {\n return;\n }\n\n var seekBarEl = seekBar.el();\n var seekBarRect = getBoundingClientRect(seekBarEl);\n var seekBarPoint = getPointerPosition(seekBarEl, event).x; \/\/ The default skin has a gap on either side of the `SeekBar`. This means\n \/\/ that it's possible to trigger this behavior outside the boundaries of\n \/\/ the `SeekBar`. This ensures we stay within it at all times.\n\n seekBarPoint = clamp(0, 1, seekBarPoint);\n\n if (mouseTimeDisplay) {\n mouseTimeDisplay.update(seekBarRect, seekBarPoint);\n }\n\n if (playProgressBar) {\n playProgressBar.update(seekBarRect, seekBar.getProgress());\n }\n }\n \/**\n * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.\n *\n * @method ProgressControl#throttledHandleMouseSeek\n * @param {EventTarget~Event} event\n * The `mousemove` event that caused this function to run.\n *\n * @listen mousemove\n * @listen touchmove\n *\/\n\n \/**\n * Handle `mousemove` or `touchmove` events on the `ProgressControl`.\n *\n * @param {EventTarget~Event} event\n * `mousedown` or `touchstart` event that triggered this function\n *\n * @listens mousemove\n * @listens touchmove\n *\/\n ;\n\n _proto.handleMouseSeek = function handleMouseSeek(event) {\n var seekBar = this.getChild('seekBar');\n\n if (seekBar) {\n seekBar.handleMouseMove(event);\n }\n }\n \/**\n * Are controls are currently enabled for this progress control.\n *\n * @return {boolean}\n * true if controls are enabled, false otherwise\n *\/\n ;\n\n _proto.enabled = function enabled() {\n return this.enabled_;\n }\n \/**\n * Disable all controls on the progress control and its children\n *\/\n ;\n\n _proto.disable = function disable() {\n this.children().forEach(function (child) {\n return child.disable && child.disable();\n });\n\n if (!this.enabled()) {\n return;\n }\n\n this.off(['mousedown', 'touchstart'], this.handleMouseDown);\n this.off(this.el_, 'mousemove', this.handleMouseMove);\n this.handleMouseUp();\n this.addClass('disabled');\n this.enabled_ = false;\n }\n \/**\n * Enable all controls on the progress control and its children\n *\/\n ;\n\n _proto.enable = function enable() {\n this.children().forEach(function (child) {\n return child.enable && child.enable();\n });\n\n if (this.enabled()) {\n return;\n }\n\n this.on(['mousedown', 'touchstart'], this.handleMouseDown);\n this.on(this.el_, 'mousemove', this.handleMouseMove);\n this.removeClass('disabled');\n this.enabled_ = true;\n }\n \/**\n * Handle `mousedown` or `touchstart` events on the `ProgressControl`.\n *\n * @param {EventTarget~Event} event\n * `mousedown` or `touchstart` event that triggered this function\n *\n * @listens mousedown\n * @listens touchstart\n *\/\n ;\n\n _proto.handleMouseDown = function handleMouseDown(event) {\n var doc = this.el_.ownerDocument;\n var seekBar = this.getChild('seekBar');\n\n if (seekBar) {\n seekBar.handleMouseDown(event);\n }\n\n this.on(doc, 'mousemove', this.throttledHandleMouseSeek);\n this.on(doc, 'touchmove', this.throttledHandleMouseSeek);\n this.on(doc, 'mouseup', this.handleMouseUp);\n this.on(doc, 'touchend', this.handleMouseUp);\n }\n \/**\n * Handle `mouseup` or `touchend` events on the `ProgressControl`.\n *\n * @param {EventTarget~Event} event\n * `mouseup` or `touchend` event that triggered this function.\n *\n * @listens touchend\n * @listens mouseup\n *\/\n ;\n\n _proto.handleMouseUp = function handleMouseUp(event) {\n var doc = this.el_.ownerDocument;\n var seekBar = this.getChild('seekBar');\n\n if (seekBar) {\n seekBar.handleMouseUp(event);\n }\n\n this.off(doc, 'mousemove', this.throttledHandleMouseSeek);\n this.off(doc, 'touchmove', this.throttledHandleMouseSeek);\n this.off(doc, 'mouseup', this.handleMouseUp);\n this.off(doc, 'touchend', this.handleMouseUp);\n };\n\n return ProgressControl;\n }(Component);\n \/**\n * Default options for `ProgressControl`\n *\n * @type {Object}\n * @private\n *\/\n\n\n ProgressControl.prototype.options_ = {\n children: ['seekBar']\n };\n Component.registerComponent('ProgressControl', ProgressControl);\n\n \/**\n * Toggle Picture-in-Picture mode\n *\n * @extends Button\n *\/\n\n var PictureInPictureToggle = \/*#__PURE__*\/function (_Button) {\n inheritsLoose(PictureInPictureToggle, _Button);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\n * @listens Player#enterpictureinpicture\n * @listens Player#leavepictureinpicture\n *\/\n function PictureInPictureToggle(player, options) {\n var _this;\n\n _this = _Button.call(this, player, options) || this;\n\n _this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], _this.handlePictureInPictureChange); \/\/ TODO: Activate button on player loadedmetadata event.\n \/\/ TODO: Deactivate button on player emptied event.\n \/\/ TODO: Deactivate button if disablepictureinpicture attribute is present.\n\n\n if (!document.pictureInPictureEnabled) {\n _this.disable();\n }\n\n return _this;\n }\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n\n\n var _proto = PictureInPictureToggle.prototype;\n\n _proto.buildCSSClass = function buildCSSClass() {\n return \"vjs-picture-in-picture-control \" + _Button.prototype.buildCSSClass.call(this);\n }\n \/**\n * Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.\n *\n * @param {EventTarget~Event} [event]\n * The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be\n * called.\n *\n * @listens Player#enterpictureinpicture\n * @listens Player#leavepictureinpicture\n *\/\n ;\n\n _proto.handlePictureInPictureChange = function handlePictureInPictureChange(event) {\n if (this.player_.isInPictureInPicture()) {\n this.controlText('Exit Picture-in-Picture');\n } else {\n this.controlText('Picture-in-Picture');\n }\n }\n \/**\n * This gets called when an `PictureInPictureToggle` is \"clicked\". See\n * {@link ClickableComponent} for more detailed information on what a click can be.\n *\n * @param {EventTarget~Event} [event]\n * The `keydown`, `tap`, or `click` event that caused this function to be\n * called.\n *\n * @listens tap\n * @listens click\n *\/\n ;\n\n _proto.handleClick = function handleClick(event) {\n if (!this.player_.isInPictureInPicture()) {\n this.player_.requestPictureInPicture();\n } else {\n this.player_.exitPictureInPicture();\n }\n };\n\n return PictureInPictureToggle;\n }(Button);\n \/**\n * The text that should display over the `PictureInPictureToggle`s controls. Added for localization.\n *\n * @type {string}\n * @private\n *\/\n\n\n PictureInPictureToggle.prototype.controlText_ = 'Picture-in-Picture';\n Component.registerComponent('PictureInPictureToggle', PictureInPictureToggle);\n\n \/**\n * Toggle fullscreen video\n *\n * @extends Button\n *\/\n\n var FullscreenToggle = \/*#__PURE__*\/function (_Button) {\n inheritsLoose(FullscreenToggle, _Button);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function FullscreenToggle(player, options) {\n var _this;\n\n _this = _Button.call(this, player, options) || this;\n\n _this.on(player, 'fullscreenchange', _this.handleFullscreenChange);\n\n if (document[player.fsApi_.fullscreenEnabled] === false) {\n _this.disable();\n }\n\n return _this;\n }\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n\n\n var _proto = FullscreenToggle.prototype;\n\n _proto.buildCSSClass = function buildCSSClass() {\n return \"vjs-fullscreen-control \" + _Button.prototype.buildCSSClass.call(this);\n }\n \/**\n * Handles fullscreenchange on the player and change control text accordingly.\n *\n * @param {EventTarget~Event} [event]\n * The {@link Player#fullscreenchange} event that caused this function to be\n * called.\n *\n * @listens Player#fullscreenchange\n *\/\n ;\n\n _proto.handleFullscreenChange = function handleFullscreenChange(event) {\n if (this.player_.isFullscreen()) {\n this.controlText('Non-Fullscreen');\n } else {\n this.controlText('Fullscreen');\n }\n }\n \/**\n * This gets called when an `FullscreenToggle` is \"clicked\". See\n * {@link ClickableComponent} for more detailed information on what a click can be.\n *\n * @param {EventTarget~Event} [event]\n * The `keydown`, `tap`, or `click` event that caused this function to be\n * called.\n *\n * @listens tap\n * @listens click\n *\/\n ;\n\n _proto.handleClick = function handleClick(event) {\n if (!this.player_.isFullscreen()) {\n this.player_.requestFullscreen();\n } else {\n this.player_.exitFullscreen();\n }\n };\n\n return FullscreenToggle;\n }(Button);\n \/**\n * The text that should display over the `FullscreenToggle`s controls. Added for localization.\n *\n * @type {string}\n * @private\n *\/\n\n\n FullscreenToggle.prototype.controlText_ = 'Fullscreen';\n Component.registerComponent('FullscreenToggle', FullscreenToggle);\n\n \/**\n * Check if volume control is supported and if it isn't hide the\n * `Component` that was passed using the `vjs-hidden` class.\n *\n * @param {Component} self\n * The component that should be hidden if volume is unsupported\n *\n * @param {Player} player\n * A reference to the player\n *\n * @private\n *\/\n var checkVolumeSupport = function checkVolumeSupport(self, player) {\n \/\/ hide volume controls when they're not supported by the current tech\n if (player.tech_ && !player.tech_.featuresVolumeControl) {\n self.addClass('vjs-hidden');\n }\n\n self.on(player, 'loadstart', function () {\n if (!player.tech_.featuresVolumeControl) {\n self.addClass('vjs-hidden');\n } else {\n self.removeClass('vjs-hidden');\n }\n });\n };\n\n \/**\n * Shows volume level\n *\n * @extends Component\n *\/\n\n var VolumeLevel = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(VolumeLevel, _Component);\n\n function VolumeLevel() {\n return _Component.apply(this, arguments) || this;\n }\n\n var _proto = VolumeLevel.prototype;\n\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: 'vjs-volume-level',\n innerHTML: '<\/span>'\n });\n };\n\n return VolumeLevel;\n }(Component);\n\n Component.registerComponent('VolumeLevel', VolumeLevel);\n\n \/**\n * The bar that contains the volume level and can be clicked on to adjust the level\n *\n * @extends Slider\n *\/\n\n var VolumeBar = \/*#__PURE__*\/function (_Slider) {\n inheritsLoose(VolumeBar, _Slider);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function VolumeBar(player, options) {\n var _this;\n\n _this = _Slider.call(this, player, options) || this;\n\n _this.on('slideractive', _this.updateLastVolume_);\n\n _this.on(player, 'volumechange', _this.updateARIAAttributes);\n\n player.ready(function () {\n return _this.updateARIAAttributes();\n });\n return _this;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = VolumeBar.prototype;\n\n _proto.createEl = function createEl() {\n return _Slider.prototype.createEl.call(this, 'div', {\n className: 'vjs-volume-bar vjs-slider-bar'\n }, {\n 'aria-label': this.localize('Volume Level'),\n 'aria-live': 'polite'\n });\n }\n \/**\n * Handle mouse down on volume bar\n *\n * @param {EventTarget~Event} event\n * The `mousedown` event that caused this to run.\n *\n * @listens mousedown\n *\/\n ;\n\n _proto.handleMouseDown = function handleMouseDown(event) {\n if (!isSingleLeftClick(event)) {\n return;\n }\n\n _Slider.prototype.handleMouseDown.call(this, event);\n }\n \/**\n * Handle movement events on the {@link VolumeMenuButton}.\n *\n * @param {EventTarget~Event} event\n * The event that caused this function to run.\n *\n * @listens mousemove\n *\/\n ;\n\n _proto.handleMouseMove = function handleMouseMove(event) {\n if (!isSingleLeftClick(event)) {\n return;\n }\n\n this.checkMuted();\n this.player_.volume(this.calculateDistance(event));\n }\n \/**\n * If the player is muted unmute it.\n *\/\n ;\n\n _proto.checkMuted = function checkMuted() {\n if (this.player_.muted()) {\n this.player_.muted(false);\n }\n }\n \/**\n * Get percent of volume level\n *\n * @return {number}\n * Volume level percent as a decimal number.\n *\/\n ;\n\n _proto.getPercent = function getPercent() {\n if (this.player_.muted()) {\n return 0;\n }\n\n return this.player_.volume();\n }\n \/**\n * Increase volume level for keyboard users\n *\/\n ;\n\n _proto.stepForward = function stepForward() {\n this.checkMuted();\n this.player_.volume(this.player_.volume() + 0.1);\n }\n \/**\n * Decrease volume level for keyboard users\n *\/\n ;\n\n _proto.stepBack = function stepBack() {\n this.checkMuted();\n this.player_.volume(this.player_.volume() - 0.1);\n }\n \/**\n * Update ARIA accessibility attributes\n *\n * @param {EventTarget~Event} [event]\n * The `volumechange` event that caused this function to run.\n *\n * @listens Player#volumechange\n *\/\n ;\n\n _proto.updateARIAAttributes = function updateARIAAttributes(event) {\n var ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();\n this.el_.setAttribute('aria-valuenow', ariaValue);\n this.el_.setAttribute('aria-valuetext', ariaValue + '%');\n }\n \/**\n * Returns the current value of the player volume as a percentage\n *\n * @private\n *\/\n ;\n\n _proto.volumeAsPercentage_ = function volumeAsPercentage_() {\n return Math.round(this.player_.volume() * 100);\n }\n \/**\n * When user starts dragging the VolumeBar, store the volume and listen for\n * the end of the drag. When the drag ends, if the volume was set to zero,\n * set lastVolume to the stored volume.\n *\n * @listens slideractive\n * @private\n *\/\n ;\n\n _proto.updateLastVolume_ = function updateLastVolume_() {\n var _this2 = this;\n\n var volumeBeforeDrag = this.player_.volume();\n this.one('sliderinactive', function () {\n if (_this2.player_.volume() === 0) {\n _this2.player_.lastVolume_(volumeBeforeDrag);\n }\n });\n };\n\n return VolumeBar;\n }(Slider);\n \/**\n * Default options for the `VolumeBar`\n *\n * @type {Object}\n * @private\n *\/\n\n\n VolumeBar.prototype.options_ = {\n children: ['volumeLevel'],\n barName: 'volumeLevel'\n };\n \/**\n * Call the update event for this Slider when this event happens on the player.\n *\n * @type {string}\n *\/\n\n VolumeBar.prototype.playerEvent = 'volumechange';\n Component.registerComponent('VolumeBar', VolumeBar);\n\n \/**\n * The component for controlling the volume level\n *\n * @extends Component\n *\/\n\n var VolumeControl = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(VolumeControl, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options={}]\n * The key\/value store of player options.\n *\/\n function VolumeControl(player, options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n options.vertical = options.vertical || false; \/\/ Pass the vertical option down to the VolumeBar if\n \/\/ the VolumeBar is turned on.\n\n if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {\n options.volumeBar = options.volumeBar || {};\n options.volumeBar.vertical = options.vertical;\n }\n\n _this = _Component.call(this, player, options) || this; \/\/ hide this control if volume support is missing\n\n checkVolumeSupport(assertThisInitialized(_this), player);\n _this.throttledHandleMouseMove = throttle(bind(assertThisInitialized(_this), _this.handleMouseMove), UPDATE_REFRESH_INTERVAL);\n\n _this.on('mousedown', _this.handleMouseDown);\n\n _this.on('touchstart', _this.handleMouseDown); \/\/ while the slider is active (the mouse has been pressed down and\n \/\/ is dragging) or in focus we do not want to hide the VolumeBar\n\n\n _this.on(_this.volumeBar, ['focus', 'slideractive'], function () {\n _this.volumeBar.addClass('vjs-slider-active');\n\n _this.addClass('vjs-slider-active');\n\n _this.trigger('slideractive');\n });\n\n _this.on(_this.volumeBar, ['blur', 'sliderinactive'], function () {\n _this.volumeBar.removeClass('vjs-slider-active');\n\n _this.removeClass('vjs-slider-active');\n\n _this.trigger('sliderinactive');\n });\n\n return _this;\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n\n\n var _proto = VolumeControl.prototype;\n\n _proto.createEl = function createEl() {\n var orientationClass = 'vjs-volume-horizontal';\n\n if (this.options_.vertical) {\n orientationClass = 'vjs-volume-vertical';\n }\n\n return _Component.prototype.createEl.call(this, 'div', {\n className: \"vjs-volume-control vjs-control \" + orientationClass\n });\n }\n \/**\n * Handle `mousedown` or `touchstart` events on the `VolumeControl`.\n *\n * @param {EventTarget~Event} event\n * `mousedown` or `touchstart` event that triggered this function\n *\n * @listens mousedown\n * @listens touchstart\n *\/\n ;\n\n _proto.handleMouseDown = function handleMouseDown(event) {\n var doc = this.el_.ownerDocument;\n this.on(doc, 'mousemove', this.throttledHandleMouseMove);\n this.on(doc, 'touchmove', this.throttledHandleMouseMove);\n this.on(doc, 'mouseup', this.handleMouseUp);\n this.on(doc, 'touchend', this.handleMouseUp);\n }\n \/**\n * Handle `mouseup` or `touchend` events on the `VolumeControl`.\n *\n * @param {EventTarget~Event} event\n * `mouseup` or `touchend` event that triggered this function.\n *\n * @listens touchend\n * @listens mouseup\n *\/\n ;\n\n _proto.handleMouseUp = function handleMouseUp(event) {\n var doc = this.el_.ownerDocument;\n this.off(doc, 'mousemove', this.throttledHandleMouseMove);\n this.off(doc, 'touchmove', this.throttledHandleMouseMove);\n this.off(doc, 'mouseup', this.handleMouseUp);\n this.off(doc, 'touchend', this.handleMouseUp);\n }\n \/**\n * Handle `mousedown` or `touchstart` events on the `VolumeControl`.\n *\n * @param {EventTarget~Event} event\n * `mousedown` or `touchstart` event that triggered this function\n *\n * @listens mousedown\n * @listens touchstart\n *\/\n ;\n\n _proto.handleMouseMove = function handleMouseMove(event) {\n this.volumeBar.handleMouseMove(event);\n };\n\n return VolumeControl;\n }(Component);\n \/**\n * Default options for the `VolumeControl`\n *\n * @type {Object}\n * @private\n *\/\n\n\n VolumeControl.prototype.options_ = {\n children: ['volumeBar']\n };\n Component.registerComponent('VolumeControl', VolumeControl);\n\n \/**\n * Check if muting volume is supported and if it isn't hide the mute toggle\n * button.\n *\n * @param {Component} self\n * A reference to the mute toggle button\n *\n * @param {Player} player\n * A reference to the player\n *\n * @private\n *\/\n var checkMuteSupport = function checkMuteSupport(self, player) {\n \/\/ hide mute toggle button if it's not supported by the current tech\n if (player.tech_ && !player.tech_.featuresMuteControl) {\n self.addClass('vjs-hidden');\n }\n\n self.on(player, 'loadstart', function () {\n if (!player.tech_.featuresMuteControl) {\n self.addClass('vjs-hidden');\n } else {\n self.removeClass('vjs-hidden');\n }\n });\n };\n\n \/**\n * A button component for muting the audio.\n *\n * @extends Button\n *\/\n\n var MuteToggle = \/*#__PURE__*\/function (_Button) {\n inheritsLoose(MuteToggle, _Button);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function MuteToggle(player, options) {\n var _this;\n\n _this = _Button.call(this, player, options) || this; \/\/ hide this control if volume support is missing\n\n checkMuteSupport(assertThisInitialized(_this), player);\n\n _this.on(player, ['loadstart', 'volumechange'], _this.update);\n\n return _this;\n }\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n\n\n var _proto = MuteToggle.prototype;\n\n _proto.buildCSSClass = function buildCSSClass() {\n return \"vjs-mute-control \" + _Button.prototype.buildCSSClass.call(this);\n }\n \/**\n * This gets called when an `MuteToggle` is \"clicked\". See\n * {@link ClickableComponent} for more detailed information on what a click can be.\n *\n * @param {EventTarget~Event} [event]\n * The `keydown`, `tap`, or `click` event that caused this function to be\n * called.\n *\n * @listens tap\n * @listens click\n *\/\n ;\n\n _proto.handleClick = function handleClick(event) {\n var vol = this.player_.volume();\n var lastVolume = this.player_.lastVolume_();\n\n if (vol === 0) {\n var volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;\n this.player_.volume(volumeToSet);\n this.player_.muted(false);\n } else {\n this.player_.muted(this.player_.muted() ? false : true);\n }\n }\n \/**\n * Update the `MuteToggle` button based on the state of `volume` and `muted`\n * on the player.\n *\n * @param {EventTarget~Event} [event]\n * The {@link Player#loadstart} event if this function was called\n * through an event.\n *\n * @listens Player#loadstart\n * @listens Player#volumechange\n *\/\n ;\n\n _proto.update = function update(event) {\n this.updateIcon_();\n this.updateControlText_();\n }\n \/**\n * Update the appearance of the `MuteToggle` icon.\n *\n * Possible states (given `level` variable below):\n * - 0: crossed out\n * - 1: zero bars of volume\n * - 2: one bar of volume\n * - 3: two bars of volume\n *\n * @private\n *\/\n ;\n\n _proto.updateIcon_ = function updateIcon_() {\n var vol = this.player_.volume();\n var level = 3; \/\/ in iOS when a player is loaded with muted attribute\n \/\/ and volume is changed with a native mute button\n \/\/ we want to make sure muted state is updated\n\n if (IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {\n this.player_.muted(this.player_.tech_.el_.muted);\n }\n\n if (vol === 0 || this.player_.muted()) {\n level = 0;\n } else if (vol < 0.33) {\n level = 1;\n } else if (vol < 0.67) {\n level = 2;\n } \/\/ TODO improve muted icon classes\n\n\n for (var i = 0; i < 4; i++) {\n removeClass(this.el_, \"vjs-vol-\" + i);\n }\n\n addClass(this.el_, \"vjs-vol-\" + level);\n }\n \/**\n * If `muted` has changed on the player, update the control text\n * (`title` attribute on `vjs-mute-control` element and content of\n * `vjs-control-text` element).\n *\n * @private\n *\/\n ;\n\n _proto.updateControlText_ = function updateControlText_() {\n var soundOff = this.player_.muted() || this.player_.volume() === 0;\n var text = soundOff ? 'Unmute' : 'Mute';\n\n if (this.controlText() !== text) {\n this.controlText(text);\n }\n };\n\n return MuteToggle;\n }(Button);\n \/**\n * The text that should display over the `MuteToggle`s controls. Added for localization.\n *\n * @type {string}\n * @private\n *\/\n\n\n MuteToggle.prototype.controlText_ = 'Mute';\n Component.registerComponent('MuteToggle', MuteToggle);\n\n \/**\n * A Component to contain the MuteToggle and VolumeControl so that\n * they can work together.\n *\n * @extends Component\n *\/\n\n var VolumePanel = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(VolumePanel, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options={}]\n * The key\/value store of player options.\n *\/\n function VolumePanel(player, options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n if (typeof options.inline !== 'undefined') {\n options.inline = options.inline;\n } else {\n options.inline = true;\n } \/\/ pass the inline option down to the VolumeControl as vertical if\n \/\/ the VolumeControl is on.\n\n\n if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {\n options.volumeControl = options.volumeControl || {};\n options.volumeControl.vertical = !options.inline;\n }\n\n _this = _Component.call(this, player, options) || this;\n\n _this.on(player, ['loadstart'], _this.volumePanelState_);\n\n _this.on(_this.muteToggle, 'keyup', _this.handleKeyPress);\n\n _this.on(_this.volumeControl, 'keyup', _this.handleVolumeControlKeyUp);\n\n _this.on('keydown', _this.handleKeyPress);\n\n _this.on('mouseover', _this.handleMouseOver);\n\n _this.on('mouseout', _this.handleMouseOut); \/\/ while the slider is active (the mouse has been pressed down and\n \/\/ is dragging) we do not want to hide the VolumeBar\n\n\n _this.on(_this.volumeControl, ['slideractive'], _this.sliderActive_);\n\n _this.on(_this.volumeControl, ['sliderinactive'], _this.sliderInactive_);\n\n return _this;\n }\n \/**\n * Add vjs-slider-active class to the VolumePanel\n *\n * @listens VolumeControl#slideractive\n * @private\n *\/\n\n\n var _proto = VolumePanel.prototype;\n\n _proto.sliderActive_ = function sliderActive_() {\n this.addClass('vjs-slider-active');\n }\n \/**\n * Removes vjs-slider-active class to the VolumePanel\n *\n * @listens VolumeControl#sliderinactive\n * @private\n *\/\n ;\n\n _proto.sliderInactive_ = function sliderInactive_() {\n this.removeClass('vjs-slider-active');\n }\n \/**\n * Adds vjs-hidden or vjs-mute-toggle-only to the VolumePanel\n * depending on MuteToggle and VolumeControl state\n *\n * @listens Player#loadstart\n * @private\n *\/\n ;\n\n _proto.volumePanelState_ = function volumePanelState_() {\n \/\/ hide volume panel if neither volume control or mute toggle\n \/\/ are displayed\n if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {\n this.addClass('vjs-hidden');\n } \/\/ if only mute toggle is visible we don't want\n \/\/ volume panel expanding when hovered or active\n\n\n if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {\n this.addClass('vjs-mute-toggle-only');\n }\n }\n \/**\n * Create the `Component`'s DOM element\n *\n * @return {Element}\n * The element that was created.\n *\/\n ;\n\n _proto.createEl = function createEl() {\n var orientationClass = 'vjs-volume-panel-horizontal';\n\n if (!this.options_.inline) {\n orientationClass = 'vjs-volume-panel-vertical';\n }\n\n return _Component.prototype.createEl.call(this, 'div', {\n className: \"vjs-volume-panel vjs-control \" + orientationClass\n });\n }\n \/**\n * Dispose of the `volume-panel` and all child components.\n *\/\n ;\n\n _proto.dispose = function dispose() {\n this.handleMouseOut();\n\n _Component.prototype.dispose.call(this);\n }\n \/**\n * Handles `keyup` events on the `VolumeControl`, looking for ESC, which closes\n * the volume panel and sets focus on `MuteToggle`.\n *\n * @param {EventTarget~Event} event\n * The `keyup` event that caused this function to be called.\n *\n * @listens keyup\n *\/\n ;\n\n _proto.handleVolumeControlKeyUp = function handleVolumeControlKeyUp(event) {\n if (keycode.isEventKey(event, 'Esc')) {\n this.muteToggle.focus();\n }\n }\n \/**\n * This gets called when a `VolumePanel` gains hover via a `mouseover` event.\n * Turns on listening for `mouseover` event. When they happen it\n * calls `this.handleMouseOver`.\n *\n * @param {EventTarget~Event} event\n * The `mouseover` event that caused this function to be called.\n *\n * @listens mouseover\n *\/\n ;\n\n _proto.handleMouseOver = function handleMouseOver(event) {\n this.addClass('vjs-hover');\n on(document, 'keyup', bind(this, this.handleKeyPress));\n }\n \/**\n * This gets called when a `VolumePanel` gains hover via a `mouseout` event.\n * Turns on listening for `mouseout` event. When they happen it\n * calls `this.handleMouseOut`.\n *\n * @param {EventTarget~Event} event\n * The `mouseout` event that caused this function to be called.\n *\n * @listens mouseout\n *\/\n ;\n\n _proto.handleMouseOut = function handleMouseOut(event) {\n this.removeClass('vjs-hover');\n off(document, 'keyup', bind(this, this.handleKeyPress));\n }\n \/**\n * Handles `keyup` event on the document or `keydown` event on the `VolumePanel`,\n * looking for ESC, which hides the `VolumeControl`.\n *\n * @param {EventTarget~Event} event\n * The keypress that triggered this event.\n *\n * @listens keydown | keyup\n *\/\n ;\n\n _proto.handleKeyPress = function handleKeyPress(event) {\n if (keycode.isEventKey(event, 'Esc')) {\n this.handleMouseOut();\n }\n };\n\n return VolumePanel;\n }(Component);\n \/**\n * Default options for the `VolumeControl`\n *\n * @type {Object}\n * @private\n *\/\n\n\n VolumePanel.prototype.options_ = {\n children: ['muteToggle', 'volumeControl']\n };\n Component.registerComponent('VolumePanel', VolumePanel);\n\n \/**\n * The Menu component is used to build popup menus, including subtitle and\n * captions selection menus.\n *\n * @extends Component\n *\/\n\n var Menu = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(Menu, _Component);\n\n \/**\n * Create an instance of this class.\n *\n * @param {Player} player\n * the player that this component should attach to\n *\n * @param {Object} [options]\n * Object of option names and values\n *\n *\/\n function Menu(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n\n if (options) {\n _this.menuButton_ = options.menuButton;\n }\n\n _this.focusedChild_ = -1;\n\n _this.on('keydown', _this.handleKeyDown); \/\/ All the menu item instances share the same blur handler provided by the menu container.\n\n\n _this.boundHandleBlur_ = bind(assertThisInitialized(_this), _this.handleBlur);\n _this.boundHandleTapClick_ = bind(assertThisInitialized(_this), _this.handleTapClick);\n return _this;\n }\n \/**\n * Add event listeners to the {@link MenuItem}.\n *\n * @param {Object} component\n * The instance of the `MenuItem` to add listeners to.\n *\n *\/\n\n\n var _proto = Menu.prototype;\n\n _proto.addEventListenerForItem = function addEventListenerForItem(component) {\n if (!(component instanceof Component)) {\n return;\n }\n\n this.on(component, 'blur', this.boundHandleBlur_);\n this.on(component, ['tap', 'click'], this.boundHandleTapClick_);\n }\n \/**\n * Remove event listeners from the {@link MenuItem}.\n *\n * @param {Object} component\n * The instance of the `MenuItem` to remove listeners.\n *\n *\/\n ;\n\n _proto.removeEventListenerForItem = function removeEventListenerForItem(component) {\n if (!(component instanceof Component)) {\n return;\n }\n\n this.off(component, 'blur', this.boundHandleBlur_);\n this.off(component, ['tap', 'click'], this.boundHandleTapClick_);\n }\n \/**\n * This method will be called indirectly when the component has been added\n * before the component adds to the new menu instance by `addItem`.\n * In this case, the original menu instance will remove the component\n * by calling `removeChild`.\n *\n * @param {Object} component\n * The instance of the `MenuItem`\n *\/\n ;\n\n _proto.removeChild = function removeChild(component) {\n if (typeof component === 'string') {\n component = this.getChild(component);\n }\n\n this.removeEventListenerForItem(component);\n\n _Component.prototype.removeChild.call(this, component);\n }\n \/**\n * Add a {@link MenuItem} to the menu.\n *\n * @param {Object|string} component\n * The name or instance of the `MenuItem` to add.\n *\n *\/\n ;\n\n _proto.addItem = function addItem(component) {\n var childComponent = this.addChild(component);\n\n if (childComponent) {\n this.addEventListenerForItem(childComponent);\n }\n }\n \/**\n * Create the `Menu`s DOM element.\n *\n * @return {Element}\n * the element that was created\n *\/\n ;\n\n _proto.createEl = function createEl$1() {\n var contentElType = this.options_.contentElType || 'ul';\n this.contentEl_ = createEl(contentElType, {\n className: 'vjs-menu-content'\n });\n this.contentEl_.setAttribute('role', 'menu');\n\n var el = _Component.prototype.createEl.call(this, 'div', {\n append: this.contentEl_,\n className: 'vjs-menu'\n });\n\n el.appendChild(this.contentEl_); \/\/ Prevent clicks from bubbling up. Needed for Menu Buttons,\n \/\/ where a click on the parent is significant\n\n on(el, 'click', function (event) {\n event.preventDefault();\n event.stopImmediatePropagation();\n });\n return el;\n };\n\n _proto.dispose = function dispose() {\n this.contentEl_ = null;\n this.boundHandleBlur_ = null;\n this.boundHandleTapClick_ = null;\n\n _Component.prototype.dispose.call(this);\n }\n \/**\n * Called when a `MenuItem` loses focus.\n *\n * @param {EventTarget~Event} event\n * The `blur` event that caused this function to be called.\n *\n * @listens blur\n *\/\n ;\n\n _proto.handleBlur = function handleBlur(event) {\n var relatedTarget = event.relatedTarget || document.activeElement; \/\/ Close menu popup when a user clicks outside the menu\n\n if (!this.children().some(function (element) {\n return element.el() === relatedTarget;\n })) {\n var btn = this.menuButton_;\n\n if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {\n btn.unpressButton();\n }\n }\n }\n \/**\n * Called when a `MenuItem` gets clicked or tapped.\n *\n * @param {EventTarget~Event} event\n * The `click` or `tap` event that caused this function to be called.\n *\n * @listens click,tap\n *\/\n ;\n\n _proto.handleTapClick = function handleTapClick(event) {\n \/\/ Unpress the associated MenuButton, and move focus back to it\n if (this.menuButton_) {\n this.menuButton_.unpressButton();\n var childComponents = this.children();\n\n if (!Array.isArray(childComponents)) {\n return;\n }\n\n var foundComponent = childComponents.filter(function (component) {\n return component.el() === event.target;\n })[0];\n\n if (!foundComponent) {\n return;\n } \/\/ don't focus menu button if item is a caption settings item\n \/\/ because focus will move elsewhere\n\n\n if (foundComponent.name() !== 'CaptionSettingsMenuItem') {\n this.menuButton_.focus();\n }\n }\n }\n \/**\n * Handle a `keydown` event on this menu. This listener is added in the constructor.\n *\n * @param {EventTarget~Event} event\n * A `keydown` event that happened on the menu.\n *\n * @listens keydown\n *\/\n ;\n\n _proto.handleKeyDown = function handleKeyDown(event) {\n \/\/ Left and Down Arrows\n if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {\n event.preventDefault();\n event.stopPropagation();\n this.stepForward(); \/\/ Up and Right Arrows\n } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {\n event.preventDefault();\n event.stopPropagation();\n this.stepBack();\n }\n }\n \/**\n * Move to next (lower) menu item for keyboard users.\n *\/\n ;\n\n _proto.stepForward = function stepForward() {\n var stepChild = 0;\n\n if (this.focusedChild_ !== undefined) {\n stepChild = this.focusedChild_ + 1;\n }\n\n this.focus(stepChild);\n }\n \/**\n * Move to previous (higher) menu item for keyboard users.\n *\/\n ;\n\n _proto.stepBack = function stepBack() {\n var stepChild = 0;\n\n if (this.focusedChild_ !== undefined) {\n stepChild = this.focusedChild_ - 1;\n }\n\n this.focus(stepChild);\n }\n \/**\n * Set focus on a {@link MenuItem} in the `Menu`.\n *\n * @param {Object|string} [item=0]\n * Index of child item set focus on.\n *\/\n ;\n\n _proto.focus = function focus(item) {\n if (item === void 0) {\n item = 0;\n }\n\n var children = this.children().slice();\n var haveTitle = children.length && children[0].className && \/vjs-menu-title\/.test(children[0].className);\n\n if (haveTitle) {\n children.shift();\n }\n\n if (children.length > 0) {\n if (item < 0) {\n item = 0;\n } else if (item >= children.length) {\n item = children.length - 1;\n }\n\n this.focusedChild_ = item;\n children[item].el_.focus();\n }\n };\n\n return Menu;\n }(Component);\n\n Component.registerComponent('Menu', Menu);\n\n \/**\n * A `MenuButton` class for any popup {@link Menu}.\n *\n * @extends Component\n *\/\n\n var MenuButton = \/*#__PURE__*\/function (_Component) {\n inheritsLoose(MenuButton, _Component);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options={}]\n * The key\/value store of player options.\n *\/\n function MenuButton(player, options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n _this = _Component.call(this, player, options) || this;\n _this.menuButton_ = new Button(player, options);\n\n _this.menuButton_.controlText(_this.controlText_);\n\n _this.menuButton_.el_.setAttribute('aria-haspopup', 'true'); \/\/ Add buildCSSClass values to the button, not the wrapper\n\n\n var buttonClass = Button.prototype.buildCSSClass();\n _this.menuButton_.el_.className = _this.buildCSSClass() + ' ' + buttonClass;\n\n _this.menuButton_.removeClass('vjs-control');\n\n _this.addChild(_this.menuButton_);\n\n _this.update();\n\n _this.enabled_ = true;\n\n _this.on(_this.menuButton_, 'tap', _this.handleClick);\n\n _this.on(_this.menuButton_, 'click', _this.handleClick);\n\n _this.on(_this.menuButton_, 'keydown', _this.handleKeyDown);\n\n _this.on(_this.menuButton_, 'mouseenter', function () {\n _this.addClass('vjs-hover');\n\n _this.menu.show();\n\n on(document, 'keyup', bind(assertThisInitialized(_this), _this.handleMenuKeyUp));\n });\n\n _this.on('mouseleave', _this.handleMouseLeave);\n\n _this.on('keydown', _this.handleSubmenuKeyDown);\n\n return _this;\n }\n \/**\n * Update the menu based on the current state of its items.\n *\/\n\n\n var _proto = MenuButton.prototype;\n\n _proto.update = function update() {\n var menu = this.createMenu();\n\n if (this.menu) {\n this.menu.dispose();\n this.removeChild(this.menu);\n }\n\n this.menu = menu;\n this.addChild(menu);\n \/**\n * Track the state of the menu button\n *\n * @type {Boolean}\n * @private\n *\/\n\n this.buttonPressed_ = false;\n this.menuButton_.el_.setAttribute('aria-expanded', 'false');\n\n if (this.items && this.items.length <= this.hideThreshold_) {\n this.hide();\n } else {\n this.show();\n }\n }\n \/**\n * Create the menu and add all items to it.\n *\n * @return {Menu}\n * The constructed menu\n *\/\n ;\n\n _proto.createMenu = function createMenu() {\n var menu = new Menu(this.player_, {\n menuButton: this\n });\n \/**\n * Hide the menu if the number of items is less than or equal to this threshold. This defaults\n * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list\n * it here because every time we run `createMenu` we need to reset the value.\n *\n * @protected\n * @type {Number}\n *\/\n\n this.hideThreshold_ = 0; \/\/ Add a title list item to the top\n\n if (this.options_.title) {\n var titleEl = createEl('li', {\n className: 'vjs-menu-title',\n innerHTML: toTitleCase(this.options_.title),\n tabIndex: -1\n });\n this.hideThreshold_ += 1;\n var titleComponent = new Component(this.player_, {\n el: titleEl\n });\n menu.addItem(titleComponent);\n }\n\n this.items = this.createItems();\n\n if (this.items) {\n \/\/ Add menu items to the menu\n for (var i = 0; i < this.items.length; i++) {\n menu.addItem(this.items[i]);\n }\n }\n\n return menu;\n }\n \/**\n * Create the list of menu items. Specific to each subclass.\n *\n * @abstract\n *\/\n ;\n\n _proto.createItems = function createItems() {}\n \/**\n * Create the `MenuButtons`s DOM element.\n *\n * @return {Element}\n * The element that gets created.\n *\/\n ;\n\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: this.buildWrapperCSSClass()\n }, {});\n }\n \/**\n * Allow sub components to stack CSS class names for the wrapper element\n *\n * @return {string}\n * The constructed wrapper DOM `className`\n *\/\n ;\n\n _proto.buildWrapperCSSClass = function buildWrapperCSSClass() {\n var menuButtonClass = 'vjs-menu-button'; \/\/ If the inline option is passed, we want to use different styles altogether.\n\n if (this.options_.inline === true) {\n menuButtonClass += '-inline';\n } else {\n menuButtonClass += '-popup';\n } \/\/ TODO: Fix the CSS so that this isn't necessary\n\n\n var buttonClass = Button.prototype.buildCSSClass();\n return \"vjs-menu-button \" + menuButtonClass + \" \" + buttonClass + \" \" + _Component.prototype.buildCSSClass.call(this);\n }\n \/**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n *\/\n ;\n\n _proto.buildCSSClass = function buildCSSClass() {\n var menuButtonClass = 'vjs-menu-button'; \/\/ If the inline option is passed, we want to use different styles altogether.\n\n if (this.options_.inline === true) {\n menuButtonClass += '-inline';\n } else {\n menuButtonClass += '-popup';\n }\n\n return \"vjs-menu-button \" + menuButtonClass + \" \" + _Component.prototype.buildCSSClass.call(this);\n }\n \/**\n * Get or set the localized control text that will be used for accessibility.\n *\n * > NOTE: This will come from the internal `menuButton_` element.\n *\n * @param {string} [text]\n * Control text for element.\n *\n * @param {Element} [el=this.menuButton_.el()]\n * Element to set the title on.\n *\n * @return {string}\n * - The control text when getting\n *\/\n ;\n\n _proto.controlText = function controlText(text, el) {\n if (el === void 0) {\n el = this.menuButton_.el();\n }\n\n return this.menuButton_.controlText(text, el);\n }\n \/**\n * Dispose of the `menu-button` and all child components.\n *\/\n ;\n\n _proto.dispose = function dispose() {\n this.handleMouseLeave();\n\n _Component.prototype.dispose.call(this);\n }\n \/**\n * Handle a click on a `MenuButton`.\n * See {@link ClickableComponent#handleClick} for instances where this is called.\n *\n * @param {EventTarget~Event} event\n * The `keydown`, `tap`, or `click` event that caused this function to be\n * called.\n *\n * @listens tap\n * @listens click\n *\/\n ;\n\n _proto.handleClick = function handleClick(event) {\n if (this.buttonPressed_) {\n this.unpressButton();\n } else {\n this.pressButton();\n }\n }\n \/**\n * Handle `mouseleave` for `MenuButton`.\n *\n * @param {EventTarget~Event} event\n * The `mouseleave` event that caused this function to be called.\n *\n * @listens mouseleave\n *\/\n ;\n\n _proto.handleMouseLeave = function handleMouseLeave(event) {\n this.removeClass('vjs-hover');\n off(document, 'keyup', bind(this, this.handleMenuKeyUp));\n }\n \/**\n * Set the focus to the actual button, not to this element\n *\/\n ;\n\n _proto.focus = function focus() {\n this.menuButton_.focus();\n }\n \/**\n * Remove the focus from the actual button, not this element\n *\/\n ;\n\n _proto.blur = function blur() {\n this.menuButton_.blur();\n }\n \/**\n * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See\n * {@link ClickableComponent#handleKeyDown} for instances where this is called.\n *\n * @param {EventTarget~Event} event\n * The `keydown` event that caused this function to be called.\n *\n * @listens keydown\n *\/\n ;\n\n _proto.handleKeyDown = function handleKeyDown(event) {\n \/\/ Escape or Tab unpress the 'button'\n if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {\n if (this.buttonPressed_) {\n this.unpressButton();\n } \/\/ Don't preventDefault for Tab key - we still want to lose focus\n\n\n if (!keycode.isEventKey(event, 'Tab')) {\n event.preventDefault(); \/\/ Set focus back to the menu button's button\n\n this.menuButton_.focus();\n } \/\/ Up Arrow or Down Arrow also 'press' the button to open the menu\n\n } else if (keycode.isEventKey(event, 'Up') || keycode.isEventKey(event, 'Down')) {\n if (!this.buttonPressed_) {\n event.preventDefault();\n this.pressButton();\n }\n }\n }\n \/**\n * Handle a `keyup` event on a `MenuButton`. The listener for this is added in\n * the constructor.\n *\n * @param {EventTarget~Event} event\n * Key press event\n *\n * @listens keyup\n *\/\n ;\n\n _proto.handleMenuKeyUp = function handleMenuKeyUp(event) {\n \/\/ Escape hides popup menu\n if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {\n this.removeClass('vjs-hover');\n }\n }\n \/**\n * This method name now delegates to `handleSubmenuKeyDown`. This means\n * anyone calling `handleSubmenuKeyPress` will not see their method calls\n * stop working.\n *\n * @param {EventTarget~Event} event\n * The event that caused this function to be called.\n *\/\n ;\n\n _proto.handleSubmenuKeyPress = function handleSubmenuKeyPress(event) {\n this.handleSubmenuKeyDown(event);\n }\n \/**\n * Handle a `keydown` event on a sub-menu. The listener for this is added in\n * the constructor.\n *\n * @param {EventTarget~Event} event\n * Key press event\n *\n * @listens keydown\n *\/\n ;\n\n _proto.handleSubmenuKeyDown = function handleSubmenuKeyDown(event) {\n \/\/ Escape or Tab unpress the 'button'\n if (keycode.isEventKey(event, 'Esc') || keycode.isEventKey(event, 'Tab')) {\n if (this.buttonPressed_) {\n this.unpressButton();\n } \/\/ Don't preventDefault for Tab key - we still want to lose focus\n\n\n if (!keycode.isEventKey(event, 'Tab')) {\n event.preventDefault(); \/\/ Set focus back to the menu button's button\n\n this.menuButton_.focus();\n }\n }\n }\n \/**\n * Put the current `MenuButton` into a pressed state.\n *\/\n ;\n\n _proto.pressButton = function pressButton() {\n if (this.enabled_) {\n this.buttonPressed_ = true;\n this.menu.show();\n this.menu.lockShowing();\n this.menuButton_.el_.setAttribute('aria-expanded', 'true'); \/\/ set the focus into the submenu, except on iOS where it is resulting in\n \/\/ undesired scrolling behavior when the player is in an iframe\n\n if (IS_IOS && isInFrame()) {\n \/\/ Return early so that the menu isn't focused\n return;\n }\n\n this.menu.focus();\n }\n }\n \/**\n * Take the current `MenuButton` out of a pressed state.\n *\/\n ;\n\n _proto.unpressButton = function unpressButton() {\n if (this.enabled_) {\n this.buttonPressed_ = false;\n this.menu.unlockShowing();\n this.menu.hide();\n this.menuButton_.el_.setAttribute('aria-expanded', 'false');\n }\n }\n \/**\n * Disable the `MenuButton`. Don't allow it to be clicked.\n *\/\n ;\n\n _proto.disable = function disable() {\n this.unpressButton();\n this.enabled_ = false;\n this.addClass('vjs-disabled');\n this.menuButton_.disable();\n }\n \/**\n * Enable the `MenuButton`. Allow it to be clicked.\n *\/\n ;\n\n _proto.enable = function enable() {\n this.enabled_ = true;\n this.removeClass('vjs-disabled');\n this.menuButton_.enable();\n };\n\n return MenuButton;\n }(Component);\n\n Component.registerComponent('MenuButton', MenuButton);\n\n \/**\n * The base class for buttons that toggle specific track types (e.g. subtitles).\n *\n * @extends MenuButton\n *\/\n\n var TrackButton = \/*#__PURE__*\/function (_MenuButton) {\n inheritsLoose(TrackButton, _MenuButton);\n\n \/**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key\/value store of player options.\n *\/\n function TrackButton(player, options) {\n var _this;\n\n var tracks = options.tracks;\n _this = _MenuButton.call(this, player, options) || this;\n\n if (_this.items.length <= 1) {\n _this.hide();\n }\n\n if (!tracks) {\n return assertThisInitialized(_this);\n }\n\n var updateHandler = bind(assertThisInitialized(_this), _this.update);\n tracks.addEventListener('removetrack', updateHandler);\n tracks.addEventListener('addtrack', updateHandler);\n\n _this.player_.on('ready', updateHandler);\n\n _this.player_.on('dispose', function () {\n tracks.removeEventListener('removetrack', updateHandler);\n tracks.removeEventListener('addtrack', updateHandler);\n });\n\n return _this;\n }\n\n return TrackButton;\n }(MenuButton);\n\n Component.registerComponent('TrackButton', TrackButton);\n\n \/**\n * @file menu-keys.js\n *\/\n\n \/**\n * All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)\n * Note that 'Enter' and 'Space' are not included here (otherwise they would\n * prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)\n * @typedef MenuKeys\n * @array\n *\/\n var MenuKeys = ['Tab', 'Esc', 'Up', 'Down', 'Right', 'Left'];\n\n \/**\n * The component for a menu item. ``\n *\n * @extends ClickableComponent\n *\/\n\n var MenuItem = \/*#__PURE__*\/function (_ClickableComponent) {\n inheritsLoose(MenuItem, _ClickableComponent);\n\n \/**\n * Creates an instance of the this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options={}]\n * The key\/value store of player options.\n *\n *\/\n function MenuItem(player, options) {\n var _this;\n\n _this = _ClickableComponent.call(this, player, options) || this;\n _this.selectable = options.selectable;\n _this.isSelected_ = options.selected || false;\n _this.multiSelectable = options.multiSelectable;\n\n _this.selected(_this.isSelected_);\n\n if (_this.selectable) {\n if (_this.multiSelectable) {\n _this.el_.setAttribute('role', 'menuitemcheckbox');\n } else {\n _this.el_.setAttribute('role', 'menuitemradio');\n }\n } else {\n _this.el_.setAttribute('role', 'menuitem');\n }\n\n return _this;\n }\n \/**\n * Create the `MenuItem's DOM element\n *\n * @param {string} [type=li]\n * Element's node type, not actually used, always set to `li`.\n *\n * @param {Object} [props={}]\n * An object of properties that should be set on the element\n *\n * @param {Object} [attrs={}]\n * An object of attributes that should be set on the element\n *\n * @return {Element}\n * The element that gets created.\n *\/\n\n\n var _proto = MenuItem.prototype;\n\n _proto.createEl = function createEl(type, props, attrs) {\n \/\/ The control is textual, not just an icon\n this.nonIconControl = true;\n return _ClickableComponent.prototype.createEl.call(this, 'li', assign({\n className: 'vjs-menu-item',\n innerHTML: \"