]>
Commit | Line | Data |
---|---|---|
c199c427 C |
1 | // FIXME: something weird with our path definition in tsconfig and typings |
2 | // @ts-ignore | |
3 | import { Player } from 'video.js' | |
4 | ||
c6352f2c C |
5 | import { 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 | ||
c199c427 | 13 | constructor (player: Player, options: any) { |
c6352f2c | 14 | super(player, options) |
c6352f2c C |
15 | this.player = player |
16 | ||
17 | player.peertube().on('videoFileUpdate', () => this.updateLabel()) | |
c4082b8b | 18 | player.peertube().on('autoResolutionUpdate', () => this.updateLabel()) |
c6352f2c C |
19 | } |
20 | ||
21 | createEl () { | |
22 | const el = super.createEl() | |
23 | ||
24 | this.labelEl_ = videojsUntyped.dom.createEl('div', { | |
25 | className: 'vjs-resolution-value', | |
a8462c8e | 26 | innerHTML: this.buildLabelHTML() |
c6352f2c C |
27 | }) |
28 | ||
29 | el.appendChild(this.labelEl_) | |
30 | ||
31 | return el | |
32 | } | |
33 | ||
34 | updateARIAAttributes () { | |
35 | this.el().setAttribute('aria-label', 'Quality') | |
36 | } | |
37 | ||
38 | createMenu () { | |
b891f9bc | 39 | const menu = new Menu(this.player_) |
c6352f2c | 40 | for (const videoFile of this.player_.peertube().videoFiles) { |
3a6f351b C |
41 | let label = videoFile.resolution.label |
42 | if (videoFile.fps && videoFile.fps >= 50) { | |
43 | label += videoFile.fps | |
44 | } | |
45 | ||
c6352f2c C |
46 | menu.addChild(new ResolutionMenuItem( |
47 | this.player_, | |
48 | { | |
49 | id: videoFile.resolution.id, | |
3a6f351b | 50 | label, |
c6352f2c C |
51 | src: videoFile.magnetUri |
52 | }) | |
53 | ) | |
54 | } | |
55 | ||
a8462c8e C |
56 | menu.addChild(new ResolutionMenuItem( |
57 | this.player_, | |
58 | { | |
59 | id: -1, | |
e945b184 | 60 | label: this.player_.localize('Auto'), |
a8462c8e C |
61 | src: null |
62 | } | |
63 | )) | |
64 | ||
c6352f2c C |
65 | return menu |
66 | } | |
67 | ||
68 | updateLabel () { | |
69 | if (!this.labelEl_) return | |
70 | ||
a8462c8e | 71 | this.labelEl_.innerHTML = this.buildLabelHTML() |
c6352f2c C |
72 | } |
73 | ||
74 | buildCSSClass () { | |
75 | return super.buildCSSClass() + ' vjs-resolution-button' | |
76 | } | |
77 | ||
78 | buildWrapperCSSClass () { | |
79 | return 'vjs-resolution-control ' + super.buildWrapperCSSClass() | |
80 | } | |
a8462c8e C |
81 | |
82 | private buildLabelHTML () { | |
83 | return this.player_.peertube().getCurrentResolutionLabel() | |
84 | } | |
c6352f2c | 85 | } |
e945b184 C |
86 | ResolutionMenuButton.prototype.controlText_ = 'Quality' |
87 | ||
c6352f2c | 88 | MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) |