client/src/assets/player/videojs-components/settings-menu-item.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 { toTitleCase } from '../utils'
   9 import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
  10
  11 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
  12 const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
  13
  14 class SettingsMenuItem extends MenuItem {
  15
  16   constructor (player: videojs.Player, options: any, entry: string, menuButton: VideoJSComponentInterface) {
  17     super(player, options)
  18
  19     this.settingsButton = menuButton
  20     this.dialog = this.settingsButton.dialog
  21     this.mainMenu = this.settingsButton.menu
  22     this.panel = this.dialog.getChild('settingsPanel')
  23     this.panelChild = this.panel.getChild('settingsPanelChild')
  24     this.panelChildEl = this.panelChild.el_
  25
  26     this.size = null
  27
  28     // keep state of what menu type is loading next
  29     this.menuToLoad = 'mainmenu'
  30
  31     const subMenuName = toTitleCase(entry)
  32     const SubMenuComponent = videojsUntyped.getComponent(subMenuName)
  33
  34     if (!SubMenuComponent) {
  35       throw new Error(`Component ${subMenuName} does not exist`)
  36     }
  37     this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this)
  38     const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
  39     this.settingsSubMenuEl_.className += ' ' + subMenuClass
  40
  41     this.eventHandlers()
  42
  43     player.ready(() => {
  44       // Voodoo magic for IOS
  45       setTimeout(() => {
  46         this.build()
  47
  48         // Update on rate change
  49         player.on('ratechange', this.submenuClickHandler)
  50
  51         if (subMenuName === 'CaptionsButton') {
  52           // Hack to regenerate captions on HTTP fallback
  53           player.on('captionsChanged', () => {
  54             setTimeout(() => {
  55               this.settingsSubMenuEl_.innerHTML = ''
  56               this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
  57               this.update()
  58               this.bindClickEvents()
  59
  60             }, 0)
  61           })
  62         }
  63
  64         this.reset()
  65       }, 0)
  66     })
  67   }
  68
  69   eventHandlers () {
  70     this.submenuClickHandler = this.onSubmenuClick.bind(this)
  71     this.transitionEndHandler = this.onTransitionEnd.bind(this)
  72   }
  73
  74   onSubmenuClick (event: any) {
  75     let target = null
  76
  77     if (event.type === 'tap') {
  78       target = event.target
  79     } else {
  80       target = event.currentTarget
  81     }
  82
  83     if (target && target.classList.contains('vjs-back-button')) {
  84       this.loadMainMenu()
  85       return
  86     }
  87
  88     // To update the sub menu value on click, setTimeout is needed because
  89     // updating the value is not instant
  90     setTimeout(() => this.update(event), 0)
  91   }
  92
  93   /**
  94    * Create the component's DOM element
  95    *
  96    * @return {Element}
  97    * @method createEl
  98    */
  99   createEl () {
 100     const el = videojsUntyped.dom.createEl('li', {
 101       className: 'vjs-menu-item'
 102     })
 103
 104     this.settingsSubMenuTitleEl_ = videojsUntyped.dom.createEl('div', {
 105       className: 'vjs-settings-sub-menu-title'
 106     })
 107
 108     el.appendChild(this.settingsSubMenuTitleEl_)
 109
 110     this.settingsSubMenuValueEl_ = videojsUntyped.dom.createEl('div', {
 111       className: 'vjs-settings-sub-menu-value'
 112     })
 113
 114     el.appendChild(this.settingsSubMenuValueEl_)
 115
 116     this.settingsSubMenuEl_ = videojsUntyped.dom.createEl('div', {
 117       className: 'vjs-settings-sub-menu'
 118     })
 119
 120     return el
 121   }
 122
 123   /**
 124    * Handle click on menu item
 125    *
 126    * @method handleClick
 127    */
 128   handleClick () {
 129     this.menuToLoad = 'submenu'
 130     // Remove open class to ensure only the open submenu gets this class
 131     videojsUntyped.dom.removeClass(this.el_, 'open')
 132
 133     super.handleClick()
 134
 135     this.mainMenu.el_.style.opacity = '0'
 136     // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
 137     if (videojsUntyped.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
 138       videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
 139
 140       // animation not played without timeout
 141       setTimeout(() => {
 142         this.settingsSubMenuEl_.style.opacity = '1'
 143         this.settingsSubMenuEl_.style.marginRight = '0px'
 144       }, 0)
 145
 146       this.settingsButton.setDialogSize(this.size)
 147     } else {
 148       videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 149     }
 150   }
 151
 152   /**
 153    * Create back button
 154    *
 155    * @method createBackButton
 156    */
 157   createBackButton () {
 158     const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
 159     button.name_ = 'BackButton'
 160     button.addClass('vjs-back-button')
 161     button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_)
 162   }
 163
 164   /**
 165    * Add/remove prefixed event listener for CSS Transition
 166    *
 167    * @method PrefixedEvent
 168    */
 169   PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
 170     let prefix = ['webkit', 'moz', 'MS', 'o', '']
 171
 172     for (let p = 0; p < prefix.length; p++) {
 173       if (!prefix[p]) {
 174         type = type.toLowerCase()
 175       }
 176
 177       if (action === 'addEvent') {
 178         element.addEventListener(prefix[p] + type, callback, false)
 179       } else if (action === 'removeEvent') {
 180         element.removeEventListener(prefix[p] + type, callback, false)
 181       }
 182     }
 183   }
 184
 185   onTransitionEnd (event: any) {
 186     if (event.propertyName !== 'margin-right') {
 187       return
 188     }
 189
 190     if (this.menuToLoad === 'mainmenu') {
 191       // hide submenu
 192       videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 193
 194       // reset opacity to 0
 195       this.settingsSubMenuEl_.style.opacity = '0'
 196     }
 197   }
 198
 199   reset () {
 200     videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 201     this.settingsSubMenuEl_.style.opacity = '0'
 202     this.setMargin()
 203   }
 204
 205   loadMainMenu () {
 206     this.menuToLoad = 'mainmenu'
 207     this.mainMenu.show()
 208     this.mainMenu.el_.style.opacity = '0'
 209
 210     // back button will always take you to main menu, so set dialog sizes
 211     this.settingsButton.setDialogSize([this.mainMenu.width, this.mainMenu.height])
 212
 213     // animation not triggered without timeout (some async stuff ?!?)
 214     setTimeout(() => {
 215       // animate margin and opacity before hiding the submenu
 216       // this triggers CSS Transition event
 217       this.setMargin()
 218       this.mainMenu.el_.style.opacity = '1'
 219     }, 0)
 220   }
 221
 222   build () {
 223     this.subMenu.on('updateLabel', () => {
 224       this.update()
 225     })
 226
 227     this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
 228     this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
 229     this.panelChildEl.appendChild(this.settingsSubMenuEl_)
 230     this.update()
 231
 232     this.createBackButton()
 233     this.getSize()
 234     this.bindClickEvents()
 235
 236     // prefixed event listeners for CSS TransitionEnd
 237     this.PrefixedEvent(
 238       this.settingsSubMenuEl_,
 239       'TransitionEnd',
 240       this.transitionEndHandler,
 241       'addEvent'
 242     )
 243   }
 244
 245   update (event?: any) {
 246     let target: HTMLElement = null
 247     let subMenu = this.subMenu.name()
 248
 249     if (event && event.type === 'tap') {
 250       target = event.target
 251     } else if (event) {
 252       target = event.currentTarget
 253     }
 254
 255     // Playback rate menu button doesn't get a vjs-selected class
 256     // or sets options_['selected'] on the selected playback rate.
 257     // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
 258     if (subMenu === 'PlaybackRateMenuButton') {
 259       setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
 260     } else {
 261       // Loop trough the submenu items to find the selected child
 262       for (let subMenuItem of this.subMenu.menu.children_) {
 263         if (!(subMenuItem instanceof component)) {
 264           continue
 265         }
 266
 267         if (subMenuItem.hasClass('vjs-selected')) {
 268           // Prefer to use the function
 269           if (typeof subMenuItem.getLabel === 'function') {
 270             this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
 271             break
 272           }
 273
 274           this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
 275         }
 276       }
 277     }
 278
 279     if (target && !target.classList.contains('vjs-back-button')) {
 280       this.settingsButton.hideDialog()
 281     }
 282   }
 283
 284   bindClickEvents () {
 285     for (let item of this.subMenu.menu.children()) {
 286       if (!(item instanceof component)) {
 287         continue
 288       }
 289       item.on(['tap', 'click'], this.submenuClickHandler)
 290     }
 291   }
 292
 293   // save size of submenus on first init
 294   // if number of submenu items change dynamically more logic will be needed
 295   getSize () {
 296     this.dialog.removeClass('vjs-hidden')
 297     this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
 298     this.setMargin()
 299     this.dialog.addClass('vjs-hidden')
 300     videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 301   }
 302
 303   setMargin () {
 304     let [width] = this.size
 305
 306     this.settingsSubMenuEl_.style.marginRight = `-${width}px`
 307   }
 308
 309   /**
 310    * Hide the sub menu
 311    */
 312   hideSubMenu () {
 313     // after removing settings item this.el_ === null
 314     if (!this.el_) {
 315       return
 316     }
 317
 318     if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
 319       videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 320       videojsUntyped.dom.removeClass(this.el_, 'open')
 321     }
 322   }
 323
 324 }
 325
 326 SettingsMenuItem.prototype.contentElType = 'button'
 327 videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
 328
 329 export { SettingsMenuItem }