client/src/assets/player/shared/settings/settings-menu-button.ts

   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'
   7
   8 const Button = videojs.getComponent('Button')
   9 const Menu = videojs.getComponent('Menu')
  10 const Component = videojs.getComponent('Component')
  11
  12 export interface SettingsButtonOptions extends videojs.ComponentOptions {
  13   entries: any[]
  14   setup?: {
  15     maxHeightOffset: number
  16   }
  17 }
  18
  19 class SettingsButton extends Button {
  20   dialog: SettingsDialog
  21   dialogEl: HTMLElement
  22   menu: videojs.Menu
  23   panel: SettingsPanel
  24   panelChild: SettingsPanelChild
  25
  26   addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
  27   disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
  28   documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
  29   userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
  30
  31   private settingsButtonOptions: SettingsButtonOptions
  32
  33   constructor (player: videojs.Player, options?: SettingsButtonOptions) {
  34     super(player, options)
  35
  36     this.settingsButtonOptions = options
  37
  38     this.controlText('Settings')
  39
  40     this.dialog = this.player().addChild('settingsDialog')
  41     this.dialogEl = this.dialog.el() as HTMLElement
  42     this.menu = null
  43     this.panel = this.dialog.addChild('settingsPanel')
  44     this.panelChild = this.panel.addChild('settingsPanelChild')
  45
  46     this.addClass('vjs-settings')
  47     this.el().setAttribute('aria-label', 'Settings Button')
  48
  49     // Event handlers
  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)
  54
  55     this.buildMenu()
  56     this.bindEvents()
  57
  58     // Prepare the dialog
  59     this.player().one('play', () => this.hideDialog())
  60   }
  61
  62   onDocumentClick (event: MouseEvent) {
  63     const element = event.target as HTMLElement
  64
  65     if (element?.classList?.contains('vjs-settings') || element?.parentElement?.classList?.contains('vjs-settings')) {
  66       return
  67     }
  68
  69     if (!this.dialog.hasClass('vjs-hidden')) {
  70       this.hideDialog()
  71     }
  72   }
  73
  74   onDisposeSettingsItem (event: any, name: string) {
  75     if (name === undefined) {
  76       const children = this.menu.children()
  77
  78       while (children.length > 0) {
  79         children[0].dispose()
  80         this.menu.removeChild(children[0])
  81       }
  82
  83       this.addClass('vjs-hidden')
  84     } else {
  85       const item = this.menu.getChild(name)
  86
  87       if (item) {
  88         item.dispose()
  89         this.menu.removeChild(item)
  90       }
  91     }
  92
  93     this.hideDialog()
  94
  95     if (this.settingsButtonOptions.entries.length === 0) {
  96       this.addClass('vjs-hidden')
  97     }
  98   }
  99
 100   dispose () {
 101     document.removeEventListener('click', this.documentClickHandler)
 102
 103     if (this.isInIframe()) {
 104       window.removeEventListener('blur', this.documentClickHandler)
 105     }
 106   }
 107
 108   onAddSettingsItem (event: any, data: any) {
 109     const [ entry, options ] = data
 110
 111     this.addMenuItem(entry, options)
 112     this.removeClass('vjs-hidden')
 113   }
 114
 115   onUserInactive () {
 116     if (!this.dialog.hasClass('vjs-hidden')) {
 117       this.hideDialog()
 118     }
 119   }
 120
 121   bindEvents () {
 122     document.addEventListener('click', this.documentClickHandler)
 123     if (this.isInIframe()) {
 124       window.addEventListener('blur', this.documentClickHandler)
 125     }
 126
 127     this.player().on('addsettingsitem', this.addSettingsItemHandler)
 128     this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
 129     this.player().on('userinactive', this.userInactiveHandler)
 130   }
 131
 132   buildCSSClass () {
 133     return `vjs-icon-settings ${super.buildCSSClass()}`
 134   }
 135
 136   handleClick () {
 137     if (this.dialog.hasClass('vjs-hidden')) {
 138       this.showDialog()
 139     } else {
 140       this.hideDialog()
 141     }
 142   }
 143
 144   showDialog () {
 145     this.player().peertube().onMenuOpened();
 146
 147     (this.menu.el() as HTMLElement).style.opacity = '1'
 148
 149     this.dialog.show()
 150     this.el().setAttribute('aria-expanded', 'true')
 151
 152     this.setDialogSize(this.getComponentSize(this.menu))
 153
 154     const firstChild = this.menu.children()[0]
 155     if (firstChild) firstChild.focus()
 156   }
 157
 158   hideDialog () {
 159     this.player_.peertube().onMenuClosed()
 160
 161     this.dialog.hide()
 162     this.el().setAttribute('aria-expanded', 'false')
 163
 164     this.setDialogSize(this.getComponentSize(this.menu));
 165     (this.menu.el() as HTMLElement).style.opacity = '1'
 166     this.resetChildren()
 167   }
 168
 169   getComponentSize (element: videojs.Component | HTMLElement) {
 170     let width: number = null
 171     let height: number = null
 172
 173     // Could be component or just DOM element
 174     if (element instanceof Component) {
 175       const el = element.el() as HTMLElement
 176
 177       width = el.offsetWidth
 178       height = el.offsetHeight
 179     } else {
 180       width = element.offsetWidth
 181       height = element.offsetHeight
 182     }
 183
 184     return [ width, height ]
 185   }
 186
 187   setDialogSize ([ width, height ]: number[]) {
 188     if (typeof height !== 'number') {
 189       return
 190     }
 191
 192     const offset = this.settingsButtonOptions.setup.maxHeightOffset
 193     const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset
 194
 195     const panelEl = this.panel.el() as HTMLElement
 196
 197     if (height > maxHeight) {
 198       height = maxHeight
 199       width += 17
 200       panelEl.style.maxHeight = `${height}px`
 201     } else if (panelEl.style.maxHeight !== '') {
 202       panelEl.style.maxHeight = ''
 203     }
 204
 205     this.dialogEl.style.width = `${width}px`
 206     this.dialogEl.style.height = `${height}px`
 207   }
 208
 209   buildMenu () {
 210     this.menu = new Menu(this.player())
 211     this.menu.addClass('vjs-main-menu')
 212     const entries = this.settingsButtonOptions.entries
 213
 214     if (entries.length === 0) {
 215       this.addClass('vjs-hidden')
 216       this.panelChild.addChild(this.menu)
 217       return
 218     }
 219
 220     for (const entry of entries) {
 221       this.addMenuItem(entry, this.settingsButtonOptions)
 222     }
 223
 224     this.panelChild.addChild(this.menu)
 225   }
 226
 227   addMenuItem (entry: any, options: any) {
 228     const openSubMenu = function (this: any) {
 229       if (videojs.dom.hasClass(this.el_, 'open')) {
 230         videojs.dom.removeClass(this.el_, 'open')
 231       } else {
 232         videojs.dom.addClass(this.el_, 'open')
 233       }
 234     }
 235
 236     options.name = toTitleCase(entry)
 237
 238     const newOptions = Object.assign({}, options, { entry, menuButton: this })
 239     const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
 240
 241     this.menu.addChild(settingsMenuItem)
 242
 243     // Hide children to avoid sub menus stacking on top of each other
 244     // or having multiple menus open
 245     settingsMenuItem.on('click', videojs.bind(this, this.hideChildren))
 246
 247     // Whether to add or remove selected class on the settings sub menu element
 248     settingsMenuItem.on('click', openSubMenu)
 249   }
 250
 251   resetChildren () {
 252     for (const menuChild of this.menu.children()) {
 253       (menuChild as SettingsMenuItem).reset()
 254     }
 255   }
 256
 257   /**
 258    * Hide all the sub menus
 259    */
 260   hideChildren () {
 261     for (const menuChild of this.menu.children()) {
 262       (menuChild as SettingsMenuItem).hideSubMenu()
 263     }
 264   }
 265
 266   isInIframe () {
 267     return window.self !== window.top
 268   }
 269
 270 }
 271
 272 Component.registerComponent('SettingsButton', SettingsButton)
 273
 274 export { SettingsButton }