[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

src/screens/Profile/Header/Shell.tsx

@@ -64,6 +64,7 @@ let ProfileHeaderShell = ({
               height: 1000,
               width: 1000,
             },
+            type: 'circle-avi',
           },
         ],
         index: 0,

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

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',
-  },
+    justifyContent: 'center',
-  image: {
-    flex: 1,
   },
   loading: {
     position: 'absolute',

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}

src/view/com/lightbox/Lightbox.web.tsx

@@ -21,13 +21,9 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {colors, s} from '#/lib/styles'
 import {useLightbox, useLightboxControls} from '#/state/lightbox'
 import {Text} from '../util/text/Text'
+import {ImageSource} from './ImageViewing/@types'
 import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
 
-interface Img {
-  uri: string
-  alt?: string
-}
-
 export function Lightbox() {
   const {activeLightbox} = useLightbox()
   const {closeLightbox} = useLightboxControls()
@@ -54,7 +50,7 @@ function LightboxInner({
   initialIndex = 0,
   onClose,
 }: {
-  imgs: Img[]
+  imgs: ImageSource[]
   initialIndex: number
   onClose: () => void
 }) {
@@ -101,6 +97,8 @@ function LightboxInner({
     return isTabletOrDesktop ? 32 : 24
   }, [isTabletOrDesktop])
 
+  const img = imgs[index]
+  const isAvi = img.type === 'circle-avi' || img.type === 'rect-avi'
   return (
     <View style={styles.mask}>
       <TouchableWithoutFeedback
@@ -109,55 +107,76 @@ function LightboxInner({
         accessibilityLabel={_(msg`Close image viewer`)}
         accessibilityHint={_(msg`Exits image view`)}
         onAccessibilityEscape={onClose}>
-        <View style={styles.imageCenterer}>
+        {isAvi ? (
-          <Image
+          <View style={styles.aviCenterer}>
-            accessibilityIgnoresInvertColors
+            <img
-            source={imgs[index]}
+              src={img.uri}
-            style={styles.image as ImageStyle}
+              // @ts-ignore web-only
-            accessibilityLabel={imgs[index].alt}
+              style={
-            accessibilityHint=""
+                {
-          />
+                  ...styles.avi,
-          {canGoLeft && (
+                  borderRadius:
-            <TouchableOpacity
+                    img.type === 'circle-avi'
-              onPress={onPressLeft}
+                      ? '50%'
-              style={[
+                      : img.type === 'rect-avi'
-                styles.btn,
+                      ? '10%'
-                btnStyle,
+                      : 0,
-                styles.leftBtn,
+                } as ImageStyle
-                styles.blurredBackground,
+              }
-              ]}
+              alt={img.alt}
-              accessibilityRole="button"
+            />
-              accessibilityLabel={_(msg`Previous image`)}
+          </View>
-              accessibilityHint="">
+        ) : (
-              <FontAwesomeIcon
+          <View style={styles.imageCenterer}>
-                icon="angle-left"
+            <Image
-                style={styles.icon as FontAwesomeIconStyle}
+              accessibilityIgnoresInvertColors
-                size={iconSize}
+              source={img}
-              />
+              style={styles.image as ImageStyle}
-            </TouchableOpacity>
+              accessibilityLabel={img.alt}
-          )}
+              accessibilityHint=""
-          {canGoRight && (
+            />
-            <TouchableOpacity
+            {canGoLeft && (
-              onPress={onPressRight}
+              <TouchableOpacity
-              style={[
+                onPress={onPressLeft}
-                styles.btn,
+                style={[
-                btnStyle,
+                  styles.btn,
-                styles.rightBtn,
+                  btnStyle,
-                styles.blurredBackground,
+                  styles.leftBtn,
-              ]}
+                  styles.blurredBackground,
-              accessibilityRole="button"
+                ]}
-              accessibilityLabel={_(msg`Next image`)}
+                accessibilityRole="button"
-              accessibilityHint="">
+                accessibilityLabel={_(msg`Previous image`)}
-              <FontAwesomeIcon
+                accessibilityHint="">
-                icon="angle-right"
+                <FontAwesomeIcon
-                style={styles.icon as FontAwesomeIconStyle}
+                  icon="angle-left"
-                size={iconSize}
+                  style={styles.icon as FontAwesomeIconStyle}
-              />
+                  size={iconSize}
-            </TouchableOpacity>
+                />
-          )}
+              </TouchableOpacity>
-        </View>
+            )}
+            {canGoRight && (
+              <TouchableOpacity
+                onPress={onPressRight}
+                style={[
+                  styles.btn,
+                  btnStyle,
+                  styles.rightBtn,
+                  styles.blurredBackground,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel={_(msg`Next image`)}
+                accessibilityHint="">
+                <FontAwesomeIcon
+                  icon="angle-right"
+                  style={styles.icon as FontAwesomeIconStyle}
+                  size={iconSize}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
       </TouchableWithoutFeedback>
-      {imgs[index].alt ? (
+      {img.alt ? (
         <View style={styles.footer}>
           <Pressable
             accessibilityLabel={_(msg`Expand alt text`)}
@@ -171,7 +190,7 @@ function LightboxInner({
               style={s.white}
               numberOfLines={isAltExpanded ? 0 : 3}
               ellipsizeMode="tail">
-              {imgs[index].alt}
+              {img.alt}
             </Text>
           </Pressable>
         </View>
@@ -203,6 +222,19 @@ const styles = StyleSheet.create({
     height: '100%',
     resizeMode: 'contain',
   },
+  aviCenterer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avi: {
+    // @ts-ignore web-only
+    maxWidth: `calc(min(400px, 100vw))`,
+    // @ts-ignore web-only
+    maxHeight: `calc(min(400px, 100vh))`,
+    padding: 16,
+    boxSizing: 'border-box',
+  },
   icon: {
     color: colors.white,
   },

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -80,6 +80,7 @@ export function ProfileSubpageHeader({
               height: 1000,
               width: 1000,
             },
+            type: 'rect-avi',
           },
         ],
         index: 0,

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

@@ -152,7 +152,10 @@ export function PostEmbeds({
         thumbDims: MeasuredDimensions | null,
       ) => {
         openLightbox({
-          images: items,
+          images: items.map(item => ({
+            ...item,
+            type: 'image',
+          })),
           index,
           thumbDims,
         })