From 57d6503286b114fee61b5e4725825e2490dcac29 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Mar 2022 14:28:20 +0100 Subject: Reorganize player files --- .../shared/settings/resolution-menu-button.ts | 86 ++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 client/src/assets/player/shared/settings/resolution-menu-button.ts (limited to 'client/src/assets/player/shared/settings/resolution-menu-button.ts') diff --git a/client/src/assets/player/shared/settings/resolution-menu-button.ts b/client/src/assets/player/shared/settings/resolution-menu-button.ts new file mode 100644 index 000000000..8bd5b4f03 --- /dev/null +++ b/client/src/assets/player/shared/settings/resolution-menu-button.ts @@ -0,0 +1,86 @@ +import videojs from 'video.js' +import { ResolutionMenuItem } from './resolution-menu-item' + +const Menu = videojs.getComponent('Menu') +const MenuButton = videojs.getComponent('MenuButton') +class ResolutionMenuButton extends MenuButton { + labelEl_: HTMLElement + + constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) { + super(player, options) + + this.controlText('Quality') + + player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities()) + + // For parent + player.peertubeResolutions().on('resolutionChanged', () => { + setTimeout(() => this.trigger('labelUpdated')) + }) + } + + createEl () { + const el = super.createEl() + + this.labelEl_ = videojs.dom.createEl('div', { + className: 'vjs-resolution-value' + }) as HTMLElement + + el.appendChild(this.labelEl_) + + return el + } + + updateARIAAttributes () { + this.el().setAttribute('aria-label', 'Quality') + } + + createMenu () { + return new Menu(this.player_) + } + + buildCSSClass () { + return super.buildCSSClass() + ' vjs-resolution-button' + } + + buildWrapperCSSClass () { + return 'vjs-resolution-control ' + super.buildWrapperCSSClass() + } + + private addClickListener (component: any) { + component.on('click', () => { + const children = this.menu.children() + + for (const child of children) { + if (component !== child) { + (child as videojs.MenuItem).selected(false) + } + } + }) + } + + private buildQualities () { + for (const d of this.player().peertubeResolutions().getResolutions()) { + const label = d.label === '0p' + ? this.player().localize('Audio-only') + : d.label + + this.menu.addChild(new ResolutionMenuItem( + this.player_, + { + id: d.id, + label, + selected: d.selected + }) + ) + } + + for (const m of this.menu.children()) { + this.addClickListener(m) + } + + this.trigger('menuChanged') + } +} + +videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton) -- cgit v1.2.3