diff options
Diffstat (limited to 'src/view/com/lightbox')
4 files changed, 43 insertions, 21 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index c806bc6a6..3401adaff 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -24,7 +24,7 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => ( hitSlop={HIT_SLOP} accessibilityRole="button" accessibilityLabel={t`Close image`} - accessibilityHint="Closes viewer for header image" + accessibilityHint={t`Closes viewer for header image`} onAccessibilityEscape={onRequestClose}> <Text style={styles.closeText}>✕</Text> </TouchableOpacity> 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 ea740ec91..003ad61ba 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -320,6 +320,7 @@ const ImageItem = ({ accessibilityLabel={imageSrc.alt} accessibilityHint="" onLoad={() => setIsLoaded(true)} + cachePolicy="memory" /> </GestureDetector> </Animated.View> diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index 8a18df33f..38f2c89c9 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Pressable, StyleSheet, View} from 'react-native' +import {LayoutAnimation, StyleSheet, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import ImageView from './ImageViewing' import {shareImageModal, saveImageToMediaLibrary} from 'lib/media/manip' @@ -15,6 +15,8 @@ import { ProfileImageLightbox, ImagesLightbox, } from '#/state/lightbox' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export function Lightbox() { const {activeLightbox} = useLightbox() @@ -53,6 +55,7 @@ export function Lightbox() { } function LightboxFooter({imageIndex}: {imageIndex: number}) { + const {_} = useLingui() const {activeLightbox} = useLightbox() const [isAltExpanded, setAltExpanded] = React.useState(false) const [permissionResponse, requestPermission] = MediaLibrary.usePermissions() @@ -60,12 +63,14 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { const saveImageToAlbumWithToasts = React.useCallback( async (uri: string) => { if (!permissionResponse || permissionResponse.granted === false) { - Toast.show('Permission to access camera roll is required.') + Toast.show(_(msg`Permission to access camera roll is required.`)) if (permissionResponse?.canAskAgain) { requestPermission() } else { Toast.show( - 'Permission to access camera roll was denied. Please enable it in your system settings.', + _( + msg`Permission to access camera roll was denied. Please enable it in your system settings.`, + ), ) } return @@ -78,7 +83,7 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { Toast.show(`Failed to save image: ${String(e)}`) } }, - [permissionResponse, requestPermission], + [permissionResponse, requestPermission, _], ) const lightbox = activeLightbox @@ -100,15 +105,21 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { return ( <View style={[styles.footer]}> {altText ? ( - <Pressable - onPress={() => setAltExpanded(!isAltExpanded)} - accessibilityRole="button"> + <View accessibilityRole="button" style={styles.footerText}> <Text - style={[s.gray3, styles.footerText]} - numberOfLines={isAltExpanded ? undefined : 3}> + style={[s.gray3]} + numberOfLines={isAltExpanded ? undefined : 3} + selectable + onPress={() => { + LayoutAnimation.configureNext({ + duration: 300, + update: {type: 'spring', springDamping: 0.7}, + }) + setAltExpanded(prev => !prev) + }}> {altText} </Text> - </Pressable> + </View> ) : null} <View style={styles.footerBtns}> <Button @@ -117,7 +128,7 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { onPress={() => saveImageToAlbumWithToasts(uri)}> <FontAwesomeIcon icon={['far', 'floppy-disk']} style={s.white} /> <Text type="xl" style={s.white}> - Save + <Trans context="action">Save</Trans> </Text> </Button> <Button @@ -126,7 +137,7 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) { onPress={() => shareImageModal({uri})}> <FontAwesomeIcon icon="arrow-up-from-bracket" style={s.white} /> <Text type="xl" style={s.white}> - Share + <Trans context="action">Share</Trans> </Text> </Button> </View> diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index 45e1fa5a3..fb97c30a4 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -1,13 +1,17 @@ import React, {useCallback, useEffect, useState} from 'react' import { Image, + ImageStyle, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, View, Pressable, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {colors, s} from 'lib/styles' import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' import {Text} from '../util/text/Text' @@ -19,6 +23,7 @@ import { ImagesLightbox, ProfileImageLightbox, } from '#/state/lightbox' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' interface Img { uri: string @@ -28,8 +33,10 @@ interface Img { export function Lightbox() { const {activeLightbox} = useLightbox() const {closeLightbox} = useLightboxControls() + const isActive = !!activeLightbox + useWebBodyScrollLock(isActive) - if (!activeLightbox) { + if (!isActive) { return null } @@ -110,13 +117,13 @@ function LightboxInner({ onPress={onClose} accessibilityRole="button" accessibilityLabel={_(msg`Close image viewer`)} - accessibilityHint="Exits image view" + accessibilityHint={_(msg`Exits image view`)} onAccessibilityEscape={onClose}> <View style={styles.imageCenterer}> <Image accessibilityIgnoresInvertColors source={imgs[index]} - style={styles.image} + style={styles.image as ImageStyle} accessibilityLabel={imgs[index].alt} accessibilityHint="" /> @@ -129,7 +136,7 @@ function LightboxInner({ accessibilityHint=""> <FontAwesomeIcon icon="angle-left" - style={styles.icon} + style={styles.icon as FontAwesomeIconStyle} size={40} /> </TouchableOpacity> @@ -143,7 +150,7 @@ function LightboxInner({ accessibilityHint=""> <FontAwesomeIcon icon="angle-right" - style={styles.icon} + style={styles.icon as FontAwesomeIconStyle} size={40} /> </TouchableOpacity> @@ -154,7 +161,9 @@ function LightboxInner({ <View style={styles.footer}> <Pressable accessibilityLabel={_(msg`Expand alt text`)} - accessibilityHint="If alt text is long, toggles alt text expanded state" + accessibilityHint={_( + msg`If alt text is long, toggles alt text expanded state`, + )} onPress={() => { setAltExpanded(!isAltExpanded) }}> @@ -176,7 +185,8 @@ function LightboxInner({ const styles = StyleSheet.create({ mask: { - position: 'absolute', + // @ts-ignore + position: 'fixed', top: 0, left: 0, width: '100%', |