+import videojs from 'video.js'
// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
import { toTitleCase } from '../utils'
-import videojs, { VideoJsPlayer } from 'video.js'
-import { SettingsButton } from './settings-menu-button'
import { SettingsDialog } from './settings-dialog'
+import { SettingsButton } from './settings-menu-button'
import { SettingsPanel } from './settings-panel'
import { SettingsPanelChild } from './settings-panel-child'
settingsSubMenuValueEl_: HTMLElement
settingsSubMenuEl_: HTMLElement
- constructor (player: VideoJsPlayer, options?: SettingsMenuItemOptions) {
+ constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
super(player, options)
this.settingsButton = options.menuButton
const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
- this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
- const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ]
+ this.subMenu = new SubMenuComponent(this.player(), newOptions) as SettingsButton
+ const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
this.settingsSubMenuEl_.className += ' ' + subMenuClass
this.eventHandlers()
if (event.type === 'tap') {
target = event.target
} else {
- target = event.currentTarget
+ target = event.currentTarget || event.target
}
- if (target && target.classList.contains('vjs-back-button')) {
+ if (target?.classList.contains('vjs-back-button')) {
this.loadMainMenu()
return
}
/**
* Create the component's DOM element
*
- * @return {Element}
- * @method createEl
*/
createEl () {
const el = videojs.dom.createEl('li', {
- className: 'vjs-menu-item'
+ className: 'vjs-menu-item',
+ tabIndex: -1
})
this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
}, 0)
this.settingsButton.setDialogSize(this.size)
+
+ const firstChild = this.subMenu.menu.children()[0]
+ if (firstChild) firstChild.focus()
} else {
videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
}
const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
for (let p = 0; p < prefix.length; p++) {
- if (!prefix[ p ]) {
+ if (!prefix[p]) {
type = type.toLowerCase()
}
if (action === 'addEvent') {
- element.addEventListener(prefix[ p ] + type, callback, false)
+ element.addEventListener(prefix[p] + type, callback, false)
} else if (action === 'removeEvent') {
- element.removeEventListener(prefix[ p ] + type, callback, false)
+ element.removeEventListener(prefix[p] + type, callback, false)
}
}
}
// this triggers CSS Transition event
this.setMargin()
mainMenuEl.style.opacity = '1'
+
+ const firstChild = this.mainMenu.children()[0]
+ if (firstChild) firstChild.focus()
}, 0)
}
build () {
- this.subMenu.on('updateLabel', () => {
+ this.subMenu.on('labelUpdated', () => {
this.update()
})
this.subMenu.on('menuChanged', () => {
// Thus we get the submenu value based on the labelEl of playbackRateMenuButton
if (subMenu === 'PlaybackRateMenuButton') {
const html = (this.subMenu as any).labelEl_.innerHTML
- setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250)
+
+ setTimeout(() => {
+ this.settingsSubMenuValueEl_.innerHTML = html
+ }, 250)
} else {
// Loop trough the submenu items to find the selected child
for (const subMenuItem of this.subMenu.menu.children_) {
break
}
- this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.options_.label
+ this.settingsSubMenuValueEl_.innerHTML = this.player().localize(subMenuItemUntyped.options_.label)
}
}
}