diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts index 2b296ed9fd..8eaa9467f9 100644 --- a/src/lib/media/image-sizes.ts +++ b/src/lib/media/image-sizes.ts @@ -61,11 +61,11 @@ export function useImageDimensions({ }: { src: string knownDimensions: Dimensions | null -}) { - const [dims, setDims] = useState(() => knownDimensions ?? get(src) ?? null) +}): [number | undefined, Dimensions | undefined] { + const [dims, setDims] = useState(() => knownDimensions ?? get(src)) const [prevSrc, setPrevSrc] = useState(src) if (src !== prevSrc) { - setDims(knownDimensions ?? get(src) ?? null) + setDims(knownDimensions ?? get(src)) setPrevSrc(src) } @@ -81,5 +81,13 @@ export function useImageDimensions({ } }, [dims, setDims, src]) - return dims + let aspectRatio: number | undefined + if (dims) { + aspectRatio = dims.width / dims.height + if (Number.isNaN(aspectRatio)) { + aspectRatio = undefined + } + } + + return [aspectRatio, dims] } 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 8f2f314c47..80553dc1f5 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -52,7 +52,7 @@ const ImageItem = ({ isScrollViewBeingDragged, }: Props) => { const [isScaled, setIsScaled] = useState(false) - const imageDimensions = useImageDimensions({ + const [_aspectRatio, imageDimensions] = useImageDimensions({ src: imageSrc.uri, knownDimensions: imageSrc.dimensions, }) 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 af7024a2b4..364a729a25 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -47,7 +47,7 @@ const ImageItem = ({ const scrollViewRef = useAnimatedRef() const translationY = useSharedValue(0) const [scaled, setScaled] = useState(false) - const imageDimensions = useImageDimensions({ + const [_aspectRatio, imageDimensions] = useImageDimensions({ src: imageSrc.uri, knownDimensions: imageSrc.dimensions, }) @@ -182,7 +182,7 @@ const styles = StyleSheet.create({ }) const getZoomRectAfterDoubleTap = ( - imageDimensions: ImageDimensions | null, + imageDimensions: ImageDimensions | undefined, touchX: number, touchY: number, ): { diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 8986a74601..ce2389ce27 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -21,12 +21,11 @@ function useImageAspectRatio({ src: string knownDimensions: Dimensions | null }) { - const dims = useImageDimensions({src, knownDimensions}) + const [raw] = useImageDimensions({src, knownDimensions}) let constrained: number | undefined let max: number | undefined let isCropped: boolean | undefined - if (dims !== undefined) { - const raw = calc(dims) + if (raw !== undefined) { const ratio = 1 / 2 // max of 1:2 ratio in feeds constrained = Math.max(raw, ratio) max = Math.max(raw, 0.25) // max of 1:4 in thread @@ -227,10 +226,3 @@ export function AutoSizedImage({ ) } } - -function calc(dim: Dimensions) { - if (dim.width === 0 || dim.height === 0) { - return 1 - } - return dim.width / dim.height -}