From 174988bc5ab00774d200a882312985f55d903d81 Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 4 Nov 2024 21:28:27 +0000 Subject: [PATCH] Unify dimensions cache between lightbox and feed (#6047) * Remove useless memo * Use explicit values when useImageAspectRatio doesn't know It's not very good that you can't distingiush when we haven't loaded vs when we're certain. This shifts the burden of dealing with missing values to the caller. * Check cache early * Handle src change * Rewrite image-sizes.fetch to avoid mixing async styles * Make image-sizes LRU Code is copy paste from useImageDimensions.ts * Rm unused fields * Derive aspect on the fly * Factor useImageDimensions out of useImageAspectRatio * Move useImageDimensions into image-sizes * Make lightbox use the same cache * Wire up known dimensions to the lightbox * Handle division by zero in the hook * Use safe aspect for lightbox calculations --- src/lib/media/image-sizes.ts | 100 ++++++++++++++---- src/state/lightbox.tsx | 2 + .../com/lightbox/ImageViewing/@types/index.ts | 7 +- .../ImageItem/ImageItem.android.tsx | 17 +-- .../components/ImageItem/ImageItem.ios.tsx | 16 +-- .../ImageViewing/hooks/useImageDimensions.ts | 93 ---------------- src/view/com/lightbox/Lightbox.tsx | 10 +- src/view/com/profile/ProfileSubpageHeader.tsx | 12 ++- src/view/com/util/images/AutoSizedImage.tsx | 61 ++++------- src/view/com/util/post-embeds/index.tsx | 2 +- 10 files changed, 144 insertions(+), 176 deletions(-) delete mode 100644 src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts index 7a15556882..8eaa9467f9 100644 --- a/src/lib/media/image-sizes.ts +++ b/src/lib/media/image-sizes.ts @@ -1,35 +1,93 @@ +import {useEffect, useState} from 'react' import {Image} from 'react-native' import type {Dimensions} from '#/lib/media/types' -const sizes: Map = new Map() +type CacheStorageItem = {key: string; value: T} +const createCache = (cacheSize: number) => ({ + _storage: [] as CacheStorageItem[], + 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(50) const activeRequests: Map> = new Map() export function get(uri: string): Dimensions | undefined { return sizes.get(uri) } -export async function fetch(uri: string): Promise { - const Dimensions = sizes.get(uri) - if (Dimensions) { - return Dimensions +export function fetch(uri: string): Promise { + const dims = sizes.get(uri) + if (dims) { + return Promise.resolve(dims) + } + const activeRequest = activeRequests.get(uri) + if (activeRequest) { + return activeRequest + } + const prom = new Promise((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) } - const prom = - activeRequests.get(uri) || - new Promise(resolve => { - Image.getSize( - uri, - (width: number, height: number) => resolve({width, height}), - (err: any) => { - console.error('Failed to fetch image dimensions for', uri, err) - resolve({width: 0, height: 0}) - }, - ) + useEffect(() => { + let aborted = false + if (dims !== undefined) return + fetch(src).then(newDims => { + if (aborted) return + setDims(newDims) }) - activeRequests.set(uri, prom) - const res = await prom - activeRequests.delete(uri) - sizes.set(uri, res) - return res + 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] } 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 3de15b3790..487acf931c 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -12,8 +12,8 @@ import Animated, { } from 'react-native-reanimated' import {Image} from 'expo-image' +import {useImageDimensions} from '#/lib/media/image-sizes' import type {Dimensions as ImageDimensions, ImageSource} from '../../@types' -import useImageDimensions from '../../hooks/useImageDimensions' import { applyRounding, createTransform, @@ -52,7 +52,10 @@ const ImageItem = ({ isScrollViewBeingDragged, }: Props) => { const [isScaled, setIsScaled] = useState(false) - const imageDimensions = useImageDimensions(imageSrc) + const [imageAspect, imageDimensions] = useImageDimensions({ + src: imageSrc.uri, + knownDimensions: imageSrc.dimensions, + }) const committedTransform = useSharedValue(initialTransform) const panTranslation = useSharedValue({x: 0, y: 0}) const pinchOrigin = useSharedValue({x: 0, y: 0}) @@ -119,12 +122,12 @@ const ImageItem = ({ candidateTransform: TransformMatrix, ) { 'worklet' - if (!imageDimensions) { + if (!imageAspect) { return [0, 0] } const [nextTranslateX, nextTranslateY, nextScale] = readTransform(candidateTransform) - const scaledDimensions = getScaledDimensions(imageDimensions, nextScale) + const scaledDimensions = getScaledDimensions(imageAspect, nextScale) const clampedTranslateX = clampTranslation( nextTranslateX, scaledDimensions.width, @@ -248,7 +251,7 @@ const ImageItem = ({ .numberOfTaps(2) .onEnd(e => { 'worklet' - if (!imageDimensions) { + if (!imageDimensions || !imageAspect) { return } const [, , committedScale] = readTransform(committedTransform.value) @@ -260,7 +263,6 @@ const ImageItem = ({ } // Try to zoom in so that we get rid of the black bars (whatever the orientation was). - const imageAspect = imageDimensions.width / imageDimensions.height const screenAspect = SCREEN.width / SCREEN.height const candidateScale = Math.max( imageAspect / screenAspect, @@ -363,11 +365,10 @@ const styles = StyleSheet.create({ }) function getScaledDimensions( - imageDimensions: ImageDimensions, + imageAspect: number, scale: number, ): ImageDimensions { 'worklet' - const imageAspect = imageDimensions.width / imageDimensions.height const screenAspect = SCREEN.width / SCREEN.height const isLandscape = imageAspect > screenAspect if (isLandscape) { 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 f219534987..a96a1c913d 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -19,8 +19,8 @@ import Animated, { import {Image} from 'expo-image' import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' -import {Dimensions as ImageDimensions, ImageSource} from '../../@types' -import useImageDimensions from '../../hooks/useImageDimensions' +import {useImageDimensions} from '#/lib/media/image-sizes' +import {ImageSource} from '../../@types' const SWIPE_CLOSE_OFFSET = 75 const SWIPE_CLOSE_VELOCITY = 1 @@ -47,7 +47,10 @@ const ImageItem = ({ const scrollViewRef = useAnimatedRef() const translationY = useSharedValue(0) const [scaled, setScaled] = useState(false) - const imageDimensions = useImageDimensions(imageSrc) + const [imageAspect, imageDimensions] = useImageDimensions({ + src: imageSrc.uri, + knownDimensions: imageSrc.dimensions, + }) const maxZoomScale = imageDimensions ? (imageDimensions.width / SCREEN.width) * MAX_ORIGINAL_IMAGE_ZOOM : 1 @@ -99,7 +102,7 @@ const ImageItem = ({ const willZoom = !scaled if (willZoom) { nextZoomRect = getZoomRectAfterDoubleTap( - imageDimensions, + imageAspect, absoluteX, absoluteY, ) @@ -179,7 +182,7 @@ const styles = StyleSheet.create({ }) const getZoomRectAfterDoubleTap = ( - imageDimensions: ImageDimensions | null, + imageAspect: number | undefined, touchX: number, touchY: number, ): { @@ -188,7 +191,7 @@ const getZoomRectAfterDoubleTap = ( width: number height: number } => { - if (!imageDimensions) { + if (!imageAspect) { return { x: 0, y: 0, @@ -199,7 +202,6 @@ const getZoomRectAfterDoubleTap = ( // First, let's figure out how much we want to zoom in. // We want to try to zoom in at least close enough to get rid of black bars. - const imageAspect = imageDimensions.width / imageDimensions.height const screenAspect = SCREEN.width / SCREEN.height const zoom = Math.max( imageAspect / screenAspect, diff --git a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts deleted file mode 100644 index 8b5bc1b870..0000000000 --- a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts +++ /dev/null @@ -1,93 +0,0 @@ -/** - * Copyright (c) JOB TODAY S.A. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -import {useEffect, useState} from 'react' -import {Image, ImageURISource} from 'react-native' - -import {Dimensions, ImageSource} from '../@types' - -const CACHE_SIZE = 50 - -type CacheStorageItem = {key: string; value: any} - -const createCache = (cacheSize: number) => ({ - _storage: [] as CacheStorageItem[], - get(key: string): any { - const {value} = - this._storage.find(({key: storageKey}) => storageKey === key) || {} - - return value - }, - set(key: string, value: any) { - if (this._storage.length >= cacheSize) { - this._storage.shift() - } - - this._storage.push({key, value}) - }, -}) - -const imageDimensionsCache = createCache(CACHE_SIZE) - -const useImageDimensions = (image: ImageSource): Dimensions | null => { - const [dimensions, setDimensions] = useState(null) - - const getImageDimensions = ( - image: ImageSource, - ): Promise => { - return new Promise(resolve => { - if (image.uri) { - const source = image as ImageURISource - const cacheKey = source.uri as string - const imageDimensions = imageDimensionsCache.get(cacheKey) - if (imageDimensions) { - resolve(imageDimensions) - } else { - Image.getSizeWithHeaders( - // @ts-ignore - source.uri, - source.headers, - (width: number, height: number) => { - if (width > 0 && height > 0) { - imageDimensionsCache.set(cacheKey, {width, height}) - resolve({width, height}) - } else { - resolve(null) - } - }, - () => { - resolve(null) - }, - ) - } - } else { - resolve(null) - } - }) - } - - let isImageUnmounted = false - - useEffect(() => { - // eslint-disable-next-line @typescript-eslint/no-shadow - getImageDimensions(image).then(dimensions => { - if (!isImageUnmounted) { - setDimensions(dimensions) - } - }) - - return () => { - // eslint-disable-next-line react-hooks/exhaustive-deps - isImageUnmounted = true - } - }, [image]) - - return dimensions -} - -export default useImageDimensions 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 ( ( - dimensions ? calc(dimensions) : 1, - ) - // this basically controls the width of the image - const {isCropped, constrained, max} = React.useMemo(() => { + const [raw] = useImageDimensions({src, knownDimensions}) + let constrained: number | undefined + let max: number | undefined + let isCropped: boolean | undefined + if (raw !== undefined) { const ratio = 1 / 2 // max of 1:2 ratio in feeds - const constrained = Math.max(raw, ratio) - const max = Math.max(raw, 0.25) // max of 1:4 in thread - const isCropped = raw < constrained - return { - isCropped, - constrained, - max, - } - }, [raw]) - - React.useEffect(() => { - let aborted = false - if (dimensions) return - imageSizes.fetch(src).then(newDim => { - if (aborted) return - setAspectRatio(calc(newDim)) - }) - return () => { - aborted = true - } - }, [dimensions, setAspectRatio, src]) - + constrained = Math.max(raw, ratio) + max = Math.max(raw, 0.25) // max of 1:4 in thread + isCropped = raw < constrained + } return { - dimensions, - raw, constrained, max, isCropped, @@ -125,7 +105,7 @@ export function AutoSizedImage({ isCropped: rawIsCropped, } = useImageAspectRatio({ src: image.thumb, - dimensions: image.aspectRatio, + knownDimensions: image.aspectRatio ?? null, }) const cropDisabled = crop === 'none' const isCropped = rawIsCropped && !cropDisabled @@ -222,14 +202,16 @@ export function AutoSizedImage({ a.rounded_md, a.overflow_hidden, t.atoms.bg_contrast_25, - {aspectRatio: max}, + {aspectRatio: max ?? 1}, ]}> {contents} ) } else { return ( - +