Round avatars on mobile web

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