forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
"Contain" images with missing dimensions instead of cropping them (#6828)
* Show unknown aspect as "contain" for autosize
* Fix a flash of wrong position when opening in lightbox
* Fix last frame flash on Android
+35
-20
+2
-2
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+2
-2
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
···
392
392
<Animated.View style={imageCropStyle}>
393
393
<Animated.View style={imageStyle}>
394
394
<Image
395
-
contentFit="cover"
395
+
contentFit="contain"
396
396
source={{uri: imageSrc.uri}}
397
-
placeholderContentFit="cover"
397
+
placeholderContentFit="contain"
398
398
placeholder={{uri: imageSrc.thumbUri}}
399
399
accessibilityLabel={imageSrc.alt}
400
400
onLoad={
+26
-11
src/view/com/lightbox/ImageViewing/index.tsx
+26
-11
src/view/com/lightbox/ImageViewing/index.tsx
···
8
8
// Original code copied and simplified from the link below as the codebase is currently not maintained:
9
9
// https://github.com/jobtoday/react-native-image-viewing
10
10
11
-
import React, {useCallback, useEffect, useState} from 'react'
11
+
import React, {useCallback, useEffect, useMemo, useState} from 'react'
12
12
import {
13
13
LayoutAnimation,
14
14
PixelRatio,
···
79
79
restDisplacementThreshold: 0.01,
80
80
}
81
81
82
+
function canAnimate(lightbox: Lightbox): boolean {
83
+
return (
84
+
!PlatformInfo.getIsReducedMotionEnabled() &&
85
+
lightbox.images.every(
86
+
img => img.thumbRect && (img.dimensions || img.thumbDimensions),
87
+
)
88
+
)
89
+
}
90
+
82
91
export default function ImageViewRoot({
83
92
lightbox: nextLightbox,
84
93
onRequestClose,
···
104
113
return
105
114
}
106
115
107
-
const canAnimate =
108
-
!PlatformInfo.getIsReducedMotionEnabled() &&
109
-
nextLightbox.images.every(
110
-
img => img.thumbRect && (img.dimensions || img.thumbDimensions),
111
-
)
116
+
const isAnimated = canAnimate(nextLightbox)
112
117
113
118
// https://github.com/software-mansion/react-native-reanimated/issues/6677
114
119
rAF_FIXED(() => {
115
120
openProgress.set(() =>
116
-
canAnimate ? withClampedSpring(1, SLOW_SPRING) : 1,
121
+
isAnimated ? withClampedSpring(1, SLOW_SPRING) : 1,
117
122
)
118
123
})
119
124
return () => {
120
125
// https://github.com/software-mansion/react-native-reanimated/issues/6677
121
126
rAF_FIXED(() => {
122
127
openProgress.set(() =>
123
-
canAnimate ? withClampedSpring(0, SLOW_SPRING) : 0,
128
+
isAnimated ? withClampedSpring(0, SLOW_SPRING) : 0,
124
129
)
125
130
})
126
131
}
···
185
190
openProgress: SharedValue<number>
186
191
}) {
187
192
const {images, index: initialImageIndex} = lightbox
193
+
const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox])
188
194
const [isScaled, setIsScaled] = useState(false)
189
195
const [isDragging, setIsDragging] = useState(false)
190
196
const [imageIndex, setImageIndex] = useState(initialImageIndex)
···
194
200
const isFlyingAway = useSharedValue(false)
195
201
196
202
const containerStyle = useAnimatedStyle(() => {
197
-
if (openProgress.get() < 1 || isFlyingAway.get()) {
198
-
return {pointerEvents: 'none'}
203
+
if (openProgress.get() < 1) {
204
+
return {
205
+
pointerEvents: 'none',
206
+
opacity: isAnimated ? 1 : 0,
207
+
}
199
208
}
200
-
return {pointerEvents: 'auto'}
209
+
if (isFlyingAway.get()) {
210
+
return {
211
+
pointerEvents: 'none',
212
+
opacity: 1,
213
+
}
214
+
}
215
+
return {pointerEvents: 'auto', opacity: 1}
201
216
})
202
217
203
218
const backdropStyle = useAnimatedStyle(() => {
+7
-7
src/view/com/util/images/AutoSizedImage.tsx
+7
-7
src/view/com/util/images/AutoSizedImage.tsx
···
85
85
if (Number.isNaN(aspectRatio)) {
86
86
aspectRatio = undefined
87
87
}
88
-
} else {
89
-
// If we don't know it synchronously, treat it like a square.
90
-
// We won't use fetched dimensions to avoid a layout shift.
91
-
aspectRatio = 1
92
88
}
93
89
94
90
let constrained: number | undefined
···
103
99
104
100
const cropDisabled = crop === 'none'
105
101
const isCropped = rawIsCropped && !cropDisabled
102
+
const isContain = aspectRatio === undefined
106
103
const hasAlt = !!image.alt
107
104
108
105
const contents = (
109
106
<View ref={containerRef} collapsable={false} style={{flex: 1}}>
110
107
<Image
108
+
contentFit={isContain ? 'contain' : 'cover'}
111
109
style={[a.w_full, a.h_full]}
112
110
source={image.thumb}
113
111
accessible={true} // Must set for `accessibilityLabel` to work
···
115
113
accessibilityLabel={image.alt}
116
114
accessibilityHint=""
117
115
onLoad={e => {
118
-
fetchedDimsRef.current = {
119
-
width: e.source.width,
120
-
height: e.source.height,
116
+
if (!isContain) {
117
+
fetchedDimsRef.current = {
118
+
width: e.source.width,
119
+
height: e.source.height,
120
+
}
121
121
}
122
122
}}
123
123
/>