diff options
author | Chocobozzz <me@florianbigard.com> | 2022-03-14 10:27:05 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-03-14 10:27:05 +0100 |
commit | 9af2accee68082e4e1160a4e4a7036451262be02 (patch) | |
tree | 50d74a901068c00cf16d65133bc0ddb842293b79 /client/src/assets/player/settings/resolution-menu-button.ts | |
parent | 637a10afb5d539b04a653abbe9b0309eb4cbf7c6 (diff) | |
download | PeerTube-9af2accee68082e4e1160a4e4a7036451262be02.tar.gz PeerTube-9af2accee68082e4e1160a4e4a7036451262be02.tar.zst PeerTube-9af2accee68082e4e1160a4e4a7036451262be02.zip |
Reorganize videojs components
Diffstat (limited to 'client/src/assets/player/settings/resolution-menu-button.ts')
-rw-r--r-- | client/src/assets/player/settings/resolution-menu-button.ts | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/client/src/assets/player/settings/resolution-menu-button.ts b/client/src/assets/player/settings/resolution-menu-button.ts new file mode 100644 index 000000000..8bd5b4f03 --- /dev/null +++ b/client/src/assets/player/settings/resolution-menu-button.ts | |||
@@ -0,0 +1,86 @@ | |||
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 | label, | ||
73 | selected: d.selected | ||
74 | }) | ||
75 | ) | ||
76 | } | ||
77 | |||
78 | for (const m of this.menu.children()) { | ||
79 | this.addClickListener(m) | ||
80 | } | ||
81 | |||
82 | this.trigger('menuChanged') | ||
83 | } | ||
84 | } | ||
85 | |||
86 | videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton) | ||