1 // FIXME: something weird with our path definition in tsconfig and typings
3 import { Player } from 'video.js'
5 import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
7 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
8 class ResolutionMenuItem extends MenuItem {
9 private readonly id: number
10 private readonly label: string
11 // Only used for the automatic item
12 private readonly labels: { [id: number]: string }
13 private readonly callback: Function
15 private autoResolutionPossible: boolean
16 private currentResolutionLabel: string
18 constructor (player: Player, options: any) {
19 options.selectable = true
21 super(player, options)
23 this.autoResolutionPossible = true
24 this.currentResolutionLabel = ''
26 this.label = options.label
27 this.labels = options.labels
29 this.callback = options.callback
31 if (player.webtorrent) {
32 player.webtorrent().on('videoFileUpdate', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
34 // We only want to disable the "Auto" item
36 player.webtorrent().on('autoResolutionUpdate', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
40 // TODO: update on HLS change
43 handleClick (event: any) {
44 // Auto button disabled?
45 if (this.autoResolutionPossible === false && this.id === -1) return
47 super.handleClick(event)
49 this.callback(this.id)
52 updateSelection (data: ResolutionUpdateData) {
54 this.currentResolutionLabel = this.labels[data.resolutionId]
57 // Automatic resolution only
58 if (data.auto === true) {
59 this.selected(this.id === -1)
63 this.selected(this.id === data.resolutionId)
66 updateAutoResolution (data: AutoResolutionUpdateData) {
67 // Check if the auto resolution is enabled or not
68 if (data.possible === false) {
69 this.addClass('disabled')
71 this.removeClass('disabled')
74 this.autoResolutionPossible = data.possible
79 return this.label + ' <small>' + this.currentResolutionLabel + '</small>'
85 MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
87 export { ResolutionMenuItem }