From 613cf1365ce065ed820217bff701bce5ce0aa81f Mon Sep 17 00:00:00 2001 From: xmflsct Date: Sun, 22 Jan 2023 18:17:57 +0100 Subject: [PATCH 01/20] Fix 669 --- src/components/openLink.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/openLink.ts b/src/components/openLink.ts index fbe4eabe..9d8f662a 100644 --- a/src/components/openLink.ts +++ b/src/components/openLink.ts @@ -73,18 +73,19 @@ const openLink = async (url: string, navigation?: any) => { } } + // Some links might end with an empty space at the end that triggers an error switch (getGlobalStorage.string('app.browser')) { - // Some links might end with an empty space at the end that triggers an error + case 'external': + await Linking.openURL(url.trim()) + break case 'internal': + default: await WebBrowser.openBrowserAsync(url.trim(), { dismissButtonStyle: 'close', enableBarCollapsing: true, ...(await browserPackage()) }) break - case 'external': - await Linking.openURL(url.trim()) - break } } From 47d5b0246831ed0303a71fcdfb02c04ad544389e Mon Sep 17 00:00:00 2001 From: xmflsct Date: Mon, 23 Jan 2023 23:05:25 +0100 Subject: [PATCH 02/20] Fix #672 Removed image focus as different clients implement this differently --- src/i18n/en/screens/compose.json | 3 +- src/screens/Compose/EditAttachment.tsx | 70 ++++++- src/screens/Compose/EditAttachment/Image.tsx | 173 ------------------ src/screens/Compose/EditAttachment/Root.tsx | 100 ---------- .../Compose/Root/Footer/Attachments.tsx | 13 +- src/screens/Compose/Root/Footer/Poll.tsx | 22 +-- src/screens/Compose/Root/index.tsx | 2 +- src/screens/Compose/utils/initialState.ts | 8 +- src/screens/Compose/utils/parseState.ts | 13 +- src/screens/Compose/utils/post.ts | 61 ++++-- src/screens/Compose/utils/types.d.ts | 7 +- src/utils/api/general.ts | 10 +- src/utils/api/helpers/index.ts | 17 +- src/utils/api/instance.ts | 16 +- src/utils/api/tooot.ts | 10 +- src/utils/helpers/featureCheck.ts | 82 ++++----- 16 files changed, 197 insertions(+), 410 deletions(-) delete mode 100644 src/screens/Compose/EditAttachment/Image.tsx delete mode 100644 src/screens/Compose/EditAttachment/Root.tsx 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') ? (