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 {
15 constructor (player: Player, options: any) {
16 super(player, options)
19 player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
21 player.peertube().on('resolutionChange', () => 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 addClickListener (component: any) {
53 component.on('click', () => {
54 const children = this.menu.children()
56 for (const child of children) {
57 if (component !== child) {
64 private buildQualities (data: LoadedQualityData) {
65 // The automatic resolution item will need other labels
66 const labels: { [ id: number ]: string } = {}
68 data.qualityData.video.sort((a, b) => {
69 if (a.id > b.id) return -1
70 if (a.id === b.id) return 0
74 for (const d of data.qualityData.video) {
75 // Skip auto resolution, we'll add it ourselves
76 if (d.id === -1) continue
78 this.menu.addChild(new ResolutionMenuItem(
82 label: d.id == 0 ? this.player .localize('Audio-only') : d.label,
84 callback: data.qualitySwitchCallback
88 labels[d.id] = d.label
91 this.menu.addChild(new ResolutionMenuItem(
95 label: this.player_.localize('Auto'),
97 callback: data.qualitySwitchCallback,
98 selected: true // By default, in auto mode
102 for (const m of this.menu.children()) {
103 this.addClickListener(m)
106 this.trigger('menuChanged')
109 ResolutionMenuButton.prototype.controlText_ = 'Quality'
111 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)