Use server video ratio if available

pull/6266/head
Chocobozzz 2024-02-27 16:24:48 +01:00
parent 9953825499
commit dfe98695d6
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
6 changed files with 31 additions and 10 deletions

View File

@ -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(),

View File

@ -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

View File

@ -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 () {

View File

@ -77,6 +77,7 @@ export type PeerTubePlayerLoadOptions = {
videoShortUUID: string
duration: number
videoRatio: number
requiresUserAuth: boolean
videoFileToken: () => string

View File

@ -129,6 +129,8 @@ type PeerTubePluginOptions = {
videoUUID: () => string
subtitle: () => string
videoRatio: () => number
poster: () => string
}

View File

@ -290,6 +290,7 @@ export class PlayerOptionsBuilder {
videoUUID: video.uuid,
duration: video.duration,
videoRatio: video.aspectRatio,
poster: window.location.origin + video.previewPath,