Fixed #575

fastlane/metadata/en-US/release_notes.txt

@@ -1,2 +1,3 @@
 Enjoy toooting! This version includes following improvements and fixes:
 - Align filter experience with v4.0 and above
+- Supports enlarging user's avatar and banner

fastlane/metadata/zh-Hans/release_notes.txt

@@ -1,2 +1,3 @@
 toooting愉快！此版本包括以下改进和修复：
 - 改进过滤体验，与v4.0以上版本一致
+- 支持查看用户的头像和横幅图片

src/components/Timeline/Shared/Attachment.tsx

@@ -70,7 +70,6 @@ const TimelineAttachment = () => {
             preview_url: attachment.preview_url,
             url: attachment.url,
             remote_url: attachment.remote_url,
-            blurhash: attachment.blurhash,
             width: attachment.meta?.original?.width,
             height: attachment.meta?.original?.height
           }
@@ -90,7 +89,6 @@ const TimelineAttachment = () => {
               preview_url: attachment.preview_url,
               url: attachment.url,
               remote_url: attachment.remote_url,
-              blurhash: attachment.blurhash,
               width: attachment.meta?.original?.width,
               height: attachment.meta?.original?.height
             }

src/screens/ImagesViewer.tsx

@@ -25,7 +25,7 @@ const ZoomFlatList = createZoomListComponent(FlatList)
 
 const ScreenImagesViewer = ({
   route: {
-    params: { imageUrls, id }
+    params: { imageUrls, id, hideCounter }
   },
   navigation
 }: RootStackScreenProps<'Screen-ImagesViewer'>) => {
@@ -159,7 +159,9 @@ const ScreenImagesViewer = ({
         }}
       >
         <HeaderLeft content='X' native={false} background onPress={() => navigation.goBack()} />
-        <HeaderCenter inverted content={`${currentIndex + 1} / ${imageUrls.length}`} />
+        {!hideCounter ? (
+          <HeaderCenter inverted content={`${currentIndex + 1} / ${imageUrls.length}`} />
+        ) : null}
         <HeaderRight
           accessibilityLabel={t('content.actions.accessibilityLabel')}
           accessibilityHint={t('content.actions.accessibilityHint')}

src/screens/Tabs/Shared/Account/Header.tsx

@@ -1,47 +1,45 @@
-import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
+import navigationRef from '@helpers/navigationRef'
+import { getInstanceActive } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { Dimensions, View } from 'react-native'
+import { Dimensions, Image, Pressable } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useSelector } from 'react-redux'
 
 export interface Props {
   account?: Mastodon.Account
-  edit?: boolean
 }
 
-const AccountHeader = React.memo(
+const AccountHeader: React.FC<Props> = ({ account }) => {
-  ({ account, edit }: Props) => {
+  const { colors } = useTheme()
-    const { colors } = useTheme()
+  const topInset = useSafeAreaInsets().top
-    const topInset = useSafeAreaInsets().top
 
-    return (
+  useSelector(getInstanceActive)
-      <View>
+
-        <GracefullyImage
+  return (
-          uri={{ original: account?.header, static: account?.header_static }}
+    <Pressable
-          style={{
+      onPress={() => {
-            height: Dimensions.get('screen').width / 3 + topInset,
+        if (account) {
-            backgroundColor: colors.disabled
+          Image.getSize(account.header, (width, height) =>
-          }}
+            navigationRef.navigate('Screen-ImagesViewer', {
-        />
+              imageUrls: [{ id: 'avatar', url: account.header, width, height }],
-        {edit ? (
+              id: 'avatar',
-          <View
+              hideCounter: true
-            style={{
+            })
-              position: 'absolute',
+          )
-              width: '100%',
+        }
-              height: '100%',
+      }}
-              alignContent: 'center',
+    >
-              justifyContent: 'center',
+      <GracefullyImage
-              alignItems: 'center'
+        uri={{ original: account?.header, static: account?.header_static }}
-            }}
+        style={{
-          >
+          height: Dimensions.get('screen').width / 3 + topInset,
-            <Button type='icon' content='Edit' round onPress={() => {}} />
+          backgroundColor: colors.disabled
-          </View>
+        }}
-        ) : null}
+      />
-      </View>
+    </Pressable>
-    )
+  )
-  },
+}
-  (_, next) => next.account === undefined
-)
 
 export default AccountHeader

src/screens/Tabs/Shared/Account/Information/Avatar.tsx

@@ -1,28 +1,37 @@
-import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
+import navigationRef from '@helpers/navigationRef'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { getInstanceActive } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
-import { Pressable, View } from 'react-native'
+import { Pressable } from 'react-native'
 import { useSelector } from 'react-redux'
 
 export interface Props {
   account: Mastodon.Account | undefined
   myInfo: boolean
-  edit?: boolean
 }
 
-const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo, edit }) => {
+const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
   useSelector(getInstanceActive)
   return (
     <Pressable
-      disabled={!myInfo}
       onPress={() => {
-        myInfo && account && navigation.push('Tab-Shared-Account', { account })
+        if (account) {
+          if (myInfo) {
+            navigation.push('Tab-Shared-Account', { account })
+            return
+          } else {
+            navigationRef.navigate('Screen-ImagesViewer', {
+              imageUrls: [{ id: 'avatar', url: account.avatar }],
+              id: 'avatar',
+              hideCounter: true
+            })
+          }
+        }
       }}
       style={{
         borderRadius: 8,
@@ -36,20 +45,6 @@ const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo, edit }) =>
         style={{ flex: 1 }}
         uri={{ original: account?.avatar, static: account?.avatar_static }}
       />
-      {edit ? (
-        <View
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            alignContent: 'center',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
-        >
-          <Button type='icon' content='Edit' round onPress={() => {}} />
-        </View>
-      ) : null}
     </Pressable>
   )
 }

src/utils/navigation/navigators.ts

@@ -51,14 +51,14 @@ export type RootStackParamList = {
   'Screen-ImagesViewer': {
     imageUrls: {
       id: Mastodon.Attachment['id']
-      preview_url: Mastodon.AttachmentImage['preview_url']
+      preview_url?: Mastodon.AttachmentImage['preview_url']
       url: Mastodon.AttachmentImage['url']
       remote_url?: Mastodon.AttachmentImage['remote_url']
-      blurhash: Mastodon.AttachmentImage['blurhash']
       width?: number
       height?: number
     }[]
     id: Mastodon.Attachment['id']
+    hideCounter?: boolean
   }
   'Screen-AccountSelection': {
     component?: () => JSX.Element | undefined