diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx index a1f4652ac7..b0ded67548 100644 --- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx +++ b/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(null) const {active, setActive, sendPosition, currentActiveView} = useActiveVideoWeb() @@ -52,42 +58,58 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) { [key], ) - let aspectRatio = 16 / 9 - - if (embed.aspectRatio) { - const {width, height} = embed.aspectRatio - // min: 3/1, max: square - aspectRatio = clamp(width / height, 1 / 1, 3 / 1) + let aspectRatio: number | undefined + const dims = embed.aspectRatio + if (dims) { + aspectRatio = dims.width / dims.height + if (Number.isNaN(aspectRatio)) { + aspectRatio = undefined + } } + let constrained: number | undefined + let max: number | undefined + if (aspectRatio !== undefined) { + const ratio = 1 / 2 // max of 1:2 ratio in feeds + constrained = Math.max(aspectRatio, ratio) + max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread + } + const cropDisabled = crop === 'none' + + const contents = ( +
evt.stopPropagation()}> + + + + + +
+ ) + return ( - -
evt.stopPropagation()}> - - - - - -
+ + {cropDisabled ? ( + + {contents} + + ) : ( + + {contents} + + )} ) } diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 9dc43da8e7..6f5f9d3ab9 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -237,7 +237,16 @@ export function PostEmbeds({ if (AppBskyEmbedVideo.isView(embed)) { return ( - + ) }