[Lightbox] Add border radius to avatars (#6136)

* Preserve shape in lightbox

* Rename shapes to semantic meanings

It looks like after all I do want to fork based on those.

* Round avatars on the web

* Oops

3 files changed, 15 insertions, 5 deletions

diff --git a/src/view/com/lightbox/ImageViewing/@types/index.ts b/src/view/com/lightbox/ImageViewing/@types/index.ts
index f5ab8bba9..dc636a449 100644
--- a/src/view/com/lightbox/ImageViewing/@types/index.ts
+++ b/src/view/com/lightbox/ImageViewing/@types/index.ts
@@ -21,4 +21,5 @@ export type ImageSource = {
   thumbUri: string
   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
index 17c386771..f882dcf9e 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -302,6 +302,11 @@ const ImageItem = ({
       committedTransform.value = withClampedSpring(finalTransform)
     })
 
+  const innerStyle = useAnimatedStyle(() => ({
+    width: '100%',
+    aspectRatio: imageAspect,
+  }))
+
   const composedGesture = isScrollViewBeingDragged
     ? // If the parent is not at rest, provide a no-op gesture.
       Gesture.Manual()
@@ -312,6 +317,9 @@ const ImageItem = ({
         singleTap,
       )
 
+  const type = imageSrc.type
+  const borderRadius =
+    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.View style={imageStyle} renderToHardwareTextureAndroid>
@@ -326,7 +334,7 @@ const ImageItem = ({
             source={{uri: imageSrc.uri}}
             placeholderContentFit="contain"
             placeholder={{uri: imageSrc.thumbUri}}
-            style={[styles.image]}
+            style={[innerStyle, {borderRadius}]}
             accessibilityLabel={imageSrc.alt}
             accessibilityHint=""
             accessibilityIgnoresInvertColors
@@ -342,9 +350,7 @@ const styles = StyleSheet.create({
   container: {
     height: '100%',
     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 b4bbfb4d5..e876479a3 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -143,6 +143,9 @@ const ImageItem = ({
     singleTap,
   )
 
+  const type = imageSrc.type
+  const borderRadius =
+    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.ScrollView
@@ -163,7 +166,7 @@ const ImageItem = ({
           source={{uri: imageSrc.uri}}
           placeholderContentFit="contain"
           placeholder={{uri: imageSrc.thumbUri}}
-          style={animatedStyle}
+          style={[animatedStyle, {borderRadius}]}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""
           enableLiveTextInteraction={showControls && !scaled}