Refactor letterboxing code

app/soapbox/components/media-gallery/useMediaSizeData.ts

@@ -1,4 +1,4 @@
-import { isNonConformingRatio, isPanoramic, isPortrait, maximumAspectRatio, minimumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
+import { containAspectRatio, isNonConformingRatio, isPanoramic, isPortrait, maximumAspectRatio, minimumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
 
 import type { Dimensions, SizeData } from './types';
 import type { List as ImmutableList } from 'immutable';
@@ -18,9 +18,7 @@ const useMediaSizeData = ({ width, height, defaultWidth, media }: UseMediaSizeDa
 
     const getHeight = () => {
       if (!aspectRatio) return w * 9 / 16;
-      if (isPanoramic(aspectRatio)) return Math.floor(w / maximumAspectRatio);
-      if (isPortrait(aspectRatio)) return Math.floor(w / minimumAspectRatio);
-      return Math.floor(w / aspectRatio);
+      return Math.floor(w / containAspectRatio(aspectRatio));
     };
 
     return {

app/soapbox/features/video/index.tsx

@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
-import { isPanoramic, isPortrait, letterboxMaxRatio, letterboxMinRatio } from 'soapbox/utils/media-aspect-ratio';
+import { containAspectRatio } from 'soapbox/utils/media-aspect-ratio';
 
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
@@ -424,15 +424,7 @@ const Video: React.FC<IVideo> = ({
 
   if (inline && containerWidth) {
     width = containerWidth;
-    const minSize = containerWidth / (16 / 9);
-
-    if (isPanoramic(aspectRatio)) {
-      height = Math.max(Math.floor(containerWidth / letterboxMaxRatio), minSize);
-    } else if (isPortrait(aspectRatio)) {
-      height = Math.max(Math.floor(containerWidth / letterboxMinRatio), minSize);
-    } else {
-      height = Math.floor(containerWidth / aspectRatio);
-    }
+    height = Math.floor(containerWidth / containAspectRatio(aspectRatio));
 
     playerStyle.height = height || DEFAULT_HEIGHT;
   }

app/soapbox/utils/media-aspect-ratio.ts

@@ -30,4 +30,9 @@ export const shouldLetterbox = (aspectRatio?: number): boolean => {
   if (!aspectRatio) return true;
   const withinLimits = aspectRatio >= letterboxMinRatio && aspectRatio <= letterboxMaxRatio;
   return !withinLimits;
+};
+
+/** Force aspect ratio into letterbox limits. */
+export const containAspectRatio = (aspectRatio: number): number => {
+  return Math.max(Math.min(aspectRatio, letterboxMaxRatio), letterboxMinRatio);
 };