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

Next: Fix video letterboxing

See merge request soapbox-pub/soapbox-fe!1223

app/soapbox/features/video/index.js

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

app/styles/components/media-gallery.scss

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

app/styles/components/video-player.scss

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