1 // Author: Yanko Shterev
2 // Thanks https://github.com/yshterev/videojs-settings-menu
4 import * as videojs from 'video.js'
5 import { SettingsMenuItem } from './settings-menu-item'
6 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
7 import { toTitleCase } from './utils'
9 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
10 const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
11 const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
13 class SettingsButton extends Button {
14 constructor (player: videojs.Player, options) {
15 super(player, options)
17 this.playerComponent = player
18 this.dialog = this.playerComponent.addChild('settingsDialog')
19 this.dialogEl = this.dialog.el_
21 this.panel = this.dialog.addChild('settingsPanel')
22 this.panelChild = this.panel.addChild('settingsPanelChild')
24 this.addClass('vjs-settings')
25 this.el_.setAttribute('aria-label', 'Settings Button')
28 this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
29 this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
30 this.playerClickHandler = this.onPlayerClick.bind(this)
31 this.userInactiveHandler = this.onUserInactive.bind(this)
37 this.player().one('play', () => this.hideDialog())
40 onPlayerClick (event: MouseEvent) {
41 const element = event.target as HTMLElement
42 if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) {
46 if (!this.dialog.hasClass('vjs-hidden')) {
51 onDisposeSettingsItem (event, name: string) {
52 if (name === undefined) {
53 let children = this.menu.children()
55 while (children.length > 0) {
57 this.menu.removeChild(children[0])
60 this.addClass('vjs-hidden')
62 let item = this.menu.getChild(name)
66 this.menu.removeChild(item)
72 if (this.options_.entries.length === 0) {
73 this.addClass('vjs-hidden')
77 onAddSettingsItem (event, data) {
78 const [ entry, options ] = data
80 this.addMenuItem(entry, options)
81 this.removeClass('vjs-hidden')
85 if (!this.dialog.hasClass('vjs-hidden')) {
91 this.playerComponent.on('click', this.playerClickHandler)
92 this.playerComponent.on('addsettingsitem', this.addSettingsItemHandler)
93 this.playerComponent.on('disposesettingsitem', this.disposeSettingsItemHandler)
94 this.playerComponent.on('userinactive', this.userInactiveHandler)
98 return `vjs-icon-settings ${super.buildCSSClass()}`
102 if (this.dialog.hasClass('vjs-hidden')) {
110 this.menu.el_.style.opacity = '1'
113 this.setDialogSize(this.getComponentSize(this.menu))
118 this.setDialogSize(this.getComponentSize(this.menu))
119 this.menu.el_.style.opacity = '1'
123 getComponentSize (element) {
124 let width: number = null
125 let height: number = null
127 // Could be component or just DOM element
128 if (element instanceof Component) {
129 width = element.el_.offsetWidth
130 height = element.el_.offsetHeight
132 // keep width/height as properties for direct use
133 element.width = width
134 element.height = height
136 width = element.offsetWidth
137 height = element.offsetHeight
140 return [ width, height ]
143 setDialogSize ([ width, height ]: number[]) {
144 if (typeof height !== 'number') {
148 let offset = this.options_.setup.maxHeightOffset
149 let maxHeight = this.playerComponent.el_.offsetHeight - offset
151 if (height > maxHeight) {
154 this.panel.el_.style.maxHeight = `${height}px`
155 } else if (this.panel.el_.style.maxHeight !== '') {
156 this.panel.el_.style.maxHeight = ''
159 this.dialogEl.style.width = `${width}px`
160 this.dialogEl.style.height = `${height}px`
164 this.menu = new Menu(this.player())
165 this.menu.addClass('vjs-main-menu')
166 let entries = this.options_.entries
168 if (entries.length === 0) {
169 this.addClass('vjs-hidden')
170 this.panelChild.addChild(this.menu)
174 for (let entry of entries) {
175 this.addMenuItem(entry, this.options_)
178 this.panelChild.addChild(this.menu)
181 addMenuItem (entry, options) {
182 const openSubMenu = function () {
183 if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
184 videojsUntyped.dom.removeClass(this.el_, 'open')
186 videojsUntyped.dom.addClass(this.el_, 'open')
190 options.name = toTitleCase(entry)
191 let settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
193 this.menu.addChild(settingsMenuItem)
195 // Hide children to avoid sub menus stacking on top of each other
196 // or having multiple menus open
197 settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
199 // Whether to add or remove selected class on the settings sub menu element
200 settingsMenuItem.on('click', openSubMenu)
204 for (let menuChild of this.menu.children()) {
210 * Hide all the sub menus
213 for (let menuChild of this.menu.children()) {
214 menuChild.hideSubMenu()
220 class SettingsPanel extends Component {
221 constructor (player: videojs.Player, options) {
222 super(player, options)
226 return super.createEl('div', {
227 className: 'vjs-settings-panel',
234 class SettingsPanelChild extends Component {
235 constructor (player: videojs.Player, options) {
236 super(player, options)
240 return super.createEl('div', {
241 className: 'vjs-settings-panel-child',
248 class SettingsDialog extends Component {
249 constructor (player: videojs.Player, options) {
250 super(player, options)
255 * Create the component's DOM element
261 const uniqueId = this.id_
262 const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
263 const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
265 return super.createEl('div', {
266 className: 'vjs-settings-dialog vjs-modal-overlay',
271 'aria-labelledby': dialogLabelId,
272 'aria-describedby': dialogDescriptionId
278 SettingsButton.prototype.controlText_ = 'Settings Button'
280 Component.registerComponent('SettingsButton', SettingsButton)
281 Component.registerComponent('SettingsDialog', SettingsDialog)
282 Component.registerComponent('SettingsPanel', SettingsPanel)
283 Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
285 export { SettingsButton, SettingsDialog, SettingsPanel, SettingsPanelChild }