Use explicit values when useImageAspectRatio doesn't know
It's not very good that you can't distingiush when we haven't loaded vs when we're certain. This shifts the burden of dealing with missing values to the caller.
This commit is contained in:
@@ -21,14 +21,19 @@ export function useImageAspectRatio({
|
|||||||
src: string
|
src: string
|
||||||
dimensions: Dimensions | undefined
|
dimensions: Dimensions | undefined
|
||||||
}) {
|
}) {
|
||||||
const [raw, setAspectRatio] = React.useState<number>(
|
const [raw, setAspectRatio] = React.useState(
|
||||||
dimensions ? calc(dimensions) : 1,
|
dimensions ? calc(dimensions) : undefined,
|
||||||
)
|
)
|
||||||
|
|
||||||
const ratio = 1 / 2 // max of 1:2 ratio in feeds
|
let constrained: number | undefined
|
||||||
const constrained = Math.max(raw, ratio)
|
let max: number | undefined
|
||||||
const max = Math.max(raw, 0.25) // max of 1:4 in thread
|
let isCropped: boolean | undefined
|
||||||
const isCropped = raw < constrained
|
if (raw !== undefined) {
|
||||||
|
const ratio = 1 / 2 // max of 1:2 ratio in feeds
|
||||||
|
constrained = Math.max(raw, ratio)
|
||||||
|
max = Math.max(raw, 0.25) // max of 1:4 in thread
|
||||||
|
isCropped = raw < constrained
|
||||||
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
let aborted = false
|
let aborted = false
|
||||||
@@ -215,14 +220,16 @@ export function AutoSizedImage({
|
|||||||
a.rounded_md,
|
a.rounded_md,
|
||||||
a.overflow_hidden,
|
a.overflow_hidden,
|
||||||
t.atoms.bg_contrast_25,
|
t.atoms.bg_contrast_25,
|
||||||
{aspectRatio: max},
|
{aspectRatio: max ?? 1},
|
||||||
]}>
|
]}>
|
||||||
{contents}
|
{contents}
|
||||||
</Pressable>
|
</Pressable>
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<ConstrainedImage fullBleed={crop === 'square'} aspectRatio={constrained}>
|
<ConstrainedImage
|
||||||
|
fullBleed={crop === 'square'}
|
||||||
|
aspectRatio={constrained ?? 1}>
|
||||||
<Pressable
|
<Pressable
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
onLongPress={onLongPress}
|
onLongPress={onLongPress}
|
||||||
|
|||||||
Reference in New Issue
Block a user