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 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 documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
31 userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
33 private settingsButtonOptions: SettingsButtonOptions
35 constructor (player: videojs.Player, 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.documentClickHandler = this.onDocumentClick.bind(this)
55 this.userInactiveHandler = this.onUserInactive.bind(this)
61 this.player().one('play', () => this.hideDialog())
64 onDocumentClick (event: MouseEvent) {
65 const element = event.target as HTMLElement
68 element && element.classList &&
69 (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings'))
74 if (!this.dialog.hasClass('vjs-hidden')) {
79 onDisposeSettingsItem (event: any, name: string) {
80 if (name === undefined) {
81 const children = this.menu.children()
83 while (children.length > 0) {
85 this.menu.removeChild(children[0])
88 this.addClass('vjs-hidden')
90 const item = this.menu.getChild(name)
94 this.menu.removeChild(item)
100 if (this.settingsButtonOptions.entries.length === 0) {
101 this.addClass('vjs-hidden')
106 document.removeEventListener('click', this.documentClickHandler)
108 if (this.isInIframe()) {
109 window.removeEventListener('blur', this.documentClickHandler)
113 onAddSettingsItem (event: any, data: any) {
114 const [ entry, options ] = data
116 this.addMenuItem(entry, options)
117 this.removeClass('vjs-hidden')
121 if (!this.dialog.hasClass('vjs-hidden')) {
127 document.addEventListener('click', this.documentClickHandler)
128 if (this.isInIframe()) {
129 window.addEventListener('blur', this.documentClickHandler)
132 this.player().on('addsettingsitem', this.addSettingsItemHandler)
133 this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
134 this.player().on('userinactive', this.userInactiveHandler)
138 return `vjs-icon-settings ${super.buildCSSClass()}`
142 if (this.dialog.hasClass('vjs-hidden')) {
150 this.player().peertube().onMenuOpen();
152 (this.menu.el() as HTMLElement).style.opacity = '1'
155 this.setDialogSize(this.getComponentSize(this.menu))
159 this.player_.peertube().onMenuClosed()
162 this.setDialogSize(this.getComponentSize(this.menu));
163 (this.menu.el() as HTMLElement).style.opacity = '1'
167 getComponentSize (element: videojs.Component | HTMLElement) {
168 let width: number = null
169 let height: number = null
171 // Could be component or just DOM element
172 if (element instanceof Component) {
173 const el = element.el() as HTMLElement
175 width = el.offsetWidth
176 height = el.offsetHeight;
178 (element as any).width = width;
179 (element as any).height = height
181 width = element.offsetWidth
182 height = element.offsetHeight
185 return [ width, height ]
188 setDialogSize ([ width, height ]: number[]) {
189 if (typeof height !== 'number') {
193 const offset = this.settingsButtonOptions.setup.maxHeightOffset
194 const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset // FIXME: typings
196 const panelEl = this.panel.el() as HTMLElement
198 if (height > maxHeight) {
201 panelEl.style.maxHeight = `${height}px`
202 } else if (panelEl.style.maxHeight !== '') {
203 panelEl.style.maxHeight = ''
206 this.dialogEl.style.width = `${width}px`
207 this.dialogEl.style.height = `${height}px`
211 this.menu = new Menu(this.player())
212 this.menu.addClass('vjs-main-menu')
213 const entries = this.settingsButtonOptions.entries
215 if (entries.length === 0) {
216 this.addClass('vjs-hidden')
217 this.panelChild.addChild(this.menu)
221 for (const entry of entries) {
222 this.addMenuItem(entry, this.settingsButtonOptions)
225 this.panelChild.addChild(this.menu)
228 addMenuItem (entry: any, options: any) {
229 const openSubMenu = function (this: any) {
230 if (videojs.dom.hasClass(this.el_, 'open')) {
231 videojs.dom.removeClass(this.el_, 'open')
233 videojs.dom.addClass(this.el_, 'open')
237 options.name = toTitleCase(entry)
239 const newOptions = Object.assign({}, options, { entry, menuButton: this })
240 const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
242 this.menu.addChild(settingsMenuItem)
244 // Hide children to avoid sub menus stacking on top of each other
245 // or having multiple menus open
246 settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
248 // Whether to add or remove selected class on the settings sub menu element
249 settingsMenuItem.on('click', openSubMenu)
253 for (const menuChild of this.menu.children()) {
254 (menuChild as SettingsMenuItem).reset()
259 * Hide all the sub menus
262 for (const menuChild of this.menu.children()) {
263 (menuChild as SettingsMenuItem).hideSubMenu()
268 return window.self !== window.top
273 Component.registerComponent('SettingsButton', SettingsButton)
275 export { SettingsButton }