Mimic image cropping for videos on web

src/view/com/util/post-embeds/VideoEmbed.web.tsx

@@ -5,7 +5,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isFirefox} from '#/lib/browser'
-import {clamp} from '#/lib/numbers'
+import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
 import {
   HLSUnsupportedError,
   VideoEmbedInnerWeb,
@@ -18,7 +18,13 @@ import {ErrorBoundary} from '../ErrorBoundary'
 import {useActiveVideoWeb} from './ActiveVideoWebContext'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
-export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
+export function VideoEmbed({
+  embed,
+  crop,
+}: {
+  embed: AppBskyEmbedVideo.View
+  crop?: 'none' | 'square' | 'constrained'
+}) {
   const ref = useRef<HTMLDivElement>(null)
   const {active, setActive, sendPosition, currentActiveView} =
     useActiveVideoWeb()
@@ -52,24 +58,25 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
     [key],
   )
 
-  let aspectRatio = 16 / 9
+  let aspectRatio: number | undefined
-
+  const dims = embed.aspectRatio
-  if (embed.aspectRatio) {
+  if (dims) {
-    const {width, height} = embed.aspectRatio
+    aspectRatio = dims.width / dims.height
-    // min: 3/1, max: square
+    if (Number.isNaN(aspectRatio)) {
-    aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
+      aspectRatio = undefined
+    }
   }
 
-  return (
+  let constrained: number | undefined
-    <View
+  let max: number | undefined
-      style={[
+  if (aspectRatio !== undefined) {
-        a.w_full,
+    const ratio = 1 / 2 // max of 1:2 ratio in feeds
-        {aspectRatio},
+    constrained = Math.max(aspectRatio, ratio)
-        {backgroundColor: 'black'},
+    max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread
-        a.relative,
+  }
-        a.rounded_md,
+  const cropDisabled = crop === 'none'
-        a.mt_xs,
+
-      ]}>
+  const contents = (
     <div
       ref={ref}
       style={{display: 'flex', flex: 1, cursor: 'default'}}
@@ -88,6 +95,21 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
         </ViewportObserver>
       </ErrorBoundary>
     </div>
+  )
+
+  return (
+    <View style={[a.pt_xs]}>
+      {cropDisabled ? (
+        <View style={[a.w_full, a.overflow_hidden, {aspectRatio: max ?? 1}]}>
+          {contents}
+        </View>
+      ) : (
+        <ConstrainedImage
+          fullBleed={crop === 'square'}
+          aspectRatio={constrained || 1}>
+          {contents}
+        </ConstrainedImage>
+      )}
     </View>
   )
 }

src/view/com/util/post-embeds/index.tsx

@@ -237,7 +237,16 @@ export function PostEmbeds({
   if (AppBskyEmbedVideo.isView(embed)) {
     return (
       <ContentHider modui={moderation?.ui('contentMedia')}>
-        <VideoEmbed embed={embed} />
+        <VideoEmbed
+          embed={embed}
+          crop={
+            viewContext === PostEmbedViewContext.ThreadHighlighted
+              ? 'none'
+              : viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+              ? 'square'
+              : 'constrained'
+          }
+        />
       </ContentHider>
     )
   }