]>
Commit | Line | Data |
---|---|---|
512decf3 | 1 | import videojs from 'video.js' |
f5fcd9f7 | 2 | import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings' |
2adfc7ea | 3 | |
f5fcd9f7 C |
4 | const MenuItem = videojs.getComponent('MenuItem') |
5 | ||
6 | export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions { | |
7 | labels?: { [id: number]: string } | |
8 | id: number | |
9 | callback: Function | |
10 | } | |
2adfc7ea | 11 | |
2adfc7ea | 12 | class ResolutionMenuItem extends MenuItem { |
f5fcd9f7 | 13 | private readonly resolutionId: number |
2adfc7ea C |
14 | private readonly label: string |
15 | // Only used for the automatic item | |
16 | private readonly labels: { [id: number]: string } | |
17 | private readonly callback: Function | |
18 | ||
19 | private autoResolutionPossible: boolean | |
20 | private currentResolutionLabel: string | |
21 | ||
7e37e111 | 22 | constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) { |
2adfc7ea C |
23 | options.selectable = true |
24 | ||
25 | super(player, options) | |
26 | ||
27 | this.autoResolutionPossible = true | |
28 | this.currentResolutionLabel = '' | |
29 | ||
f5fcd9f7 | 30 | this.resolutionId = options.id |
2adfc7ea C |
31 | this.label = options.label |
32 | this.labels = options.labels | |
2adfc7ea C |
33 | this.callback = options.callback |
34 | ||
3b6f205c | 35 | player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) |
2adfc7ea | 36 | |
3b6f205c | 37 | // We only want to disable the "Auto" item |
f5fcd9f7 | 38 | if (this.resolutionId === -1) { |
3b6f205c | 39 | player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) |
2adfc7ea | 40 | } |
2adfc7ea C |
41 | } |
42 | ||
43 | handleClick (event: any) { | |
44 | // Auto button disabled? | |
f5fcd9f7 | 45 | if (this.autoResolutionPossible === false && this.resolutionId === -1) return |
2adfc7ea C |
46 | |
47 | super.handleClick(event) | |
48 | ||
f5fcd9f7 | 49 | this.callback(this.resolutionId, 'video') |
2adfc7ea C |
50 | } |
51 | ||
52 | updateSelection (data: ResolutionUpdateData) { | |
f5fcd9f7 | 53 | if (this.resolutionId === -1) { |
3b6f205c | 54 | this.currentResolutionLabel = this.labels[data.id] |
2adfc7ea C |
55 | } |
56 | ||
57 | // Automatic resolution only | |
58 | if (data.auto === true) { | |
f5fcd9f7 | 59 | this.selected(this.resolutionId === -1) |
2adfc7ea C |
60 | return |
61 | } | |
62 | ||
f5fcd9f7 | 63 | this.selected(this.resolutionId === data.id) |
2adfc7ea C |
64 | } |
65 | ||
66 | updateAutoResolution (data: AutoResolutionUpdateData) { | |
67 | // Check if the auto resolution is enabled or not | |
68 | if (data.possible === false) { | |
69 | this.addClass('disabled') | |
70 | } else { | |
71 | this.removeClass('disabled') | |
72 | } | |
73 | ||
74 | this.autoResolutionPossible = data.possible | |
75 | } | |
76 | ||
77 | getLabel () { | |
f5fcd9f7 | 78 | if (this.resolutionId === -1) { |
2adfc7ea C |
79 | return this.label + ' <small>' + this.currentResolutionLabel + '</small>' |
80 | } | |
81 | ||
82 | return this.label | |
83 | } | |
84 | } | |
f5fcd9f7 | 85 | videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem) |
2adfc7ea C |
86 | |
87 | export { ResolutionMenuItem } |