[FIX] Show thumbnails in message view (#2975)
* [FIX] Show thumbnails in message view fixes: #2853 * Add stories for thumbnails and update test * [Test] Update tests * added stories Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com> Co-authored-by: Levy Costa <levycosta471@gmail.com> Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Sumukha Hegde
GitHub
parent
7cd19b6a29
commit
0d528bd9ae
|
|
@ -20361,6 +20361,15 @@ exports[`Storyshots Message Colored attachments 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
<View
|
<View
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
|
|
@ -20562,6 +20571,15 @@ exports[`Storyshots Message Colored attachments 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
<View
|
<View
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
|
|
@ -20763,6 +20781,15 @@ exports[`Storyshots Message Colored attachments 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
<View
|
<View
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
|
|
@ -43340,6 +43367,407 @@ exports[`Storyshots Message Temp 1`] = `
|
||||||
</RCTScrollView>
|
</RCTScrollView>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Message Thumbnail from server 1`] = `
|
||||||
|
<RCTScrollView
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "#ffffff",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": null,
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flexDirection": "column",
|
||||||
|
"paddingHorizontal": 14,
|
||||||
|
"paddingVertical": 4,
|
||||||
|
"width": "100%",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginTop": 4,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FastImageView
|
||||||
|
resizeMode="cover"
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"headers": undefined,
|
||||||
|
"priority": "high",
|
||||||
|
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=36",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"marginLeft": 46,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginLeft": 10,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
"justifyContent": "space-between",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexShrink": 1,
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"lineHeight": 22,
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"color": "#0d0e12",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
diego.mello
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 12,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"marginLeft": 8,
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"color": "#9ca2a8",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
10:00 AM
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View>
|
||||||
|
<Text
|
||||||
|
numberOfLines={0}
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
Object {
|
||||||
|
"color": "#2f343d",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
accessibilityLabel="this is a thumbnail"
|
||||||
|
numberOfLines={0}
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Array [
|
||||||
|
Object {},
|
||||||
|
Object {
|
||||||
|
"alignItems": "flex-start",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexWrap": "wrap",
|
||||||
|
"justifyContent": "flex-start",
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
this is a thumbnail
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
focusable={true}
|
||||||
|
onClick={[Function]}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"alignSelf": "flex-start",
|
||||||
|
"backgroundColor": "#f3f4f5",
|
||||||
|
"borderColor": "#e1e5e8",
|
||||||
|
"borderRadius": 4,
|
||||||
|
"borderWidth": 1,
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
"marginTop": 6,
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "column",
|
||||||
|
"padding": 15,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"flex": 1,
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"marginBottom": 3,
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"color": "#2f343d",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Joker
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"borderTopLeftRadius": 4,
|
||||||
|
"borderTopRightRadius": 4,
|
||||||
|
"flex": 1,
|
||||||
|
"height": 200,
|
||||||
|
"marginBottom": 1,
|
||||||
|
"width": null,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FastImageView
|
||||||
|
resizeMode="cover"
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"uri": "https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
Object {
|
||||||
|
"color": "#2f343d",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
accessibilityLabel="Some crazy texts"
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "400",
|
||||||
|
"textAlign": "left",
|
||||||
|
},
|
||||||
|
Array [
|
||||||
|
Object {},
|
||||||
|
Object {
|
||||||
|
"alignItems": "flex-start",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexWrap": "wrap",
|
||||||
|
"justifyContent": "flex-start",
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Some crazy texts
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</RCTScrollView>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`Storyshots Message Time format 1`] = `
|
exports[`Storyshots Message Time format 1`] = `
|
||||||
<RCTScrollView
|
<RCTScrollView
|
||||||
style={
|
style={
|
||||||
|
|
@ -47162,6 +47590,15 @@ exports[`Storyshots Message With file 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Text
|
<Text
|
||||||
style={
|
style={
|
||||||
Array [
|
Array [
|
||||||
|
|
@ -47380,6 +47817,15 @@ exports[`Storyshots Message With file 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Text
|
<Text
|
||||||
style={
|
style={
|
||||||
Array [
|
Array [
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { transparentize } from 'color2k';
|
import { transparentize } from 'color2k';
|
||||||
import { dequal } from 'dequal';
|
import { dequal } from 'dequal';
|
||||||
|
import FastImage from '@rocket.chat/react-native-fast-image';
|
||||||
|
|
||||||
import Touchable from './Touchable';
|
import Touchable from './Touchable';
|
||||||
import Markdown from '../markdown';
|
import Markdown from '../markdown';
|
||||||
|
|
@ -66,17 +67,29 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
marginBottom: {
|
marginBottom: {
|
||||||
marginBottom: 4
|
marginBottom: 4
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: null,
|
||||||
|
height: 200,
|
||||||
|
flex: 1,
|
||||||
|
borderTopLeftRadius: 4,
|
||||||
|
borderTopRightRadius: 4,
|
||||||
|
marginBottom: 1
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 16,
|
||||||
|
marginBottom: 3,
|
||||||
|
...sharedStyles.textMedium
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const Title = React.memo(({ attachment, timeFormat, theme }) => {
|
const Title = React.memo(({ attachment, timeFormat, theme }) => {
|
||||||
if (!attachment.author_name) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const time = attachment.message_link && attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
|
const time = attachment.message_link && attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
|
||||||
return (
|
return (
|
||||||
<View style={styles.authorContainer}>
|
<View style={styles.authorContainer}>
|
||||||
{attachment.author_name ? <Text style={[styles.author, { color: themes[theme].bodyText }]}>{attachment.author_name}</Text> : null}
|
{attachment.author_name ? <Text style={[styles.author, { color: themes[theme].bodyText }]}>{attachment.author_name}</Text> : null}
|
||||||
|
{attachment.title ? <Text style={[styles.title, { color: themes[theme].bodyText }]}>{attachment.title}</Text> : null}
|
||||||
{time ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{ time }</Text> : null}
|
{time ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{ time }</Text> : null}
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
@ -112,6 +125,15 @@ const Description = React.memo(({
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const UrlImage = React.memo(({ image }) => {
|
||||||
|
if (!image) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const { baseUrl, user } = useContext(MessageContext);
|
||||||
|
image = image.includes('http') ? image : `${ baseUrl }/${ image }?rc_uid=${ user.id }&rc_token=${ user.token }`;
|
||||||
|
return <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />;
|
||||||
|
}, (prevProps, nextProps) => prevProps.image === nextProps.image);
|
||||||
|
|
||||||
const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
|
const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
|
||||||
if (!attachment.fields) {
|
if (!attachment.fields) {
|
||||||
return null;
|
return null;
|
||||||
|
|
@ -191,6 +213,7 @@ const Reply = React.memo(({
|
||||||
timeFormat={timeFormat}
|
timeFormat={timeFormat}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
|
<UrlImage image={attachment.thumb_url} />
|
||||||
<Description
|
<Description
|
||||||
attachment={attachment}
|
attachment={attachment}
|
||||||
getCustomEmoji={getCustomEmoji}
|
getCustomEmoji={getCustomEmoji}
|
||||||
|
|
@ -223,6 +246,10 @@ Reply.propTypes = {
|
||||||
};
|
};
|
||||||
Reply.displayName = 'MessageReply';
|
Reply.displayName = 'MessageReply';
|
||||||
|
|
||||||
|
UrlImage.propTypes = {
|
||||||
|
image: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
Title.propTypes = {
|
Title.propTypes = {
|
||||||
attachment: PropTypes.object,
|
attachment: PropTypes.object,
|
||||||
timeFormat: PropTypes.string,
|
timeFormat: PropTypes.string,
|
||||||
|
|
|
||||||
|
|
@ -854,3 +854,16 @@ stories.add('Ignored', () => (
|
||||||
stories.add('Custom style', () => (
|
stories.add('Custom style', () => (
|
||||||
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
||||||
));
|
));
|
||||||
|
|
||||||
|
stories.add('Thumbnail from server', () => (
|
||||||
|
<Message
|
||||||
|
msg='this is a thumbnail'
|
||||||
|
attachments={[{
|
||||||
|
text: 'Some crazy texts',
|
||||||
|
thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
|
||||||
|
title: 'Joker',
|
||||||
|
title_link: 'https://www.imdb.com/title/tt7286456/'
|
||||||
|
}]}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue