MenuButton

Hide the menu if the number of items is less than or equal to this threshold. This defaults to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list it here because every time we runcreateMenuwe need to reset the value.

Find a single DOM element matching aselector.This can be within theComponentscontentEl()or another custom context.

Finds all DOM element matching aselector.This can be within theComponentscontentEl()or another custom context.

Add a childComponentinside the currentComponent.

Add a CSS class name to theComponents element.

Remove the focus from the actual button, not this element

Builds the default DOMclassName.

Allow sub components to stack CSS class names for the wrapper element

Cancels a queued callback passed toComponent#requestAnimationFrame(rAF).

If you queue an rAF callback viaComponent#requestAnimationFrame,use this function instead ofwindow.cancelAnimationFrame.If you don't, your dispose listener will not get cleaned up untilComponent#dispose!

Cancels a current named animation frame if it exists.

Get an array of all child components

Clears an interval that gets created viawindow.setIntervalorComponent#setInterval.If you set an interval viaComponent#setIntervaluse this function instead ofwindow.clearInterval.If you don't your dispose listener will not get cleaned up untilComponent#dispose!

Clears a timeout that gets created viawindow.setTimeoutorComponent#setTimeout.If you set a timeout viaComponent#setTimeoutuse this function instead ofwindow.clearTimout.If you don't your dispose listener will not get cleaned up untilComponent#dispose!

Return theComponents DOM element. This is where children get inserted. This will usually be the the same as the element returned inComponent#el.

Get or set the localized control text that will be used for accessibility.

NOTE: This will come from the internalmenuButton_element.

Create theMenuButtonss DOM element.

Create the list of menu items. Specific to each subclass.

Create the menu and add all items to it.

Get the computed width or the height of the component's element.

Useswindow.getComputedStyle.

Get an object that contains computed width and height values of the component's element.

Useswindow.getComputedStyle.

Get the computed height of the component's element.

Useswindow.getComputedStyle.

Get the computed width of the component's element.

Useswindow.getComputedStyle.

Get or set width or height of theComponentelement. This is the shared code for theComponent#widthandComponent#height.

Things to know:

• If the width or height in an number this will return the number postfixed with 'px'.
• If the width/height is a percent this will return the percent postfixed with '%'
• Hidden elements have a width of 0 withwindow.getComputedStyle.This function defaults to theComponentsstyle.widthand falls back towindow.getComputedStyle.Seethisfor more information
• If you want the computed style of the component, useComponent#currentWidthand {Component#currentHeight

Set both the width and height of theComponentelement at the same time.

Disable theMenuButton.Don't allow it to be clicked.

Dispose of themenu-buttonand all child components.

Get theComponents DOM element

Emit a 'tap' events when touch event support gets detected. This gets used to support toggling the controls through a tap on the video. They get enabled because every sub-component would have extra overhead otherwise.

Enable theMenuButton.Allow it to be clicked.

This function reports user activity whenever touch events happen. This can get turned off by any sub-components that wants touch events to act another way.

Report user touch activity when touch events occur. User activity gets used to determine when controls should show/hide. It is simple when it comes to mouse events, because any mouse event should show the controls. So we capture mouse events that bubble up to the player and report activity when that happens. With touch events it isn't as easy astouchstartandtouchendtoggle player controls. So touch events can't help us at the player level either.

User activity gets checked asynchronously. So what could happen is a tap event on the video turns the controls off. Then thetouchendevent bubbles up to the player. Which, if it reported user activity, would turn the controls right back on. We also don't want to completely block touch events from bubbling up. Furthermore atouchmoveevent and anything other than a tap, should not turn controls back on.

Set the focus to the actual button, not to this element

Get the value of an attribute on theComponents element.

Returns the childComponentwith the givenname.

Returns the childComponentwith the givenid.

Returns the descendantComponentfollowing the givent descendantnames.For instance ['foo', 'bar', 'baz'] would try to get 'foo' on the current component, 'bar' on the 'foo' component and 'baz' on the 'bar' component and return undefined if any of those don't exist.

Determine whether or not this component is currently visible/enabled/etc...

Determine whether or not this component can be considered as focusable component.

Retrieves the position and size information of the component's element.

Handle a click on aMenuButton.SeeClickableComponent#handleClickfor instances where this is called.

