1 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
2 import { SettingsMenuItem } from './settings-menu-item'
3 import { toTitleCase } from '../utils'
4 import videojs, { VideoJsPlayer } from 'video.js'
6 import { SettingsDialog } from './settings-dialog'
7 import { SettingsPanel } from './settings-panel'
8 import { SettingsPanelChild } from './settings-panel-child'
10 const Button = videojs.getComponent('Button')
11 const Menu = videojs.getComponent('Menu')
12 const Component = videojs.getComponent('Component')
14 export interface SettingsButtonOptions extends videojs.ComponentOptions {
17 maxHeightOffset: number
21 class SettingsButton extends Button {
22 dialog: SettingsDialog
26 panelChild: SettingsPanelChild
28 addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
29 disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
30 playerClickHandler: typeof SettingsButton.prototype.onPlayerClick
31 userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
33 private settingsButtonOptions: SettingsButtonOptions
35 constructor (player: VideoJsPlayer, options?: SettingsButtonOptions) {
36 super(player, options)
38 this.settingsButtonOptions = options
40 this.controlText('Settings')
42 this.dialog = this.player().addChild('settingsDialog')
43 this.dialogEl = this.dialog.el() as HTMLElement
45 this.panel = this.dialog.addChild('settingsPanel')
46 this.panelChild = this.panel.addChild('settingsPanelChild')
48 this.addClass('vjs-settings')
49 this.el().setAttribute('aria-label', 'Settings Button')
52 this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
53 this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
54 this.playerClickHandler = this.onPlayerClick.bind(this)
55 this.userInactiveHandler = this.onUserInactive.bind(this)
61 this.player().one('play', () => this.hideDialog())
64 onPlayerClick (event: MouseEvent) {
65 const element = event.target as HTMLElement
66 if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) {
70 if (!this.dialog.hasClass('vjs-hidden')) {
75 onDisposeSettingsItem (event: any, name: string) {
76 if (name === undefined) {
77 const children = this.menu.children()
79 while (children.length > 0) {
81 this.menu.removeChild(children[0])
84 this.addClass('vjs-hidden')
86 const item = this.menu.getChild(name)
90 this.menu.removeChild(item)
96 if (this.settingsButtonOptions.entries.length === 0) {
97 this.addClass('vjs-hidden')
101 onAddSettingsItem (event: any, data: any) {
102 const [ entry, options ] = data
104 this.addMenuItem(entry, options)
105 this.removeClass('vjs-hidden')
109 if (!this.dialog.hasClass('vjs-hidden')) {
115 this.player().on('click', this.playerClickHandler)
116 this.player().on('addsettingsitem', this.addSettingsItemHandler)
117 this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
118 this.player().on('userinactive', this.userInactiveHandler)
122 return `vjs-icon-settings ${super.buildCSSClass()}`
126 if (this.dialog.hasClass('vjs-hidden')) {
134 this.player().peertube().onMenuOpen();
136 (this.menu.el() as HTMLElement).style.opacity = '1'
139 this.setDialogSize(this.getComponentSize(this.menu))
143 this.player_.peertube().onMenuClosed()
146 this.setDialogSize(this.getComponentSize(this.menu));
147 (this.menu.el() as HTMLElement).style.opacity = '1'
151 getComponentSize (element: videojs.Component | HTMLElement) {
152 let width: number = null
153 let height: number = null
155 // Could be component or just DOM element
156 if (element instanceof Component) {
157 const el = element.el() as HTMLElement
159 width = el.offsetWidth
160 height = el.offsetHeight;
162 (element as any).width = width;
163 (element as any).height = height
165 width = element.offsetWidth
166 height = element.offsetHeight
169 return [ width, height ]
172 setDialogSize ([ width, height ]: number[]) {
173 if (typeof height !== 'number') {
177 const offset = this.settingsButtonOptions.setup.maxHeightOffset
178 const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset // FIXME: typings
180 const panelEl = this.panel.el() as HTMLElement
182 if (height > maxHeight) {
185 panelEl.style.maxHeight = `${height}px`
186 } else if (panelEl.style.maxHeight !== '') {
187 panelEl.style.maxHeight = ''
190 this.dialogEl.style.width = `${width}px`
191 this.dialogEl.style.height = `${height}px`
195 this.menu = new Menu(this.player())
196 this.menu.addClass('vjs-main-menu')
197 const entries = this.settingsButtonOptions.entries
199 if (entries.length === 0) {
200 this.addClass('vjs-hidden')
201 this.panelChild.addChild(this.menu)
205 for (const entry of entries) {
206 this.addMenuItem(entry, this.settingsButtonOptions)
209 this.panelChild.addChild(this.menu)
212 addMenuItem (entry: any, options: any) {
213 const openSubMenu = function (this: any) {
214 if (videojs.dom.hasClass(this.el_, 'open')) {
215 videojs.dom.removeClass(this.el_, 'open')
217 videojs.dom.addClass(this.el_, 'open')
221 options.name = toTitleCase(entry)
223 const newOptions = Object.assign({}, options, { entry, menuButton: this })
224 const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
226 this.menu.addChild(settingsMenuItem)
228 // Hide children to avoid sub menus stacking on top of each other
229 // or having multiple menus open
230 settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
232 // Whether to add or remove selected class on the settings sub menu element
233 settingsMenuItem.on('click', openSubMenu)
237 for (const menuChild of this.menu.children()) {
238 (menuChild as SettingsMenuItem).reset()
243 * Hide all the sub menus
246 for (const menuChild of this.menu.children()) {
247 (menuChild as SettingsMenuItem).hideSubMenu()
253 Component.registerComponent('SettingsButton', SettingsButton)
255 export { SettingsButton }