diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts index 77f348af8a..2b296ed9fd 100644 --- a/src/lib/media/image-sizes.ts +++ b/src/lib/media/image-sizes.ts @@ -1,4 +1,4 @@ -import {useEffect,useState} from 'react' +import {useEffect, useState} from 'react' import {Image} from 'react-native' import type {Dimensions} from '#/lib/media/types' @@ -60,12 +60,12 @@ export function useImageDimensions({ knownDimensions, }: { src: string - knownDimensions: Dimensions | undefined + knownDimensions: Dimensions | null }) { - const [dims, setDims] = useState(() => knownDimensions ?? get(src)) + const [dims, setDims] = useState(() => knownDimensions ?? get(src) ?? null) const [prevSrc, setPrevSrc] = useState(src) if (src !== prevSrc) { - setDims(knownDimensions ?? get(src)) + setDims(knownDimensions ?? get(src) ?? null) setPrevSrc(src) } diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx index eb5a88864f..53409e3ecf 100644 --- a/src/state/lightbox.tsx +++ b/src/state/lightbox.tsx @@ -3,6 +3,7 @@ import type {MeasuredDimensions} from 'react-native-reanimated' import {AppBskyActorDefs} from '@atproto/api' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {Dimensions} from '#/lib/media/types' type ProfileImageLightbox = { type: 'profile-image' @@ -14,6 +15,7 @@ type ImagesLightboxItem = { uri: string thumbUri: string alt?: string + dimensions: Dimensions | null } type ImagesLightbox = { diff --git a/src/view/com/lightbox/ImageViewing/@types/index.ts b/src/view/com/lightbox/ImageViewing/@types/index.ts index 8fdc3f3646..f5ab8bba9a 100644 --- a/src/view/com/lightbox/ImageViewing/@types/index.ts +++ b/src/view/com/lightbox/ImageViewing/@types/index.ts @@ -16,4 +16,9 @@ export type Position = { y: number } -export type ImageSource = {uri: string; thumbUri: string; alt?: string} +export type ImageSource = { + uri: string + thumbUri: string + alt?: string + dimensions: Dimensions | null +} 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 cf22d70285..8f2f314c47 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -54,7 +54,7 @@ const ImageItem = ({ const [isScaled, setIsScaled] = useState(false) const imageDimensions = useImageDimensions({ src: imageSrc.uri, - knownDimensions: undefined, // TODO: We have those. + knownDimensions: imageSrc.dimensions, }) const committedTransform = useSharedValue(initialTransform) const panTranslation = useSharedValue({x: 0, y: 0}) 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 f58359a56f..af7024a2b4 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -49,7 +49,7 @@ const ImageItem = ({ const [scaled, setScaled] = useState(false) const imageDimensions = useImageDimensions({ src: imageSrc.uri, - knownDimensions: undefined, // TODO: We have those. + knownDimensions: imageSrc.dimensions, }) const maxZoomScale = imageDimensions ? (imageDimensions.width / SCREEN.width) * MAX_ORIGINAL_IMAGE_ZOOM @@ -182,7 +182,7 @@ const styles = StyleSheet.create({ }) const getZoomRectAfterDoubleTap = ( - imageDimensions: ImageDimensions | undefined, + imageDimensions: ImageDimensions | null, touchX: number, touchY: number, ): { diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index 891be3f9c9..83ea2e941b 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -32,7 +32,15 @@ export function Lightbox() { return (