Wire up known dimensions to the lightbox

src/lib/media/image-sizes.ts

@@ -1,4 +1,4 @@
-import {useEffect,useState} from 'react'
+import {useEffect, useState} from 'react'
 import {Image} from 'react-native'
 
 import type {Dimensions} from '#/lib/media/types'
@@ -60,12 +60,12 @@ export function useImageDimensions({
   knownDimensions,
 }: {
   src: string
-  knownDimensions: Dimensions | undefined
+  knownDimensions: Dimensions | null
 }) {
-  const [dims, setDims] = useState(() => knownDimensions ?? get(src))
+  const [dims, setDims] = useState(() => knownDimensions ?? get(src) ?? null)
   const [prevSrc, setPrevSrc] = useState(src)
   if (src !== prevSrc) {
-    setDims(knownDimensions ?? get(src))
+    setDims(knownDimensions ?? get(src) ?? null)
     setPrevSrc(src)
   }
 

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 = {

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
+}

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -54,7 +54,7 @@ const ImageItem = ({
   const [isScaled, setIsScaled] = useState(false)
   const imageDimensions = useImageDimensions({
     src: imageSrc.uri,
-    knownDimensions: undefined, // TODO: We have those.
+    knownDimensions: imageSrc.dimensions,
   })
   const committedTransform = useSharedValue(initialTransform)
   const panTranslation = useSharedValue({x: 0, y: 0})

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -49,7 +49,7 @@ const ImageItem = ({
   const [scaled, setScaled] = useState(false)
   const imageDimensions = useImageDimensions({
     src: imageSrc.uri,
-    knownDimensions: undefined, // TODO: We have those.
+    knownDimensions: imageSrc.dimensions,
   })
   const maxZoomScale = imageDimensions
     ? (imageDimensions.width / SCREEN.width) * MAX_ORIGINAL_IMAGE_ZOOM
@@ -182,7 +182,7 @@ const styles = StyleSheet.create({
 })
 
 const getZoomRectAfterDoubleTap = (
-  imageDimensions: ImageDimensions | undefined,
+  imageDimensions: ImageDimensions | null,
   touchX: number,
   touchY: number,
 ): {

src/view/com/lightbox/Lightbox.tsx

@@ -32,7 +32,15 @@ export function Lightbox() {
     return (
       <ImageView
         images={[
-          {uri: opts.profile.avatar || '', thumbUri: opts.profile.avatar || ''},
+          {
+            uri: opts.profile.avatar || '',
+            thumbUri: opts.profile.avatar || '',
+            dimensions: {
+              // It's fine if it's actually smaller but we know it's 1:1.
+              height: 1000,
+              width: 1000,
+            },
+          },
         ]}
         initialImageIndex={0}
         thumbDims={opts.thumbDims}

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -72,7 +72,17 @@ export function ProfileSubpageHeader({
     ) {
       openLightbox({
         type: 'images',
-        images: [{uri: avatar, thumbUri: avatar}],
+        images: [
+          {
+            uri: avatar,
+            thumbUri: avatar,
+            dimensions: {
+              // It's fine if it's actually smaller but we know it's 1:1.
+              height: 1000,
+              width: 1000,
+            },
+          },
+        ],
         index: 0,
         thumbDims: null,
       })

src/view/com/util/images/AutoSizedImage.tsx

@@ -19,7 +19,7 @@ function useImageAspectRatio({
   knownDimensions,
 }: {
   src: string
-  knownDimensions: Dimensions | undefined
+  knownDimensions: Dimensions | null
 }) {
   const dims = useImageDimensions({src, knownDimensions})
   let constrained: number | undefined
@@ -106,7 +106,7 @@ export function AutoSizedImage({
     isCropped: rawIsCropped,
   } = useImageAspectRatio({
     src: image.thumb,
-    knownDimensions: image.aspectRatio,
+    knownDimensions: image.aspectRatio ?? null,
   })
   const cropDisabled = crop === 'none'
   const isCropped = rawIsCropped && !cropDisabled

src/view/com/util/post-embeds/index.tsx

@@ -145,7 +145,7 @@ export function PostEmbeds({
         uri: img.fullsize,
         thumbUri: img.thumb,
         alt: img.alt,
-        aspectRatio: img.aspectRatio,
+        dimensions: img.aspectRatio ?? null,
       }))
       const _openLightbox = (
         index: number,