Class: shaka.ui.Controls

Constructor

(export) new Controls(playernon-null, videoContainernon-null, videonon-null, config)

A container for custom video controls.
Parameters:
Name Type Description
player shaka.Player
videoContainer HTMLElement
video HTMLMediaElement
config shaka.extern.UIConfiguration
Implements:
Extends:
Source:

Extends

Members

(private, static, non-null) controlPanelElements_ :Array.<string>

Type:
  • Array.<string>
Source:

(private, static, non-null) elementNamesToFactories_ :Map.<string, !shaka.extern.IUIElement.Factory>

Type:
Source:

(private, non-null) bufferingSpinner_ :HTMLElement

Type:
  • HTMLElement
Source:

(private) castAllowed_ :boolean

Type:
  • boolean
Source:

(private, non-null) castProxy_ :shaka.cast.CastProxy

Type:
Source:

config_

shaka.extern.UIConfiguration
Source:

(private, non-null) controlsButtonPanel_ :HTMLElement

Type:
  • HTMLElement
Source:

(private, non-null) controlsContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

dispatchTarget :EventTarget

The target of all dispatched events. Defaults to |this|.
Type:
  • EventTarget
Inherited From:
Source:

(private, non-null) elements_ :Array.<!shaka.extern.IUIElement>

Type:
Source:

(private) enabled_ :boolean

Type:
  • boolean
Source:

(private) eventManager_ :shaka.util.EventManager

Type:
Source:

(private) hideSettingsMenusTimer_ :shaka.util.Timer

This timer will be used to hide all settings menus. When the timer ticks it will force all controls to invisible. Rather than calling the callback directly, |Controls| will always call it through the timer to avoid conflicts.
Type:
Source:

(private) isSeeking_ :boolean

Type:
  • boolean
Source:

(private, nullable) lastTouchEventTime_ :number

Type:
  • number
Source:

(private, non-null) listeners_ :shaka.util.MultiMap.<shaka.util.FakeEventTarget.ListenerType>

Type:
Inherited From:
Source:

(private) localization_ :shaka.ui.Localization

Type:
Source:

(private, non-null) localVideo_ :HTMLMediaElement

Type:
Source:

(private) mouseStillTimer_ :shaka.util.Timer

This timer is used to detect when the user has stopped moving the mouse and we should fade out the ui.
Type:
Source:

(private) overrideCssShowControls_ :boolean

Type:
  • boolean
Source:

(private, non-null) playButton_ :HTMLElement

Type:
  • HTMLElement
Source:

(private, non-null) playButtonContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

(private, non-null) player_ :shaka.Player

Type:
Source:

(private, non-null) pressedKeys_ :Set.<number>

The pressed keys set is used to record which keys are currently pressed down, so we can know what keys are pressed at the same time. Used by the focusInsideOverflowMenu_() function.
Type:
  • Set.<number>
Source:

(private) seekBar_ :HTMLInputElement

Type:
  • HTMLInputElement
Source:

(private) seekBarContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

(private) seekTimer_ :shaka.util.Timer

This timer is used to introduce a delay between the user scrubbing across the seek bar and the seek being sent to the player.
Type:
Source:

(private, non-null) settingsMenus_ :Array.<!Element>

Type:
  • Array.<!Element>
Source:

(private) timeAndSeekRangeTimer_ :shaka.util.Timer

This timer is used to regularly update the time and seek range elements so that we are communicating the current state as accurately as possibly. Unlike the other timers, this timer does not "own" the callback because this timer is acting like a heartbeat.
Type:
Source:

(private, non-null) video_ :HTMLMediaElement

Type:
Source:

(private, non-null) videoContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

Methods

(private, static) createLocalization_() → (non-null) {shaka.ui.Localization}

Create a localization instance already pre-loaded with all the locales that we support.
Source:
Returns:
Type
shaka.ui.Localization

(export, static) registerElement(name, factorynon-null)

Parameters:
Name Type Description
name string
factory shaka.extern.IUIElement.Factory
Source:

(export, static) setDisplay(element, display)

Depending on the value of display, sets/removes css class of element to either display it or hide.
Parameters:
Name Type Description
element Element
display boolean
Source:

(private) addBufferingSpinner_()

Source:

(private) addControlsButtonPanel_()

Source:

(private) addControlsContainer_()

Source:

(export) addEventListener(type, listener, optionsopt)

Add an event listener to this object.
Parameters:
Name Type Attributes Description
type string The event type to listen for.
listener shaka.util.FakeEventTarget.ListenerType The callback or listener object to invoke.
options AddEventListenerOptions | boolean <optional>
 Ignored.
Inherited From:
Source:

(private) addEventListeners_()

Source:

(private) addPlayButton_()

Source:

(private) addSeekBar_()

Source:

(export) allowCast(allow)

This allows the application to inhibit casting.
Parameters:
Name Type Description
allow boolean
Source:

(export) anySettingsMenusAreOpen() → {boolean}

Source:
Returns:
Type
boolean

(private) createDOM_()

Source:

(export) destroy() → (non-null) {Promise}

Request that this object be destroyed, releasing all resources and shutting down all operations. Returns a Promise which is resolved when destruction is complete. This Promise should never be rejected.
Implements:
Source:
Returns:
Type
Promise

(export) dispatchEvent(eventnon-null) → {boolean}

Dispatch an event from this object.
Parameters:
Name Type Description
event Event The event to be dispatched from this object.
Inherited From:
Source:
Returns:
True if the default action was prevented.
Type
boolean

