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     this.subMenu.on('menuChanged', () => {
 227       this.bindClickEvents()
 228       this.setSize()
 229       this.update()
 230     })
 231
 232     this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
 233     this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
 234     this.panelChildEl.appendChild(this.settingsSubMenuEl_)
 235     this.update()
 236
 237     this.createBackButton()
 238     this.setSize()
 239     this.bindClickEvents()
 240
 241     // prefixed event listeners for CSS TransitionEnd
 242     this.PrefixedEvent(
 243       this.settingsSubMenuEl_,
 244       'TransitionEnd',
 245       this.transitionEndHandler,
 246       'addEvent'
 247     )
 248   }
 249
 250   update (event?: any) {
 251     let target: HTMLElement = null
 252     let subMenu = this.subMenu.name()
 253
 254     if (event && event.type === 'tap') {
 255       target = event.target
 256     } else if (event) {
 257       target = event.currentTarget
 258     }
 259
 260     // Playback rate menu button doesn't get a vjs-selected class
 261     // or sets options_['selected'] on the selected playback rate.
 262     // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
 263     if (subMenu === 'PlaybackRateMenuButton') {
 264       setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
 265     } else {
 266       // Loop trough the submenu items to find the selected child
 267       for (let subMenuItem of this.subMenu.menu.children_) {
 268         if (!(subMenuItem instanceof component)) {
 269           continue
 270         }
 271
 272         if (subMenuItem.hasClass('vjs-selected')) {
 273           // Prefer to use the function
 274           if (typeof subMenuItem.getLabel === 'function') {
 275             this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
 276             break
 277           }
 278
 279           this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
 280         }
 281       }
 282     }
 283
 284     if (target && !target.classList.contains('vjs-back-button')) {
 285       this.settingsButton.hideDialog()
 286     }
 287   }
 288
 289   bindClickEvents () {
 290     for (let item of this.subMenu.menu.children()) {
 291       if (!(item instanceof component)) {
 292         continue
 293       }
 294       item.on(['tap', 'click'], this.submenuClickHandler)
 295     }
 296   }
 297
 298   // save size of submenus on first init
 299   // if number of submenu items change dynamically more logic will be needed
 300   setSize () {
 301     this.dialog.removeClass('vjs-hidden')
 302     videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
 303     this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
 304     this.setMargin()
 305     this.dialog.addClass('vjs-hidden')
 306     videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 307   }
 308
 309   setMargin () {
 310     let [width] = this.size
 311
 312     this.settingsSubMenuEl_.style.marginRight = `-${width}px`
 313   }
 314
 315   /**
 316    * Hide the sub menu
 317    */
 318   hideSubMenu () {
 319     // after removing settings item this.el_ === null
 320     if (!this.el_) {
 321       return
 322     }
 323
 324     if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
 325       videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 326       videojsUntyped.dom.removeClass(this.el_, 'open')
 327     }
 328   }
 329
 330 }
 331
 332 SettingsMenuItem.prototype.contentElType = 'button'
 333 videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
 334
 335 export { SettingsMenuItem }