forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Adjust image sizing (#5302)
authored by
Eric Bailey
and committed by
GitHub
47d99b87
d60a8f26
+7
-6
+7
-6
src/view/com/util/images/AutoSizedImage.tsx
+7
-6
src/view/com/util/images/AutoSizedImage.tsx
···
23
23
const [raw, setAspectRatio] = React.useState<number>(
24
24
dimensions ? calc(dimensions) : 1,
25
25
)
26
+
// this basically controls the width of the image
26
27
const {isCropped, constrained, max} = React.useMemo(() => {
27
-
const a34 = 0.75 // max of 3:4 ratio in feeds
28
-
const constrained = Math.max(raw, a34)
28
+
const ratio = 1 / 2 // max of 1:2 ratio in feeds
29
+
const constrained = Math.max(raw, ratio)
29
30
const max = Math.max(raw, 0.25) // max of 1:4 in thread
30
31
const isCropped = raw < constrained
31
32
return {
···
68
69
const t = useTheme()
69
70
const {gtMobile} = useBreakpoints()
70
71
/**
71
-
* Computed as a % value to apply as `paddingTop`
72
+
* Computed as a % value to apply as `paddingTop`, this basically controls
73
+
* the height of the image.
72
74
*/
73
75
const outerAspectRatio = React.useMemo<DimensionValue>(() => {
74
-
// capped to square or shorter
75
76
const ratio =
76
77
isNative || !gtMobile
77
-
? Math.min(1 / aspectRatio, 1.5)
78
-
: Math.min(1 / aspectRatio, 1)
78
+
? Math.min(1 / aspectRatio, 16 / 9) // 9:16 bounding box
79
+
: Math.min(1 / aspectRatio, 1) // 1:1 bounding box
79
80
return `${ratio * 100}%`
80
81
}, [aspectRatio, gtMobile])
81
82