diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts index 017300b41e..77f348af8a 100644 --- a/src/lib/media/image-sizes.ts +++ b/src/lib/media/image-sizes.ts @@ -1,3 +1,4 @@ +import {useEffect,useState} from 'react' import {Image} from 'react-native' import type {Dimensions} from '#/lib/media/types' @@ -53,3 +54,32 @@ export function fetch(uri: string): Promise { activeRequests.set(uri, prom) return prom } + +export function useImageDimensions({ + src, + knownDimensions, +}: { + src: string + knownDimensions: Dimensions | undefined +}) { + const [dims, setDims] = useState(() => knownDimensions ?? get(src)) + const [prevSrc, setPrevSrc] = useState(src) + if (src !== prevSrc) { + setDims(knownDimensions ?? get(src)) + setPrevSrc(src) + } + + useEffect(() => { + let aborted = false + if (dims !== undefined) return + fetch(src).then(newDims => { + if (aborted) return + setDims(newDims) + }) + return () => { + aborted = true + } + }, [dims, setDims, src]) + + return dims +} diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 77b217c55d..9c26f26096 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -5,7 +5,7 @@ import {AppBskyEmbedImages} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import * as imageSizes from '#/lib/media/image-sizes' +import {useImageDimensions} from '#/lib/media/image-sizes' import {Dimensions} from '#/lib/media/types' import {isNative} from '#/platform/detection' import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' @@ -14,38 +14,6 @@ import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/compone import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {Text} from '#/components/Typography' -function useImageDimensions({ - src, - knownDimensions, -}: { - src: string - knownDimensions: Dimensions | undefined -}) { - const [dims, setDims] = React.useState( - () => knownDimensions ?? imageSizes.get(src), - ) - - const [prevSrc, setPrevSrc] = React.useState(src) - if (src !== prevSrc) { - setDims(knownDimensions ?? imageSizes.get(src)) - setPrevSrc(src) - } - - React.useEffect(() => { - let aborted = false - if (dims !== undefined) return - imageSizes.fetch(src).then(newDims => { - if (aborted) return - setDims(newDims) - }) - return () => { - aborted = true - } - }, [dims, setDims, src]) - - return dims -} - function useImageAspectRatio({ src, knownDimensions,