1 import videojs, { VideoJsPlayer } from 'video.js'
3 import { LoadedQualityData } from '../peertube-videojs-typings'
4 import { ResolutionMenuItem } from './resolution-menu-item'
6 const Menu = videojs.getComponent('Menu')
7 const MenuButton = videojs.getComponent('MenuButton')
8 class ResolutionMenuButton extends MenuButton {
11 constructor (player: VideoJsPlayer, options?: videojs.MenuButtonOptions) {
12 super(player, options)
14 this.controlText('Quality')
16 player.tech(true).on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
18 player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
22 const el = super.createEl()
24 this.labelEl_ = videojs.dom.createEl('div', {
25 className: 'vjs-resolution-value'
28 el.appendChild(this.labelEl_)
33 updateARIAAttributes () {
34 this.el().setAttribute('aria-label', 'Quality')
38 return new Menu(this.player_)
42 return super.buildCSSClass() + ' vjs-resolution-button'
45 buildWrapperCSSClass () {
46 return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
49 private addClickListener (component: any) {
50 component.on('click', () => {
51 const children = this.menu.children()
53 for (const child of children) {
54 if (component !== child) {
55 (child as videojs.MenuItem).selected(false)
61 private buildQualities (data: LoadedQualityData) {
62 // The automatic resolution item will need other labels
63 const labels: { [ id: number ]: string } = {}
65 data.qualityData.video.sort((a, b) => {
66 if (a.id > b.id) return -1
67 if (a.id === b.id) return 0
71 for (const d of data.qualityData.video) {
72 // Skip auto resolution, we'll add it ourselves
73 if (d.id === -1) continue
75 const label = d.label === '0p'
76 ? this.player().localize('Audio-only')
79 this.menu.addChild(new ResolutionMenuItem(
85 callback: data.qualitySwitchCallback
89 labels[d.id] = d.label
92 this.menu.addChild(new ResolutionMenuItem(
96 label: this.player_.localize('Auto'),
98 callback: data.qualitySwitchCallback,
99 selected: true // By default, in auto mode
103 for (const m of this.menu.children()) {
104 this.addClickListener(m)
107 this.trigger('menuChanged')
111 videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)