1 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
2 import { toTitleCase } from '../utils'
3 import videojs, { VideoJsPlayer } from 'video.js'
4 import { SettingsButton } from './settings-menu-button'
5 import { SettingsDialog } from './settings-dialog'
6 import { SettingsPanel } from './settings-panel'
7 import { SettingsPanelChild } from './settings-panel-child'
9 const MenuItem = videojs.getComponent('MenuItem')
10 const component = videojs.getComponent('Component')
12 export interface SettingsMenuItemOptions extends videojs.MenuItemOptions {
14 menuButton: SettingsButton
17 class SettingsMenuItem extends MenuItem {
18 settingsButton: SettingsButton
19 dialog: SettingsDialog
20 mainMenu: videojs.Menu
22 panelChild: SettingsPanelChild
23 panelChildEl: HTMLElement
26 subMenu: SettingsButton
28 submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
29 transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
31 settingsSubMenuTitleEl_: HTMLElement
32 settingsSubMenuValueEl_: HTMLElement
33 settingsSubMenuEl_: HTMLElement
35 constructor (player: VideoJsPlayer, options?: SettingsMenuItemOptions) {
36 super(player, options)
38 this.settingsButton = options.menuButton
39 this.dialog = this.settingsButton.dialog
40 this.mainMenu = this.settingsButton.menu
41 this.panel = this.dialog.getChild('settingsPanel')
42 this.panelChild = this.panel.getChild('settingsPanelChild')
43 this.panelChildEl = this.panelChild.el() as HTMLElement
47 // keep state of what menu type is loading next
48 this.menuToLoad = 'mainmenu'
50 const subMenuName = toTitleCase(options.entry)
51 const SubMenuComponent = videojs.getComponent(subMenuName)
53 if (!SubMenuComponent) {
54 throw new Error(`Component ${subMenuName} does not exist`)
57 const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
59 this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
60 const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ]
61 this.settingsSubMenuEl_.className += ' ' + subMenuClass
66 // Voodoo magic for IOS
68 // Player was destroyed
69 if (!this.player_) return
73 // Update on rate change
74 player.on('ratechange', this.submenuClickHandler)
76 if (subMenuName === 'CaptionsButton') {
77 // Hack to regenerate captions on HTTP fallback
78 player.on('captionsChanged', () => {
80 this.settingsSubMenuEl_.innerHTML = ''
81 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
83 this.bindClickEvents()
94 this.submenuClickHandler = this.onSubmenuClick.bind(this)
95 this.transitionEndHandler = this.onTransitionEnd.bind(this)
98 onSubmenuClick (event: any) {
101 if (event.type === 'tap') {
102 target = event.target
104 target = event.currentTarget
107 if (target && target.classList.contains('vjs-back-button')) {
112 // To update the sub menu value on click, setTimeout is needed because
113 // updating the value is not instant
114 setTimeout(() => this.update(event), 0)
116 // Seems like videojs adds a vjs-hidden class on the caption menu after a click
118 this.subMenu.menu.removeClass('vjs-hidden')
122 * Create the component's DOM element
128 const el = videojs.dom.createEl('li', {
129 className: 'vjs-menu-item'
132 this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
133 className: 'vjs-settings-sub-menu-title'
136 el.appendChild(this.settingsSubMenuTitleEl_)
138 this.settingsSubMenuValueEl_ = videojs.dom.createEl('div', {
139 className: 'vjs-settings-sub-menu-value'
142 el.appendChild(this.settingsSubMenuValueEl_)
144 this.settingsSubMenuEl_ = videojs.dom.createEl('div', {
145 className: 'vjs-settings-sub-menu'
148 return el as HTMLLIElement
152 * Handle click on menu item
154 * @method handleClick
156 handleClick (event: videojs.EventTarget.Event) {
157 this.menuToLoad = 'submenu'
158 // Remove open class to ensure only the open submenu gets this class
159 videojs.dom.removeClass(this.el(), 'open')
161 super.handleClick(event);
163 (this.mainMenu.el() as HTMLElement).style.opacity = '0'
164 // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
165 if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
166 videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
168 // animation not played without timeout
170 this.settingsSubMenuEl_.style.opacity = '1'
171 this.settingsSubMenuEl_.style.marginRight = '0px'
174 this.settingsButton.setDialogSize(this.size)
176 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
183 * @method createBackButton
185 createBackButton () {
186 const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
188 button.addClass('vjs-back-button');
189 (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
193 * Add/remove prefixed event listener for CSS Transition
195 * @method PrefixedEvent
197 PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
198 const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
200 for (let p = 0; p < prefix.length; p++) {
202 type = type.toLowerCase()
205 if (action === 'addEvent') {
206 element.addEventListener(prefix[ p ] + type, callback, false)
207 } else if (action === 'removeEvent') {
208 element.removeEventListener(prefix[ p ] + type, callback, false)
213 onTransitionEnd (event: any) {
214 if (event.propertyName !== 'margin-right') {
218 if (this.menuToLoad === 'mainmenu') {
220 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
222 // reset opacity to 0
223 this.settingsSubMenuEl_.style.opacity = '0'
228 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
229 this.settingsSubMenuEl_.style.opacity = '0'
234 const mainMenuEl = this.mainMenu.el() as HTMLElement
235 this.menuToLoad = 'mainmenu'
237 mainMenuEl.style.opacity = '0'
239 // back button will always take you to main menu, so set dialog sizes
240 const mainMenuAny = this.mainMenu as any
241 this.settingsButton.setDialogSize([ mainMenuAny.width, mainMenuAny.height ])
243 // animation not triggered without timeout (some async stuff ?!?)
245 // animate margin and opacity before hiding the submenu
246 // this triggers CSS Transition event
248 mainMenuEl.style.opacity = '1'
253 this.subMenu.on('updateLabel', () => {
256 this.subMenu.on('menuChanged', () => {
257 this.bindClickEvents()
262 this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText())
263 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
264 this.panelChildEl.appendChild(this.settingsSubMenuEl_)
267 this.createBackButton()
269 this.bindClickEvents()
271 // prefixed event listeners for CSS TransitionEnd
273 this.settingsSubMenuEl_,
275 this.transitionEndHandler,
280 update (event?: any) {
281 let target: HTMLElement = null
282 const subMenu = this.subMenu.name()
284 if (event && event.type === 'tap') {
285 target = event.target
287 target = event.currentTarget
290 // Playback rate menu button doesn't get a vjs-selected class
291 // or sets options_['selected'] on the selected playback rate.
292 // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
293 if (subMenu === 'PlaybackRateMenuButton') {
294 const html = (this.subMenu as any).labelEl_.innerHTML
295 setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250)
297 // Loop trough the submenu items to find the selected child
298 for (const subMenuItem of this.subMenu.menu.children_) {
299 if (!(subMenuItem instanceof component)) {
303 if (subMenuItem.hasClass('vjs-selected')) {
304 const subMenuItemUntyped = subMenuItem as any
306 // Prefer to use the function
307 if (typeof subMenuItemUntyped.getLabel === 'function') {
308 this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.getLabel()
312 this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.options_.label
317 if (target && !target.classList.contains('vjs-back-button')) {
318 this.settingsButton.hideDialog()
323 for (const item of this.subMenu.menu.children()) {
324 if (!(item instanceof component)) {
327 item.on([ 'tap', 'click' ], this.submenuClickHandler)
331 // save size of submenus on first init
332 // if number of submenu items change dynamically more logic will be needed
334 this.dialog.removeClass('vjs-hidden')
335 videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
336 this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
338 this.dialog.addClass('vjs-hidden')
339 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
343 if (!this.size) return
345 const [ width ] = this.size
347 this.settingsSubMenuEl_.style.marginRight = `-${width}px`
354 // after removing settings item this.el_ === null
359 if (videojs.dom.hasClass(this.el(), 'open')) {
360 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
361 videojs.dom.removeClass(this.el(), 'open')
367 (SettingsMenuItem as any).prototype.contentElType = 'button'
368 videojs.registerComponent('SettingsMenuItem', SettingsMenuItem)
370 export { SettingsMenuItem }