mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

"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

authored by danabra.mov and committed by

GitHub 5f4a0f28 d08ce0d4

+35 -20
+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
··· 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
··· 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 />