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

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