From 69289e8d40d128e04388c81aa0fbba0b7e06a5f7 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Mon, 7 Dec 2020 00:23:26 +0100 Subject: [PATCH] Attachments sensitive done --- src/screens/Shared/Compose.tsx | 28 +++++--- src/screens/Shared/Compose/Actions.tsx | 19 +++--- src/screens/Shared/Compose/Attachments.tsx | 69 +++++++++++++++----- src/screens/Shared/Compose/Root.tsx | 2 +- src/screens/Shared/Compose/addAttachments.ts | 3 +- 5 files changed, 84 insertions(+), 37 deletions(-) diff --git a/src/screens/Shared/Compose.tsx b/src/screens/Shared/Compose.tsx index 81a22ef8..92f3d617 100644 --- a/src/screens/Shared/Compose.tsx +++ b/src/screens/Shared/Compose.tsx @@ -67,7 +67,7 @@ export type PostState = { | '604800' | string } - attachments: Mastodon.Attachment[] + attachments: { sensitive: boolean; uploads: Mastodon.Attachment[] } attachmentUploadProgress: { progress: number; aspect?: number } | undefined visibility: 'public' | 'unlisted' | 'private' | 'direct' } @@ -95,7 +95,7 @@ export type PostAction = } | { type: 'attachments' - payload: PostState['attachments'] + payload: Partial } | { type: 'attachmentUploadProgress' @@ -138,7 +138,7 @@ const postInitialState: PostState = { multiple: false, expire: '86400' }, - attachments: [], + attachments: { sensitive: false, uploads: [] }, attachmentUploadProgress: undefined, visibility: getLocalAccountPreferences(store.getState())[ @@ -158,15 +158,21 @@ const postReducer = (state: PostState, action: PostAction): PostState => { case 'poll': return { ...state, poll: action.payload } case 'attachments': - return { ...state, attachments: action.payload } + return { + ...state, + attachments: { ...state.attachments, ...action.payload } + } case 'attachmentUploadProgress': return { ...state, attachmentUploadProgress: action.payload } case 'attachmentEdit': return { ...state, - attachments: state.attachments.map(attachment => - attachment.id === action.payload.id ? action.payload : attachment - ) + attachments: { + ...state.attachments, + uploads: state.attachments.uploads.map(upload => + upload.id === action.payload.id ? action.payload : upload + ) + } } case 'visibility': return { ...state, visibility: action.payload } @@ -226,8 +232,9 @@ const Compose: React.FC = () => { formData.append('poll[multiple]', postState.poll.multiple.toString()) } - if (postState.attachments.length) { - postState.attachments.forEach(e => + if (postState.attachments.uploads.length) { + formData.append('sensitive', postState.attachments.sensitive.toString()) + postState.attachments.uploads.forEach(e => formData.append('media_ids[]', e!.id) ) } @@ -248,7 +255,8 @@ const Compose: React.FC = () => { postState.poll.options['3'] + postState.poll.multiple + postState.poll.expire + - postState.attachments.map(attachment => attachment.id) + + postState.attachments.sensitive + + postState.attachments.uploads.map(upload => upload.id) + postState.visibility ).toString() }, diff --git a/src/screens/Shared/Compose/Actions.tsx b/src/screens/Shared/Compose/Actions.tsx index 2290709a..5b3a7cb7 100644 --- a/src/screens/Shared/Compose/Actions.tsx +++ b/src/screens/Shared/Compose/Actions.tsx @@ -43,31 +43,31 @@ const ComposeActions: React.FC = ({ if (postState.poll.active) return theme.disabled if (postState.attachmentUploadProgress) return theme.primary - if (postState.attachments.length) { + if (postState.attachments.uploads.length) { return theme.primary } else { return theme.secondary } }, [ postState.poll.active, - postState.attachments, + postState.attachments.uploads, postState.attachmentUploadProgress ]) const attachmentOnPress = useCallback(async () => { if (postState.poll.active) return if (postState.attachmentUploadProgress) return - if (!postState.attachments.length) { + if (!postState.attachments.uploads.length) { return await addAttachments({ postState, postDispatch }) } }, [ postState.poll.active, - postState.attachments, + postState.attachments.uploads, postState.attachmentUploadProgress ]) const pollColor = useMemo(() => { - if (postState.attachments.length) return theme.disabled + if (postState.attachments.uploads.length) return theme.disabled if (postState.attachmentUploadProgress) return theme.disabled if (postState.poll.active) { @@ -77,11 +77,14 @@ const ComposeActions: React.FC = ({ } }, [ postState.poll.active, - postState.attachments, + postState.attachments.uploads, postState.attachmentUploadProgress ]) const pollOnPress = useCallback(() => { - if (!postState.attachments.length && !postState.attachmentUploadProgress) { + if ( + !postState.attachments.uploads.length && + !postState.attachmentUploadProgress + ) { postDispatch({ type: 'poll', payload: { ...postState.poll, active: !postState.poll.active } @@ -92,7 +95,7 @@ const ComposeActions: React.FC = ({ } }, [ postState.poll.active, - postState.attachments, + postState.attachments.uploads, postState.attachmentUploadProgress ]) diff --git a/src/screens/Shared/Compose/Attachments.tsx b/src/screens/Shared/Compose/Attachments.tsx index f69b08fb..0ec9b221 100644 --- a/src/screens/Shared/Compose/Attachments.tsx +++ b/src/screens/Shared/Compose/Attachments.tsx @@ -15,6 +15,7 @@ import { useNavigation } from '@react-navigation/native' import ShimmerPlaceholder from 'react-native-shimmer-placeholder' import { ButtonRound } from 'src/components/Button' import addAttachments from './addAttachments' +import { Feather } from '@expo/vector-icons' const DEFAULT_HEIGHT = 200 @@ -74,7 +75,11 @@ const ComposeAttachments: React.FC = ({ postState, postDispatch }) => { onPress={() => postDispatch({ type: 'attachments', - payload: postState.attachments.filter(e => e.id !== item.id) + payload: { + uploads: postState.attachments.uploads.filter( + e => e.id !== item.id + ) + } }) } styles={styles.delete} @@ -105,9 +110,9 @@ const ComposeAttachments: React.FC = ({ postState, postDispatch }) => { } height={200} > - {postState.attachments.length > 0 && - postState.attachments[0].type === 'image' && - postState.attachments.length < 4 && ( + {postState.attachments.uploads.length > 0 && + postState.attachments.uploads[0].type === 'image' && + postState.attachments.uploads.length < 4 && ( = ({ postState, postDispatch }) => { )} ) - }, [postState.attachmentUploadProgress]) + }, [postState.attachmentUploadProgress, postState.attachments.uploads]) return ( - + + postDispatch({ + type: 'attachments', + payload: { sensitive: !postState.attachments.sensitive } + }) + } + > + + + 标记媒体为敏感内容 + + + + + ) } @@ -159,8 +184,20 @@ const ComposeAttachments: React.FC = ({ postState, postDispatch }) => { const styles = StyleSheet.create({ base: { flex: 1, - flexDirection: 'row', marginRight: StyleConstants.Spacing.Global.PagePadding, + marginTop: StyleConstants.Spacing.M + }, + sensitive: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + marginLeft: StyleConstants.Spacing.Global.PagePadding + }, + sensitiveText: { + fontSize: StyleConstants.Font.Size.M, + marginLeft: StyleConstants.Spacing.S + }, + imageContainer: { height: DEFAULT_HEIGHT }, image: { @@ -200,4 +237,4 @@ const styles = StyleSheet.create({ } }) -export default React.memo(ComposeAttachments, () => true) +export default ComposeAttachments diff --git a/src/screens/Shared/Compose/Root.tsx b/src/screens/Shared/Compose/Root.tsx index 59fbd3d1..af0a1b4f 100644 --- a/src/screens/Shared/Compose/Root.tsx +++ b/src/screens/Shared/Compose/Root.tsx @@ -121,7 +121,7 @@ const ComposeRoot: React.FC = ({ postState, postDispatch }) => { )} - {(postState.attachments.length > 0 || + {(postState.attachments.uploads.length > 0 || postState.attachmentUploadProgress) && (