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-button.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-button.ts')
-rw-r--r-- | client/src/assets/player/videojs-components/resolution-menu-button.ts | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts new file mode 100644 index 000000000..2847de470 --- /dev/null +++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts | |||
@@ -0,0 +1,84 @@ | |||
1 | // FIXME: something weird with our path definition in tsconfig and typings | ||
2 | // @ts-ignore | ||
3 | import { Player } from 'video.js' | ||
4 | |||
5 | import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' | ||
6 | import { ResolutionMenuItem } from './resolution-menu-item' | ||
7 | |||
8 | const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu') | ||
9 | const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton') | ||
10 | class ResolutionMenuButton extends MenuButton { | ||
11 | label: HTMLElement | ||
12 | |||
13 | constructor (player: Player, options: any) { | ||
14 | super(player, options) | ||
15 | this.player = player | ||
16 | |||
17 | player.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data)) | ||
18 | |||
19 | if (player.webtorrent) { | ||
20 | player.webtorrent().on('videoFileUpdate', () => setTimeout(() => this.trigger('updateLabel'), 0)) | ||
21 | } | ||
22 | } | ||
23 | |||
24 | createEl () { | ||
25 | const el = super.createEl() | ||
26 | |||
27 | this.labelEl_ = videojsUntyped.dom.createEl('div', { | ||
28 | className: 'vjs-resolution-value' | ||
29 | }) | ||
30 | |||
31 | el.appendChild(this.labelEl_) | ||
32 | |||
33 | return el | ||
34 | } | ||
35 | |||
36 | updateARIAAttributes () { | ||
37 | this.el().setAttribute('aria-label', 'Quality') | ||
38 | } | ||
39 | |||
40 | createMenu () { | ||
41 | return new Menu(this.player_) | ||
42 | } | ||
43 | |||
44 | buildCSSClass () { | ||
45 | return super.buildCSSClass() + ' vjs-resolution-button' | ||
46 | } | ||
47 | |||
48 | buildWrapperCSSClass () { | ||
49 | return 'vjs-resolution-control ' + super.buildWrapperCSSClass() | ||
50 | } | ||
51 | |||
52 | private buildQualities (data: LoadedQualityData) { | ||
53 | // The automatic resolution item will need other labels | ||
54 | const labels: { [ id: number ]: string } = {} | ||
55 | |||
56 | for (const d of data.qualityData.video) { | ||
57 | this.menu.addChild(new ResolutionMenuItem( | ||
58 | this.player_, | ||
59 | { | ||
60 | id: d.id, | ||
61 | label: d.label, | ||
62 | selected: d.selected, | ||
63 | callback: data.qualitySwitchCallback | ||
64 | }) | ||
65 | ) | ||
66 | |||
67 | labels[d.id] = d.label | ||
68 | } | ||
69 | |||
70 | this.menu.addChild(new ResolutionMenuItem( | ||
71 | this.player_, | ||
72 | { | ||
73 | id: -1, | ||
74 | label: this.player_.localize('Auto'), | ||
75 | labels, | ||
76 | callback: data.qualitySwitchCallback, | ||
77 | selected: true // By default, in auto mode | ||
78 | } | ||
79 | )) | ||
80 | } | ||
81 | } | ||
82 | ResolutionMenuButton.prototype.controlText_ = 'Quality' | ||
83 | |||
84 | MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) | ||