From 3b6f205c34bb931de0323581edf991ca33256e6b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 24 Jan 2019 10:16:30 +0100 Subject: Correctly implement p2p-media-loader --- .../player/videojs-components/p2p-info-button.ts | 16 ++++++----- .../videojs-components/resolution-menu-button.ts | 33 +++++++++++++++++++--- .../videojs-components/resolution-menu-item.ts | 18 +++++------- .../videojs-components/settings-menu-item.ts | 10 +++++-- 4 files changed, 53 insertions(+), 24 deletions(-) (limited to 'client/src/assets/player/videojs-components') diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts index 03a5d29f0..2fc4c4562 100644 --- a/client/src/assets/player/videojs-components/p2p-info-button.ts +++ b/client/src/assets/player/videojs-components/p2p-info-button.ts @@ -1,4 +1,4 @@ -import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' +import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' import { bytes } from '../utils' const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button') @@ -65,7 +65,7 @@ class P2pInfoButton extends Button { subDivHttp.appendChild(subDivHttpText) div.appendChild(subDivHttp) - this.player_.on('p2pInfo', (event: any, data: any) => { + this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => { // We are in HTTP fallback if (!data) { subDivHttp.className = 'vjs-peertube-displayed' @@ -74,11 +74,13 @@ class P2pInfoButton extends Button { return } - const downloadSpeed = bytes(data.downloadSpeed) - const uploadSpeed = bytes(data.uploadSpeed) - const totalDownloaded = bytes(data.downloaded) - const totalUploaded = bytes(data.uploaded) - const numPeers = data.numPeers + const p2pStats = data.p2p + + const downloadSpeed = bytes(p2pStats.downloadSpeed) + const uploadSpeed = bytes(p2pStats.uploadSpeed) + const totalDownloaded = bytes(p2pStats.downloaded) + const totalUploaded = bytes(p2pStats.uploaded) + const numPeers = p2pStats.numPeers subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' + this.player_.localize('Total uploaded: ' + totalUploaded.join(' ')) diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts index 2847de470..abcc16411 100644 --- a/client/src/assets/player/videojs-components/resolution-menu-button.ts +++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts @@ -14,11 +14,9 @@ class ResolutionMenuButton extends MenuButton { super(player, options) this.player = player - player.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data)) + player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data)) - if (player.webtorrent) { - player.webtorrent().on('videoFileUpdate', () => setTimeout(() => this.trigger('updateLabel'), 0)) - } + player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0)) } createEl () { @@ -49,11 +47,32 @@ class ResolutionMenuButton extends MenuButton { return 'vjs-resolution-control ' + super.buildWrapperCSSClass() } + private addClickListener (component: any) { + component.on('click', () => { + let children = this.menu.children() + + for (const child of children) { + if (component !== child) { + child.selected(false) + } + } + }) + } + private buildQualities (data: LoadedQualityData) { // The automatic resolution item will need other labels const labels: { [ id: number ]: string } = {} + data.qualityData.video.sort((a, b) => { + if (a.id > b.id) return -1 + if (a.id === b.id) return 0 + return 1 + }) + for (const d of data.qualityData.video) { + // Skip auto resolution, we'll add it ourselves + if (d.id === -1) continue + this.menu.addChild(new ResolutionMenuItem( this.player_, { @@ -77,6 +96,12 @@ class ResolutionMenuButton extends MenuButton { selected: true // By default, in auto mode } )) + + for (const m of this.menu.children()) { + this.addClickListener(m) + } + + this.trigger('menuChanged') } } ResolutionMenuButton.prototype.controlText_ = 'Quality' diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts index cc1c79739..6c42fefd2 100644 --- a/client/src/assets/player/videojs-components/resolution-menu-item.ts +++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts @@ -28,16 +28,12 @@ class ResolutionMenuItem extends MenuItem { this.id = options.id this.callback = options.callback - if (player.webtorrent) { - player.webtorrent().on('videoFileUpdate', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) + player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data)) - // We only want to disable the "Auto" item - if (this.id === -1) { - player.webtorrent().on('autoResolutionUpdate', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) - } + // We only want to disable the "Auto" item + if (this.id === -1) { + player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data)) } - - // TODO: update on HLS change } handleClick (event: any) { @@ -46,12 +42,12 @@ class ResolutionMenuItem extends MenuItem { super.handleClick(event) - this.callback(this.id) + this.callback(this.id, 'video') } updateSelection (data: ResolutionUpdateData) { if (this.id === -1) { - this.currentResolutionLabel = this.labels[data.resolutionId] + this.currentResolutionLabel = this.labels[data.id] } // Automatic resolution only @@ -60,7 +56,7 @@ class ResolutionMenuItem extends MenuItem { return } - this.selected(this.id === data.resolutionId) + this.selected(this.id === data.id) } updateAutoResolution (data: AutoResolutionUpdateData) { diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts index b9a430290..f14959f9c 100644 --- a/client/src/assets/player/videojs-components/settings-menu-item.ts +++ b/client/src/assets/player/videojs-components/settings-menu-item.ts @@ -223,6 +223,11 @@ class SettingsMenuItem extends MenuItem { this.subMenu.on('updateLabel', () => { this.update() }) + this.subMenu.on('menuChanged', () => { + this.bindClickEvents() + this.setSize() + this.update() + }) this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_) this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_) @@ -230,7 +235,7 @@ class SettingsMenuItem extends MenuItem { this.update() this.createBackButton() - this.getSize() + this.setSize() this.bindClickEvents() // prefixed event listeners for CSS TransitionEnd @@ -292,8 +297,9 @@ class SettingsMenuItem extends MenuItem { // save size of submenus on first init // if number of submenu items change dynamically more logic will be needed - getSize () { + setSize () { this.dialog.removeClass('vjs-hidden') + videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden') this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_) this.setMargin() this.dialog.addClass('vjs-hidden') -- cgit v1.2.3