Focus animation working

2025-06-05 22:19:13 +02:00 · 2020-12-06 12:52:29 +01:00
parent b274aef31a
commit 0a86c2d627
9 changed files with 409 additions and 82 deletions
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@ -4,9 +4,7 @@ import {
  Dimensions,
  Modal,
  PanResponder,
-  Pressable,
  StyleSheet,
-  Text,
  View
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
--- a/src/screens/Shared/Compose/Actions.tsx
+++ b/src/screens/Shared/Compose/Actions.tsx
@ -56,8 +56,10 @@ const ComposeActions: React.FC<Props> = ({
        size={24}
        color={
          postState.poll.active || postState.attachments.length >= 4
-            ? theme.secondary
-            : theme.primary
+            ? theme.disabled
+            : postState.attachments.length
+            ? theme.primary
+            : theme.secondary
        }
        onPress={async () => {
          if (!postState.poll.active && postState.attachments.length < 4) {
@ -70,8 +72,10 @@ const ComposeActions: React.FC<Props> = ({
        size={24}
        color={
          postState.attachments.length || postState.attachmentUploadProgress
-            ? theme.secondary
-            : theme.primary
+            ? theme.disabled
+            : postState.poll.active
+            ? theme.primary
+            : theme.secondary
        }
        onPress={() => {
          if (
@ -91,7 +95,7 @@ const ComposeActions: React.FC<Props> = ({
      <Feather
        name={getVisibilityIcon()}
        size={24}
-        color={theme.primary}
+        color={theme.secondary}
        onPress={() =>
          ActionSheetIOS.showActionSheetWithOptions(
            {
@ -120,7 +124,7 @@ const ComposeActions: React.FC<Props> = ({
      <Feather
        name='smile'
        size={24}
-        color={postState.emoji.emojis?.length ? theme.primary : theme.secondary}
+        color={postState.emoji.emojis?.length ? theme.secondary : theme.disabled}
        {...(postState.emoji.emojis && {
          onPress: () => {
            if (postState.emoji.active) {
@ -141,7 +145,7 @@ const ComposeActions: React.FC<Props> = ({
      <Text
        style={[
          styles.count,
-          { color: postState.text.count < 0 ? theme.error : theme.primary }
+          { color: postState.text.count < 0 ? theme.error : theme.secondary }
        ]}
      >
        {postState.text.count}
--- a/src/screens/Shared/Compose/Attachments.tsx
+++ b/src/screens/Shared/Compose/Attachments.tsx
@ -1,15 +1,14 @@
 import React, { Dispatch, useCallback } from 'react'
-import {
-  ActivityIndicator,
-  FlatList,
-  Image,
-  StyleSheet,
-  View
-} from 'react-native'
+import { FlatList, Image, Pressable, StyleSheet, View } from 'react-native'
 import { Feather } from '@expo/vector-icons'

 import { PostAction, PostState } from '../Compose'
 import { StyleConstants } from 'src/utils/styles/constants'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+import { useNavigation } from '@react-navigation/native'
+import ShimmerPlaceholder from 'react-native-shimmer-placeholder'
+
+const DEFAULT_HEIGHT = 200

 export interface Props {
  postState: PostState
@ -17,57 +16,82 @@ export interface Props {
 }

 const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
-  const renderImage = useCallback(({ item, index }) => {
-    return (
-      <View key={index}>
-        <Image
-          style={[
-            styles.image,
-            {
-              width: (item.meta?.original?.aspect || 1) * 200
-            }
-          ]}
-          source={{ uri: item!.preview_url }}
-        />
-        <Feather
-          name='edit'
-          size={24}
-          color='white'
-          style={styles.buttonEdit}
-        />
-        <Feather
-          name='trash-2'
-          size={24}
-          color='white'
-          style={styles.buttonRemove}
-          onPress={() =>
-            postDispatch({
-              type: 'attachments',
-              payload: postState.attachments.filter(e => e.id !== item.id)
-            })
-          }
-        />
-      </View>
-    )
-  }, [])
+  const { theme } = useTheme()
+  const navigation = useNavigation()

-  const listFooter = useCallback(() => {
-    return postState.attachmentUploadProgress ? (
-      <View
-        style={{
-          width: postState.attachmentUploadProgress.aspect * 200,
-          height: 200,
-          flex: 1,
-          backgroundColor: 'gray',
-          marginLeft: StyleConstants.Spacing.Global.PagePadding,
-          marginTop: StyleConstants.Spacing.Global.PagePadding,
-          marginBottom: StyleConstants.Spacing.Global.PagePadding
-        }}
+  const imageActions = ({
+    type,
+    icon,
+    onPress
+  }: {
+    type: 'edit' | 'delete'
+    icon: string
+    onPress: () => void
+  }) => {
+    return (
+      <Pressable
+        style={[
+          styles.actions,
+          styles[type],
+          { backgroundColor: theme.backgroundOverlay }
+        ]}
+        onPress={onPress}
      >
-        <ActivityIndicator />
-      </View>
-    ) : null
-  }, [postState.attachmentUploadProgress])
+        <Feather
+          name={icon}
+          size={StyleConstants.Font.Size.L}
+          color={theme.primaryOverlay}
+        />
+      </Pressable>
+    )
+  }
+
+  const renderImage = useCallback(
+    ({
+      item,
+      index
+    }: {
+      item: Mastodon.Attachment & { local_url?: string }
+      index: number
+    }) => {
+      return (
+        <View key={index}>
+          <Image
+            style={[
+              styles.image,
+              {
+                width: (item.meta?.original?.aspect || 1) * DEFAULT_HEIGHT
+              }
+            ]}
+            source={{
+              uri:
+                item.type === 'image'
+                  ? item.local_url || item.preview_url
+                  : item.preview_url
+            }}
+          />
+          {imageActions({
+            type: 'delete',
+            icon: 'x',
+            onPress: () =>
+              postDispatch({
+                type: 'attachments',
+                payload: postState.attachments.filter(e => e.id !== item.id)
+              })
+          })}
+          {imageActions({
+            type: 'edit',
+            icon: 'edit',
+            onPress: () =>
+              navigation.navigate('Screen-Shared-Compose-EditAttachment', {
+                attachment: item
+              })
+          })}
+        </View>
+      )
+    },
+    []
+  )

  return (
    <View style={styles.base}>
@ -75,7 +99,18 @@ const ComposeAttachments: React.FC<Props> = ({ postState, postDispatch }) => {
        horizontal
        data={postState.attachments}
        renderItem={renderImage}
-        ListFooterComponent={listFooter}
+        ListFooterComponent={
+          <ShimmerPlaceholder
+            style={styles.progressContainer}
+            visible={postState.attachmentUploadProgress === undefined}
+            width={
+              (postState.attachmentUploadProgress?.aspect || 16 / 9) *
+              DEFAULT_HEIGHT
+            }
+            height={200}
+          />
+        }
+        showsHorizontalScrollIndicator={false}
      />
    </View>
  )
@ -86,7 +121,7 @@ const styles = StyleSheet.create({
    flex: 1,
    flexDirection: 'row',
    marginRight: StyleConstants.Spacing.Global.PagePadding,
-    height: 200
+    height: DEFAULT_HEIGHT
  },
  image: {
    flex: 1,
@ -94,15 +129,28 @@ const styles = StyleSheet.create({
    marginTop: StyleConstants.Spacing.Global.PagePadding,
    marginBottom: StyleConstants.Spacing.Global.PagePadding
  },
-  buttonEdit: {
+  actions: {
    position: 'absolute',
-    top: 0,
-    left: 0
+    padding: StyleConstants.Spacing.S * 1.5,
+    borderRadius: StyleConstants.Spacing.XL
  },
-  buttonRemove: {
-    position: 'absolute',
-    top: 0,
-    right: 0
+  edit: {
+    bottom:
+      StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
+    right: StyleConstants.Spacing.S
+  },
+  delete: {
+    top: StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
+    right: StyleConstants.Spacing.S
+  },
+  progressContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: DEFAULT_HEIGHT,
+    marginLeft: StyleConstants.Spacing.Global.PagePadding,
+    marginTop: StyleConstants.Spacing.Global.PagePadding,
+    marginBottom: StyleConstants.Spacing.Global.PagePadding
  }
 })

--- a/src/screens/Shared/Compose/EditAttachment.tsx
+++ b/src/screens/Shared/Compose/EditAttachment.tsx
@ -0,0 +1,218 @@
+import { useNavigation } from '@react-navigation/native'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  Animated,
+  Dimensions,
+  Image,
+  KeyboardAvoidingView,
+  PanResponder,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View
+} from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Svg, { Circle, G, Path } from 'react-native-svg'
+import { createNativeStackNavigator } from 'react-native-screens/native-stack'
+
+import { HeaderLeft, HeaderRight } from 'src/components/Header'
+import { StyleConstants } from 'src/utils/styles/constants'
+import { useTheme } from 'src/utils/styles/ThemeManager'
+import { PanGestureHandler } from 'react-native-gesture-handler'
+
+const Stack = createNativeStackNavigator()
+
+export interface Props {
+  route: {
+    params: {
+      attachment: Mastodon.Attachment & { local_url: string }
+    }
+  }
+}
+
+const ComposeEditAttachment: React.FC<Props> = ({
+  route: {
+    params: { attachment }
+  }
+}) => {
+  const navigation = useNavigation()
+  const { theme } = useTheme()
+
+  const [altText, setAltText] = useState<string | undefined>()
+
+  const imageFocus = useCallback(() => {
+    const imageDimensionis = {
+      width: Dimensions.get('screen').width,
+      height:
+        Dimensions.get('screen').width / attachment.meta?.original?.aspect!
+    }
+
+    const panFocus = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current
+    const panX = panFocus.x.interpolate({
+      inputRange: [-imageDimensionis.width / 2, imageDimensionis.width / 2],
+      outputRange: [-imageDimensionis.width / 2, imageDimensionis.width / 2],
+      extrapolate: 'clamp'
+    })
+    const panY = panFocus.y.interpolate({
+      inputRange: [-imageDimensionis.height / 2, imageDimensionis.height / 2],
+      outputRange: [-imageDimensionis.height / 2, imageDimensionis.height / 2],
+      extrapolate: 'clamp'
+    })
+    const handleGesture = Animated.event(
+      [{ nativeEvent: { translationX: panFocus.x, translationY: panFocus.y } }],
+      { useNativeDriver: true }
+    )
+    const onHandlerStateChange = useCallback(() => {
+      panFocus.extractOffset()
+    }, [])
+
+    return (
+      <View style={{ overflow: 'hidden' }}>
+        <Image
+          style={{
+            width: imageDimensionis.width,
+            height: imageDimensionis.height
+          }}
+          source={{
+            uri: attachment.local_url || attachment.preview_url
+          }}
+        />
+        <PanGestureHandler
+          onGestureEvent={handleGesture}
+          onHandlerStateChange={onHandlerStateChange}
+        >
+          <Animated.View
+            style={[
+              {
+                position: 'absolute',
+                top: -500 + imageDimensionis.height / 2,
+                left: -500 + imageDimensionis.width / 2,
+                transform: [{ translateX: panX }, { translateY: panY }]
+              }
+            ]}
+          >
+            <Svg width='1000px' height='1000px' viewBox='0 0 1000 1000'>
+              <G>
+                <G id='Mask'>
+                  <Path
+                    d={
+                      'M1000,0 L1000,1000 L0,1000 L0,0 L1000,0 Z M500,467 C481.774603,467 467,481.774603 467,500 C467,518.225397 481.774603,533 500,533 C518.225397,533 533,518.225397 533,500 C533,481.774603 518.225397,467 500,467 Z'
+                    }
+                    fillOpacity='0.35'
+                    fill='#000000'
+                  />
+                  <G transform='translate(467.000000, 467.000000)'>
+                    <Circle
+                      stroke='#FFFFFF'
+                      strokeWidth='2'
+                      cx='33'
+                      cy='33'
+                      r='33'
+                    />
+                    <Circle fill='#FFFFFF' cx='33' cy='33' r='2' />
+                  </G>
+                </G>
+              </G>
+            </Svg>
+          </Animated.View>
+        </PanGestureHandler>
+      </View>
+    )
+  }, [])
+
+  const altTextInput = useCallback(() => {
+    return (
+      <>
+        <Text style={[styles.altTextInputHeading, { color: theme.primary }]}>
+          为附件添加文字说明
+        </Text>
+        <TextInput
+          style={[styles.altTextInput, { borderColor: theme.border }]}
+          autoCapitalize='none'
+          autoCorrect={false}
+          maxLength={1500}
+          multiline
+          onChangeText={e => setAltText(e)}
+          placeholder={
+            '你可以为附件添加文字说明，以便更多人可以查看他们（包括视力障碍或视力受损人士）。\n\n优质的描述应该简洁明了，但要准确地描述照片中的内容，以便用户理解其含义。'
+          }
+          placeholderTextColor={theme.secondary}
+          scrollEnabled
+        />
+        <Text style={[styles.altTextLength, { color: theme.secondary }]}>
+          {1500 - (altText?.length || 0)}
+        </Text>
+      </>
+    )
+  }, [altText?.length])
+
+  return (
+    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
+      <SafeAreaView style={{ flex: 1 }} edges={['right', 'bottom', 'left']}>
+        <Stack.Navigator>
+          <Stack.Screen
+            name='Screen-Shared-Compose-EditAttachment-Root'
+            options={{
+              title: '编辑附件',
+              headerLeft: () => (
+                <HeaderLeft text='取消' onPress={() => navigation.goBack()} />
+              ),
+              headerRight: () => <HeaderRight text='应用' onPress={() => {}} />
+            }}
+          >
+            {() => {
+              switch (attachment.type) {
+                case 'image':
+                  return (
+                    <View style={{ flex: 1 }}>
+                      {imageFocus()}
+                      <Text
+                        style={[
+                          styles.imageFocusText,
+                          { color: theme.primary }
+                        ]}
+                      >
+                        在预览图上点击或拖动圆圈，以选择缩略图的焦点。
+                      </Text>
+                      <View style={styles.editContainer}>{altTextInput()}</View>
+                    </View>
+                  )
+              }
+              return null
+            }}
+          </Stack.Screen>
+        </Stack.Navigator>
+      </SafeAreaView>
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  editContainer: { padding: StyleConstants.Spacing.Global.PagePadding },
+  imageFocusText: {
+    fontSize: StyleConstants.Font.Size.M
+  },
+  altTextInputHeading: {
+    fontSize: StyleConstants.Font.Size.M,
+    fontWeight: StyleConstants.Font.Weight.Bold,
+    marginTop: StyleConstants.Spacing.XL
+  },
+  altTextInput: {
+    height: 200,
+    fontSize: StyleConstants.Font.Size.M,
+    marginTop: StyleConstants.Spacing.M,
+    marginBottom: StyleConstants.Spacing.S,
+    padding: StyleConstants.Spacing.Global.PagePadding,
+    paddingTop: StyleConstants.Spacing.S * 1.5,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  altTextLength: {
+    textAlign: 'right',
+    marginRight: StyleConstants.Spacing.S,
+    fontSize: StyleConstants.Font.Size.S,
+    marginBottom: StyleConstants.Spacing.M
+  }
+})
+
+export default ComposeEditAttachment
--- a/src/screens/Shared/Compose/Root.tsx
+++ b/src/screens/Shared/Compose/Root.tsx
@ -6,6 +6,7 @@ import {
  ActivityIndicator,
  FlatList,
  Pressable,
+  ProgressViewIOS,
  StyleSheet,
  Text,
  TextInput,
@ -112,6 +113,10 @@ const ComposeRoot: React.FC<Props> = ({ postState, postDispatch }) => {

  return (
    <View style={styles.base}>
+      <ProgressViewIOS
+        progress={postState.attachmentUploadProgress?.progress || 0}
+        progressViewStyle='bar'
+      />
      <FlatList
        ListHeaderComponent={
          <ComposeTextInput
--- a/src/screens/Shared/Compose/addAttachments.ts
+++ b/src/screens/Shared/Compose/addAttachments.ts
@ -39,12 +39,13 @@ const uploadAttachment = async ({
      })
    }
  })
-    .then(({ body }: { body: Mastodon.Attachment }) => {
+    .then(({ body }: { body: Mastodon.Attachment & { local_url: string } }) => {
      postDispatch({
        type: 'attachmentUploadProgress',
        payload: undefined
      })
      if (body.id) {
+        body.local_url = result.uri
        postDispatch({
          type: 'attachments',
          payload: postState.attachments.concat([body])
--- a/src/screens/Shared/sharedScreens.tsx
+++ b/src/screens/Shared/sharedScreens.tsx
@ -5,6 +5,7 @@ import ScreenSharedHashtag from 'src/screens/Shared/Hashtag'
 import ScreenSharedToot from 'src/screens/Shared/Toot'
 import ScreenSharedWebview from 'src/screens/Shared/Webview'
 import Compose from 'src/screens/Shared/Compose'
+import ComposeEditAttachment from './Compose/EditAttachment'
 import ScreenSharedSearch from './Search'
 import { useTranslation } from 'react-i18next'

@ -54,6 +55,14 @@ const sharedScreens = (Stack: any) => {
        stackPresentation: 'fullScreenModal'
      }}
    />,
+    <Stack.Screen
+      key='Screen-Shared-Compose-EditAttachment'
+      name='Screen-Shared-Compose-EditAttachment'
+      component={ComposeEditAttachment}
+      options={{
+        stackPresentation: 'fullScreenModal'
+      }}
+    />,
    <Stack.Screen
      key='Screen-Shared-Search'
      name='Screen-Shared-Search'