OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix player ratio on mobile with portrait videos

pull/6026/head
Chocobozzz 2023-11-08 15:56:56 +01:00
parent ae16f5f115
commit dbd0a3bcac
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/app/+videos/+video-watch/video-watch.component.scss
View File

@ -5,7 +5,7 @@
@use '_miniature' as *; @use '_miniature' as *;
$video-default-height: 66vh; $video-default-height: 66vh;
$video-theater-height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@mixin playlist-below-player { @mixin playlist-below-player {
width: 100% !important; width: 100% !important;
@ -36,11 +36,11 @@ $video-theater-height: calc(100vh - #{$header-height} - #{$theater-bottom-space}
#videojs-wrapper { #videojs-wrapper {
width: 100%; width: 100%;
height: $video-theater-height; height: $video-max-height;
} }
::ng-deep .video-js { ::ng-deep .video-js {
--player-height: #{$video-theater-height}; --player-height: #{$video-max-height};
} }
my-video-watch-playlist ::ng-deep .playlist { my-video-watch-playlist ::ng-deep .playlist {
@ -255,10 +255,9 @@ my-video-comments {
.remote-server-down, .remote-server-down,
::ng-deep .video-js { ::ng-deep .video-js {
--player-portrait-mode: 1; --player-portrait-mode: 1;
--player-height: calc(100vw / var(--player-ratio)) !important;
// Can be recalculated by the player depending on video ratio max-height: $video-max-height;
height: calc(100vw / var(--player-ratio)) !important;
max-height: $video-theater-height;
} }
} }

4
client/src/assets/player/peertube-player.ts
View File

@ -106,6 +106,10 @@ export class PeerTubePlayer {
this.player.autoplay(this.getAutoPlayValue(this.currentLoadOptions.autoplay)) this.player.autoplay(this.getAutoPlayValue(this.currentLoadOptions.autoplay))
if (!this.player.autoplay()) {
this.setPoster(loadOptions.poster)
}
this.player.trigger('video-change') this.player.trigger('video-change')
} }

2
client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
View File

@ -131,7 +131,7 @@ class P2pMediaLoaderPlugin extends Plugin {
this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change')) this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change'))
this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_event, data) => { this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_event, data) => {
if (Array.isArray(data.levels) && data.levels.length > 1) { if (Array.isArray(data.levels) && data.levels.length >= 1) {
const level = data.levels[0] const level = data.levels[0]
this.player.trigger('video-ratio-changed', { ratio: level.width / level.height }) this.player.trigger('video-ratio-changed', { ratio: level.width / level.height })

1
client/src/sass/player/peertube-skin.scss
View File

@ -108,6 +108,7 @@ body {
.vjs-poster { .vjs-poster {
outline: 0; outline: 0;
background-size: cover;
} }
@media screen and (max-width: $screen-width-750) { @media screen and (max-width: $screen-width-750) {