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