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

   1 import videojs from 'video.js'
   2 import { ResolutionMenuItem } from './resolution-menu-item'
   3
   4 const Menu = videojs.getComponent('Menu')
   5 const MenuButton = videojs.getComponent('MenuButton')
   6 class ResolutionMenuButton extends MenuButton {
   7   labelEl_: HTMLElement
   8
   9   constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
  10     super(player, options)
  11
  12     this.controlText('Quality')
  13
  14     player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
  15
  16     // For parent
  17     player.peertubeResolutions().on('resolutionChanged', () => {
  18       setTimeout(() => this.trigger('labelUpdated'))
  19     })
  20   }
  21
  22   createEl () {
  23     const el = super.createEl()
  24
  25     this.labelEl_ = videojs.dom.createEl('div', {
  26       className: 'vjs-resolution-value'
  27     }) as HTMLElement
  28
  29     el.appendChild(this.labelEl_)
  30
  31     return el
  32   }
  33
  34   updateARIAAttributes () {
  35     this.el().setAttribute('aria-label', 'Quality')
  36   }
  37
  38   createMenu () {
  39     return new Menu(this.player_)
  40   }
  41
  42   buildCSSClass () {
  43     return super.buildCSSClass() + ' vjs-resolution-button'
  44   }
  45
  46   buildWrapperCSSClass () {
  47     return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
  48   }
  49
  50   private addClickListener (component: any) {
  51     component.on('click', () => {
  52       const children = this.menu.children()
  53
  54       for (const child of children) {
  55         if (component !== child) {
  56           (child as videojs.MenuItem).selected(false)
  57         }
  58       }
  59     })
  60   }
  61
  62   private buildQualities () {
  63     for (const d of this.player().peertubeResolutions().getResolutions()) {
  64       const label = d.label === '0p'
  65         ? this.player().localize('Audio-only')
  66         : d.label
  67
  68       this.menu.addChild(new ResolutionMenuItem(
  69         this.player_,
  70         {
  71           id: d.id,
  72           label,
  73           selected: d.selected
  74         })
  75       )
  76     }
  77
  78     for (const m of this.menu.children()) {
  79       this.addClickListener(m)
  80     }
  81
  82     this.trigger('menuChanged')
  83   }
  84 }
  85
  86 videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)