diff options
author | dan <dan.abramov@gmail.com> | 2024-11-09 22:41:14 +0000 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-11-09 22:41:14 +0000 |
commit | 42abd97f61b6813ab7dc6126d167b4130532326a (patch) | |
tree | ed027d346a27170ce60862cbd6849bbc63302157 /src/lib/media | |
parent | 2d73c5a24cf8ad06dbebcf44c8f4f053eedda5a4 (diff) | |
download | voidsky-42abd97f61b6813ab7dc6126d167b4130532326a.tar.zst |
[Lightbox] Always rely on Expo Image cache (#6189)
* Inline useImageAspectRatio * Switch AutoSizedImage to read dimensions from Expo Image cache * Include thumbnail dimensions in image data * Use dims from Expo Image cache in lightbox * Fix wiring so all thumbnails get dimensions * Fix type * Oops
Diffstat (limited to 'src/lib/media')
-rw-r--r-- | src/lib/media/image-sizes.ts | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts deleted file mode 100644 index 8eaa9467f..000000000 --- a/src/lib/media/image-sizes.ts +++ /dev/null @@ -1,93 +0,0 @@ -import {useEffect, useState} from 'react' -import {Image} from 'react-native' - -import type {Dimensions} from '#/lib/media/types' - -type CacheStorageItem<T> = {key: string; value: T} -const createCache = <T>(cacheSize: number) => ({ - _storage: [] as CacheStorageItem<T>[], - get(key: string) { - const {value} = - this._storage.find(({key: storageKey}) => storageKey === key) || {} - return value - }, - set(key: string, value: T) { - if (this._storage.length >= cacheSize) { - this._storage.shift() - } - this._storage.push({key, value}) - }, -}) - -const sizes = createCache<Dimensions>(50) -const activeRequests: Map<string, Promise<Dimensions>> = new Map() - -export function get(uri: string): Dimensions | undefined { - return sizes.get(uri) -} - -export function fetch(uri: string): Promise<Dimensions> { - const dims = sizes.get(uri) - if (dims) { - return Promise.resolve(dims) - } - const activeRequest = activeRequests.get(uri) - if (activeRequest) { - return activeRequest - } - const prom = new Promise<Dimensions>((resolve, reject) => { - Image.getSize( - uri, - (width: number, height: number) => { - const size = {width, height} - sizes.set(uri, size) - resolve(size) - }, - (err: any) => { - console.error('Failed to fetch image dimensions for', uri, err) - reject(new Error('Could not fetch dimensions')) - }, - ) - }).finally(() => { - activeRequests.delete(uri) - }) - activeRequests.set(uri, prom) - return prom -} - -export function useImageDimensions({ - src, - knownDimensions, -}: { - src: string - knownDimensions: Dimensions | null -}): [number | undefined, 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]) - - let aspectRatio: number | undefined - if (dims) { - aspectRatio = dims.width / dims.height - if (Number.isNaN(aspectRatio)) { - aspectRatio = undefined - } - } - - return [aspectRatio, dims] -} |