diff --git a/src/i18n/en/screens/compose.json b/src/i18n/en/screens/compose.json index 60d3db4e..dfb83acb 100644 --- a/src/i18n/en/screens/compose.json +++ b/src/i18n/en/screens/compose.json @@ -153,8 +153,7 @@ "altText": { "heading": "Describe media for the visually impaired", "placeholder": "You can add a description, sometimes called alt-text, to your media so they are accessible to even more people, including those who are blind or visually impaired.\n\nGood descriptions are concise, but present what is in your media accurately enough to understand their context." - }, - "imageFocus": "Drag the focus circle to update focus point" + } } }, "draftsList": { diff --git a/src/screens/Compose/EditAttachment.tsx b/src/screens/Compose/EditAttachment.tsx index 4f6ea3b0..bf0529ea 100644 --- a/src/screens/Compose/EditAttachment.tsx +++ b/src/screens/Compose/EditAttachment.tsx @@ -1,12 +1,14 @@ import haptics from '@components/haptics' import { HeaderLeft, HeaderRight } from '@components/Header' +import CustomText from '@components/Text' import apiInstance from '@utils/api/instance' import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators' +import { StyleConstants } from '@utils/styles/constants' +import { useTheme } from '@utils/styles/ThemeManager' import React, { useContext, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Alert, KeyboardAvoidingView, Platform } from 'react-native' +import { Alert, KeyboardAvoidingView, Platform, ScrollView, TextInput } from 'react-native' import { SafeAreaView } from 'react-native-safe-area-context' -import ComposeEditAttachmentRoot from './EditAttachment/Root' import ComposeContext from './utils/createContext' const ComposeEditAttachment: React.FC< @@ -17,12 +19,17 @@ const ComposeEditAttachment: React.FC< params: { index } } }) => { + const { colors } = useTheme() const { t } = useTranslation('screenCompose') - const { composeState } = useContext(ComposeContext) + const { composeState, composeDispatch } = useContext(ComposeContext) const [isSubmitting, setIsSubmitting] = useState(false) - const theAttachment = composeState.attachments.uploads[index].remote! + const theAttachment = composeState.attachments.uploads[index].remote + if (!theAttachment) { + navigation.goBack() + return null + } useEffect(() => { navigation.setOptions({ @@ -37,6 +44,12 @@ const ComposeEditAttachment: React.FC< content='Save' loading={isSubmitting} onPress={() => { + if (composeState.type === 'edit') { + composeDispatch({ type: 'attachment/edit', payload: { ...theAttachment } }) + navigation.goBack() + return + } + setIsSubmitting(true) const formData = new FormData() if (theAttachment.description) { @@ -80,8 +93,53 @@ const ComposeEditAttachment: React.FC< behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }} > - - + + + + {t('content.editAttachment.content.altText.heading')} + + + composeDispatch({ + type: 'attachment/edit', + payload: { + ...theAttachment, + description: e + } + }) + } + placeholder={t('content.editAttachment.content.altText.placeholder')} + placeholderTextColor={colors.secondary} + value={theAttachment.description} + /> + + {theAttachment.description?.length || 0} / 1500 + + ) diff --git a/src/screens/Compose/EditAttachment/Image.tsx b/src/screens/Compose/EditAttachment/Image.tsx deleted file mode 100644 index f8b1e118..00000000 --- a/src/screens/Compose/EditAttachment/Image.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import CustomText from '@components/Text' -import { useAccessibility } from '@utils/accessibility/AccessibilityManager' -import { StyleConstants } from '@utils/styles/constants' -import { useTheme } from '@utils/styles/ThemeManager' -import React, { useContext } from 'react' -import { useTranslation } from 'react-i18next' -import { Dimensions, Image, View } from 'react-native' -import { Gesture, GestureDetector } from 'react-native-gesture-handler' -import Animated, { - Extrapolate, - interpolate, - runOnJS, - useAnimatedStyle, - useSharedValue -} from 'react-native-reanimated' -import ComposeContext from '../utils/createContext' - -export interface Props { - index: number -} - -const ComposeEditAttachmentImage: React.FC = ({ index }) => { - const { t } = useTranslation('screenCompose') - const { colors } = useTheme() - const { screenReaderEnabled } = useAccessibility() - - const { composeState, composeDispatch } = useContext(ComposeContext) - const theAttachmentRemote = composeState.attachments.uploads[index].remote! - const theAttachmentLocal = composeState.attachments.uploads[index].local - - const windowWidth = Dimensions.get('window').width - - const imageWidthBase = - theAttachmentRemote?.meta?.original?.aspect < 1 - ? windowWidth * theAttachmentRemote?.meta?.original?.aspect - : windowWidth - const imageDimensions = { - width: imageWidthBase, - height: - imageWidthBase / - ((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.original?.aspect || 1) - } - - const updateFocus = ({ x, y }: { x: number; y: number }) => { - composeDispatch({ - type: 'attachment/edit', - payload: { - ...theAttachmentRemote, - meta: { - ...theAttachmentRemote.meta, - focus: { - x: x > 1 ? 1 : x, - y: y > 1 ? 1 : y - } - } - } - }) - } - - const pan = useSharedValue({ - x: - (((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.focus?.x || 0) * - imageDimensions.width) / - 2, - y: - (((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.focus?.y || 0) * - imageDimensions.height) / - 2 - }) - const start = useSharedValue({ x: 0, y: 0 }) - const gesture = Gesture.Pan() - .onBegin(() => { - start.value = pan.value - }) - .onUpdate(e => { - pan.value = { - x: e.translationX + start.value.x, - y: e.translationY + start.value.y - } - }) - .onEnd(() => { - runOnJS(updateFocus)({ - x: pan.value.x / (imageDimensions.width / 2), - y: pan.value.y / (imageDimensions.height / 2) - }) - }) - .onFinalize(() => { - start.value = pan.value - }) - const styleTransform = useAnimatedStyle(() => { - return { - transform: [ - { - translateX: interpolate( - pan.value.x, - [-imageDimensions.width / 2, imageDimensions.width / 2], - [-imageDimensions.width / 2, imageDimensions.width / 2], - Extrapolate.CLAMP - ) - }, - { - translateY: interpolate( - pan.value.y, - [-imageDimensions.height / 2, imageDimensions.height / 2], - [-imageDimensions.height / 2, imageDimensions.height / 2], - Extrapolate.CLAMP - ) - } - ] - } - }) - - return ( - <> - - {t('content.editAttachment.content.imageFocus')} - - - - - - } - /> - - - - ) -} - -export default ComposeEditAttachmentImage diff --git a/src/screens/Compose/EditAttachment/Root.tsx b/src/screens/Compose/EditAttachment/Root.tsx deleted file mode 100644 index db48d07d..00000000 --- a/src/screens/Compose/EditAttachment/Root.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import CustomText from '@components/Text' -import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video' -import { StyleConstants } from '@utils/styles/constants' -import { useTheme } from '@utils/styles/ThemeManager' -import React, { useContext } from 'react' -import { useTranslation } from 'react-i18next' -import { ScrollView, StyleSheet, TextInput, View } from 'react-native' -import ComposeContext from '../utils/createContext' -import ComposeEditAttachmentImage from './Image' - -export interface Props { - index: number -} - -const ComposeEditAttachmentRoot: React.FC = ({ index }) => { - const { t } = useTranslation('screenCompose') - const { colors, mode } = useTheme() - const { composeState, composeDispatch } = useContext(ComposeContext) - const theAttachment = composeState.attachments.uploads[index].remote! - - const mediaDisplay = () => { - if (theAttachment) { - switch (theAttachment.type) { - case 'image': - return - case 'video': - case 'gifv': - const video = composeState.attachments.uploads[index] - return ( - - ) - } - } - return null - } - - return ( - - - - {t('content.editAttachment.content.altText.heading')} - - - composeDispatch({ - type: 'attachment/edit', - payload: { - ...theAttachment, - description: e - } - }) - } - placeholder={t('content.editAttachment.content.altText.placeholder')} - placeholderTextColor={colors.secondary} - value={theAttachment.description} - keyboardAppearance={mode} - /> - - {theAttachment.description?.length || 0} / 1500 - - - {mediaDisplay()} - - ) -} - -export default ComposeEditAttachmentRoot diff --git a/src/screens/Compose/Root/Footer/Attachments.tsx b/src/screens/Compose/Root/Footer/Attachments.tsx index 008345c6..4303e88d 100644 --- a/src/screens/Compose/Root/Footer/Attachments.tsx +++ b/src/screens/Compose/Root/Footer/Attachments.tsx @@ -6,6 +6,7 @@ import { MAX_MEDIA_ATTACHMENTS } from '@components/mediaSelector' import CustomText from '@components/Text' import { useActionSheet } from '@expo/react-native-action-sheet' import { useNavigation } from '@react-navigation/native' +import { featureCheck } from '@utils/helpers/featureCheck' import { StyleConstants } from '@utils/styles/constants' import layoutAnimation from '@utils/styles/layoutAnimation' import { useTheme } from '@utils/styles/ThemeManager' @@ -104,9 +105,7 @@ const ComposeAttachments: React.FC = ({ accessibleRefAttachments }) => { > {item.remote?.meta?.original?.duration ? ( = ({ accessibleRefAttachments }) => { haptics('Success') }} /> - {!composeState.attachments.disallowEditing ? ( + {composeState.type === 'edit' && featureCheck('edit_media_details') ? (