diff options
Diffstat (limited to 'src/view/com/lightbox')
4 files changed, 102 insertions, 60 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} 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, }, |