1 // FIXME: something weird with our path definition in tsconfig and typings
3 import { Player } from 'video.js'
5 import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
6 import { ResolutionMenuItem } from './resolution-menu-item'
8 const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
9 const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
10 class ResolutionMenuButton extends MenuButton {
13 constructor (player: Player, options: any) {
14 super(player, options)
17 player.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
19 if (player.webtorrent) {
20 player.webtorrent().on('videoFileUpdate', () => setTimeout(() => this.trigger('updateLabel'), 0))
25 const el = super.createEl()
27 this.labelEl_ = videojsUntyped.dom.createEl('div', {
28 className: 'vjs-resolution-value'
31 el.appendChild(this.labelEl_)
36 updateARIAAttributes () {
37 this.el().setAttribute('aria-label', 'Quality')
41 return new Menu(this.player_)
45 return super.buildCSSClass() + ' vjs-resolution-button'
48 buildWrapperCSSClass () {
49 return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
52 private buildQualities (data: LoadedQualityData) {
53 // The automatic resolution item will need other labels
54 const labels: { [ id: number ]: string } = {}
56 for (const d of data.qualityData.video) {
57 this.menu.addChild(new ResolutionMenuItem(
63 callback: data.qualitySwitchCallback
67 labels[d.id] = d.label
70 this.menu.addChild(new ResolutionMenuItem(
74 label: this.player_.localize('Auto'),
76 callback: data.qualitySwitchCallback,
77 selected: true // By default, in auto mode
82 ResolutionMenuButton.prototype.controlText_ = 'Quality'
84 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)