octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Editing can update media

This commit is contained in:
Zhiyuan Zheng 2022-04-30 21:29:08 +02:00
parent d4f91a5756
commit f93d6f7db8
9 changed files with 666 additions and 746 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/GracefullyImage.tsx
View File

@ -1,6 +1,6 @@
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo, useState } from 'react'
import React, { useMemo, useState } from 'react'
import {
AccessibilityProps,
Image,
@ -39,8 +39,7 @@ export interface Props {
>
}
const GracefullyImage = React.memo(
({
const GracefullyImage = ({
accessibilityLabel,
accessibilityHint,
hidden = false,
@ -57,56 +56,26 @@ const GracefullyImage = React.memo(
const [originalFailed, setOriginalFailed] = useState(false)
const [imageLoaded, setImageLoaded] = useState(false)
const source = useMemo(() => {
if (originalFailed) {
return { uri: uri.remote || undefined }
} else {
return {
const source = originalFailed
? { uri: uri.remote || undefined }
: {
uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
}
}
}, [originalFailed])
const onLoad = useCallback(() => {
const onLoad = () => {
setImageLoaded(true)
if (setImageDimensions && source.uri) {
Image.getSize(source.uri, (width, height) =>
setImageDimensions({ width, height })
)
}
}, [source.uri])
const onError = useCallback(() => {
}
const onError = () => {
if (!originalFailed) {
setOriginalFailed(true)
}
}, [originalFailed])
}
const previewView = useMemo(
() =>
uri.preview && !imageLoaded ? (
<Image
fadeDuration={0}
source={{ uri: uri.preview }}
style={[
styles.placeholder,
{ backgroundColor: colors.shimmerDefault }
]}
/>
) : null,
[]
)
const originalView = useMemo(
() => (
<Image
fadeDuration={0}
source={source}
style={[{ flex: 1 }, imageStyle]}
onLoad={onLoad}
onError={onError}
/>
),
[source]
)
const blurhashView = useMemo(() => {
if (hidden || !imageLoaded) {
if (blurhash) {
@ -146,18 +115,27 @@ const GracefullyImage = React.memo(
: { onPress }
: { disabled: true })}
>
{previewView}
{originalView}
{uri.preview && !imageLoaded ? (
<Image
fadeDuration={0}
source={{ uri: uri.preview }}
style={[
styles.placeholder,
{ backgroundColor: colors.shimmerDefault }
]}
/>
) : null}
<Image
fadeDuration={0}
source={source}
style={[{ flex: 1 }, imageStyle]}
onLoad={onLoad}
onError={onError}
/>
{blurhashView}
</Pressable>
)
},
(prev, next) =>
prev.hidden === next.hidden &&
prev.uri.preview === next.uri.preview &&
prev.uri.original === next.uri.original &&
prev.uri.remote === next.uri.remote
)
}
const styles = StyleSheet.create({
placeholder: {

118
src/components/Timeline/Shared/Attachment.tsx
View File

@ -10,10 +10,9 @@ import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
import React, { useCallback, useMemo, useRef, useState } from 'react'
import { useEffect } from 'react'
import React, { useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, StyleSheet, View } from 'react-native'
import { Pressable, View } from 'react-native'
export interface Props {
status: Pick<Mastodon.Status, 'media_attachments' | 'sensitive'>
@ -24,24 +23,13 @@ const TimelineAttachment = React.memo(
const { t } = useTranslation('componentTimeline')
const [sensitiveShown, setSensitiveShown] = useState(status.sensitive)
const onPressBlurView = useCallback(() => {
analytics('timeline_shared_attachment_blurview_press_show')
layoutAnimation()
setSensitiveShown(false)
haptics('Light')
}, [])
const onPressShow = useCallback(() => {
analytics('timeline_shared_attachment_blurview_press_hide')
setSensitiveShown(true)
haptics('Light')
}, [])
const imageUrls = useRef<
RootStackParamList['Screen-ImagesViewer']['imageUrls']
>([])
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
useEffect(() => {
status.media_attachments.forEach((attachment, index) => {
const navigateToImagesViewer = (id: string) => {
status.media_attachments.forEach(attachment => {
switch (attachment.type) {
case 'image':
imageUrls.current.push({
@ -55,15 +43,25 @@ const TimelineAttachment = React.memo(
})
}
})
}, [])
const navigateToImagesViewer = (id: string) =>
navigation.navigate('Screen-ImagesViewer', {
imageUrls: imageUrls.current,
id
})
const attachments = useMemo(
() =>
status.media_attachments.map((attachment, index) => {
}
return (
<View>
<View
style={{
marginTop: StyleConstants.Spacing.S,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'stretch'
}}
>
{status.media_attachments.map((attachment, index) => {
switch (attachment.type) {
case 'image':
return (
@ -150,22 +148,31 @@ const TimelineAttachment = React.memo(
)
}
}
}),
[sensitiveShown]
)
return (
<View>
<View style={styles.container} children={attachments} />
})}
</View>
{status.sensitive &&
(sensitiveShown ? (
<Pressable style={styles.sensitiveBlur}>
<Pressable
style={{
position: 'absolute',
width: '100%',
height: '100%',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}
>
<Button
type='text'
content={t('shared.attachment.sensitive.button')}
overlay
onPress={onPressBlurView}
onPress={() => {
analytics('timeline_shared_attachment_blurview_press_show')
layoutAnimation()
setSensitiveShown(false)
haptics('Light')
}}
/>
</Pressable>
) : (
@ -174,7 +181,11 @@ const TimelineAttachment = React.memo(
content='EyeOff'
round
overlay
onPress={onPressShow}
onPress={() => {
analytics('timeline_shared_attachment_blurview_press_hide')
setSensitiveShown(true)
haptics('Light')
}}
style={{
position: 'absolute',
top: StyleConstants.Spacing.S * 2,
@ -185,33 +196,28 @@ const TimelineAttachment = React.memo(
</View>
)
},
() => true
)
(prev, next) => {
let isEqual = true
const styles = StyleSheet.create({
container: {
marginTop: StyleConstants.Spacing.S,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'stretch'
},
sensitiveBlur: {
position: 'absolute',
width: '100%',
height: '100%',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
sensitiveBlurButton: {
padding: StyleConstants.Spacing.S,
borderRadius: 6
},
sensitiveText: {
...StyleConstants.FontStyle.M
if (
prev.status.media_attachments.length !==
next.status.media_attachments.length
) {
isEqual = false
return isEqual
}
prev.status.media_attachments.forEach((attachment, index) => {
if (
attachment.preview_url !==
next.status.media_attachments[index].preview_url
) {
isEqual = false
}
})
return isEqual
}
)
export default TimelineAttachment

41
src/components/Timeline/Shared/Attachment/Image.tsx
View File

@ -1,8 +1,8 @@
import analytics from '@components/analytics'
import GracefullyImage from '@components/GracefullyImage'
import { StyleConstants } from '@utils/styles/constants'
import React, { useCallback } from 'react'
import { StyleSheet, View } from 'react-native'
import React from 'react'
import { View } from 'react-native'
import attachmentAspectRatio from './aspectRatio'
export interface Props {
@ -13,21 +13,30 @@ export interface Props {
navigateToImagesViewer: (imageIndex: string) => void
}
const AttachmentImage = React.memo(
({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
const onPress = useCallback(() => {
analytics('timeline_shared_attachment_image_press', { id: image.id })
navigateToImagesViewer(image.id)
}, [])
const AttachmentImage = ({
total,
index,
sensitiveShown,
image,
navigateToImagesViewer
}: Props) => {
return (
<View style={styles.base}>
<View
style={{
flex: 1,
flexBasis: '50%',
padding: StyleConstants.Spacing.XS / 2
}}
>
<GracefullyImage
accessibilityLabel={image.description}
hidden={sensitiveShown}
uri={{ original: image.preview_url, remote: image.remote_url }}
blurhash={image.blurhash}
onPress={onPress}
onPress={() => {
analytics('timeline_shared_attachment_image_press', { id: image.id })
navigateToImagesViewer(image.id)
}}
style={{
aspectRatio:
total > 1 ||
@ -41,16 +50,6 @@ const AttachmentImage = React.memo(
/>
</View>
)
},
(prev, next) => prev.sensitiveShown === next.sensitiveShown
)
const styles = StyleSheet.create({
base: {
flex: 1,
flexBasis: '50%',
padding: StyleConstants.Spacing.XS / 2
}
})
export default AttachmentImage

58
src/components/Timeline/Shared/HeaderConversation.tsx
View File

@ -10,20 +10,19 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, StyleSheet, Text, View } from 'react-native'
import { Pressable, Text, View } from 'react-native'
import { useQueryClient } from 'react-query'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedMuted from './HeaderShared/Muted'
const Names = React.memo(
({ accounts }: { accounts: Mastodon.Account[] }) => {
const Names = ({ accounts }: { accounts: Mastodon.Account[] }) => {
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
return (
<Text
numberOfLines={1}
style={[styles.namesLeading, { color: colors.secondary }]}
style={{ ...StyleConstants.FontStyle.M, color: colors.secondary }}
>
<Text>{t('shared.header.conversation.withAccounts')}</Text>
{accounts.map((account, index) => (
@ -38,17 +37,14 @@ const Names = React.memo(
))}
</Text>
)
},
() => true
)
}
export interface Props {
queryKey: QueryKeyTimeline
conversation: Mastodon.Conversation
}
const HeaderConversation = React.memo(
({ queryKey, conversation }: Props) => {
const HeaderConversation = ({ queryKey, conversation }: Props) => {
const { colors, theme } = useTheme()
const { t } = useTranslation('componentTimeline')
@ -96,10 +92,17 @@ const HeaderConversation = React.memo(
)
return (
<View style={styles.base}>
<View style={styles.nameAndMeta}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 3 }}>
<Names accounts={conversation.accounts} />
<View style={styles.meta}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: StyleConstants.Spacing.XS,
marginBottom: StyleConstants.Spacing.S
}}
>
{conversation.last_status?.created_at ? (
<HeaderSharedCreated
created_at={conversation.last_status?.created_at}
@ -111,41 +114,12 @@ const HeaderConversation = React.memo(
</View>
<Pressable
style={styles.action}
style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}
onPress={actionOnPress}
children={actionChildren}
/>
</View>
)
},
() => true
)
const styles = StyleSheet.create({
base: {
flex: 1,
flexDirection: 'row'
},
nameAndMeta: {
flex: 3
},
meta: {
flexDirection: 'row',
alignItems: 'center',
marginTop: StyleConstants.Spacing.XS,
marginBottom: StyleConstants.Spacing.S
},
created_at: {
...StyleConstants.FontStyle.S
},
action: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center'
},
namesLeading: {
...StyleConstants.FontStyle.M
}
})
export default HeaderConversation

52
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, StyleSheet, View } from 'react-native'
import { Pressable, View } from 'react-native'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
@ -20,17 +20,23 @@ export interface Props {
status: Mastodon.Status
}
const TimelineHeaderDefault = React.memo(
({ queryKey, rootQueryKey, status }: Props) => {
const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
const { t } = useTranslation('componentTimeline')
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const { colors } = useTheme()
return (
<View style={styles.base}>
<View style={styles.accountAndMeta}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 5 }}>
<HeaderSharedAccount account={status.account} />
<View style={styles.meta}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: StyleConstants.Spacing.XS,
marginBottom: StyleConstants.Spacing.S
}}
>
<HeaderSharedCreated
created_at={status.created_at}
edited_at={status.edited_at}
@ -44,7 +50,12 @@ const TimelineHeaderDefault = React.memo(
{queryKey ? (
<Pressable
accessibilityHint={t('shared.header.actions.accessibilityHint')}
style={styles.action}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingBottom: StyleConstants.Spacing.S
}}
onPress={() =>
navigation.navigate('Screen-Actions', {
queryKey,
@ -64,33 +75,6 @@ const TimelineHeaderDefault = React.memo(
) : null}
</View>
)
},
() => true
)
const styles = StyleSheet.create({
base: {
flex: 1,
flexDirection: 'row'
},
accountAndMeta: {
flex: 5
},
meta: {
flexDirection: 'row',
alignItems: 'center',
marginTop: StyleConstants.Spacing.XS,
marginBottom: StyleConstants.Spacing.S
},
created_at: {
...StyleConstants.FontStyle.S
},
action: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingBottom: StyleConstants.Spacing.S
}
})
export default TimelineHeaderDefault

36
src/components/Timeline/Shared/HeaderNotification.tsx
View File

@ -10,7 +10,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import { Pressable, View } from 'react-native'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
@ -22,8 +22,7 @@ export interface Props {
notification: Mastodon.Notification
}
const TimelineHeaderNotification = React.memo(
({ queryKey, notification }: Props) => {
const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const { colors } = useTheme()
@ -64,7 +63,7 @@ const TimelineHeaderNotification = React.memo(
}, [notification.type])
return (
<View style={styles.base}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View
style={{
flex:
@ -83,7 +82,14 @@ const TimelineHeaderNotification = React.memo(
{...((notification.type === 'follow' ||
notification.type === 'follow_request') && { withoutName: true })}
/>
<View style={styles.meta}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: StyleConstants.Spacing.XS,
marginBottom: StyleConstants.Spacing.S
}}
>
<HeaderSharedCreated
created_at={notification.created_at}
edited_at={notification.status?.edited_at}
@ -102,7 +108,7 @@ const TimelineHeaderNotification = React.memo(
<View
style={[
styles.relationship,
{ marginLeft: StyleConstants.Spacing.M },
notification.type === 'follow' ||
notification.type === 'follow_request'
? { flexShrink: 1 }
@ -113,24 +119,6 @@ const TimelineHeaderNotification = React.memo(
</View>
</View>
)
},
() => true
)
const styles = StyleSheet.create({
base: {
flex: 1,
flexDirection: 'row'
},
meta: {
flexDirection: 'row',
alignItems: 'center',
marginTop: StyleConstants.Spacing.XS,
marginBottom: StyleConstants.Spacing.S
},
relationship: {
marginLeft: StyleConstants.Spacing.M
}
})
export default TimelineHeaderNotification

14
src/screens/Actions.tsx
View File

@ -35,8 +35,7 @@ import ActionsNotificationsFilter from './Actions/NotificationsFilter'
import ActionsShare from './Actions/Share'
import ActionsStatus from './Actions/Status'
const ScreenActions = React.memo(
({
const ScreenActions = ({
route: { params },
navigation
}: RootStackScreenProps<'Screen-Actions'>) => {
@ -49,6 +48,7 @@ const ScreenActions = React.memo(
let sameAccount = false
switch (params.type) {
case 'status':
console.log('media length', params.status.media_attachments.length)
sameAccount = instanceAccount?.id === params.status.account.id
break
case 'account':
@ -103,7 +103,7 @@ const ScreenActions = React.memo(
}
})
const actions = useMemo(() => {
const actions = () => {
switch (params.type) {
case 'status':
return (
@ -174,7 +174,7 @@ const ScreenActions = React.memo(
case 'notifications_filter':
return <ActionsNotificationsFilter />
}
}, [])
}
return (
<SafeAreaProvider>
@ -209,7 +209,7 @@ const ScreenActions = React.memo(
{ backgroundColor: colors.primaryOverlay }
]}
/>
{actions}
{actions()}
</Animated.View>
</PanGestureHandler>
</Animated.View>
@ -217,9 +217,7 @@ const ScreenActions = React.memo(
</Animated.View>
</SafeAreaProvider>
)
},
() => true
)
}
const styles = StyleSheet.create({
overlay: {

1
src/screens/Compose.tsx
View File

@ -305,7 +305,6 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
switch (params?.type) {
case 'edit':
console.log('firing mutation')
mutateTimeline.mutate({
type: 'editItem',
queryKey: params.queryKey,

6
src/utils/queryHooks/timeline/editItem.ts
View File

@ -7,15 +7,12 @@ const editItem = ({
rootQueryKey,
status
}: MutationVarsTimelineEditItem) => {
console.log('START')
queryKey &&
queryClient.setQueryData<InfiniteData<any> | undefined>(queryKey, old => {
if (old) {
old.pages = old.pages.map(page => {
page.body = page.body.map((item: Mastodon.Status) => {
if (item.id === status.id) {
console.log('found queryKey', queryKey)
console.log('new content', status.content)
item = status
}
return item
@ -34,8 +31,6 @@ const editItem = ({
old.pages = old.pages.map(page => {
page.body = page.body.map((item: Mastodon.Status) => {
if (item.id === status.id) {
console.log('found rootQueryKey', queryKey)
console.log('new content', status.content)
item = status
}
return item
@ -46,7 +41,6 @@ const editItem = ({
}
}
)
console.log('EDN')
}
export default editItem