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

Adjust image sizing (#5302)

zio/stable^2^2
Eric Bailey 2024-09-12 16:35:59 -05:00 committed by GitHub
parent d60a8f26c4
commit 47d99b8712
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,9 +23,10 @@ export function useImageAspectRatio({
const [raw, setAspectRatio] = React.useState<number>( const [raw, setAspectRatio] = React.useState<number>(
dimensions ? calc(dimensions) : 1, dimensions ? calc(dimensions) : 1,
) )
// this basically controls the width of the image
const {isCropped, constrained, max} = React.useMemo(() => { const {isCropped, constrained, max} = React.useMemo(() => {
const a34 = 0.75 // max of 3:4 ratio in feeds const ratio = 1 / 2 // max of 1:2 ratio in feeds
const constrained = Math.max(raw, a34) const constrained = Math.max(raw, ratio)
const max = Math.max(raw, 0.25) // max of 1:4 in thread const max = Math.max(raw, 0.25) // max of 1:4 in thread
const isCropped = raw < constrained const isCropped = raw < constrained
return { return {
@ -68,14 +69,14 @@ export function ConstrainedImage({
const t = useTheme() const t = useTheme()
const {gtMobile} = useBreakpoints() const {gtMobile} = useBreakpoints()
/** /**
* Computed as a % value to apply as `paddingTop` * Computed as a % value to apply as `paddingTop`, this basically controls
* the height of the image.
*/ */
const outerAspectRatio = React.useMemo<DimensionValue>(() => { const outerAspectRatio = React.useMemo<DimensionValue>(() => {
// capped to square or shorter
const ratio = const ratio =
isNative || !gtMobile isNative || !gtMobile
? Math.min(1 / aspectRatio, 1.5) ? Math.min(1 / aspectRatio, 16 / 9) // 9:16 bounding box
: Math.min(1 / aspectRatio, 1) : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
return `${ratio * 100}%` return `${ratio * 100}%`
}, [aspectRatio, gtMobile]) }, [aspectRatio, gtMobile])