diff options
Diffstat (limited to 'src/view/com/lightbox')
5 files changed, 56 insertions, 50 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index bb006d506..c806bc6a6 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. * */ - -import {createHitslop} from 'lib/constants' import React from 'react' +import {createHitslop} from 'lib/constants' import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native' +import {t} from '@lingui/macro' type Props = { onRequestClose: () => void @@ -23,7 +23,7 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => ( onPress={onRequestClose} hitSlop={HIT_SLOP} accessibilityRole="button" - accessibilityLabel="Close image" + accessibilityLabel={t`Close image`} accessibilityHint="Closes viewer for header image" onAccessibilityEscape={onRequestClose}> <Text style={styles.closeText}>✕</Text> 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 7c7ad0616..ea740ec91 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -315,7 +315,6 @@ const ImageItem = ({ <GestureDetector gesture={composedGesture}> <AnimatedImage contentFit="contain" - // NOTE: Don't pass imageSrc={imageSrc} or MobX will break. source={{uri: imageSrc.uri}} style={[styles.image, animatedStyle]} accessibilityLabel={imageSrc.alt} 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 f73f355ac..2b0b0b149 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -139,7 +139,6 @@ const ImageItem = ({imageSrc, onTap, onZoom, onRequestClose}: Props) => { {(!loaded || !imageDimensions) && <ImageLoading />} <AnimatedImage contentFit="contain" - // NOTE: Don't pass imageSrc={imageSrc} or MobX will break. source={{uri: imageSrc.uri}} style={[styles.image, animatedStyle]} accessibilityLabel={imageSrc.alt} diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index 92c30f491..8a18df33f 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -1,10 +1,7 @@ import React from 'react' import {Pressable, StyleSheet, View} from 'react-native' -import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import ImageView from './ImageViewing' -import {useStores} from 'state/index' -import * as models from 'state/models/ui/shell' import {shareImageModal, saveImageToMediaLibrary} from 'lib/media/manip' import * as Toast from '../util/Toast' import {Text} from '../util/text/Text' @@ -12,28 +9,35 @@ import {s, colors} from 'lib/styles' import {Button} from '../util/forms/Button' import {isIOS} from 'platform/detection' import * as MediaLibrary from 'expo-media-library' +import { + useLightbox, + useLightboxControls, + ProfileImageLightbox, + ImagesLightbox, +} from '#/state/lightbox' -export const Lightbox = observer(function Lightbox() { - const store = useStores() +export function Lightbox() { + const {activeLightbox} = useLightbox() + const {closeLightbox} = useLightboxControls() const onClose = React.useCallback(() => { - store.shell.closeLightbox() - }, [store]) + closeLightbox() + }, [closeLightbox]) - if (!store.shell.activeLightbox) { + if (!activeLightbox) { return null - } else if (store.shell.activeLightbox.name === 'profile-image') { - const opts = store.shell.activeLightbox as models.ProfileImageLightbox + } else if (activeLightbox.name === 'profile-image') { + const opts = activeLightbox as ProfileImageLightbox return ( <ImageView - images={[{uri: opts.profileView.avatar || ''}]} + images={[{uri: opts.profile.avatar || ''}]} initialImageIndex={0} visible onRequestClose={onClose} FooterComponent={LightboxFooter} /> ) - } else if (store.shell.activeLightbox.name === 'images') { - const opts = store.shell.activeLightbox as models.ImagesLightbox + } else if (activeLightbox.name === 'images') { + const opts = activeLightbox as ImagesLightbox return ( <ImageView images={opts.images.map(img => ({...img}))} @@ -46,14 +50,10 @@ export const Lightbox = observer(function Lightbox() { } else { return null } -}) +} -const LightboxFooter = observer(function LightboxFooter({ - imageIndex, -}: { - imageIndex: number -}) { - const store = useStores() +function LightboxFooter({imageIndex}: {imageIndex: number}) { + const {activeLightbox} = useLightbox() const [isAltExpanded, setAltExpanded] = React.useState(false) const [permissionResponse, requestPermission] = MediaLibrary.usePermissions() @@ -81,7 +81,7 @@ const LightboxFooter = observer(function LightboxFooter({ [permissionResponse, requestPermission], ) - const lightbox = store.shell.activeLightbox + const lightbox = activeLightbox if (!lightbox) { return null } @@ -89,12 +89,12 @@ const LightboxFooter = observer(function LightboxFooter({ let altText = '' let uri = '' if (lightbox.name === 'images') { - const opts = lightbox as models.ImagesLightbox + const opts = lightbox as ImagesLightbox uri = opts.images[imageIndex].uri altText = opts.images[imageIndex].alt || '' } else if (lightbox.name === 'profile-image') { - const opts = lightbox as models.ProfileImageLightbox - uri = opts.profileView.avatar || '' + const opts = lightbox as ProfileImageLightbox + uri = opts.profile.avatar || '' } return ( @@ -132,7 +132,7 @@ const LightboxFooter = observer(function LightboxFooter({ </View> </View> ) -}) +} const styles = StyleSheet.create({ footer: { diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index ddf965f42..45e1fa5a3 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -7,39 +7,42 @@ import { View, Pressable, } from 'react-native' -import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useStores} from 'state/index' -import * as models from 'state/models/ui/shell' import {colors, s} from 'lib/styles' import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' import {Text} from '../util/text/Text' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import { + useLightbox, + useLightboxControls, + ImagesLightbox, + ProfileImageLightbox, +} from '#/state/lightbox' interface Img { uri: string alt?: string } -export const Lightbox = observer(function Lightbox() { - const store = useStores() - - const onClose = useCallback(() => store.shell.closeLightbox(), [store.shell]) +export function Lightbox() { + const {activeLightbox} = useLightbox() + const {closeLightbox} = useLightboxControls() - if (!store.shell.isLightboxActive) { + if (!activeLightbox) { return null } - const activeLightbox = store.shell.activeLightbox const initialIndex = - activeLightbox instanceof models.ImagesLightbox ? activeLightbox.index : 0 + activeLightbox instanceof ImagesLightbox ? activeLightbox.index : 0 let imgs: Img[] | undefined - if (activeLightbox instanceof models.ProfileImageLightbox) { + if (activeLightbox instanceof ProfileImageLightbox) { const opts = activeLightbox - if (opts.profileView.avatar) { - imgs = [{uri: opts.profileView.avatar}] + if (opts.profile.avatar) { + imgs = [{uri: opts.profile.avatar}] } - } else if (activeLightbox instanceof models.ImagesLightbox) { + } else if (activeLightbox instanceof ImagesLightbox) { const opts = activeLightbox imgs = opts.images } @@ -49,9 +52,13 @@ export const Lightbox = observer(function Lightbox() { } return ( - <LightboxInner imgs={imgs} initialIndex={initialIndex} onClose={onClose} /> + <LightboxInner + imgs={imgs} + initialIndex={initialIndex} + onClose={closeLightbox} + /> ) -}) +} function LightboxInner({ imgs, @@ -62,6 +69,7 @@ function LightboxInner({ initialIndex: number onClose: () => void }) { + const {_} = useLingui() const [index, setIndex] = useState<number>(initialIndex) const [isAltExpanded, setAltExpanded] = useState(false) @@ -101,7 +109,7 @@ function LightboxInner({ <TouchableWithoutFeedback onPress={onClose} accessibilityRole="button" - accessibilityLabel="Close image viewer" + accessibilityLabel={_(msg`Close image viewer`)} accessibilityHint="Exits image view" onAccessibilityEscape={onClose}> <View style={styles.imageCenterer}> @@ -117,7 +125,7 @@ function LightboxInner({ onPress={onPressLeft} style={[styles.btn, styles.leftBtn]} accessibilityRole="button" - accessibilityLabel="Previous image" + accessibilityLabel={_(msg`Previous image`)} accessibilityHint=""> <FontAwesomeIcon icon="angle-left" @@ -131,7 +139,7 @@ function LightboxInner({ onPress={onPressRight} style={[styles.btn, styles.rightBtn]} accessibilityRole="button" - accessibilityLabel="Next image" + accessibilityLabel={_(msg`Next image`)} accessibilityHint=""> <FontAwesomeIcon icon="angle-right" @@ -145,7 +153,7 @@ function LightboxInner({ {imgs[index].alt ? ( <View style={styles.footer}> <Pressable - accessibilityLabel="Expand alt text" + accessibilityLabel={_(msg`Expand alt text`)} accessibilityHint="If alt text is long, toggles alt text expanded state" onPress={() => { setAltExpanded(!isAltExpanded) |