diff options
author | Chocobozzz <me@florianbigard.com> | 2019-01-23 15:36:45 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2019-02-11 09:13:02 +0100 |
commit | 2adfc7ea9a1f858db874df9fe322e7ae833db77c (patch) | |
tree | e27c6ebe01b7c96ea0e053839a38fc1f824d1284 /client/src/assets/player/videojs-components/resolution-menu-item.ts | |
parent | 7eeb6a0ba4028d0e20847b846332dd0b7747c7f8 (diff) | |
download | PeerTube-2adfc7ea9a1f858db874df9fe322e7ae833db77c.tar.gz PeerTube-2adfc7ea9a1f858db874df9fe322e7ae833db77c.tar.zst PeerTube-2adfc7ea9a1f858db874df9fe322e7ae833db77c.zip |
Refractor videojs player
Add fake p2p-media-loader plugin
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 | 87 |
1 files changed, 87 insertions, 0 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 new file mode 100644 index 000000000..cc1c79739 --- /dev/null +++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts | |||
@@ -0,0 +1,87 @@ | |||
1 | // FIXME: something weird with our path definition in tsconfig and typings | ||
2 | // @ts-ignore | ||
3 | import { Player } from 'video.js' | ||
4 | |||
5 | import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' | ||
6 | |||
7 | const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem') | ||
8 | class ResolutionMenuItem extends MenuItem { | ||
9 | private readonly id: number | ||
10 | private readonly label: string | ||
11 | // Only used for the automatic item | ||
12 | private readonly labels: { [id: number]: string } | ||
13 | private readonly callback: Function | ||
14 | |||
15 | private autoResolutionPossible: boolean | ||
16 | private currentResolutionLabel: string | ||
17 | |||
18 | constructor (player: Player, options: any) { | ||
19 | options.selectable = true | ||
20 | |||
21 | super(player, options) | ||
22 | |||
23 | this.autoResolutionPossible = true | ||
24 | this.currentResolutionLabel = '' | ||
25 | |||
26 | this.label = options.label | ||
27 | this.labels = options.labels | ||
28 | this.id = options.id | ||
29 | this.callback = options.callback | ||
30 | |||
31 | if (player.webtorrent) { | ||
32 | player.webtorrent().on('videoFileUpdate', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) | ||
33 | |||
34 | // We only want to disable the "Auto" item | ||
35 | if (this.id === -1) { | ||
36 | player.webtorrent().on('autoResolutionUpdate', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) | ||
37 | } | ||
38 | } | ||
39 | |||
40 | // TODO: update on HLS change | ||
41 | } | ||
42 | |||
43 | handleClick (event: any) { | ||
44 | // Auto button disabled? | ||
45 | if (this.autoResolutionPossible === false && this.id === -1) return | ||
46 | |||
47 | super.handleClick(event) | ||
48 | |||
49 | this.callback(this.id) | ||
50 | } | ||
51 | |||
52 | updateSelection (data: ResolutionUpdateData) { | ||
53 | if (this.id === -1) { | ||
54 | this.currentResolutionLabel = this.labels[data.resolutionId] | ||
55 | } | ||
56 | |||
57 | // Automatic resolution only | ||
58 | if (data.auto === true) { | ||
59 | this.selected(this.id === -1) | ||
60 | return | ||
61 | } | ||
62 | |||
63 | this.selected(this.id === data.resolutionId) | ||
64 | } | ||
65 | |||
66 | updateAutoResolution (data: AutoResolutionUpdateData) { | ||
67 | // Check if the auto resolution is enabled or not | ||
68 | if (data.possible === false) { | ||
69 | this.addClass('disabled') | ||
70 | } else { | ||
71 | this.removeClass('disabled') | ||
72 | } | ||
73 | |||
74 | this.autoResolutionPossible = data.possible | ||
75 | } | ||
76 | |||
77 | getLabel () { | ||
78 | if (this.id === -1) { | ||
79 | return this.label + ' <small>' + this.currentResolutionLabel + '</small>' | ||
80 | } | ||
81 | |||
82 | return this.label | ||
83 | } | ||
84 | } | ||
85 | MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem) | ||
86 | |||
87 | export { ResolutionMenuItem } | ||