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