client/src/assets/player/videojs-components/settings-menu-button.ts

   1 // Author: Yanko Shterev
   2 // Thanks https://github.com/yshterev/videojs-settings-menu
   3
   4 // FIXME: something weird with our path definition in tsconfig and typings
   5 // @ts-ignore
   6 import * as videojs from 'video.js'
   7
   8 import { SettingsMenuItem } from './settings-menu-item'
   9 import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
  10 import { toTitleCase } from '../utils'
  11
  12 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
  13 const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
  14 const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
  15
  16 class SettingsButton extends Button {
  17   playerComponent = videojs.Player
  18   dialog: any
  19   dialogEl: any
  20   menu: any
  21   panel: any
  22   panelChild: any
  23
  24   addSettingsItemHandler: Function
  25   disposeSettingsItemHandler: Function
  26   playerClickHandler: Function
  27   userInactiveHandler: Function
  28
  29   constructor (player: videojs.Player, options: any) {
  30     super(player, options)
  31
  32     this.playerComponent = player
  33     this.dialog = this.playerComponent.addChild('settingsDialog')
  34     this.dialogEl = this.dialog.el_
  35     this.menu = null
  36     this.panel = this.dialog.addChild('settingsPanel')
  37     this.panelChild = this.panel.addChild('settingsPanelChild')
  38
  39     this.addClass('vjs-settings')
  40     this.el_.setAttribute('aria-label', 'Settings Button')
  41
  42     // Event handlers
  43     this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
  44     this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
  45     this.playerClickHandler = this.onPlayerClick.bind(this)
  46     this.userInactiveHandler = this.onUserInactive.bind(this)
  47
  48     this.buildMenu()
  49     this.bindEvents()
  50
  51     // Prepare the dialog
  52     this.player().one('play', () => this.hideDialog())
  53   }
  54
  55   onPlayerClick (event: MouseEvent) {
  56     const element = event.target as HTMLElement
  57     if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) {
  58       return
  59     }
  60
  61     if (!this.dialog.hasClass('vjs-hidden')) {
  62       this.hideDialog()
  63     }
  64   }
  65
  66   onDisposeSettingsItem (event: any, name: string) {
  67     if (name === undefined) {
  68       const children = this.menu.children()
  69
  70       while (children.length > 0) {
  71         children[0].dispose()
  72         this.menu.removeChild(children[0])
  73       }
  74
  75       this.addClass('vjs-hidden')
  76     } else {
  77       const item = this.menu.getChild(name)
  78
  79       if (item) {
  80         item.dispose()
  81         this.menu.removeChild(item)
  82       }
  83     }
  84
  85     this.hideDialog()
  86
  87     if (this.options_.entries.length === 0) {
  88       this.addClass('vjs-hidden')
  89     }
  90   }
  91
  92   onAddSettingsItem (event: any, data: any) {
  93     const [ entry, options ] = data
  94
  95     this.addMenuItem(entry, options)
  96     this.removeClass('vjs-hidden')
  97   }
  98
  99   onUserInactive () {
 100     if (!this.dialog.hasClass('vjs-hidden')) {
 101       this.hideDialog()
 102     }
 103   }
 104
 105   bindEvents () {
 106     this.playerComponent.on('click', this.playerClickHandler)
 107     this.playerComponent.on('addsettingsitem', this.addSettingsItemHandler)
 108     this.playerComponent.on('disposesettingsitem', this.disposeSettingsItemHandler)
 109     this.playerComponent.on('userinactive', this.userInactiveHandler)
 110   }
 111
 112   buildCSSClass () {
 113     return `vjs-icon-settings ${super.buildCSSClass()}`
 114   }
 115
 116   handleClick () {
 117     if (this.dialog.hasClass('vjs-hidden')) {
 118       this.showDialog()
 119     } else {
 120       this.hideDialog()
 121     }
 122   }
 123
 124   showDialog () {
 125     this.player_.peertube().onMenuOpen()
 126
 127     this.menu.el_.style.opacity = '1'
 128     this.dialog.show()
 129
 130     this.setDialogSize(this.getComponentSize(this.menu))
 131   }
 132
 133   hideDialog () {
 134     this.player_.peertube().onMenuClosed()
 135
 136     this.dialog.hide()
 137     this.setDialogSize(this.getComponentSize(this.menu))
 138     this.menu.el_.style.opacity = '1'
 139     this.resetChildren()
 140   }
 141
 142   getComponentSize (element: any) {
 143     let width: number = null
 144     let height: number = null
 145
 146     // Could be component or just DOM element
 147     if (element instanceof Component) {
 148       width = element.el_.offsetWidth
 149       height = element.el_.offsetHeight
 150
 151       // keep width/height as properties for direct use
 152       element.width = width
 153       element.height = height
 154     } else {
 155       width = element.offsetWidth
 156       height = element.offsetHeight
 157     }
 158
 159     return [ width, height ]
 160   }
 161
 162   setDialogSize ([ width, height ]: number[]) {
 163     if (typeof height !== 'number') {
 164       return
 165     }
 166
 167     const offset = this.options_.setup.maxHeightOffset
 168     const maxHeight = this.playerComponent.el_.offsetHeight - offset
 169
 170     if (height > maxHeight) {
 171       height = maxHeight
 172       width += 17
 173       this.panel.el_.style.maxHeight = `${height}px`
 174     } else if (this.panel.el_.style.maxHeight !== '') {
 175       this.panel.el_.style.maxHeight = ''
 176     }
 177
 178     this.dialogEl.style.width = `${width}px`
 179     this.dialogEl.style.height = `${height}px`
 180   }
 181
 182   buildMenu () {
 183     this.menu = new Menu(this.player())
 184     this.menu.addClass('vjs-main-menu')
 185     const entries = this.options_.entries
 186
 187     if (entries.length === 0) {
 188       this.addClass('vjs-hidden')
 189       this.panelChild.addChild(this.menu)
 190       return
 191     }
 192
 193     for (const entry of entries) {
 194       this.addMenuItem(entry, this.options_)
 195     }
 196
 197     this.panelChild.addChild(this.menu)
 198   }
 199
 200   addMenuItem (entry: any, options: any) {
 201     const openSubMenu = function (this: any) {
 202       if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
 203         videojsUntyped.dom.removeClass(this.el_, 'open')
 204       } else {
 205         videojsUntyped.dom.addClass(this.el_, 'open')
 206       }
 207     }
 208
 209     options.name = toTitleCase(entry)
 210     const settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
 211
 212     this.menu.addChild(settingsMenuItem)
 213
 214     // Hide children to avoid sub menus stacking on top of each other
 215     // or having multiple menus open
 216     settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
 217
 218     // Whether to add or remove selected class on the settings sub menu element
 219     settingsMenuItem.on('click', openSubMenu)
 220   }
 221
 222   resetChildren () {
 223     for (const menuChild of this.menu.children()) {
 224       menuChild.reset()
 225     }
 226   }
 227
 228   /**
 229    * Hide all the sub menus
 230    */
 231   hideChildren () {
 232     for (const menuChild of this.menu.children()) {
 233       menuChild.hideSubMenu()
 234     }
 235   }
 236
 237 }
 238
 239 class SettingsPanel extends Component {
 240   constructor (player: videojs.Player, options: any) {
 241     super(player, options)
 242   }
 243
 244   createEl () {
 245     return super.createEl('div', {
 246       className: 'vjs-settings-panel',
 247       innerHTML: '',
 248       tabIndex: -1
 249     })
 250   }
 251 }
 252
 253 class SettingsPanelChild extends Component {
 254   constructor (player: videojs.Player, options: any) {
 255     super(player, options)
 256   }
 257
 258   createEl () {
 259     return super.createEl('div', {
 260       className: 'vjs-settings-panel-child',
 261       innerHTML: '',
 262       tabIndex: -1
 263     })
 264   }
 265 }
 266
 267 class SettingsDialog extends Component {
 268   constructor (player: videojs.Player, options: any) {
 269     super(player, options)
 270     this.hide()
 271   }
 272
 273   /**
 274    * Create the component's DOM element
 275    *
 276    * @return {Element}
 277    * @method createEl
 278    */
 279   createEl () {
 280     const uniqueId = this.id_
 281     const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
 282     const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
 283
 284     return super.createEl('div', {
 285       className: 'vjs-settings-dialog vjs-modal-overlay',
 286       innerHTML: '',
 287       tabIndex: -1
 288     }, {
 289       'role': 'dialog',
 290       'aria-labelledby': dialogLabelId,
 291       'aria-describedby': dialogDescriptionId
 292     })
 293   }
 294
 295 }
 296
 297 SettingsButton.prototype.controlText_ = 'Settings'
 298
 299 Component.registerComponent('SettingsButton', SettingsButton)
 300 Component.registerComponent('SettingsDialog', SettingsDialog)
 301 Component.registerComponent('SettingsPanel', SettingsPanel)
 302 Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
 303
 304 export { SettingsButton, SettingsDialog, SettingsPanel, SettingsPanelChild }