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

   1 // FIXME: something weird with our path definition in tsconfig and typings
   2 // @ts-ignore
   3 import { Player } from 'video.js'
   4
   5 import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
   6 import { ResolutionMenuItem } from './resolution-menu-item'
   7
   8 const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
   9 const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
  10 class ResolutionMenuButton extends MenuButton {
  11   label: HTMLElement
  12   labelEl_: any
  13   player: Player
  14
  15   constructor (player: Player, options: any) {
  16     super(player, options)
  17     this.player = player
  18
  19     player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
  20
  21     player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
  22   }
  23
  24   createEl () {
  25     const el = super.createEl()
  26
  27     this.labelEl_ = videojsUntyped.dom.createEl('div', {
  28       className: 'vjs-resolution-value'
  29     })
  30
  31     el.appendChild(this.labelEl_)
  32
  33     return el
  34   }
  35
  36   updateARIAAttributes () {
  37     this.el().setAttribute('aria-label', 'Quality')
  38   }
  39
  40   createMenu () {
  41     return new Menu(this.player_)
  42   }
  43
  44   buildCSSClass () {
  45     return super.buildCSSClass() + ' vjs-resolution-button'
  46   }
  47
  48   buildWrapperCSSClass () {
  49     return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
  50   }
  51
  52   private addClickListener (component: any) {
  53     component.on('click', () => {
  54       const children = this.menu.children()
  55
  56       for (const child of children) {
  57         if (component !== child) {
  58           child.selected(false)
  59         }
  60       }
  61     })
  62   }
  63
  64   private buildQualities (data: LoadedQualityData) {
  65     // The automatic resolution item will need other labels
  66     const labels: { [ id: number ]: string } = {}
  67
  68     data.qualityData.video.sort((a, b) => {
  69       if (a.id > b.id) return -1
  70       if (a.id === b.id) return 0
  71       return 1
  72     })
  73
  74     for (const d of data.qualityData.video) {
  75       // Skip auto resolution, we'll add it ourselves
  76       if (d.id === -1) continue
  77
  78       this.menu.addChild(new ResolutionMenuItem(
  79         this.player_,
  80         {
  81           id: d.id,
  82           label: d.id == 0 ? this.player .localize('Audio-only') : d.label,
  83           selected: d.selected,
  84           callback: data.qualitySwitchCallback
  85         })
  86       )
  87
  88       labels[d.id] = d.label
  89     }
  90
  91     this.menu.addChild(new ResolutionMenuItem(
  92       this.player_,
  93       {
  94         id: -1,
  95         label: this.player_.localize('Auto'),
  96         labels,
  97         callback: data.qualitySwitchCallback,
  98         selected: true // By default, in auto mode
  99       }
 100     ))
 101
 102     for (const m of this.menu.children()) {
 103       this.addClickListener(m)
 104     }
 105
 106     this.trigger('menuChanged')
 107   }
 108 }
 109 ResolutionMenuButton.prototype.controlText_ = 'Quality'
 110
 111 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)