octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-04-23 14:47:21 +02:00
Code Issues Projects Releases Wiki Activity

Try out more apng loading

Browse Source
This commit is contained in:
Zhiyuan Zheng 2022-02-12 18:25:53 +01:00
parent 6f0c318d06
commit c6d3514fa2
5 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Account.tsx
View File

@ -36,7 +36,7 @@ const ComponentAccount: React.FC<Props> = ({
onPress={customOnPress || onPress} onPress={customOnPress || onPress}
> >
<GracefullyImage <GracefullyImage
uri={{ original: account.avatar_static }} uri={{ original: account.avatar, static: account.avatar_static }}
style={styles.itemAccountAvatar} style={styles.itemAccountAvatar}
/> />
<View> <View>

8
src/components/GracefullyImage.tsx
View File

@ -1,3 +1,4 @@
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo, useState } from 'react' import React, { useCallback, useMemo, useState } from 'react'
import { import {
@ -23,7 +24,7 @@ export interface Props {
accessibilityHint?: AccessibilityProps['accessibilityHint'] accessibilityHint?: AccessibilityProps['accessibilityHint']
hidden?: boolean hidden?: boolean
uri: { preview?: string; original?: string; remote?: string } uri: { preview?: string; original?: string; remote?: string; static?: string }
blurhash?: string blurhash?: string
dimension?: { width: number; height: number } dimension?: { width: number; height: number }
onPress?: () => void onPress?: () => void
@ -51,6 +52,7 @@ const GracefullyImage = React.memo(
imageStyle, imageStyle,
setImageDimensions setImageDimensions
}: Props) => { }: Props) => {
const { reduceMotionEnabled } = useAccessibility()
const { colors } = useTheme() const { colors } = useTheme()
const [originalFailed, setOriginalFailed] = useState(false) const [originalFailed, setOriginalFailed] = useState(false)
const [imageLoaded, setImageLoaded] = useState(false) const [imageLoaded, setImageLoaded] = useState(false)
@ -59,7 +61,9 @@ const GracefullyImage = React.memo(
if (originalFailed) { if (originalFailed) {
return { uri: uri.remote || undefined } return { uri: uri.remote || undefined }
} else { } else {
return { uri: uri.original } return {
uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
}
} }
}, [originalFailed]) }, [originalFailed])

2
src/components/Timeline/Conversation.tsx
View File

@ -32,7 +32,7 @@ const Avatars: React.FC<{ accounts: Mastodon.Account[] }> = ({ accounts }) => {
{accounts.slice(0, 4).map(account => ( {accounts.slice(0, 4).map(account => (
<GracefullyImage <GracefullyImage
key={account.id} key={account.id}
uri={{ original: account.avatar_static }} uri={{ original: account.avatar, static: account.avatar_static }}
dimension={{ dimension={{
width: StyleConstants.Avatar.M, width: StyleConstants.Avatar.M,
height: height:

7
src/components/Timeline/Shared/Avatar.tsx
View File

@ -16,9 +16,8 @@ export interface Props {
const TimelineAvatar = React.memo( const TimelineAvatar = React.memo(
({ queryKey, account, highlighted }: Props) => { ({ queryKey, account, highlighted }: Props) => {
const { t } = useTranslation('componentTimeline') const { t } = useTranslation('componentTimeline')
const navigation = useNavigation< const navigation =
StackNavigationProp<Nav.TabLocalStackParamList> useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
>()
// Need to fix go back root // Need to fix go back root
const onPress = useCallback(() => { const onPress = useCallback(() => {
analytics('timeline_shared_avatar_press', { analytics('timeline_shared_avatar_press', {
@ -38,7 +37,7 @@ const TimelineAvatar = React.memo(
}) })
})} })}
onPress={onPress} onPress={onPress}
uri={{ original: account.avatar_static }} uri={{ original: account.avatar, static: account.avatar_static }}
dimension={{ dimension={{
width: StyleConstants.Avatar.M, width: StyleConstants.Avatar.M,
height: StyleConstants.Avatar.M height: StyleConstants.Avatar.M

14
src/screens/Tabs/Shared/Account/Information/Avatar.tsx
View File

@ -3,7 +3,6 @@ import Button from '@components/Button'
import GracefullyImage from '@components/GracefullyImage' import GracefullyImage from '@components/GracefullyImage'
import { useNavigation } from '@react-navigation/native' import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack' import { StackNavigationProp } from '@react-navigation/stack'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { TabLocalStackParamList } from '@utils/navigation/navigators' import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants' import { StyleConstants } from '@utils/styles/constants'
import React from 'react' import React from 'react'
@ -20,11 +19,8 @@ const AccountInformationAvatar: React.FC<Props> = ({
myInfo, myInfo,
edit edit
}) => { }) => {
const navigation = useNavigation< const navigation =
StackNavigationProp<TabLocalStackParamList> useNavigation<StackNavigationProp<TabLocalStackParamList>>()
>()
const { reduceMotionEnabled } = useAccessibility()
return ( return (
<Pressable <Pressable
disabled={!myInfo} disabled={!myInfo}
@ -37,11 +33,7 @@ const AccountInformationAvatar: React.FC<Props> = ({
<GracefullyImage <GracefullyImage
key={account?.avatar} key={account?.avatar}
style={styles.image} style={styles.image}
uri={{ uri={{ original: account?.avatar, static: account?.avatar_static }}
original: reduceMotionEnabled
? account?.avatar_static
: account?.avatar
}}
/> />
{edit ? ( {edit ? (
<View <View