diff options
Diffstat (limited to 'client/src/assets/player/shared/settings/resolution-menu-item.ts')
-rw-r--r-- | client/src/assets/player/shared/settings/resolution-menu-item.ts | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/client/src/assets/player/shared/settings/resolution-menu-item.ts b/client/src/assets/player/shared/settings/resolution-menu-item.ts new file mode 100644 index 000000000..6047f52f7 --- /dev/null +++ b/client/src/assets/player/shared/settings/resolution-menu-item.ts | |||
@@ -0,0 +1,77 @@ | |||
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 } | ||