[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

1 files changed, 87 insertions, 55 deletions

diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index 2ba7d06cc..f9b147b29 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/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}>
-          <Image
-            accessibilityIgnoresInvertColors
-            source={imgs[index]}
-            style={styles.image as ImageStyle}
-            accessibilityLabel={imgs[index].alt}
-            accessibilityHint=""
-          />
-          {canGoLeft && (
-            <TouchableOpacity
-              onPress={onPressLeft}
-              style={[
-                styles.btn,
-                btnStyle,
-                styles.leftBtn,
-                styles.blurredBackground,
-              ]}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Previous image`)}
-              accessibilityHint="">
-              <FontAwesomeIcon
-                icon="angle-left"
-                style={styles.icon as FontAwesomeIconStyle}
-                size={iconSize}
-              />
-            </TouchableOpacity>
-          )}
-          {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>
+        {isAvi ? (
+          <View style={styles.aviCenterer}>
+            <img
+              src={img.uri}
+              // @ts-ignore web-only
+              style={
+                {
+                  ...styles.avi,
+                  borderRadius:
+                    img.type === 'circle-avi'
+                      ? '50%'
+                      : img.type === 'rect-avi'
+                      ? '10%'
+                      : 0,
+                } as ImageStyle
+              }
+              alt={img.alt}
+            />
+          </View>
+        ) : (
+          <View style={styles.imageCenterer}>
+            <Image
+              accessibilityIgnoresInvertColors
+              source={img}
+              style={styles.image as ImageStyle}
+              accessibilityLabel={img.alt}
+              accessibilityHint=""
+            />
+            {canGoLeft && (
+              <TouchableOpacity
+                onPress={onPressLeft}
+                style={[
+                  styles.btn,
+                  btnStyle,
+                  styles.leftBtn,
+                  styles.blurredBackground,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel={_(msg`Previous image`)}
+                accessibilityHint="">
+                <FontAwesomeIcon
+                  icon="angle-left"
+                  style={styles.icon as FontAwesomeIconStyle}
+                  size={iconSize}
+                />
+              </TouchableOpacity>
+            )}
+            {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,
   },