Handle tab, escape, down arrow, and up arrow keys forMenuButton.SeeClickableComponent#handleKeyDownfor instances where this is called.

Many components used to have ahandleKeyPressmethod, which was poorly named because it listened to akeydownevent. This method name now delegates tohandleKeyDown.This means anyone callinghandleKeyPresswill not see their method calls stop working.

Handles language change for the player in components. Should be overridden by sub-components.

Handle akeyupevent on aMenuButton.The listener for this is added in the constructor.

HandlemouseleaveforMenuButton.

Handle akeydownevent on a sub-menu. The listener for this is added in the constructor.

This method name now delegates tohandleSubmenuKeyDown.This means anyone callinghandleSubmenuKeyPresswill not see their method calls stop working.

Check if a component's element has a CSS class name.

Get or set the height of the component based upon the CSS styles. SeeComponent#dimensionfor more detailed information.

Hide theComponents element if it is currently showing by adding the 'vjs-hidden` class name to it.

Get thisComponents ID

Add and initialize default childComponents based upon options.

Determine whether or not this component has been disposed.

Localize a string given the string in english.

If tokens are provided, it'll try and run a simple token replacement on the provided string. The tokens it looks for look like{1}with the index being 1-indexed into the tokens array.

If adefaultValueis provided, it'll use that overstring,if a value isn't found in provided language files. This is useful if you want to have a descriptive key for token replacement but have a succinct localized string and not requireen.jsonto be included.

Currently, it is used for the progress bar timing.

{
"progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
}

It is then used like so:

this.localize('progress bar timing: currentTime={1} duration{2}',
[this.player_.currentTime(), this.player_.duration()],
'{1} of {2}');

Which outputs something like:01:23 of 24:56.

Get theComponents name. The name gets used to reference theComponentand is set during registration.

Deep merge of options objects with new options.

Note: When bothobjandoptionscontain properties whose values are objects. The two properties get merged usingmodule:obj.merge

Return thePlayerthat theComponenthas attached to.

Put the currentMenuButtoninto a pressed state.

Bind a listener to the component's ready state. Different from event listeners in that if the ready event has already happened it will trigger the function immediately.

Remove an attribute from theComponents element.

Remove a childComponentfrom thisComponents list of children. Also removes the childComponents element from thisComponents element.

Remove a CSS class name from theComponents element.

Queues up a callback to be passed to requestAnimationFrame (rAF), but with a few extra bonuses:

• Supports browsers that do not support rAF by falling back toComponent#setTimeout.

• The callback is turned into aComponent~GenericCallback(i.e. bound to the component).

• Automatic cancellation of the rAF callback is handled if the component is disposed before it is called.

Request an animation frame, but only one named animation frame will be queued. Another will never be added until the previous one finishes.

Set the value of an attribute on theComponent's element

Overwrites thesetIconmethod fromComponent.In this case, we want the icon to be appended to the menuButton.

Creates a function that gets run everyxmilliseconds. This function is a wrapper aroundwindow.setInterval.There are a few reasons to use this one instead though.

1. It gets cleared viaComponent#clearIntervalwhenComponent#disposegets called.
2. The function callback will be aComponent~GenericCallback

Creates a function that runs after anxmillisecond timeout. This function is a wrapper aroundwindow.setTimeout.There are a few reasons to use this one instead though:

1. It gets cleared viaComponent#clearTimeoutwhenComponent#disposegets called.
2. The function callback will gets turned into aComponent~GenericCallback

Note: You can't usewindow.clearTimeouton the id returned by this function. This will cause its dispose listener not to get cleaned up! Please useComponent#clearTimeoutorComponent#disposeinstead.

Show theComponents element if it is hidden by removing the 'vjs-hidden' class name from it.

Add or remove a CSS class name from the component's element.

• classToTogglegets added whenComponent#hasClasswould return false.
• classToTogglegets removed whenComponent#hasClasswould return true.

Trigger all the ready listeners for thisComponent.

Take the currentMenuButtonout of a pressed state.

Update the menu based on the current state of its items.

Get or set the width of the component based upon the CSS styles. SeeComponent#dimensionfor more detailed information.

Triggered when a component is resized.

Triggered when aComponentis disposed.

Triggered when aComponentis ready.

Triggered when aComponentis tapped.