bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'next-video-letterbox' into 'next'

Browse source 
Next: Fix video letterboxing

See merge request soapbox-pub/soapbox-fe!1223
This commit is contained in:
Alex Gleason 2022-04-14 21:09:12 +00:00
commit 0aa74ba882
3 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/features/video/index.js
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}

2
app/styles/components/media-gallery.scss
View file

@ -103,6 +103,7 @@
} }
.media-gallery__preview { .media-gallery__preview {
@apply bg-gray-200 dark:bg-slate-900;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
@ -110,7 +111,6 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 0; z-index: 0;
background: var(--background-color);
.still-image--play-on-hover::before { .still-image--play-on-hover::before {
content: 'GIF'; content: 'GIF';

1
app/styles/components/video-player.scss
View file

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