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

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