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