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.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
19 player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
23 const el = super.createEl()
25 this.labelEl_ = videojsUntyped.dom.createEl('div', {
26 className: 'vjs-resolution-value'
29 el.appendChild(this.labelEl_)
34 updateARIAAttributes () {
35 this.el().setAttribute('aria-label', 'Quality')
39 return new Menu(this.player_)
43 return super.buildCSSClass() + ' vjs-resolution-button'
46 buildWrapperCSSClass () {
47 return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
50 private addClickListener (component: any) {
51 component.on('click', () => {
52 const children = this.menu.children()
54 for (const child of children) {
55 if (component !== child) {
62 private buildQualities (data: LoadedQualityData) {
63 // The automatic resolution item will need other labels
64 const labels: { [ id: number ]: string } = {}
66 data.qualityData.video.sort((a, b) => {
67 if (a.id > b.id) return -1
68 if (a.id === b.id) return 0
72 for (const d of data.qualityData.video) {
73 // Skip auto resolution, we'll add it ourselves
74 if (d.id === -1) continue
76 this.menu.addChild(new ResolutionMenuItem(
82 callback: data.qualitySwitchCallback
86 labels[d.id] = d.label
89 this.menu.addChild(new ResolutionMenuItem(
93 label: this.player_.localize('Auto'),
95 callback: data.qualitySwitchCallback,
96 selected: true // By default, in auto mode
100 for (const m of this.menu.children()) {
101 this.addClickListener(m)
104 this.trigger('menuChanged')
107 ResolutionMenuButton.prototype.controlText_ = 'Quality'
109 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)