From 19042b23d482ea38edf68eb6b839d89d2ab0bfa7 Mon Sep 17 00:00:00 2001 From: Vitor Leal Date: Thu, 15 Oct 2020 15:08:15 -0300 Subject: [PATCH 1/7] Add Image component Signed-off-by: Vitor Leal --- app/containers/MessageBox/ReplyPreview.js | 30 ++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index e1fcbcca79e..0628eb30791 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import moment from 'moment'; import { connect } from 'react-redux'; import isEqual from 'lodash/isEqual'; - +import FastImage from '@rocket.chat/react-native-fast-image'; import Markdown from '../markdown'; import { CustomIcon } from '../../lib/Icons'; import sharedStyles from '../../views/Styles'; @@ -42,6 +42,33 @@ const styles = StyleSheet.create({ } }); +const renderImage = () => { + const { + message, baseUrl, user + } = this.props; + + if (!message.attachments) { + return null; + } else { + const p = []; + Object.keys(message.attachments).forEach((key) => { + if (!message.attachments[key].image_url) { + return null; + } + + const img = `${ baseUrl }${ message.attachments[key].image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`; + p.push( + + ); + }); + return p; + } +}; + const ReplyPreview = React.memo(({ message, Message_TimeFormat, baseUrl, username, replying, getCustomEmoji, close, theme }) => { @@ -72,6 +99,7 @@ const ReplyPreview = React.memo(({ theme={theme} /> + {renderImage()} ); From 242a441312094505776f05a9d669ba14ff64b441 Mon Sep 17 00:00:00 2001 From: Vitor Leal Date: Thu, 15 Oct 2020 15:45:09 -0300 Subject: [PATCH 2/7] Add image on Reply Signed-off-by: Vitor Leal --- app/containers/message/Reply.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js index fba4c0fbda8..5ce76658a44 100644 --- a/app/containers/message/Reply.js +++ b/app/containers/message/Reply.js @@ -3,7 +3,7 @@ import { View, Text, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; import moment from 'moment'; import isEqual from 'deep-equal'; - +import Image from './Image'; import Touchable from './Touchable'; import Markdown from '../markdown'; import openLink from '../../utils/openLink'; @@ -127,6 +127,22 @@ const Fields = React.memo(({ attachment, theme }) => { ); }, (prevProps, nextProps) => isEqual(prevProps.attachment.fields, nextProps.attachment.fields) && prevProps.theme === nextProps.theme); +const renderImage = ({ + attachment, user, baseUrl, customEmojis +}) => { + if (attachment.attachments.length === 0) { + return null; + } + + return attachment.attachments.map((attach) => { + if (!attach.image_url) { + return null; + } + + return ; + }); +}; + const Reply = React.memo(({ attachment, timeFormat, index, getCustomEmoji, theme }) => { From f29845d6bae318d4dcb4130057ee8d4065331ff1 Mon Sep 17 00:00:00 2001 From: Fernando Aguilar Date: Thu, 22 Oct 2020 15:55:23 -0300 Subject: [PATCH 3/7] Feat: Add video and audio cases to renderImage in replyPreview to solve #704 --- app/containers/MessageBox/ReplyPreview.js | 52 ++++++++++++++++++----- 1 file changed, 41 insertions(+), 11 deletions(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index 0628eb30791..8ff48cec737 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -5,6 +5,7 @@ import moment from 'moment'; import { connect } from 'react-redux'; import isEqual from 'lodash/isEqual'; import FastImage from '@rocket.chat/react-native-fast-image'; +import { RectButton } from 'react-native-gesture-handler'; import Markdown from '../markdown'; import { CustomIcon } from '../../lib/Icons'; import sharedStyles from '../../views/Styles'; @@ -52,18 +53,47 @@ const renderImage = () => { } else { const p = []; Object.keys(message.attachments).forEach((key) => { - if (!message.attachments[key].image_url) { - return null; + // attachment is image + if (message.attachments[key].image_url) { + const img = `${ baseUrl }${ message.attachments[key].image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`; + p.push( + + ); + } else if (message.attachments[key].video_url) { + // attachment is video + p.push( + + + + ); + } else if (message.attachments[key].audio_url) { + // attachment is audio + p.push( + + + + ); } - - const img = `${ baseUrl }${ message.attachments[key].image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`; - p.push( - - ); }); return p; } From c592ddf55497804cdaa3a04d94e9970bea935fa8 Mon Sep 17 00:00:00 2001 From: Fernando Aguilar Date: Thu, 22 Oct 2020 16:00:24 -0300 Subject: [PATCH 4/7] Refat: Change variable name in ReplyPreview at function renderImage --- app/containers/MessageBox/ReplyPreview.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index 8ff48cec737..d35718e805b 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -51,12 +51,12 @@ const renderImage = () => { if (!message.attachments) { return null; } else { - const p = []; + const attachmentComponent = []; Object.keys(message.attachments).forEach((key) => { // attachment is image if (message.attachments[key].image_url) { const img = `${ baseUrl }${ message.attachments[key].image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`; - p.push( + attachmentComponent.push( { ); } else if (message.attachments[key].video_url) { // attachment is video - p.push( + attachmentComponent.push( { ); } else if (message.attachments[key].audio_url) { // attachment is audio - p.push( + attachmentComponent.push( { ); } }); - return p; + return attachmentComponent; } }; From d6609f060279acda745a7b9a81ae18df4984568b Mon Sep 17 00:00:00 2001 From: Fernando Aguilar Date: Thu, 29 Oct 2020 15:38:53 -0300 Subject: [PATCH 5/7] Feat: Add extra replyPreview stylesheets --- app/containers/MessageBox/ReplyPreview.js | 42 +++++++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index d35718e805b..0e64a3ff17f 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -33,13 +33,48 @@ const styles = StyleSheet.create({ }, time: { fontSize: 12, - lineHeight: 16, + lineHeight: 20, marginLeft: 6, ...sharedStyles.textRegular, fontWeight: '300' }, close: { marginRight: 10 + }, + thumbnail: { + marginLeft: 'auto', + width: 38, + height: 38 + }, + text: { + flex: 1, + flexDirection: 'column', + paddingRight: 5 + }, + details: { + flexDirection: 'row' + }, + buttonVideo: { + height: 38, + width: 38, + backgroundColor: '#1f2329', + alignItems: 'center', + justifyContent: 'center', + marginLeft: 'auto' + }, + buttonAudio: { + height: 38, + width: 38, + backgroundColor: '#f7f8fa', + alignItems: 'center', + justifyContent: 'center', + marginLeft: 'auto' + }, + playVideo: { + color: '#f7f8fa' + }, + playAudio: { + color: '#1D74F5' } }); @@ -107,6 +142,7 @@ const ReplyPreview = React.memo(({ } const time = moment(message.ts).format(Message_TimeFormat); + const description = (message.msg === '') ? message.attachments[0].description : message.msg; return ( {time} + {renderImage()} - {renderImage()} ); From c5568430019fcf963ff26d7a160078f5dc005b63 Mon Sep 17 00:00:00 2001 From: Vitor Leal Date: Wed, 11 Nov 2020 22:17:49 -0300 Subject: [PATCH 6/7] Init refactoring replyPreview Signed-off-by: Vitor Leal --- app/containers/MessageBox/ReplyPreview.js | 67 +++-------------------- app/containers/message/Reply.js | 17 ------ 2 files changed, 8 insertions(+), 76 deletions(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index 0e64a3ff17f..2f60132c3ea 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -4,12 +4,11 @@ import PropTypes from 'prop-types'; import moment from 'moment'; import { connect } from 'react-redux'; import isEqual from 'lodash/isEqual'; -import FastImage from '@rocket.chat/react-native-fast-image'; -import { RectButton } from 'react-native-gesture-handler'; import Markdown from '../markdown'; import { CustomIcon } from '../../lib/Icons'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; +import Attachments from '../message/Attachments'; const styles = StyleSheet.create({ container: { @@ -78,62 +77,6 @@ const styles = StyleSheet.create({ } }); -const renderImage = () => { - const { - message, baseUrl, user - } = this.props; - - if (!message.attachments) { - return null; - } else { - const attachmentComponent = []; - Object.keys(message.attachments).forEach((key) => { - // attachment is image - if (message.attachments[key].image_url) { - const img = `${ baseUrl }${ message.attachments[key].image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`; - attachmentComponent.push( - - ); - } else if (message.attachments[key].video_url) { - // attachment is video - attachmentComponent.push( - - - - ); - } else if (message.attachments[key].audio_url) { - // attachment is audio - attachmentComponent.push( - - - - ); - } - }); - return attachmentComponent; - } -}; - const ReplyPreview = React.memo(({ message, Message_TimeFormat, baseUrl, username, replying, getCustomEmoji, close, theme }) => { @@ -164,8 +107,14 @@ const ReplyPreview = React.memo(({ preview theme={theme} /> - {renderImage()} + ); diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js index 5ce76658a44..56002161a13 100644 --- a/app/containers/message/Reply.js +++ b/app/containers/message/Reply.js @@ -3,7 +3,6 @@ import { View, Text, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; import moment from 'moment'; import isEqual from 'deep-equal'; -import Image from './Image'; import Touchable from './Touchable'; import Markdown from '../markdown'; import openLink from '../../utils/openLink'; @@ -127,22 +126,6 @@ const Fields = React.memo(({ attachment, theme }) => { ); }, (prevProps, nextProps) => isEqual(prevProps.attachment.fields, nextProps.attachment.fields) && prevProps.theme === nextProps.theme); -const renderImage = ({ - attachment, user, baseUrl, customEmojis -}) => { - if (attachment.attachments.length === 0) { - return null; - } - - return attachment.attachments.map((attach) => { - if (!attach.image_url) { - return null; - } - - return ; - }); -}; - const Reply = React.memo(({ attachment, timeFormat, index, getCustomEmoji, theme }) => { From c704d9a4e232a5c15af9e44f18f1e6751c59b932 Mon Sep 17 00:00:00 2001 From: Vitor Leal Date: Thu, 12 Nov 2020 13:38:30 -0300 Subject: [PATCH 7/7] Add img Reply Signed-off-by: Vitor Leal --- app/containers/MessageBox/ReplyPreview.js | 15 ++++++--------- app/containers/message/Reply.js | 5 +++++ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index 2f60132c3ea..ebf2dc5d881 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -1,5 +1,7 @@ import React from 'react'; -import { View, Text, StyleSheet } from 'react-native'; +import { + View, Text, StyleSheet, Image +} from 'react-native'; import PropTypes from 'prop-types'; import moment from 'moment'; import { connect } from 'react-redux'; @@ -8,7 +10,6 @@ import Markdown from '../markdown'; import { CustomIcon } from '../../lib/Icons'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; -import Attachments from '../message/Attachments'; const styles = StyleSheet.create({ container: { @@ -83,7 +84,6 @@ const ReplyPreview = React.memo(({ if (!replying) { return null; } - const time = moment(message.ts).format(Message_TimeFormat); const description = (message.msg === '') ? message.attachments[0].description : message.msg; return ( @@ -108,12 +108,9 @@ const ReplyPreview = React.memo(({ theme={theme} /> - diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js index 56002161a13..e46e9aae13c 100644 --- a/app/containers/message/Reply.js +++ b/app/containers/message/Reply.js @@ -9,6 +9,7 @@ import openLink from '../../utils/openLink'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; import MessageContext from './Context'; +import Attachments from './Attachments'; const styles = StyleSheet.create({ button: { @@ -176,6 +177,10 @@ const Reply = React.memo(({ theme={theme} /> +