aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/resolution-menu-button.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets/player/resolution-menu-button.ts')
-rw-r--r--client/src/assets/player/resolution-menu-button.ts68
1 files changed, 68 insertions, 0 deletions
diff --git a/client/src/assets/player/resolution-menu-button.ts b/client/src/assets/player/resolution-menu-button.ts
new file mode 100644
index 000000000..c927b084d
--- /dev/null
+++ b/client/src/assets/player/resolution-menu-button.ts
@@ -0,0 +1,68 @@
1import * as videojs from 'video.js'
2import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
3import { ResolutionMenuItem } from './resolution-menu-item'
4
5const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
6const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
7class ResolutionMenuButton extends MenuButton {
8 label: HTMLElement
9
10 constructor (player: videojs.Player, options) {
11 options.label = 'Quality'
12 super(player, options)
13
14 this.controlText_ = 'Quality'
15 this.player = player
16
17 player.peertube().on('videoFileUpdate', () => this.updateLabel())
18 }
19
20 createEl () {
21 const el = super.createEl()
22
23 this.labelEl_ = videojsUntyped.dom.createEl('div', {
24 className: 'vjs-resolution-value',
25 innerHTML: this.player_.peertube().getCurrentResolutionLabel()
26 })
27
28 el.appendChild(this.labelEl_)
29
30 return el
31 }
32
33 updateARIAAttributes () {
34 this.el().setAttribute('aria-label', 'Quality')
35 }
36
37 createMenu () {
38 const menu = new Menu(this.player())
39
40 for (const videoFile of this.player_.peertube().videoFiles) {
41 menu.addChild(new ResolutionMenuItem(
42 this.player_,
43 {
44 id: videoFile.resolution.id,
45 label: videoFile.resolution.label,
46 src: videoFile.magnetUri
47 })
48 )
49 }
50
51 return menu
52 }
53
54 updateLabel () {
55 if (!this.labelEl_) return
56
57 this.labelEl_.innerHTML = this.player_.peertube().getCurrentResolutionLabel()
58 }
59
60 buildCSSClass () {
61 return super.buildCSSClass() + ' vjs-resolution-button'
62 }
63
64 buildWrapperCSSClass () {
65 return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
66 }
67}
68MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)