Hide pillarboxing on vertical videos

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -6,7 +6,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import {View} from 'react-native'
+import {type DimensionValue, View} from 'react-native'
 import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -15,7 +15,6 @@ import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, useTheme} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
 import {useFullscreen} from '#/components/hooks/useFullscreen'
-import {ConstrainedImage} from '#/components/images/AutoSizedImage'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {
   HLSUnsupportedError,
@@ -74,20 +73,12 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
     [key],
   )
 
-  let aspectRatio: number | undefined
   const dims = embed.aspectRatio
-  if (dims) {
+  // Clamp to minimum 1:2 so very tall videos don't get too narrow
-    aspectRatio = dims.width / dims.height
+  const aspectRatio = dims ? Math.max(dims.width / dims.height, 0.5) || 1 : 1
-    if (Number.isNaN(aspectRatio)) {
-      aspectRatio = undefined
-    }
-  }
 
-  let constrained: number | undefined
+  // Portrait videos are narrower than full width; landscape fills it
-  if (aspectRatio !== undefined) {
+  const widthPercent: DimensionValue = `${Math.min(aspectRatio, 1) * 100}%`
-    const ratio = 1 / 2 // max of 1:2 ratio in feeds
-    constrained = Math.max(aspectRatio, ratio)
-  }
 
   const contents = (
     <div
@@ -98,7 +89,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
         cursor: 'default',
         backgroundColor: t.palette.black,
         backgroundImage: `url(${embed.thumbnail})`,
-        backgroundSize: 'contain',
+        backgroundSize: 'cover',
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
       }}
@@ -122,15 +113,15 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
       <ViewportObserver
         sendPosition={isGif ? noop : sendPosition}
         isAnyViewActive={currentActiveView !== null}>
-        <ConstrainedImage
+        <View
-          fullBleed
+          style={[
-          aspectRatio={constrained || 1}
+            a.rounded_md,
-          // slightly smaller max height than images
+            a.overflow_hidden,
-          // images use 16 / 9, for reference
+            {width: widthPercent, aspectRatio},
-          minMobileAspectRatio={14 / 9}>
+          ]}>
           {contents}
           <MediaInsetBorder />
-        </ConstrainedImage>
+        </View>
       </ViewportObserver>
     </View>
   )