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
67 if (element?.classList?.contains('vjs-settings') || element?.parentElement?.classList?.contains('vjs-settings')) {
71 if (!this.dialog.hasClass('vjs-hidden')) {
76 onDisposeSettingsItem (event: any, name: string) {
77 if (name === undefined) {
78 const children = this.menu.children()
80 while (children.length > 0) {
82 this.menu.removeChild(children[0])
85 this.addClass('vjs-hidden')
87 const item = this.menu.getChild(name)
91 this.menu.removeChild(item)
97 if (this.settingsButtonOptions.entries.length === 0) {
98 this.addClass('vjs-hidden')
103 document.removeEventListener('click', this.documentClickHandler)
105 if (this.isInIframe()) {
106 window.removeEventListener('blur', this.documentClickHandler)
110 onAddSettingsItem (event: any, data: any) {
111 const [ entry, options ] = data
113 this.addMenuItem(entry, options)
114 this.removeClass('vjs-hidden')
118 if (!this.dialog.hasClass('vjs-hidden')) {
124 document.addEventListener('click', this.documentClickHandler)
125 if (this.isInIframe()) {
126 window.addEventListener('blur', this.documentClickHandler)
129 this.player().on('addsettingsitem', this.addSettingsItemHandler)
130 this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
131 this.player().on('userinactive', this.userInactiveHandler)
135 return `vjs-icon-settings ${super.buildCSSClass()}`
139 if (this.dialog.hasClass('vjs-hidden')) {
147 this.player().peertube().onMenuOpened();
149 (this.menu.el() as HTMLElement).style.opacity = '1'
152 this.el().setAttribute('aria-expanded', 'true')
154 this.setDialogSize(this.getComponentSize(this.menu))
156 const firstChild = this.menu.children()[0]
157 if (firstChild) firstChild.focus()
161 this.player_.peertube().onMenuClosed()
164 this.el().setAttribute('aria-expanded', 'false')
166 this.setDialogSize(this.getComponentSize(this.menu));
167 (this.menu.el() as HTMLElement).style.opacity = '1'
171 getComponentSize (element: videojs.Component | HTMLElement) {
172 let width: number = null
173 let height: number = null
175 // Could be component or just DOM element
176 if (element instanceof Component) {
177 const el = element.el() as HTMLElement
179 width = el.offsetWidth
180 height = el.offsetHeight;
182 (element as any).width = width;
183 (element as any).height = height
185 width = element.offsetWidth
186 height = element.offsetHeight
189 return [ width, height ]
192 setDialogSize ([ width, height ]: number[]) {
193 if (typeof height !== 'number') {
197 const offset = this.settingsButtonOptions.setup.maxHeightOffset
198 const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset
200 const panelEl = this.panel.el() as HTMLElement
202 if (height > maxHeight) {
205 panelEl.style.maxHeight = `${height}px`
206 } else if (panelEl.style.maxHeight !== '') {
207 panelEl.style.maxHeight = ''
210 this.dialogEl.style.width = `${width}px`
211 this.dialogEl.style.height = `${height}px`
215 this.menu = new Menu(this.player())
216 this.menu.addClass('vjs-main-menu')
217 const entries = this.settingsButtonOptions.entries
219 if (entries.length === 0) {
220 this.addClass('vjs-hidden')
221 this.panelChild.addChild(this.menu)
225 for (const entry of entries) {
226 this.addMenuItem(entry, this.settingsButtonOptions)
229 this.panelChild.addChild(this.menu)
232 addMenuItem (entry: any, options: any) {
233 const openSubMenu = function (this: any) {
234 if (videojs.dom.hasClass(this.el_, 'open')) {
235 videojs.dom.removeClass(this.el_, 'open')
237 videojs.dom.addClass(this.el_, 'open')
241 options.name = toTitleCase(entry)
243 const newOptions = Object.assign({}, options, { entry, menuButton: this })
244 const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
246 this.menu.addChild(settingsMenuItem)
248 // Hide children to avoid sub menus stacking on top of each other
249 // or having multiple menus open
250 settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
252 // Whether to add or remove selected class on the settings sub menu element
253 settingsMenuItem.on('click', openSubMenu)
257 for (const menuChild of this.menu.children()) {
258 (menuChild as SettingsMenuItem).reset()
263 * Hide all the sub menus
266 for (const menuChild of this.menu.children()) {
267 (menuChild as SettingsMenuItem).hideSubMenu()
272 return window.self !== window.top
277 Component.registerComponent('SettingsButton', SettingsButton)
279 export { SettingsButton }