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

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