client/src/assets/player/shared/settings/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     player.peertubeResolutions().on('resolutionRemoved', () => this.cleanupQualities())
  16
  17     // For parent
  18     player.peertubeResolutions().on('resolutionChanged', () => {
  19       setTimeout(() => this.trigger('labelUpdated'))
  20     })
  21   }
  22
  23   createEl () {
  24     const el = super.createEl()
  25
  26     this.labelEl_ = videojs.dom.createEl('div', {
  27       className: 'vjs-resolution-value'
  28     }) as HTMLElement
  29
  30     el.appendChild(this.labelEl_)
  31
  32     return el
  33   }
  34
  35   updateARIAAttributes () {
  36     this.el().setAttribute('aria-label', 'Quality')
  37   }
  38
  39   createMenu () {
  40     return new Menu(this.player_)
  41   }
  42
  43   buildCSSClass () {
  44     return super.buildCSSClass() + ' vjs-resolution-button'
  45   }
  46
  47   buildWrapperCSSClass () {
  48     return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
  49   }
  50
  51   private addClickListener (component: any) {
  52     component.on('click', () => {
  53       const children = this.menu.children()
  54
  55       for (const child of children) {
  56         if (component !== child) {
  57           (child as videojs.MenuItem).selected(false)
  58         }
  59       }
  60     })
  61   }
  62
  63   private buildQualities () {
  64     for (const d of this.player().peertubeResolutions().getResolutions()) {
  65       const label = d.label === '0p'
  66         ? this.player().localize('Audio-only')
  67         : d.label
  68
  69       this.menu.addChild(new ResolutionMenuItem(
  70         this.player_,
  71         {
  72           id: d.id + '',
  73           resolutionId: d.id,
  74           label,
  75           selected: d.selected
  76         })
  77       )
  78     }
  79
  80     for (const m of this.menu.children()) {
  81       this.addClickListener(m)
  82     }
  83
  84     this.trigger('menuChanged')
  85   }
  86
  87   private cleanupQualities () {
  88     const resolutions = this.player().peertubeResolutions().getResolutions()
  89
  90     this.menu.children().forEach((children: ResolutionMenuItem) => {
  91       if (children.resolutionId === undefined) {
  92         return
  93       }
  94
  95       if (resolutions.find(r => r.id === children.resolutionId)) {
  96         return
  97       }
  98
  99       this.menu.removeChild(children)
 100     })
 101
 102     this.trigger('menuChanged')
 103   }
 104 }
 105
 106 videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)