-import videojs, { VideoJsPlayer } from 'video.js'
-
-import { LoadedQualityData } from '../peertube-videojs-typings'
+import videojs from 'video.js'
import { ResolutionMenuItem } from './resolution-menu-item'
const Menu = videojs.getComponent('Menu')
class ResolutionMenuButton extends MenuButton {
labelEl_: HTMLElement
- constructor (player: VideoJsPlayer, options?: videojs.MenuButtonOptions) {
+ constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
super(player, options)
this.controlText('Quality')
- player.tech(true).on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+ player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
- player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
+ // For parent
+ player.peertubeResolutions().on('resolutionChanged', () => {
+ setTimeout(() => this.trigger('labelUpdated'))
+ })
}
createEl () {
})
}
- private buildQualities (data: LoadedQualityData) {
- // The automatic resolution item will need other labels
- const labels: { [ id: number ]: string } = {}
-
- data.qualityData.video.sort((a, b) => {
- if (a.id > b.id) return -1
- if (a.id === b.id) return 0
- return 1
- })
-
- for (const d of data.qualityData.video) {
- // Skip auto resolution, we'll add it ourselves
- if (d.id === -1) continue
-
- const label = d.id === 0
+ private buildQualities () {
+ for (const d of this.player().peertubeResolutions().getResolutions()) {
+ const label = d.label === '0p'
? this.player().localize('Audio-only')
: d.label
{
id: d.id,
label,
- selected: d.selected,
- callback: data.qualitySwitchCallback
+ selected: d.selected
})
)
-
- labels[d.id] = d.label
}
- this.menu.addChild(new ResolutionMenuItem(
- this.player_,
- {
- id: -1,
- label: this.player_.localize('Auto'),
- labels,
- callback: data.qualitySwitchCallback,
- selected: true // By default, in auto mode
- }
- ))
-
for (const m of this.menu.children()) {
this.addClickListener(m)
}