1 import videojs from 'video.js'
2 import { toTitleCase } from '../common'
3 import { SettingsDialog } from './settings-dialog'
4 import { SettingsButton } from './settings-menu-button'
5 import { SettingsPanel } from './settings-panel'
6 import { SettingsPanelChild } from './settings-panel-child'
8 const MenuItem = videojs.getComponent('MenuItem')
9 const component = videojs.getComponent('Component')
11 export interface SettingsMenuItemOptions extends videojs.MenuItemOptions {
13 menuButton: SettingsButton
16 class SettingsMenuItem extends MenuItem {
17 settingsButton: SettingsButton
18 dialog: SettingsDialog
19 mainMenu: videojs.Menu
21 panelChild: SettingsPanelChild
22 panelChildEl: HTMLElement
25 subMenu: SettingsButton
27 submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
28 transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
30 settingsSubMenuTitleEl_: HTMLElement
31 settingsSubMenuValueEl_: HTMLElement
32 settingsSubMenuEl_: HTMLElement
34 constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
35 super(player, options)
37 this.settingsButton = options.menuButton
38 this.dialog = this.settingsButton.dialog
39 this.mainMenu = this.settingsButton.menu
40 this.panel = this.dialog.getChild('settingsPanel')
41 this.panelChild = this.panel.getChild('settingsPanelChild')
42 this.panelChildEl = this.panelChild.el() as HTMLElement
46 // keep state of what menu type is loading next
47 this.menuToLoad = 'mainmenu'
49 const subMenuName = toTitleCase(options.entry)
50 const SubMenuComponent = videojs.getComponent(subMenuName)
52 if (!SubMenuComponent) {
53 throw new Error(`Component ${subMenuName} does not exist`)
56 const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
58 this.subMenu = new SubMenuComponent(this.player(), newOptions) as SettingsButton
59 const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
60 this.settingsSubMenuEl_.className += ' ' + subMenuClass
65 // Voodoo magic for IOS
67 // Player was destroyed
68 if (!this.player_) return
72 // Update on rate change
73 player.on('ratechange', this.submenuClickHandler)
75 if (subMenuName === 'CaptionsButton') {
76 // Hack to regenerate captions on HTTP fallback
77 player.on('captionsChanged', () => {
79 this.settingsSubMenuEl_.innerHTML = ''
80 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
82 this.bindClickEvents()
93 this.submenuClickHandler = this.onSubmenuClick.bind(this)
94 this.transitionEndHandler = this.onTransitionEnd.bind(this)
97 onSubmenuClick (event: any) {
100 if (event.type === 'tap') {
101 target = event.target
103 target = event.currentTarget || event.target
106 if (target?.classList.contains('vjs-back-button')) {
111 // To update the sub menu value on click, setTimeout is needed because
112 // updating the value is not instant
113 setTimeout(() => this.update(event), 0)
115 // Seems like videojs adds a vjs-hidden class on the caption menu after a click
117 this.subMenu.menu.removeClass('vjs-hidden')
121 * Create the component's DOM element
125 const el = videojs.dom.createEl('li', {
126 className: 'vjs-menu-item',
130 this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
131 className: 'vjs-settings-sub-menu-title'
134 el.appendChild(this.settingsSubMenuTitleEl_)
136 this.settingsSubMenuValueEl_ = videojs.dom.createEl('div', {
137 className: 'vjs-settings-sub-menu-value'
140 el.appendChild(this.settingsSubMenuValueEl_)
142 this.settingsSubMenuEl_ = videojs.dom.createEl('div', {
143 className: 'vjs-settings-sub-menu'
146 return el as HTMLLIElement
150 * Handle click on menu item
152 * @method handleClick
154 handleClick (event: videojs.EventTarget.Event) {
155 this.menuToLoad = 'submenu'
156 // Remove open class to ensure only the open submenu gets this class
157 videojs.dom.removeClass(this.el(), 'open')
159 super.handleClick(event);
161 (this.mainMenu.el() as HTMLElement).style.opacity = '0'
162 // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
163 if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
164 videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
166 // animation not played without timeout
168 this.settingsSubMenuEl_.style.opacity = '1'
169 this.settingsSubMenuEl_.style.marginRight = '0px'
172 this.settingsButton.setDialogSize(this.size)
174 const firstChild = this.subMenu.menu.children()[0]
175 if (firstChild) firstChild.focus()
177 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
184 * @method createBackButton
186 createBackButton () {
187 const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
189 button.addClass('vjs-back-button');
190 (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
194 * Add/remove prefixed event listener for CSS Transition
196 * @method PrefixedEvent
198 PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
199 const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
201 for (let p = 0; p < prefix.length; p++) {
203 type = type.toLowerCase()
206 if (action === 'addEvent') {
207 element.addEventListener(prefix[p] + type, callback, false)
208 } else if (action === 'removeEvent') {
209 element.removeEventListener(prefix[p] + type, callback, false)
214 onTransitionEnd (event: any) {
215 if (event.propertyName !== 'margin-right') {
219 if (this.menuToLoad === 'mainmenu') {
221 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
223 // reset opacity to 0
224 this.settingsSubMenuEl_.style.opacity = '0'
229 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
230 this.settingsSubMenuEl_.style.opacity = '0'
235 const mainMenuEl = this.mainMenu.el() as HTMLElement
236 this.menuToLoad = 'mainmenu'
238 mainMenuEl.style.opacity = '0'
240 // back button will always take you to main menu, so set dialog sizes
241 const mainMenuAny = this.mainMenu
242 this.settingsButton.setDialogSize([ mainMenuAny.width() as number, mainMenuAny.height() as number ])
244 // animation not triggered without timeout (some async stuff ?!?)
246 // animate margin and opacity before hiding the submenu
247 // this triggers CSS Transition event
249 mainMenuEl.style.opacity = '1'
251 const firstChild = this.mainMenu.children()[0]
252 if (firstChild) firstChild.focus()
257 this.subMenu.on('labelUpdated', () => {
260 this.subMenu.on('menuChanged', () => {
261 this.bindClickEvents()
266 this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText())
267 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
268 this.panelChildEl.appendChild(this.settingsSubMenuEl_)
271 this.createBackButton()
273 this.bindClickEvents()
275 // prefixed event listeners for CSS TransitionEnd
277 this.settingsSubMenuEl_,
279 this.transitionEndHandler,
284 update (event?: any) {
285 let target: HTMLElement = null
286 const subMenu = this.subMenu.name()
288 if (event && event.type === 'tap') {
289 target = event.target
291 target = event.currentTarget
294 // Playback rate menu button doesn't get a vjs-selected class
295 // or sets options_['selected'] on the selected playback rate.
296 // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
297 if (subMenu === 'PlaybackRateMenuButton') {
298 const html = (this.subMenu as any).labelEl_.innerHTML
301 this.settingsSubMenuValueEl_.innerHTML = html
304 // Loop through the submenu items to find the selected child
305 for (const subMenuItem of this.subMenu.menu.children_) {
306 if (!(subMenuItem instanceof component)) {
310 if (subMenuItem.hasClass('vjs-selected')) {
311 const subMenuItemUntyped = subMenuItem as any
313 // Prefer to use the function
314 if (typeof subMenuItemUntyped.getLabel === 'function') {
315 this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.getLabel()
319 this.settingsSubMenuValueEl_.innerHTML = this.player().localize(subMenuItemUntyped.options_.label)
324 if (target && !target.classList.contains('vjs-back-button')) {
325 this.settingsButton.hideDialog()
330 for (const item of this.subMenu.menu.children()) {
331 if (!(item instanceof component)) {
334 item.on([ 'tap', 'click' ], this.submenuClickHandler)
338 // save size of submenus on first init
339 // if number of submenu items change dynamically more logic will be needed
341 this.dialog.removeClass('vjs-hidden')
342 videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
343 this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
345 this.dialog.addClass('vjs-hidden')
346 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
350 if (!this.size) return
352 const [ width ] = this.size
354 this.settingsSubMenuEl_.style.marginRight = `-${width}px`
361 // after removing settings item this.el_ === null
366 if (videojs.dom.hasClass(this.el(), 'open')) {
367 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
368 videojs.dom.removeClass(this.el(), 'open')
374 (SettingsMenuItem as any).prototype.contentElType = 'button'
375 videojs.registerComponent('SettingsMenuItem', SettingsMenuItem)
377 export { SettingsMenuItem }