1 // Author: Yanko Shterev
2 // Thanks https://github.com/yshterev/videojs-settings-menu
4 // FIXME: something weird with our path definition in tsconfig and typings
6 import * as videojs from 'video.js'
8 import { SettingsMenuItem } from './settings-menu-item'
9 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
10 import { toTitleCase } from './utils'
12 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
13 const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
14 const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
16 class SettingsButton extends Button {
17 constructor (player: videojs.Player, options: any) {
18 super(player, options)
20 this.playerComponent = player
21 this.dialog = this.playerComponent.addChild('settingsDialog')
22 this.dialogEl = this.dialog.el_
24 this.panel = this.dialog.addChild('settingsPanel')
25 this.panelChild = this.panel.addChild('settingsPanelChild')
27 this.addClass('vjs-settings')
28 this.el_.setAttribute('aria-label', 'Settings Button')
31 this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
32 this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
33 this.playerClickHandler = this.onPlayerClick.bind(this)
34 this.userInactiveHandler = this.onUserInactive.bind(this)
40 this.player().one('play', () => this.hideDialog())
43 onPlayerClick (event: MouseEvent) {
44 const element = event.target as HTMLElement
45 if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) {
49 if (!this.dialog.hasClass('vjs-hidden')) {
54 onDisposeSettingsItem (event: any, name: string) {
55 if (name === undefined) {
56 let children = this.menu.children()
58 while (children.length > 0) {
60 this.menu.removeChild(children[0])
63 this.addClass('vjs-hidden')
65 let item = this.menu.getChild(name)
69 this.menu.removeChild(item)
75 if (this.options_.entries.length === 0) {
76 this.addClass('vjs-hidden')
80 onAddSettingsItem (event: any, data: any) {
81 const [ entry, options ] = data
83 this.addMenuItem(entry, options)
84 this.removeClass('vjs-hidden')
88 if (!this.dialog.hasClass('vjs-hidden')) {
94 this.playerComponent.on('click', this.playerClickHandler)
95 this.playerComponent.on('addsettingsitem', this.addSettingsItemHandler)
96 this.playerComponent.on('disposesettingsitem', this.disposeSettingsItemHandler)
97 this.playerComponent.on('userinactive', this.userInactiveHandler)
101 return `vjs-icon-settings ${super.buildCSSClass()}`
105 if (this.dialog.hasClass('vjs-hidden')) {
113 this.menu.el_.style.opacity = '1'
116 this.setDialogSize(this.getComponentSize(this.menu))
121 this.setDialogSize(this.getComponentSize(this.menu))
122 this.menu.el_.style.opacity = '1'
126 getComponentSize (element: any) {
127 let width: number = null
128 let height: number = null
130 // Could be component or just DOM element
131 if (element instanceof Component) {
132 width = element.el_.offsetWidth
133 height = element.el_.offsetHeight
135 // keep width/height as properties for direct use
136 element.width = width
137 element.height = height
139 width = element.offsetWidth
140 height = element.offsetHeight
143 return [ width, height ]
146 setDialogSize ([ width, height ]: number[]) {
147 if (typeof height !== 'number') {
151 let offset = this.options_.setup.maxHeightOffset
152 let maxHeight = this.playerComponent.el_.offsetHeight - offset
154 if (height > maxHeight) {
157 this.panel.el_.style.maxHeight = `${height}px`
158 } else if (this.panel.el_.style.maxHeight !== '') {
159 this.panel.el_.style.maxHeight = ''
162 this.dialogEl.style.width = `${width}px`
163 this.dialogEl.style.height = `${height}px`
167 this.menu = new Menu(this.player())
168 this.menu.addClass('vjs-main-menu')
169 let entries = this.options_.entries
171 if (entries.length === 0) {
172 this.addClass('vjs-hidden')
173 this.panelChild.addChild(this.menu)
177 for (let entry of entries) {
178 this.addMenuItem(entry, this.options_)
181 this.panelChild.addChild(this.menu)
184 addMenuItem (entry: any, options: any) {
185 const openSubMenu = function (this: any) {
186 if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
187 videojsUntyped.dom.removeClass(this.el_, 'open')
189 videojsUntyped.dom.addClass(this.el_, 'open')
193 options.name = toTitleCase(entry)
194 let settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
196 this.menu.addChild(settingsMenuItem)
198 // Hide children to avoid sub menus stacking on top of each other
199 // or having multiple menus open
200 settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
202 // Whether to add or remove selected class on the settings sub menu element
203 settingsMenuItem.on('click', openSubMenu)
207 for (let menuChild of this.menu.children()) {
213 * Hide all the sub menus
216 for (let menuChild of this.menu.children()) {
217 menuChild.hideSubMenu()
223 class SettingsPanel extends Component {
224 constructor (player: videojs.Player, options: any) {
225 super(player, options)
229 return super.createEl('div', {
230 className: 'vjs-settings-panel',
237 class SettingsPanelChild extends Component {
238 constructor (player: videojs.Player, options: any) {
239 super(player, options)
243 return super.createEl('div', {
244 className: 'vjs-settings-panel-child',
251 class SettingsDialog extends Component {
252 constructor (player: videojs.Player, options: any) {
253 super(player, options)
258 * Create the component's DOM element
264 const uniqueId = this.id_
265 const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
266 const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
268 return super.createEl('div', {
269 className: 'vjs-settings-dialog vjs-modal-overlay',
274 'aria-labelledby': dialogLabelId,
275 'aria-describedby': dialogDescriptionId
281 SettingsButton.prototype.controlText_ = 'Settings'
283 Component.registerComponent('SettingsButton', SettingsButton)
284 Component.registerComponent('SettingsDialog', SettingsDialog)
285 Component.registerComponent('SettingsPanel', SettingsPanel)
286 Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
288 export { SettingsButton, SettingsDialog, SettingsPanel, SettingsPanelChild }