]>
Commit | Line | Data |
---|---|---|
2adfc7ea C |
1 | // FIXME: something weird with our path definition in tsconfig and typings |
2 | // @ts-ignore | |
3 | import { Player } from 'video.js' | |
4 | ||
5 | import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' | |
6 | ||
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 | |
14 | ||
15 | private autoResolutionPossible: boolean | |
16 | private currentResolutionLabel: string | |
17 | ||
18 | constructor (player: Player, options: any) { | |
19 | options.selectable = true | |
20 | ||
21 | super(player, options) | |
22 | ||
23 | this.autoResolutionPossible = true | |
24 | this.currentResolutionLabel = '' | |
25 | ||
26 | this.label = options.label | |
27 | this.labels = options.labels | |
28 | this.id = options.id | |
29 | this.callback = options.callback | |
30 | ||
3b6f205c | 31 | player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) |
2adfc7ea | 32 | |
3b6f205c C |
33 | // We only want to disable the "Auto" item |
34 | if (this.id === -1) { | |
35 | player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) | |
2adfc7ea | 36 | } |
2adfc7ea C |
37 | } |
38 | ||
39 | handleClick (event: any) { | |
40 | // Auto button disabled? | |
41 | if (this.autoResolutionPossible === false && this.id === -1) return | |
42 | ||
43 | super.handleClick(event) | |
44 | ||
3b6f205c | 45 | this.callback(this.id, 'video') |
2adfc7ea C |
46 | } |
47 | ||
48 | updateSelection (data: ResolutionUpdateData) { | |
49 | if (this.id === -1) { | |
3b6f205c | 50 | this.currentResolutionLabel = this.labels[data.id] |
2adfc7ea C |
51 | } |
52 | ||
53 | // Automatic resolution only | |
54 | if (data.auto === true) { | |
55 | this.selected(this.id === -1) | |
56 | return | |
57 | } | |
58 | ||
3b6f205c | 59 | this.selected(this.id === data.id) |
2adfc7ea C |
60 | } |
61 | ||
62 | updateAutoResolution (data: AutoResolutionUpdateData) { | |
63 | // Check if the auto resolution is enabled or not | |
64 | if (data.possible === false) { | |
65 | this.addClass('disabled') | |
66 | } else { | |
67 | this.removeClass('disabled') | |
68 | } | |
69 | ||
70 | this.autoResolutionPossible = data.possible | |
71 | } | |
72 | ||
73 | getLabel () { | |
74 | if (this.id === -1) { | |
75 | return this.label + ' <small>' + this.currentResolutionLabel + '</small>' | |
76 | } | |
77 | ||
78 | return this.label | |
79 | } | |
80 | } | |
81 | MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem) | |
82 | ||
83 | export { ResolutionMenuItem } |