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       const label = d.id === 0
  79         ? this.player.localize('Audio-only')
  80         : d.label
  81
  82       this.menu.addChild(new ResolutionMenuItem(
  83         this.player_,
  84         {
  85           id: d.id,
  86           label,
  87           selected: d.selected,
  88           callback: data.qualitySwitchCallback
  89         })
  90       )
  91
  92       labels[d.id] = d.label
  93     }
  94
  95     this.menu.addChild(new ResolutionMenuItem(
  96       this.player_,
  97       {
  98         id: -1,
  99         label: this.player_.localize('Auto'),
 100         labels,
 101         callback: data.qualitySwitchCallback,
 102         selected: true // By default, in auto mode
 103       }
 104     ))
 105
 106     for (const m of this.menu.children()) {
 107       this.addClickListener(m)
 108     }
 109
 110     this.trigger('menuChanged')
 111   }
 112 }
 113 ResolutionMenuButton.prototype.controlText_ = 'Quality'
 114
 115 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)