zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Go full width on native and mobile web (#5184)

zio/stable
Eric Bailey 2024-09-06 10:19:29 -05:00 committed by GitHub
parent b90cd68359
commit 64b50ba69a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/view/com/util/images/AutoSizedImage.tsx
View File

@ -7,8 +7,9 @@ import {useLingui} from '@lingui/react'
import * as imageSizes from '#/lib/media/image-sizes' import * as imageSizes from '#/lib/media/image-sizes'
import {Dimensions} from '#/lib/media/types' import {Dimensions} from '#/lib/media/types'
import {isNative} from '#/platform/detection'
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop' import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
@ -65,14 +66,18 @@ export function ConstrainedImage({
children: React.ReactNode children: React.ReactNode
}) { }) {
const t = useTheme() const t = useTheme()
const {gtMobile} = useBreakpoints()
/** /**
* Computed as a % value to apply as `paddingTop` * Computed as a % value to apply as `paddingTop`
*/ */
const outerAspectRatio = React.useMemo<DimensionValue>(() => { const outerAspectRatio = React.useMemo<DimensionValue>(() => {
// capped to square or shorter // capped to square or shorter
const ratio = Math.min(1 / aspectRatio, 1) const ratio =
isNative || !gtMobile
? Math.min(1 / aspectRatio, 1.5)
: Math.min(1 / aspectRatio, 1)
return `${ratio * 100}%` return `${ratio * 100}%`
}, [aspectRatio]) }, [aspectRatio, gtMobile])
return ( return (
<View style={[a.w_full]}> <View style={[a.w_full]}>