]>
Commit | Line | Data |
---|---|---|
512decf3 | 1 | import videojs from 'video.js' |
2adfc7ea | 2 | |
f5fcd9f7 C |
3 | const MenuItem = videojs.getComponent('MenuItem') |
4 | ||
5 | export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions { | |
f552ca84 | 6 | resolutionId: number |
f5fcd9f7 | 7 | } |
2adfc7ea | 8 | |
2adfc7ea | 9 | class ResolutionMenuItem extends MenuItem { |
f5fcd9f7 | 10 | private readonly resolutionId: number |
2adfc7ea | 11 | private readonly label: string |
2adfc7ea | 12 | |
e367da94 C |
13 | private autoResolutionEnabled: boolean |
14 | private autoResolutionChosen: string | |
2adfc7ea | 15 | |
7e37e111 | 16 | constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) { |
2adfc7ea C |
17 | options.selectable = true |
18 | ||
19 | super(player, options) | |
20 | ||
e367da94 C |
21 | this.autoResolutionEnabled = true |
22 | this.autoResolutionChosen = '' | |
2adfc7ea | 23 | |
f552ca84 | 24 | this.resolutionId = options.resolutionId |
2adfc7ea | 25 | this.label = options.label |
2adfc7ea | 26 | |
e367da94 | 27 | player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection()) |
2adfc7ea | 28 | |
3b6f205c | 29 | // We only want to disable the "Auto" item |
f5fcd9f7 | 30 | if (this.resolutionId === -1) { |
e367da94 | 31 | player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution()) |
2adfc7ea | 32 | } |
2adfc7ea C |
33 | } |
34 | ||
35 | handleClick (event: any) { | |
36 | // Auto button disabled? | |
e367da94 | 37 | if (this.autoResolutionEnabled === false && this.resolutionId === -1) return |
2adfc7ea C |
38 | |
39 | super.handleClick(event) | |
40 | ||
e367da94 | 41 | this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false }) |
2adfc7ea C |
42 | } |
43 | ||
e367da94 C |
44 | updateSelection () { |
45 | const selectedResolution = this.player().peertubeResolutions().getSelected() | |
2adfc7ea | 46 | |
e367da94 C |
47 | if (this.resolutionId === -1) { |
48 | this.autoResolutionChosen = this.player().peertubeResolutions().getAutoResolutionChosen()?.label | |
2adfc7ea C |
49 | } |
50 | ||
e367da94 | 51 | this.selected(this.resolutionId === selectedResolution.id) |
2adfc7ea C |
52 | } |
53 | ||
e367da94 C |
54 | updateAutoResolution () { |
55 | const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld() | |
56 | ||
2adfc7ea | 57 | // Check if the auto resolution is enabled or not |
e367da94 | 58 | if (enabled === false) { |
2adfc7ea C |
59 | this.addClass('disabled') |
60 | } else { | |
61 | this.removeClass('disabled') | |
62 | } | |
63 | ||
e367da94 | 64 | this.autoResolutionEnabled = enabled |
2adfc7ea C |
65 | } |
66 | ||
67 | getLabel () { | |
f5fcd9f7 | 68 | if (this.resolutionId === -1) { |
e367da94 | 69 | return this.label + ' <small>' + this.autoResolutionChosen + '</small>' |
2adfc7ea C |
70 | } |
71 | ||
72 | return this.label | |
73 | } | |
74 | } | |
f5fcd9f7 | 75 | videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem) |
2adfc7ea C |
76 | |
77 | export { ResolutionMenuItem } |