diff options
Diffstat (limited to 'client/src/assets/player/videojs-components/resolution-menu-item.ts')
-rw-r--r-- | client/src/assets/player/videojs-components/resolution-menu-item.ts | 48 |
1 files changed, 19 insertions, 29 deletions
diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts index c1f502600..6047f52f7 100644 --- a/client/src/assets/player/videojs-components/resolution-menu-item.ts +++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts | |||
@@ -1,82 +1,72 @@ | |||
1 | import videojs from 'video.js' | 1 | import videojs from 'video.js' |
2 | import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings' | ||
3 | 2 | ||
4 | const MenuItem = videojs.getComponent('MenuItem') | 3 | const MenuItem = videojs.getComponent('MenuItem') |
5 | 4 | ||
6 | export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions { | 5 | export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions { |
7 | labels?: { [id: number]: string } | ||
8 | id: number | 6 | id: number |
9 | callback: (resolutionId: number, type: 'video') => void | ||
10 | } | 7 | } |
11 | 8 | ||
12 | class ResolutionMenuItem extends MenuItem { | 9 | class ResolutionMenuItem extends MenuItem { |
13 | private readonly resolutionId: number | 10 | private readonly resolutionId: number |
14 | private readonly label: string | 11 | private readonly label: string |
15 | // Only used for the automatic item | ||
16 | private readonly labels: { [id: number]: string } | ||
17 | private readonly callback: (resolutionId: number, type: 'video') => void | ||
18 | 12 | ||
19 | private autoResolutionPossible: boolean | 13 | private autoResolutionEnabled: boolean |
20 | private currentResolutionLabel: string | 14 | private autoResolutionChosen: string |
21 | 15 | ||
22 | constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) { | 16 | constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) { |
23 | options.selectable = true | 17 | options.selectable = true |
24 | 18 | ||
25 | super(player, options) | 19 | super(player, options) |
26 | 20 | ||
27 | this.autoResolutionPossible = true | 21 | this.autoResolutionEnabled = true |
28 | this.currentResolutionLabel = '' | 22 | this.autoResolutionChosen = '' |
29 | 23 | ||
30 | this.resolutionId = options.id | 24 | this.resolutionId = options.id |
31 | this.label = options.label | 25 | this.label = options.label |
32 | this.labels = options.labels | ||
33 | this.callback = options.callback | ||
34 | 26 | ||
35 | player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) | 27 | player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection()) |
36 | 28 | ||
37 | // We only want to disable the "Auto" item | 29 | // We only want to disable the "Auto" item |
38 | if (this.resolutionId === -1) { | 30 | if (this.resolutionId === -1) { |
39 | player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) | 31 | player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution()) |
40 | } | 32 | } |
41 | } | 33 | } |
42 | 34 | ||
43 | handleClick (event: any) { | 35 | handleClick (event: any) { |
44 | // Auto button disabled? | 36 | // Auto button disabled? |
45 | if (this.autoResolutionPossible === false && this.resolutionId === -1) return | 37 | if (this.autoResolutionEnabled === false && this.resolutionId === -1) return |
46 | 38 | ||
47 | super.handleClick(event) | 39 | super.handleClick(event) |
48 | 40 | ||
49 | this.callback(this.resolutionId, 'video') | 41 | this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false }) |
50 | } | 42 | } |
51 | 43 | ||
52 | updateSelection (data: ResolutionUpdateData) { | 44 | updateSelection () { |
53 | if (this.resolutionId === -1) { | 45 | const selectedResolution = this.player().peertubeResolutions().getSelected() |
54 | this.currentResolutionLabel = this.labels[data.id] | ||
55 | } | ||
56 | 46 | ||
57 | // Automatic resolution only | 47 | if (this.resolutionId === -1) { |
58 | if (data.auto === true) { | 48 | this.autoResolutionChosen = this.player().peertubeResolutions().getAutoResolutionChosen()?.label |
59 | this.selected(this.resolutionId === -1) | ||
60 | return | ||
61 | } | 49 | } |
62 | 50 | ||
63 | this.selected(this.resolutionId === data.id) | 51 | this.selected(this.resolutionId === selectedResolution.id) |
64 | } | 52 | } |
65 | 53 | ||
66 | updateAutoResolution (data: AutoResolutionUpdateData) { | 54 | updateAutoResolution () { |
55 | const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld() | ||
56 | |||
67 | // Check if the auto resolution is enabled or not | 57 | // Check if the auto resolution is enabled or not |
68 | if (data.possible === false) { | 58 | if (enabled === false) { |
69 | this.addClass('disabled') | 59 | this.addClass('disabled') |
70 | } else { | 60 | } else { |
71 | this.removeClass('disabled') | 61 | this.removeClass('disabled') |
72 | } | 62 | } |
73 | 63 | ||
74 | this.autoResolutionPossible = data.possible | 64 | this.autoResolutionEnabled = enabled |
75 | } | 65 | } |
76 | 66 | ||
77 | getLabel () { | 67 | getLabel () { |
78 | if (this.resolutionId === -1) { | 68 | if (this.resolutionId === -1) { |
79 | return this.label + ' <small>' + this.currentResolutionLabel + '</small>' | 69 | return this.label + ' <small>' + this.autoResolutionChosen + '</small>' |
80 | } | 70 | } |
81 | 71 | ||
82 | return this.label | 72 | return this.label |