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 | 36 |
1 files changed, 20 insertions, 16 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 6c42fefd2..b039c4572 100644 --- a/client/src/assets/player/videojs-components/resolution-menu-item.ts +++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts | |||
@@ -1,12 +1,16 @@ | |||
1 | // FIXME: something weird with our path definition in tsconfig and typings | 1 | import videojs, { VideoJsPlayer } from 'video.js' |
2 | // @ts-ignore | 2 | import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings' |
3 | import { Player } from 'video.js' | ||
4 | 3 | ||
5 | import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' | 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 | } | ||
6 | 11 | ||
7 | const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem') | ||
8 | class ResolutionMenuItem extends MenuItem { | 12 | class ResolutionMenuItem extends MenuItem { |
9 | private readonly id: number | 13 | private readonly resolutionId: number |
10 | private readonly label: string | 14 | private readonly label: string |
11 | // Only used for the automatic item | 15 | // Only used for the automatic item |
12 | private readonly labels: { [id: number]: string } | 16 | private readonly labels: { [id: number]: string } |
@@ -15,7 +19,7 @@ class ResolutionMenuItem extends MenuItem { | |||
15 | private autoResolutionPossible: boolean | 19 | private autoResolutionPossible: boolean |
16 | private currentResolutionLabel: string | 20 | private currentResolutionLabel: string |
17 | 21 | ||
18 | constructor (player: Player, options: any) { | 22 | constructor (player: VideoJsPlayer, options?: ResolutionMenuItemOptions) { |
19 | options.selectable = true | 23 | options.selectable = true |
20 | 24 | ||
21 | super(player, options) | 25 | super(player, options) |
@@ -23,40 +27,40 @@ class ResolutionMenuItem extends MenuItem { | |||
23 | this.autoResolutionPossible = true | 27 | this.autoResolutionPossible = true |
24 | this.currentResolutionLabel = '' | 28 | this.currentResolutionLabel = '' |
25 | 29 | ||
30 | this.resolutionId = options.id | ||
26 | this.label = options.label | 31 | this.label = options.label |
27 | this.labels = options.labels | 32 | this.labels = options.labels |
28 | this.id = options.id | ||
29 | this.callback = options.callback | 33 | this.callback = options.callback |
30 | 34 | ||
31 | player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) | 35 | player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) |
32 | 36 | ||
33 | // We only want to disable the "Auto" item | 37 | // We only want to disable the "Auto" item |
34 | if (this.id === -1) { | 38 | if (this.resolutionId === -1) { |
35 | player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) | 39 | player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) |
36 | } | 40 | } |
37 | } | 41 | } |
38 | 42 | ||
39 | handleClick (event: any) { | 43 | handleClick (event: any) { |
40 | // Auto button disabled? | 44 | // Auto button disabled? |
41 | if (this.autoResolutionPossible === false && this.id === -1) return | 45 | if (this.autoResolutionPossible === false && this.resolutionId === -1) return |
42 | 46 | ||
43 | super.handleClick(event) | 47 | super.handleClick(event) |
44 | 48 | ||
45 | this.callback(this.id, 'video') | 49 | this.callback(this.resolutionId, 'video') |
46 | } | 50 | } |
47 | 51 | ||
48 | updateSelection (data: ResolutionUpdateData) { | 52 | updateSelection (data: ResolutionUpdateData) { |
49 | if (this.id === -1) { | 53 | if (this.resolutionId === -1) { |
50 | this.currentResolutionLabel = this.labels[data.id] | 54 | this.currentResolutionLabel = this.labels[data.id] |
51 | } | 55 | } |
52 | 56 | ||
53 | // Automatic resolution only | 57 | // Automatic resolution only |
54 | if (data.auto === true) { | 58 | if (data.auto === true) { |
55 | this.selected(this.id === -1) | 59 | this.selected(this.resolutionId === -1) |
56 | return | 60 | return |
57 | } | 61 | } |
58 | 62 | ||
59 | this.selected(this.id === data.id) | 63 | this.selected(this.resolutionId === data.id) |
60 | } | 64 | } |
61 | 65 | ||
62 | updateAutoResolution (data: AutoResolutionUpdateData) { | 66 | updateAutoResolution (data: AutoResolutionUpdateData) { |
@@ -71,13 +75,13 @@ class ResolutionMenuItem extends MenuItem { | |||
71 | } | 75 | } |
72 | 76 | ||
73 | getLabel () { | 77 | getLabel () { |
74 | if (this.id === -1) { | 78 | if (this.resolutionId === -1) { |
75 | return this.label + ' <small>' + this.currentResolutionLabel + '</small>' | 79 | return this.label + ' <small>' + this.currentResolutionLabel + '</small>' |
76 | } | 80 | } |
77 | 81 | ||
78 | return this.label | 82 | return this.label |
79 | } | 83 | } |
80 | } | 84 | } |
81 | MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem) | 85 | videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem) |
82 | 86 | ||
83 | export { ResolutionMenuItem } | 87 | export { ResolutionMenuItem } |