(export) getCastProxy() → (non-null) {shaka.cast.CastProxy}

Source:
Returns:
Type
shaka.cast.CastProxy

(export) getConfig() → (non-null) {shaka.extern.UIConfiguration}

Source:
Returns:
Type
shaka.extern.UIConfiguration

(export) getControlsContainer() → (non-null) {HTMLElement}

Source:
Returns:
Type
HTMLElement

(export) getDisplayTime() → {number}

Source:
Returns:
Type
number

(export) getLocalization() → {shaka.ui.Localization}

Source:
Returns:
Type
shaka.ui.Localization

(export) getLocalVideo() → (non-null) {HTMLMediaElement}

Source:
Returns:
Type
HTMLMediaElement

(export) getPlayer() → (non-null) {shaka.Player}

Source:
Returns:
Type
shaka.Player

(export) getVideo() → (non-null) {HTMLMediaElement}

Source:
Returns:
Type
HTMLMediaElement

(export) getVideoContainer() → (non-null) {HTMLElement}

Source:
Returns:
Type
HTMLElement

(export) hideSettingsMenus()

Source:

(private) initOptionalElementsToNull_()

Source:

(export) isCastAllowed() → {boolean}

Source:
Returns:
Type
boolean

(private) isOpaque_() → {boolean}

Source:
Returns:
Type
boolean

(export) isSeeking() → {boolean}

Source:
Returns:
Type
boolean

(private) keepFocusInMenu_(eventnon-null)

When the user is using keyboard to navigate inside the overflow settings menu (pressing Tab key to go forward, or pressing Shift + Tab keys to go backward), make sure it's focused only on the elements of the overflow panel. This is called by onKeyDown_() function, when there's a settings overflow menu open, and the Tab key / Shift+Tab keys are pressed.
Parameters:
Name Type Description
event Event
Source:

(export) loadComplete()

Used by the application to notify the controls that a load operation is complete. This allows the controls to recalculate play/paused state, which is important for platforms like Android where autoplay is disabled.
Source:

(private) onBufferingStateChange_(eventnon-null)

Parameters:
Name Type Description
event Event
Source:

(private) onCastStatusChange_(event)

Parameters:
Name Type Description
event Event
Source:

(private) onContainerClick_(eventnon-null)

Parameters:
Name Type Description
event Event
Source:

(private) onContainerTouch_(eventnon-null)

Parameters:
Name Type Description
event Event
Source:

(private) onKeyDown_(eventnon-null)

Add behaviors for keyboard navigation. 1. Add blue outline for focused elements. 2. Allow exiting overflow settings menus by pressing Esc key. 3. When navigating on overflow settings menu by pressing Tab key or Shift+Tab keys keep the focus inside overflow menu.
Parameters:
Name Type Description
event Event
Source:

(private) onKeyUp_(eventnon-null)

Support controls with keyboard inputs.
Parameters:
Name Type Description
event Event
Source:

(private) onMouseDown_()

Removes class for keyboard navigation if mouse navigation is active.
Source:

(private) onMouseLeave_()

Source:

(private) onMouseMove_(eventnon-null)

Hiding the cursor when the mouse stops moving seems to be the only decent UX in fullscreen mode. Since we can't use pure CSS for that, we use events both in and out of fullscreen mode. Showing the control bar when a key is pressed, and hiding it after some time.
Parameters:
Name Type Description
event Event
Source:

(private) onMouseStill_()

This callback is for when we are pretty sure that the mouse has stopped moving (aka the mouse is still). This method should only be called via |mouseStillTimer_|. If this behaviour needs to be invoked directly, use |mouseStillTimer_.tick()|.
Source:

(private) onPlayPauseClick_()

Source:

(private) onPlayStateChange_()

Source:

(private) onSeekEnd_()

Source:

(private) onSeekInput_()

Source:

(private) onSeekStart_()

Source:

(export) overrideCssShowControls()

Display controls even if css says overwise. Normally, controls opacity is controled by CSS, but there are a few special cases where we want controls to be displayed no matter what. For example, if the focus is on one of the settings menus. This method is called when we want to signal an exception to normal CSS opacity rules and keep the controls visible.
Source:

(export) removeEventListener(type, listener, optionsopt)

Remove an event listener from this object.
Parameters:
Name Type Attributes Description
type string The event type for which you wish to remove a listener.
listener shaka.util.FakeEventTarget.ListenerType The callback or listener object to remove.
options EventListenerOptions | boolean <optional>
 Ignored.
Inherited From:
Source:

(private) seek_(currentTime, eventnon-null)

Update the video's current time based on the keyboard operations.
Parameters:
Name Type Description
currentTime number
event Event
Source:

(private) setControlsOpacity_(opacitynon-null)

Parameters:
Name Type Description
opacity shaka.ui.Enums.Opacity
Source:

(export) setEnabledNativeControls(enabled)

Enable or disable native browser controls. Enabling disables shaka controls.
Parameters:
Name Type Description
enabled boolean
Source:

(export) setEnabledShakaControls(enabled)

Enable or disable the custom controls. Enabling disables native browser controls.
Parameters:
Name Type Description
enabled boolean
Source:

(export) setLastTouchEventTime(timenullable)

Parameters:
Name Type Attributes Description
time number <nullable>
Source:

(private) updateLocalizedStrings_()

Source:

(private) updateTimeAndSeekRange_()

Called when the seek range or current time need to be updated.
Source: