From 5cd83ae055e97e447778b2f19bed778a6c24e7e0 Mon Sep 17 00:00:00 2001 From: xmflsct Date: Tue, 17 Jan 2023 15:35:36 +0100 Subject: [PATCH 1/7] Improve my page's loading --- src/screens/Tabs/Shared/Account/Information/Account.tsx | 4 ++-- src/screens/Tabs/Shared/Account/Information/Avatar.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/screens/Tabs/Shared/Account/Information/Account.tsx b/src/screens/Tabs/Shared/Account/Information/Account.tsx index 38bb05a6..1f8c191f 100644 --- a/src/screens/Tabs/Shared/Account/Information/Account.tsx +++ b/src/screens/Tabs/Shared/Account/Information/Account.tsx @@ -1,6 +1,6 @@ import Icon from '@components/Icon' import CustomText from '@components/Text' -import { getAccountStorage, useAccountStorage } from '@utils/storage/actions' +import { useAccountStorage } from '@utils/storage/actions' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import React, { useContext } from 'react' @@ -16,7 +16,7 @@ const AccountInformationAccount: React.FC = () => { const { colors } = useTheme() const [acct] = useAccountStorage.string('auth.account.acct') - const domain = getAccountStorage.string('auth.account.domain') + const [domain] = useAccountStorage.string('auth.account.domain') const localInstance = account?.acct?.includes('@') ? account?.acct?.includes(`@${domain}`) : true diff --git a/src/screens/Tabs/Shared/Account/Information/Avatar.tsx b/src/screens/Tabs/Shared/Account/Information/Avatar.tsx index 27cc281e..8865f8a1 100644 --- a/src/screens/Tabs/Shared/Account/Information/Avatar.tsx +++ b/src/screens/Tabs/Shared/Account/Information/Avatar.tsx @@ -3,7 +3,7 @@ import { useNavigation } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' import navigationRef from '@utils/navigation/navigationRef' import { TabLocalStackParamList } from '@utils/navigation/navigators' -import { useGlobalStorage } from '@utils/storage/actions' +import { useAccountStorage } from '@utils/storage/actions' import { StyleConstants } from '@utils/styles/constants' import React, { useContext } from 'react' import AccountContext from '../Context' @@ -13,7 +13,7 @@ const AccountInformationAvatar: React.FC = () => { const navigation = useNavigation>() - useGlobalStorage.string('account.active') + const [accountAvatarStatic] = useAccountStorage.string('auth.account.avatar_static') return ( { width: StyleConstants.Avatar.L, height: StyleConstants.Avatar.L }} - uri={{ original: account?.avatar, static: account?.avatar_static }} + uri={{ + original: account?.avatar || (pageMe ? accountAvatarStatic : undefined), + static: account?.avatar_static || (pageMe ? accountAvatarStatic : undefined) + }} onPress={() => { if (account) { if (pageMe) { From 613cf1365ce065ed820217bff701bce5ce0aa81f Mon Sep 17 00:00:00 2001 From: xmflsct Date: Sun, 22 Jan 2023 18:17:57 +0100 Subject: [PATCH 2/7] 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 3/7] 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') ? (