diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts index 23c0fba5b..b74855187 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -778,6 +778,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { videoShortUUID: video.shortUUID, videoUUID: video.uuid, + videoRatio: video.aspectRatio, + previousVideo: { enabled: this.playlist && this.videoWatchPlaylist.hasPreviousVideo(), diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts index b6b6382fd..df0cc15e7 100644 --- a/client/src/assets/player/peertube-player.ts +++ b/client/src/assets/player/peertube-player.ts @@ -375,6 +375,8 @@ export class PeerTubePlayer { videoUUID: () => this.currentLoadOptions.videoUUID, subtitle: () => this.currentLoadOptions.subtitle, + videoRatio: () => this.currentLoadOptions.videoRatio, + poster: () => this.currentLoadOptions.poster, autoPlayerRatio: this.options.autoPlayerRatio diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts index b8e918eac..c7c36103a 100644 --- a/client/src/assets/player/shared/peertube/peertube-plugin.ts +++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts @@ -225,20 +225,33 @@ class PeerTubePlugin extends Plugin { const defaultRatio = getComputedStyle(this.player.el()).getPropertyValue(this.options.autoPlayerRatio.cssRatioVariable) + if (this.options.videoRatio()) { + this.adaptPlayerFromRatio({ ratio: this.options.videoRatio(), defaultRatio }) + } + 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 = isNaN(data.ratio) || (!portraitMode && data.ratio < 1) - ? defaultRatio - : data.ratio - - el.style.setProperty('--player-ratio', currentRatio + '') + this.adaptPlayerFromRatio({ ratio: data.ratio, defaultRatio }) }) } + private adaptPlayerFromRatio (options: { + ratio: number + defaultRatio: string + }) { + const { ratio, defaultRatio } = options + + 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 = isNaN(ratio) || (!portraitMode && ratio < 1) + ? defaultRatio + : ratio + + el.style.setProperty('--player-ratio', currentRatio + '') + } + // --------------------------------------------------------------------------- private runUserViewing () { diff --git a/client/src/assets/player/types/peertube-player-options.ts b/client/src/assets/player/types/peertube-player-options.ts index 4efabf672..5ba73374d 100644 --- a/client/src/assets/player/types/peertube-player-options.ts +++ b/client/src/assets/player/types/peertube-player-options.ts @@ -77,6 +77,7 @@ export type PeerTubePlayerLoadOptions = { videoShortUUID: string duration: number + videoRatio: number requiresUserAuth: boolean videoFileToken: () => string diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts index 3aad7f492..7aec818ad 100644 --- a/client/src/assets/player/types/peertube-videojs-typings.ts +++ b/client/src/assets/player/types/peertube-videojs-typings.ts @@ -129,6 +129,8 @@ type PeerTubePluginOptions = { videoUUID: () => string subtitle: () => string + videoRatio: () => number + poster: () => string } diff --git a/client/src/standalone/videos/shared/player-options-builder.ts b/client/src/standalone/videos/shared/player-options-builder.ts index 629476501..6dd8520e3 100644 --- a/client/src/standalone/videos/shared/player-options-builder.ts +++ b/client/src/standalone/videos/shared/player-options-builder.ts @@ -290,6 +290,7 @@ export class PlayerOptionsBuilder { videoUUID: video.uuid, duration: video.duration, + videoRatio: video.aspectRatio, poster: window.location.origin + video.previewPath,