Fix video letterboxing

This commit is contained in:
Alex Gleason 2022-04-14 15:47:55 -05:00
parent 42396c4c4c
commit 8da30ad98f
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 5 additions and 2 deletions

View file

@ -13,6 +13,8 @@ import Icon from 'soapbox/components/icon';
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio'; import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen'; import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
const DEFAULT_HEIGHT = 300;
const messages = defineMessages({ const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' }, play: { id: 'video.play', defaultMessage: 'Play' },
pause: { id: 'video.pause', defaultMessage: 'Pause' }, pause: { id: 'video.pause', defaultMessage: 'Pause' },
@ -513,7 +515,7 @@ class Video extends React.PureComponent {
height = Math.floor(containerWidth / aspectRatio); height = Math.floor(containerWidth / aspectRatio);
} }
if (height) playerStyle.height = height; playerStyle.height = height || DEFAULT_HEIGHT;
} }
let warning; let warning;
@ -553,7 +555,7 @@ class Video extends React.PureComponent {
aria-label={alt} aria-label={alt}
title={alt} title={alt}
width={width} width={width}
height={height || 300} height={height || DEFAULT_HEIGHT}
volume={volume} volume={volume}
onClick={this.togglePlay} onClick={this.togglePlay}
onKeyDown={this.handleVideoKeyDown} onKeyDown={this.handleVideoKeyDown}

View file

@ -119,6 +119,7 @@
video { video {
object-fit: contain; object-fit: contain;
position: relative; position: relative;
max-height: 100%;
} }
} }