diff --git a/src/components/Post/Embed/VideoEmbed/index.tsx b/src/components/Post/Embed/VideoEmbed/index.tsx index c66d1a2185..2212be83d3 100644 --- a/src/components/Post/Embed/VideoEmbed/index.tsx +++ b/src/components/Post/Embed/VideoEmbed/index.tsx @@ -71,7 +71,10 @@ export function VideoEmbed({embed, crop}: Props) { ) : ( + aspectRatio={constrained || 1} + // slightly smaller max height than images + // images use 16 / 9, for reference + minMobileAspectRatio={14 / 9}> {contents} )} diff --git a/src/components/Post/Embed/VideoEmbed/index.web.tsx b/src/components/Post/Embed/VideoEmbed/index.web.tsx index e988bc8301..8965e8b90e 100644 --- a/src/components/Post/Embed/VideoEmbed/index.web.tsx +++ b/src/components/Post/Embed/VideoEmbed/index.web.tsx @@ -14,7 +14,7 @@ import {useLingui} from '@lingui/react' import {isFirefox} from '#/lib/browser' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage' -import {atoms as a} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {useIsWithinMessage} from '#/components/dms/MessageContext' import {useFullscreen} from '#/components/hooks/useFullscreen' import { @@ -32,6 +32,7 @@ export function VideoEmbed({ embed: AppBskyEmbedVideo.View crop?: 'none' | 'square' | 'constrained' }) { + const t = useTheme() const ref = useRef(null) const {active, setActive, sendPosition, currentActiveView} = useActiveVideoWeb() @@ -114,13 +115,24 @@ export function VideoEmbed({ sendPosition={sendPosition} isAnyViewActive={currentActiveView !== null}> {cropDisabled ? ( - + {contents} ) : ( + aspectRatio={constrained || 1} + // slightly smaller max height than images + // images use 16 / 9, for reference + minMobileAspectRatio={14 / 9}> {contents} )} diff --git a/src/components/Post/Embed/index.tsx b/src/components/Post/Embed/index.tsx index 8566c2fe6f..3efd231367 100644 --- a/src/components/Post/Embed/index.tsx +++ b/src/components/Post/Embed/index.tsx @@ -112,7 +112,7 @@ function MediaEmbed({ - + ) } diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 4e9c61d474..e16ab02593 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -21,9 +21,11 @@ export function ConstrainedImage({ aspectRatio, fullBleed, children, + minMobileAspectRatio, }: { aspectRatio: number fullBleed?: boolean + minMobileAspectRatio?: number children: React.ReactNode }) { const t = useTheme() @@ -35,10 +37,10 @@ export function ConstrainedImage({ const outerAspectRatio = React.useMemo(() => { const ratio = isNative || !gtMobile - ? Math.min(1 / aspectRatio, 16 / 9) // 9:16 bounding box + ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box : Math.min(1 / aspectRatio, 1) // 1:1 bounding box return `${ratio * 100}%` - }, [aspectRatio, gtMobile]) + }, [aspectRatio, gtMobile, minMobileAspectRatio]) return (