diff options
Diffstat (limited to 'src/view/com/lightbox/ImageViewing')
5 files changed, 37 insertions, 13 deletions
diff --git a/src/view/com/lightbox/ImageViewing/@types/index.ts b/src/view/com/lightbox/ImageViewing/@types/index.ts index 1a3543c26..779b95bfc 100644 --- a/src/view/com/lightbox/ImageViewing/@types/index.ts +++ b/src/view/com/lightbox/ImageViewing/@types/index.ts @@ -21,10 +21,11 @@ export type Position = { export type ImageSource = { uri: string + dimensions: Dimensions | null thumbUri: string + thumbDimensions: Dimensions | null thumbRect: MeasuredDimensions | null alt?: string - dimensions: Dimensions | null type: 'image' | 'circle-avi' | 'rect-avi' } diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 069f9eb40..4652cb606 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -41,6 +41,7 @@ type Props = { onRequestClose: () => void onTap: () => void onZoom: (isZoomed: boolean) => void + onLoad: (dims: ImageDimensions) => void isScrollViewBeingDragged: boolean showControls: boolean measureSafeArea: () => { @@ -66,6 +67,7 @@ const ImageItem = ({ imageSrc, onTap, onZoom, + onLoad, isScrollViewBeingDragged, measureSafeArea, imageAspect, @@ -330,8 +332,8 @@ const ImageItem = ({ transform: scaleAndMoveTransform.concat(manipulationTransform), width: screenSize.width, maxHeight: screenSize.height, - aspectRatio: imageAspect, alignSelf: 'center', + aspectRatio: imageAspect ?? 1 /* force onLoad */, } }) @@ -349,6 +351,7 @@ const ImageItem = ({ return { flex: 1, transform: cropContentTransform, + opacity: imageAspect === undefined ? 0 : 1, } }) @@ -393,7 +396,10 @@ const ImageItem = ({ placeholderContentFit="cover" placeholder={{uri: imageSrc.thumbUri}} accessibilityLabel={imageSrc.alt} - onLoad={() => setHasLoaded(false)} + onLoad={e => { + setHasLoaded(true) + onLoad({width: e.source.width, height: e.source.height}) + }} style={{flex: 1, borderRadius}} accessibilityHint="" accessibilityIgnoresInvertColors diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index 7a9a18b91..e6ec64c3d 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -38,6 +38,7 @@ type Props = { onRequestClose: () => void onTap: () => void onZoom: (scaled: boolean) => void + onLoad: (dims: ImageDimensions) => void isScrollViewBeingDragged: boolean showControls: boolean measureSafeArea: () => { @@ -64,6 +65,7 @@ const ImageItem = ({ imageSrc, onTap, onZoom, + onLoad, showControls, measureSafeArea, imageAspect, @@ -162,8 +164,9 @@ const ImageItem = ({ transform: cropFrameTransform, width: screenSize.width, maxHeight: screenSize.height, - aspectRatio: imageAspect, alignSelf: 'center', + aspectRatio: imageAspect ?? 1 /* force onLoad */, + opacity: imageAspect === undefined ? 0 : 1, } }) @@ -172,7 +175,8 @@ const ImageItem = ({ return { transform: cropContentTransform, width: '100%', - aspectRatio: imageAspect, + aspectRatio: imageAspect ?? 1 /* force onLoad */, + opacity: imageAspect === undefined ? 0 : 1, } }) @@ -224,7 +228,10 @@ const ImageItem = ({ accessibilityHint="" enableLiveTextInteraction={showControls && !scaled} accessibilityIgnoresInvertColors - onLoad={() => setHasLoaded(true)} + onLoad={e => { + setHasLoaded(true) + onLoad({width: e.source.width, height: e.source.height}) + }} /> </Animated.View> </Animated.View> diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx index 543fad772..b41e16383 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -5,6 +5,7 @@ import {View} from 'react-native' import {PanGesture} from 'react-native-gesture-handler' import {SharedValue} from 'react-native-reanimated' +import {Dimensions} from '#/lib/media/types' import { Dimensions as ImageDimensions, ImageSource, @@ -16,6 +17,7 @@ type Props = { onRequestClose: () => void onTap: () => void onZoom: (scaled: boolean) => void + onLoad: (dims: Dimensions) => void isScrollViewBeingDragged: boolean showControls: boolean measureSafeArea: () => { diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 030c8dcf3..ab8306b36 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -42,7 +42,7 @@ import { import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Trans} from '@lingui/macro' -import {useImageDimensions} from '#/lib/media/image-sizes' +import {Dimensions} from '#/lib/media/types' import {colors, s} from '#/lib/styles' import {isIOS} from '#/platform/detection' import {Lightbox} from '#/state/lightbox' @@ -92,7 +92,9 @@ export default function ImageViewRoot({ const canAnimate = !PlatformInfo.getIsReducedMotionEnabled() && - nextLightbox.images.every(img => img.dimensions && img.thumbRect) + nextLightbox.images.every( + img => img.thumbRect && (img.dimensions || img.thumbDimensions), + ) // https://github.com/software-mansion/react-native-reanimated/issues/6677 requestAnimationFrame(() => { @@ -345,10 +347,15 @@ function LightboxImage({ openProgress: SharedValue<number> dismissSwipeTranslateY: SharedValue<number> }) { - const [imageAspect, imageDimensions] = useImageDimensions({ - src: imageSrc.uri, - knownDimensions: imageSrc.dimensions, - }) + const [fetchedDims, setFetchedDims] = React.useState<Dimensions | null>(null) + const dims = fetchedDims ?? imageSrc.dimensions ?? imageSrc.thumbDimensions + let imageAspect: number | undefined + if (dims) { + imageAspect = dims.width / dims.height + if (Number.isNaN(imageAspect)) { + imageAspect = undefined + } + } const safeFrameDelayedForJSThreadOnly = useSafeAreaFrame() const safeInsetsDelayedForJSThreadOnly = useSafeAreaInsets() @@ -452,11 +459,12 @@ function LightboxImage({ onTap={onTap} onZoom={onZoom} onRequestClose={onRequestClose} + onLoad={setFetchedDims} isScrollViewBeingDragged={isScrollViewBeingDragged} showControls={showControls} measureSafeArea={measureSafeArea} imageAspect={imageAspect} - imageDimensions={imageDimensions} + imageDimensions={dims ?? undefined} dismissSwipePan={dismissSwipePan} transforms={transforms} /> |