1 import videojs from 'video.js'
2 import { toTitleCase } from '../common'
3 import { SettingsDialog } from './settings-dialog'
4 import { SettingsMenuItem } from './settings-menu-item'
5 import { SettingsPanel } from './settings-panel'
6 import { SettingsPanelChild } from './settings-panel-child'
8 const Button = videojs.getComponent('Button')
9 const Menu = videojs.getComponent('Menu')
10 const Component = videojs.getComponent('Component')
12 export interface SettingsButtonOptions extends videojs.ComponentOptions {
15 maxHeightOffset: number
19 class SettingsButton extends Button {
20 dialog: SettingsDialog
24 panelChild: SettingsPanelChild
26 addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
27 disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
28 documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
29 userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
31 private settingsButtonOptions: SettingsButtonOptions
33 constructor (player: videojs.Player, options?: SettingsButtonOptions) {
34 super(player, options)
36 this.settingsButtonOptions = options
38 this.controlText('Settings')
40 this.dialog = this.player().addChild('settingsDialog')
41 this.dialogEl = this.dialog.el() as HTMLElement
43 this.panel = this.dialog.addChild('settingsPanel')
44 this.panelChild = this.panel.addChild('settingsPanelChild')
46 this.addClass('vjs-settings')
47 this.el().setAttribute('aria-label', 'Settings Button')
50 this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
51 this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
52 this.documentClickHandler = this.onDocumentClick.bind(this)
53 this.userInactiveHandler = this.onUserInactive.bind(this)
59 this.player().one('play', () => this.hideDialog())
62 onDocumentClick (event: MouseEvent) {
63 const element = event.target as HTMLElement
65 if (element?.classList?.contains('vjs-settings') || element?.parentElement?.classList?.contains('vjs-settings')) {
69 if (!this.dialog.hasClass('vjs-hidden')) {
74 onDisposeSettingsItem (event: any, name: string) {
75 if (name === undefined) {
76 const children = this.menu.children()
78 while (children.length > 0) {
80 this.menu.removeChild(children[0])
83 this.addClass('vjs-hidden')
85 const item = this.menu.getChild(name)
89 this.menu.removeChild(item)
95 if (this.settingsButtonOptions.entries.length === 0) {
96 this.addClass('vjs-hidden')
101 document.removeEventListener('click', this.documentClickHandler)
103 if (this.isInIframe()) {
104 window.removeEventListener('blur', this.documentClickHandler)
108 onAddSettingsItem (event: any, data: any) {
109 const [ entry, options ] = data
111 this.addMenuItem(entry, options)
112 this.removeClass('vjs-hidden')
116 if (!this.dialog.hasClass('vjs-hidden')) {
122 document.addEventListener('click', this.documentClickHandler)
123 if (this.isInIframe()) {
124 window.addEventListener('blur', this.documentClickHandler)
127 this.player().on('addsettingsitem', this.addSettingsItemHandler)
128 this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
129 this.player().on('userinactive', this.userInactiveHandler)
133 return `vjs-icon-settings ${super.buildCSSClass()}`
137 if (this.dialog.hasClass('vjs-hidden')) {
145 this.player().peertube().onMenuOpened();
147 (this.menu.el() as HTMLElement).style.opacity = '1'
150 this.el().setAttribute('aria-expanded', 'true')
152 this.setDialogSize(this.getComponentSize(this.menu))
154 const firstChild = this.menu.children()[0]
155 if (firstChild) firstChild.focus()
159 this.player_.peertube().onMenuClosed()
162 this.el().setAttribute('aria-expanded', 'false')
164 this.setDialogSize(this.getComponentSize(this.menu));
165 (this.menu.el() as HTMLElement).style.opacity = '1'
169 getComponentSize (element: videojs.Component | HTMLElement) {
170 let width: number = null
171 let height: number = null
173 // Could be component or just DOM element
174 if (element instanceof Component) {
175 const el = element.el() as HTMLElement
177 width = el.offsetWidth
178 height = el.offsetHeight;
180 (element as any).width = width;
181 (element as any).height = height
183 width = element.offsetWidth
184 height = element.offsetHeight
187 return [ width, height ]
190 setDialogSize ([ width, height ]: number[]) {
191 if (typeof height !== 'number') {
195 const offset = this.settingsButtonOptions.setup.maxHeightOffset
196 const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset
198 const panelEl = this.panel.el() as HTMLElement
200 if (height > maxHeight) {
203 panelEl.style.maxHeight = `${height}px`
204 } else if (panelEl.style.maxHeight !== '') {
205 panelEl.style.maxHeight = ''
208 this.dialogEl.style.width = `${width}px`
209 this.dialogEl.style.height = `${height}px`
213 this.menu = new Menu(this.player())
214 this.menu.addClass('vjs-main-menu')
215 const entries = this.settingsButtonOptions.entries
217 if (entries.length === 0) {
218 this.addClass('vjs-hidden')
219 this.panelChild.addChild(this.menu)
223 for (const entry of entries) {
224 this.addMenuItem(entry, this.settingsButtonOptions)
227 this.panelChild.addChild(this.menu)
230 addMenuItem (entry: any, options: any) {
231 const openSubMenu = function (this: any) {
232 if (videojs.dom.hasClass(this.el_, 'open')) {
233 videojs.dom.removeClass(this.el_, 'open')
235 videojs.dom.addClass(this.el_, 'open')
239 options.name = toTitleCase(entry)
241 const newOptions = Object.assign({}, options, { entry, menuButton: this })
242 const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
244 this.menu.addChild(settingsMenuItem)
246 // Hide children to avoid sub menus stacking on top of each other
247 // or having multiple menus open
248 settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
250 // Whether to add or remove selected class on the settings sub menu element
251 settingsMenuItem.on('click', openSubMenu)
255 for (const menuChild of this.menu.children()) {
256 (menuChild as SettingsMenuItem).reset()
261 * Hide all the sub menus
264 for (const menuChild of this.menu.children()) {
265 (menuChild as SettingsMenuItem).hideSubMenu()
270 return window.self !== window.top
275 Component.registerComponent('SettingsButton', SettingsButton)
277 export { SettingsButton }