]>
Commit | Line | Data |
---|---|---|
1 | import videojs from 'video.js' | |
2 | import { ResolutionMenuItem } from './resolution-menu-item' | |
3 | ||
4 | const Menu = videojs.getComponent('Menu') | |
5 | const MenuButton = videojs.getComponent('MenuButton') | |
6 | class ResolutionMenuButton extends MenuButton { | |
7 | labelEl_: HTMLElement | |
8 | ||
9 | constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) { | |
10 | super(player, options) | |
11 | ||
12 | this.controlText('Quality') | |
13 | ||
14 | player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities()) | |
15 | ||
16 | // For parent | |
17 | player.peertubeResolutions().on('resolutionChanged', () => { | |
18 | setTimeout(() => this.trigger('labelUpdated')) | |
19 | }) | |
20 | } | |
21 | ||
22 | createEl () { | |
23 | const el = super.createEl() | |
24 | ||
25 | this.labelEl_ = videojs.dom.createEl('div', { | |
26 | className: 'vjs-resolution-value' | |
27 | }) as HTMLElement | |
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 | const children = this.menu.children() | |
53 | ||
54 | for (const child of children) { | |
55 | if (component !== child) { | |
56 | (child as videojs.MenuItem).selected(false) | |
57 | } | |
58 | } | |
59 | }) | |
60 | } | |
61 | ||
62 | private buildQualities () { | |
63 | for (const d of this.player().peertubeResolutions().getResolutions()) { | |
64 | const label = d.label === '0p' | |
65 | ? this.player().localize('Audio-only') | |
66 | : d.label | |
67 | ||
68 | this.menu.addChild(new ResolutionMenuItem( | |
69 | this.player_, | |
70 | { | |
71 | id: d.id + '', | |
72 | resolutionId: d.id, | |
73 | label, | |
74 | selected: d.selected | |
75 | }) | |
76 | ) | |
77 | } | |
78 | ||
79 | for (const m of this.menu.children()) { | |
80 | this.addClickListener(m) | |
81 | } | |
82 | ||
83 | this.trigger('menuChanged') | |
84 | } | |
85 | } | |
86 | ||
87 | videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton) |