-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-
-import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs from 'video.js'
import { ResolutionMenuItem } from './resolution-menu-item'
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
-const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
+const Menu = videojs.getComponent('Menu')
+const MenuButton = videojs.getComponent('MenuButton')
class ResolutionMenuButton extends MenuButton {
- label: HTMLElement
+ labelEl_: HTMLElement
- constructor (player: Player, options: any) {
+ constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
super(player, options)
- this.player = player
- player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+ this.controlText('Quality')
+
+ 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 () {
const el = super.createEl()
- this.labelEl_ = videojsUntyped.dom.createEl('div', {
+ this.labelEl_ = videojs.dom.createEl('div', {
className: 'vjs-resolution-value'
- })
+ }) as HTMLElement
el.appendChild(this.labelEl_)
for (const child of children) {
if (component !== child) {
- child.selected(false)
+ (child as videojs.MenuItem).selected(false)
}
}
})
}
- 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
+ private buildQualities () {
+ for (const d of this.player().peertubeResolutions().getResolutions()) {
+ const label = d.label === '0p'
+ ? this.player().localize('Audio-only')
+ : d.label
this.menu.addChild(new ResolutionMenuItem(
this.player_,
{
id: d.id,
- label: d.label,
- selected: d.selected,
- callback: data.qualitySwitchCallback
+ label,
+ 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)
}
this.trigger('menuChanged')
}
}
-ResolutionMenuButton.prototype.controlText_ = 'Quality'
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
+videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)