]>
Commit | Line | Data |
---|---|---|
512decf3 | 1 | import videojs from 'video.js' |
c6352f2c C |
2 | import { ResolutionMenuItem } from './resolution-menu-item' |
3 | ||
f5fcd9f7 C |
4 | const Menu = videojs.getComponent('Menu') |
5 | const MenuButton = videojs.getComponent('MenuButton') | |
c6352f2c | 6 | class ResolutionMenuButton extends MenuButton { |
f5fcd9f7 | 7 | labelEl_: HTMLElement |
c6352f2c | 8 | |
7e37e111 | 9 | constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) { |
c6352f2c | 10 | super(player, options) |
c6352f2c | 11 | |
f5fcd9f7 C |
12 | this.controlText('Quality') |
13 | ||
e367da94 | 14 | player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities()) |
f2a16d93 | 15 | player.peertubeResolutions().on('resolutionRemoved', () => this.cleanupQualities()) |
2adfc7ea | 16 | |
e367da94 C |
17 | // For parent |
18 | player.peertubeResolutions().on('resolutionChanged', () => { | |
19 | setTimeout(() => this.trigger('labelUpdated')) | |
20 | }) | |
c6352f2c C |
21 | } |
22 | ||
23 | createEl () { | |
24 | const el = super.createEl() | |
25 | ||
f5fcd9f7 | 26 | this.labelEl_ = videojs.dom.createEl('div', { |
2adfc7ea | 27 | className: 'vjs-resolution-value' |
f5fcd9f7 | 28 | }) as HTMLElement |
c6352f2c C |
29 | |
30 | el.appendChild(this.labelEl_) | |
31 | ||
32 | return el | |
33 | } | |
34 | ||
35 | updateARIAAttributes () { | |
36 | this.el().setAttribute('aria-label', 'Quality') | |
37 | } | |
38 | ||
39 | createMenu () { | |
2adfc7ea C |
40 | return new Menu(this.player_) |
41 | } | |
42 | ||
43 | buildCSSClass () { | |
44 | return super.buildCSSClass() + ' vjs-resolution-button' | |
45 | } | |
3a6f351b | 46 | |
2adfc7ea C |
47 | buildWrapperCSSClass () { |
48 | return 'vjs-resolution-control ' + super.buildWrapperCSSClass() | |
49 | } | |
50 | ||
3b6f205c C |
51 | private addClickListener (component: any) { |
52 | component.on('click', () => { | |
c4710631 | 53 | const children = this.menu.children() |
3b6f205c C |
54 | |
55 | for (const child of children) { | |
56 | if (component !== child) { | |
f5fcd9f7 | 57 | (child as videojs.MenuItem).selected(false) |
3b6f205c C |
58 | } |
59 | } | |
60 | }) | |
61 | } | |
62 | ||
e367da94 C |
63 | private buildQualities () { |
64 | for (const d of this.player().peertubeResolutions().getResolutions()) { | |
8ff604c7 | 65 | const label = d.label === '0p' |
f5fcd9f7 | 66 | ? this.player().localize('Audio-only') |
3a149e9f C |
67 | : d.label |
68 | ||
2adfc7ea | 69 | this.menu.addChild(new ResolutionMenuItem( |
c6352f2c C |
70 | this.player_, |
71 | { | |
f552ca84 C |
72 | id: d.id + '', |
73 | resolutionId: d.id, | |
3a149e9f | 74 | label, |
e367da94 | 75 | selected: d.selected |
c6352f2c C |
76 | }) |
77 | ) | |
78 | } | |
79 | ||
3b6f205c C |
80 | for (const m of this.menu.children()) { |
81 | this.addClickListener(m) | |
82 | } | |
83 | ||
84 | this.trigger('menuChanged') | |
a8462c8e | 85 | } |
f2a16d93 | 86 | |
87 | private cleanupQualities () { | |
88 | const resolutions = this.player().peertubeResolutions().getResolutions() | |
89 | ||
90 | this.menu.children().forEach((children: ResolutionMenuItem) => { | |
91 | if (children.resolutionId === undefined) { | |
92 | return | |
93 | } | |
94 | ||
95 | if (resolutions.find(r => r.id === children.resolutionId)) { | |
96 | return | |
97 | } | |
98 | ||
99 | this.menu.removeChild(children) | |
100 | }) | |
101 | ||
102 | this.trigger('menuChanged') | |
103 | } | |
c6352f2c | 104 | } |
e945b184 | 105 | |
f5fcd9f7 | 106 | videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton) |