[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
bluesky-social · Nov 9, 2024 · 42abd97 · 42abd97
1 parent 2d73c5a
commit 42abd97
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 146 deletions.
diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts
diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx
@@ -72,6 +72,7 @@ let ProfileHeaderShell = ({
               height: 1000,
               width: 1000,
             },
+            thumbDimensions: null,
             type: 'circle-avi',
           },
         ],

diff --git a/src/view/com/lightbox/ImageViewing/@types/index.ts b/src/view/com/lightbox/ImageViewing/@types/index.ts
@@ -21,10 +21,11 @@ export type Position = {
 
 export type ImageSource = {
   uri: string
+  dimensions: Dimensions | null
   thumbUri: string
+  thumbDimensions: Dimensions | null
   thumbRect: MeasuredDimensions | null
   alt?: string
-  dimensions: Dimensions | null
   type: 'image' | 'circle-avi' | 'rect-avi'
 }
 

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -41,6 +41,7 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (isZoomed: boolean) => void
+  onLoad: (dims: ImageDimensions) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
   measureSafeArea: () => {
@@ -66,6 +67,7 @@ const ImageItem = ({
   imageSrc,
   onTap,
   onZoom,
+  onLoad,
   isScrollViewBeingDragged,
   measureSafeArea,
   imageAspect,
@@ -330,8 +332,8 @@ const ImageItem = ({
       transform: scaleAndMoveTransform.concat(manipulationTransform),
       width: screenSize.width,
       maxHeight: screenSize.height,
-      aspectRatio: imageAspect,
       alignSelf: 'center',
+      aspectRatio: imageAspect ?? 1 /* force onLoad */,
     }
   })
 
@@ -349,6 +351,7 @@ const ImageItem = ({
     return {
       flex: 1,
       transform: cropContentTransform,
+      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
@@ -393,7 +396,10 @@ const ImageItem = ({
                 placeholderContentFit="cover"
                 placeholder={{uri: imageSrc.thumbUri}}
                 accessibilityLabel={imageSrc.alt}
-                onLoad={() => setHasLoaded(false)}
+                onLoad={e => {
+                  setHasLoaded(true)
+                  onLoad({width: e.source.width, height: e.source.height})
+                }}
                 style={{flex: 1, borderRadius}}
                 accessibilityHint=""
                 accessibilityIgnoresInvertColors

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -38,6 +38,7 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (scaled: boolean) => void
+  onLoad: (dims: ImageDimensions) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
   measureSafeArea: () => {
@@ -64,6 +65,7 @@ const ImageItem = ({
   imageSrc,
   onTap,
   onZoom,
+  onLoad,
   showControls,
   measureSafeArea,
   imageAspect,
@@ -162,8 +164,9 @@ const ImageItem = ({
       transform: cropFrameTransform,
       width: screenSize.width,
       maxHeight: screenSize.height,
-      aspectRatio: imageAspect,
       alignSelf: 'center',
+      aspectRatio: imageAspect ?? 1 /* force onLoad */,
+      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
@@ -172,7 +175,8 @@ const ImageItem = ({
     return {
       transform: cropContentTransform,
       width: '100%',
-      aspectRatio: imageAspect,
+      aspectRatio: imageAspect ?? 1 /* force onLoad */,
+      opacity: imageAspect === undefined ? 0 : 1,
     }
   })
 
@@ -224,7 +228,10 @@ const ImageItem = ({
               accessibilityHint=""
               enableLiveTextInteraction={showControls && !scaled}
               accessibilityIgnoresInvertColors
-              onLoad={() => setHasLoaded(true)}
+              onLoad={e => {
+                setHasLoaded(true)
+                onLoad({width: e.source.width, height: e.source.height})
+              }}
             />
           </Animated.View>
         </Animated.View>

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
@@ -5,6 +5,7 @@ import {View} from 'react-native'
 import {PanGesture} from 'react-native-gesture-handler'
 import {SharedValue} from 'react-native-reanimated'
 
+import {Dimensions} from '#/lib/media/types'
 import {
   Dimensions as ImageDimensions,
   ImageSource,
@@ -16,6 +17,7 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (scaled: boolean) => void
+  onLoad: (dims: Dimensions) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
   measureSafeArea: () => {

diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -42,7 +42,7 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 
-import {useImageDimensions} from '#/lib/media/image-sizes'
+import {Dimensions} from '#/lib/media/types'
 import {colors, s} from '#/lib/styles'
 import {isIOS} from '#/platform/detection'
 import {Lightbox} from '#/state/lightbox'
@@ -92,7 +92,9 @@ export default function ImageViewRoot({
 
     const canAnimate =
       !PlatformInfo.getIsReducedMotionEnabled() &&
-      nextLightbox.images.every(img => img.dimensions && img.thumbRect)
+      nextLightbox.images.every(
+        img => img.thumbRect && (img.dimensions || img.thumbDimensions),
+      )
 
     // https://github.com/software-mansion/react-native-reanimated/issues/6677
     requestAnimationFrame(() => {
@@ -345,10 +347,15 @@ function LightboxImage({
   openProgress: SharedValue<number>
   dismissSwipeTranslateY: SharedValue<number>
 }) {
-  const [imageAspect, imageDimensions] = useImageDimensions({
-    src: imageSrc.uri,
-    knownDimensions: imageSrc.dimensions,
-  })
+  const [fetchedDims, setFetchedDims] = React.useState<Dimensions | null>(null)
+  const dims = fetchedDims ?? imageSrc.dimensions ?? imageSrc.thumbDimensions
+  let imageAspect: number | undefined
+  if (dims) {
+    imageAspect = dims.width / dims.height
+    if (Number.isNaN(imageAspect)) {
+      imageAspect = undefined
+    }
+  }
 
   const safeFrameDelayedForJSThreadOnly = useSafeAreaFrame()
   const safeInsetsDelayedForJSThreadOnly = useSafeAreaInsets()
@@ -452,11 +459,12 @@ function LightboxImage({
       onTap={onTap}
       onZoom={onZoom}
       onRequestClose={onRequestClose}
+      onLoad={setFetchedDims}
       isScrollViewBeingDragged={isScrollViewBeingDragged}
       showControls={showControls}
       measureSafeArea={measureSafeArea}
       imageAspect={imageAspect}
-      imageDimensions={imageDimensions}
+      imageDimensions={dims ?? undefined}
       dismissSwipePan={dismissSwipePan}
       transforms={transforms}
     />

diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx
@@ -87,6 +87,7 @@ export function ProfileSubpageHeader({
               height: 1000,
               width: 1000,
             },
+            thumbDimensions: null,
             type: 'rect-avi',
           },
         ],