From d600cc3343951ca5b2375b1ca0c71e3e388d30b6 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 2 Nov 2024 12:33:59 +0000
Subject: [PATCH] Preserve shape in lightbox

---
 src/screens/Profile/Header/Shell.tsx            |  1 +
 .../com/lightbox/ImageViewing/@types/index.ts   |  1 +
 .../components/ImageItem/ImageItem.android.tsx  | 17 ++++++++++++-----
 .../components/ImageItem/ImageItem.ios.tsx      |  6 ++++++
 src/view/com/profile/ProfileSubpageHeader.tsx   |  1 +
 src/view/com/util/post-embeds/index.tsx         |  1 +
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx
index 1564a3c280..f0d33466fc 100644
--- a/src/screens/Profile/Header/Shell.tsx
+++ b/src/screens/Profile/Header/Shell.tsx
@@ -72,6 +72,7 @@ let ProfileHeaderShell = ({
               height: 1000,
               width: 1000,
             },
+            shape: 'circle',
           },
         ],
         index: 0,
diff --git a/src/view/com/lightbox/ImageViewing/@types/index.ts b/src/view/com/lightbox/ImageViewing/@types/index.ts
index 3476368d31..008cba8733 100644
--- a/src/view/com/lightbox/ImageViewing/@types/index.ts
+++ b/src/view/com/lightbox/ImageViewing/@types/index.ts
@@ -24,4 +24,5 @@ export type ImageSource = {
   thumbRect: MeasuredDimensions | null
   alt?: string
   dimensions: Dimensions | null
+  shape: 'circle' | 'rect' | 'rounded-rect'
 }
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 ad30067d46..807b064566 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -297,7 +297,7 @@ const ImageItem = ({
       ref={containerRef}
       // Necessary to make opacity work for both children together.
       renderToHardwareTextureAndroid
-      style={[styles.container, animatedStyle]}>
+      style={[styles.container, animatedStyle, {}]}>
       <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
       <GestureDetector gesture={composedGesture}>
         <Image
@@ -305,7 +305,16 @@ const ImageItem = ({
           source={{uri: imageSrc.uri}}
           placeholderContentFit="contain"
           placeholder={{uri: imageSrc.thumbUri}}
-          style={styles.image}
+          style={{
+            width: SCREEN.width,
+            height: imageAspect ? SCREEN.width / imageAspect : undefined,
+            borderRadius:
+              imageSrc.shape === 'circle'
+                ? SCREEN.width / 2
+                : imageSrc.shape === 'rounded-rect'
+                ? 20
+                : 0,
+          }}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""
           accessibilityIgnoresInvertColors
@@ -321,9 +330,7 @@ const styles = StyleSheet.create({
     width: SCREEN.width,
     height: SCREEN.height,
     overflow: 'hidden',
-  },
-  image: {
-    flex: 1,
+    justifyContent: 'center',
   },
   loading: {
     position: 'absolute',
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 32dcf75bee..5435589358 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -137,6 +137,12 @@ const ImageItem = ({
           style={{
             width: SCREEN.width,
             height: imageAspect ? SCREEN.width / imageAspect : undefined,
+            borderRadius:
+              imageSrc.shape === 'circle'
+                ? SCREEN.width / 2
+                : imageSrc.shape === 'rounded-rect'
+                ? 20
+                : 0,
           }}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""
diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx
index dab26a1c73..daa1f01185 100644
--- 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,
             },
+            shape: 'rounded-rect',
           },
         ],
         index: 0,
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 7ffb575660..67ab1f5e60 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -155,6 +155,7 @@ export function PostEmbeds({
           images: items.map((item, i) => ({
             ...item,
             thumbRect: thumbRects[i] ?? null,
+            shape: 'rect',
           })),
           index,
         })