diff --git a/src/components/postCard/container/postCardContainer.js b/src/components/postCard/container/postCardContainer.js index a1c8ff9c9..763e9128e 100644 --- a/src/components/postCard/container/postCardContainer.js +++ b/src/components/postCard/container/postCardContainer.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { withNavigation } from 'react-navigation'; import { connect } from 'react-redux'; import get from 'lodash/get'; @@ -35,6 +35,9 @@ const PostCardContainer = ({ const [_content, setContent] = useState(content); const [reblogs, setReblogs] = useState([]); const activeVotes = get(_content, 'active_votes', []); + const [isMuted, setIsMuted] = useState( + currentAccount.mutes && currentAccount.mutes.indexOf(content.author) > -1, + ); useEffect(() => { let isCancelled = false; @@ -117,12 +120,17 @@ const PostCardContainer = ({ }); }; + const _handleOnUnmutePress = () => { + setIsMuted(false); + }; + return ( ); diff --git a/src/components/postCard/view/postCardStyles.js b/src/components/postCard/view/postCardStyles.js index 15aaca1fe..e3336692c 100644 --- a/src/components/postCard/view/postCardStyles.js +++ b/src/components/postCard/view/postCardStyles.js @@ -91,4 +91,18 @@ export default EStyleSheet.create({ color: '$primaryDarkGray', marginLeft: 2, }, + revealButton: { + backgroundColor: '$primaryGrayBackground', + height: 56, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 12, + marginTop: 8, + marginHorizontal: 0, + }, + revealText: { + color: '$primaryDarkText', + textAlign: 'center', + fontSize: 18, + }, }); diff --git a/src/components/postCard/view/postCardView.js b/src/components/postCard/view/postCardView.js index 74ced488e..26f32139e 100644 --- a/src/components/postCard/view/postCardView.js +++ b/src/components/postCard/view/postCardView.js @@ -18,6 +18,7 @@ import { TextWithIcon } from '../../basicUIElements'; import { Upvote } from '../../upvote'; // Styles import styles from './postCardStyles'; +import { TextButton } from '../..'; const dim = Dimensions.get('window'); const DEFAULT_IMAGE = @@ -30,6 +31,7 @@ const PostCardView = ({ handleOnContentPress, handleOnVotersPress, handleOnReblogsPress, + handleOnUnmutePress, content, reblogs, isHideImage, @@ -39,6 +41,7 @@ const PostCardView = ({ activeVotes, imageHeight, setImageHeight, + isMuted, }) => { //local state to manage fake upvote if available const [activeVotesCount, setActiveVotesCount] = useState(0); @@ -78,7 +81,7 @@ const PostCardView = ({ var images = { image: DEFAULT_IMAGE, thumbnail: DEFAULT_IMAGE }; if (content.thumbnail) { - if (nsfw !== '0' && content.nsfw) { + if (isMuted || (nsfw !== '0' && content.nsfw)) { images = { image: NSFW_IMAGE, thumbnail: NSFW_IMAGE }; } else { images = { image: content.image, thumbnail: content.thumbnail }; @@ -149,10 +152,19 @@ const PostCardView = ({ }} /> )} - - {content.title} - {content.summary} - + {!isMuted ? ( + + {content.title} + {content.summary} + + ) : ( + handleOnUnmutePress()} + text={intl.formatMessage({ id: 'post.reveal_muted' })} + /> + )} diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index a5b0c7cd5..b3fc80e9b 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -441,7 +441,8 @@ "image_saved": "Image saved to Photo Gallery", "image_saved_error": "Error Saving Image", "wrong_link": "Wrong link", - "in": "in" + "in": "in", + "reveal_muted":"MUTED\nTap to reveal content" }, "drafts": { "title": "Drafts",