]>
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 | ||
2adfc7ea | 5 | import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' |
c6352f2c C |
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 | |
16b55259 C |
12 | labelEl_: any |
13 | player: Player | |
c6352f2c | 14 | |
c199c427 | 15 | constructor (player: Player, options: any) { |
c6352f2c | 16 | super(player, options) |
c6352f2c C |
17 | this.player = player |
18 | ||
3b6f205c | 19 | player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data)) |
2adfc7ea | 20 | |
3b6f205c | 21 | player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0)) |
c6352f2c C |
22 | } |
23 | ||
24 | createEl () { | |
25 | const el = super.createEl() | |
26 | ||
27 | this.labelEl_ = videojsUntyped.dom.createEl('div', { | |
2adfc7ea | 28 | className: 'vjs-resolution-value' |
c6352f2c C |
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 () { | |
2adfc7ea C |
41 | return new Menu(this.player_) |
42 | } | |
43 | ||
44 | buildCSSClass () { | |
45 | return super.buildCSSClass() + ' vjs-resolution-button' | |
46 | } | |
3a6f351b | 47 | |
2adfc7ea C |
48 | buildWrapperCSSClass () { |
49 | return 'vjs-resolution-control ' + super.buildWrapperCSSClass() | |
50 | } | |
51 | ||
3b6f205c C |
52 | private addClickListener (component: any) { |
53 | component.on('click', () => { | |
c4710631 | 54 | const children = this.menu.children() |
3b6f205c C |
55 | |
56 | for (const child of children) { | |
57 | if (component !== child) { | |
58 | child.selected(false) | |
59 | } | |
60 | } | |
61 | }) | |
62 | } | |
63 | ||
2adfc7ea C |
64 | private buildQualities (data: LoadedQualityData) { |
65 | // The automatic resolution item will need other labels | |
66 | const labels: { [ id: number ]: string } = {} | |
67 | ||
3b6f205c C |
68 | data.qualityData.video.sort((a, b) => { |
69 | if (a.id > b.id) return -1 | |
70 | if (a.id === b.id) return 0 | |
71 | return 1 | |
72 | }) | |
73 | ||
2adfc7ea | 74 | for (const d of data.qualityData.video) { |
3b6f205c C |
75 | // Skip auto resolution, we'll add it ourselves |
76 | if (d.id === -1) continue | |
77 | ||
3a149e9f C |
78 | const label = d.id === 0 |
79 | ? this.player.localize('Audio-only') | |
80 | : d.label | |
81 | ||
2adfc7ea | 82 | this.menu.addChild(new ResolutionMenuItem( |
c6352f2c C |
83 | this.player_, |
84 | { | |
2adfc7ea | 85 | id: d.id, |
3a149e9f | 86 | label, |
2adfc7ea C |
87 | selected: d.selected, |
88 | callback: data.qualitySwitchCallback | |
c6352f2c C |
89 | }) |
90 | ) | |
2adfc7ea C |
91 | |
92 | labels[d.id] = d.label | |
c6352f2c C |
93 | } |
94 | ||
2adfc7ea | 95 | this.menu.addChild(new ResolutionMenuItem( |
a8462c8e C |
96 | this.player_, |
97 | { | |
98 | id: -1, | |
e945b184 | 99 | label: this.player_.localize('Auto'), |
2adfc7ea C |
100 | labels, |
101 | callback: data.qualitySwitchCallback, | |
102 | selected: true // By default, in auto mode | |
a8462c8e C |
103 | } |
104 | )) | |
3b6f205c C |
105 | |
106 | for (const m of this.menu.children()) { | |
107 | this.addClickListener(m) | |
108 | } | |
109 | ||
110 | this.trigger('menuChanged') | |
a8462c8e | 111 | } |
c6352f2c | 112 | } |
e945b184 C |
113 | ResolutionMenuButton.prototype.controlText_ = 'Quality' |
114 | ||
c6352f2c | 115 | MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) |