Move useImageDimensions into image-sizes
This commit is contained in:
@@ -1,3 +1,4 @@
|
|||||||
|
import {useEffect,useState} from 'react'
|
||||||
import {Image} from 'react-native'
|
import {Image} from 'react-native'
|
||||||
|
|
||||||
import type {Dimensions} from '#/lib/media/types'
|
import type {Dimensions} from '#/lib/media/types'
|
||||||
@@ -53,3 +54,32 @@ export function fetch(uri: string): Promise<Dimensions> {
|
|||||||
activeRequests.set(uri, prom)
|
activeRequests.set(uri, prom)
|
||||||
return 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
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import {AppBskyEmbedImages} from '@atproto/api'
|
|||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
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 {Dimensions} from '#/lib/media/types'
|
||||||
import {isNative} from '#/platform/detection'
|
import {isNative} from '#/platform/detection'
|
||||||
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
|
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 {MediaInsetBorder} from '#/components/MediaInsetBorder'
|
||||||
import {Text} from '#/components/Typography'
|
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({
|
function useImageAspectRatio({
|
||||||
src,
|
src,
|
||||||
knownDimensions,
|
knownDimensions,
|
||||||
|
|||||||
Reference in New Issue
Block a user