From 8e4fba97b26090e0c77ee9591058cd34ef9d2f55 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 18 Aug 2023 09:48:45 +0200 Subject: Automatically adapt player ratio --- client/src/assets/player/peertube-player.ts | 4 +++- .../assets/player/shared/metrics/metrics-plugin.ts | 6 +++--- .../p2p-media-loader/p2p-media-loader-plugin.ts | 8 ++++++++ .../player/shared/peertube/peertube-plugin.ts | 21 +++++++++++++++++++++ .../player/shared/web-video/web-video-plugin.ts | 8 ++++++++ .../assets/player/types/peertube-player-options.ts | 5 +++++ .../assets/player/types/peertube-videojs-typings.ts | 5 +++++ 7 files changed, 53 insertions(+), 4 deletions(-) (limited to 'client/src/assets') diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts index 4da681a08..111b4645b 100644 --- a/client/src/assets/player/peertube-player.ts +++ b/client/src/assets/player/peertube-player.ts @@ -364,7 +364,9 @@ export class PeerTubePlayer { videoUUID: () => this.currentLoadOptions.videoUUID, subtitle: () => this.currentLoadOptions.subtitle, - poster: () => this.currentLoadOptions.poster + poster: () => this.currentLoadOptions.poster, + + autoPlayerRatio: this.options.autoPlayerRatio }, metrics: { mode: () => this.currentLoadOptions.mode, diff --git a/client/src/assets/player/shared/metrics/metrics-plugin.ts b/client/src/assets/player/shared/metrics/metrics-plugin.ts index 0ad16338c..a581d7931 100644 --- a/client/src/assets/player/shared/metrics/metrics-plugin.ts +++ b/client/src/assets/player/shared/metrics/metrics-plugin.ts @@ -140,10 +140,10 @@ class MetricsPlugin extends Plugin { private trackBytes () { this.player.on('network-info', (_event, data: PlayerNetworkInfo) => { - this.downloadedBytesHTTP += Math.round(data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)) - this.downloadedBytesP2P += Math.round((data.p2p?.downloaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.downloaded || 0)) + this.downloadedBytesHTTP += Math.max(Math.round(data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)), 0) + this.downloadedBytesP2P += Math.max(Math.round((data.p2p?.downloaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.downloaded || 0)), 0) - this.uploadedBytesP2P += Math.round((data.p2p?.uploaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.uploaded || 0)) + this.uploadedBytesP2P += Math.max(Math.round((data.p2p?.uploaded || 0) - (this.lastPlayerNetworkInfo?.p2p?.uploaded || 0)), 0) this.p2pPeers = data.p2p?.peersP2POnly this.p2pEnabled = !!data.p2p diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts index 1e47fe486..ee617ce8a 100644 --- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts +++ b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts @@ -119,6 +119,14 @@ class P2pMediaLoaderPlugin extends Plugin { this.runStats() this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change')) + + this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_event, data) => { + if (Array.isArray(data.levels) && data.levels.length > 1) { + const level = data.levels[0] + + this.player.trigger('video-ratio-changed', { ratio: level.width / level.height }) + } + }) } private runStats () { diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts index cf866723c..7aeae2670 100644 --- a/client/src/assets/player/shared/peertube/peertube-plugin.ts +++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts @@ -115,6 +115,8 @@ class PeerTubePlugin extends Plugin { this.hideFatalError() }) }) + + this.initOnRatioChange() } dispose () { @@ -210,6 +212,25 @@ class PeerTubePlugin extends Plugin { this.runUserViewing() } + private initOnRatioChange () { + if (!this.options.autoPlayerRatio) return + + const defaultRatio = getComputedStyle(this.player.el()).getPropertyValue(this.options.autoPlayerRatio.cssRatioVariable) + + this.player.on('video-ratio-changed', (_event, data: { ratio: number }) => { + const el = this.player.el() as HTMLElement + + // In portrait screen mode, we allow player with bigger height size than width + const portraitMode = getComputedStyle(el).getPropertyValue(this.options.autoPlayerRatio.cssPlayerPortraitModeVariable) === '1' + + const currentRatio = !portraitMode && data.ratio < 1 + ? defaultRatio + : data.ratio + + el.style.setProperty('--player-ratio', currentRatio + '') + }) + } + // --------------------------------------------------------------------------- private runUserViewing () { diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts index 18d911108..8f4db0680 100644 --- a/client/src/assets/player/shared/web-video/web-video-plugin.ts +++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts @@ -19,6 +19,7 @@ class WebVideoPlugin extends Plugin { private onErrorHandler: () => void private onPlayHandler: () => void + private onLoadedMetadata: () => void constructor (player: videojs.Player, options?: WebVideoPluginOptions) { super(player, options) @@ -28,6 +29,12 @@ class WebVideoPlugin extends Plugin { this.updateVideoFile({ videoFile: this.pickAverageVideoFile(), isUserResolutionChange: false }) + this.onLoadedMetadata = () => { + player.trigger('video-ratio-changed', { ratio: this.player.videoWidth() / this.player.videoHeight() }) + } + + player.on('loadedmetadata', this.onLoadedMetadata) + player.ready(() => { this.buildQualities() @@ -43,6 +50,7 @@ class WebVideoPlugin extends Plugin { dispose () { clearInterval(this.networkInfoInterval) + if (this.onLoadedMetadata) this.player.off('loadedmetadata', this.onLoadedMetadata) if (this.onErrorHandler) this.player.off('error', this.onErrorHandler) if (this.onPlayHandler) this.player.off('canplay', this.onPlayHandler) diff --git a/client/src/assets/player/types/peertube-player-options.ts b/client/src/assets/player/types/peertube-player-options.ts index 352f7d8dd..6fb2f7913 100644 --- a/client/src/assets/player/types/peertube-player-options.ts +++ b/client/src/assets/player/types/peertube-player-options.ts @@ -38,6 +38,11 @@ export type PeerTubePlayerContructorOptions = { language: string pluginsManager: PluginsManager + + autoPlayerRatio?: { + cssRatioVariable: string + cssPlayerPortraitModeVariable: string + } } export type PeerTubePlayerLoadOptions = { diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts index dae9e14c8..27fbda31d 100644 --- a/client/src/assets/player/types/peertube-videojs-typings.ts +++ b/client/src/assets/player/types/peertube-videojs-typings.ts @@ -104,6 +104,11 @@ type VideoJSStoryboard = { } type PeerTubePluginOptions = { + autoPlayerRatio: { + cssRatioVariable: string + cssPlayerPortraitModeVariable: string + } + hasAutoplay: () => videojs.Autoplay videoViewUrl: () => string -- cgit v1.2.3