From 2adfc7ea9a1f858db874df9fe322e7ae833db77c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 23 Jan 2019 15:36:45 +0100 Subject: Refractor videojs player Add fake p2p-media-loader plugin --- .../videojs-components/resolution-menu-button.ts | 84 ++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 client/src/assets/player/videojs-components/resolution-menu-button.ts (limited to 'client/src/assets/player/videojs-components/resolution-menu-button.ts') diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts new file mode 100644 index 000000000..2847de470 --- /dev/null +++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts @@ -0,0 +1,84 @@ +// FIXME: something weird with our path definition in tsconfig and typings +// @ts-ignore +import { Player } from 'video.js' + +import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' +import { ResolutionMenuItem } from './resolution-menu-item' + +const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu') +const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton') +class ResolutionMenuButton extends MenuButton { + label: HTMLElement + + constructor (player: Player, options: any) { + super(player, options) + this.player = player + + player.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data)) + + if (player.webtorrent) { + player.webtorrent().on('videoFileUpdate', () => setTimeout(() => this.trigger('updateLabel'), 0)) + } + } + + createEl () { + const el = super.createEl() + + this.labelEl_ = videojsUntyped.dom.createEl('div', { + className: 'vjs-resolution-value' + }) + + 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 buildQualities (data: LoadedQualityData) { + // The automatic resolution item will need other labels + const labels: { [ id: number ]: string } = {} + + for (const d of data.qualityData.video) { + this.menu.addChild(new ResolutionMenuItem( + this.player_, + { + id: d.id, + label: d.label, + selected: d.selected, + callback: data.qualitySwitchCallback + }) + ) + + labels[d.id] = d.label + } + + this.menu.addChild(new ResolutionMenuItem( + this.player_, + { + id: -1, + label: this.player_.localize('Auto'), + labels, + callback: data.qualitySwitchCallback, + selected: true // By default, in auto mode + } + )) + } +} +ResolutionMenuButton.prototype.controlText_ = 'Quality' + +MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton) -- cgit v1.2.3