[NEW] Image Viewer

app/containers/HeaderButton.js

@@ -57,6 +57,12 @@ export const MoreButton = React.memo(({ onPress, testID }) => (
 	</CustomHeaderButtons>
 ));
 
+export const SaveButton = React.memo(({ onPress, testID }) => (
+	<CustomHeaderButtons>
+		<Item title='save' iconName='Download' onPress={onPress} testID={testID} />
+	</CustomHeaderButtons>
+));
+
 export const LegalButton = React.memo(({ navigation, testID }) => (
 	<MoreButton onPress={() => navigation.navigate('LegalView')} testID={testID} />
 ));
@@ -80,6 +86,10 @@ MoreButton.propTypes = {
 	onPress: PropTypes.func.isRequired,
 	testID: PropTypes.string.isRequired
 };
+SaveButton.propTypes = {
+	onPress: PropTypes.func.isRequired,
+	testID: PropTypes.string.isRequired
+};
 LegalButton.propTypes = {
 	navigation: PropTypes.object.isRequired,
 	testID: PropTypes.string.isRequired

app/containers/message/Attachments.js

@@ -8,21 +8,21 @@ import Video from './Video';
 import Reply from './Reply';
 
 const Attachments = React.memo(({
-	attachments, timeFormat, user, baseUrl, useMarkdown, onOpenFileModal, getCustomEmoji, theme
+	attachments, timeFormat, user, baseUrl, useMarkdown, showAttachment, getCustomEmoji, theme
 }) => {
 	if (!attachments || attachments.length === 0) {
 		return null;
 	}
 
 	return attachments.map((file, index) => {
 		if (file.image_url) {
-			return <Image key={file.image_url} file={file} user={user} baseUrl={baseUrl} onOpenFileModal={onOpenFileModal} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
+			return <Image key={file.image_url} file={file} user={user} baseUrl={baseUrl} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 		}
 		if (file.audio_url) {
 			return <Audio key={file.audio_url} file={file} user={user} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 		}
 		if (file.video_url) {
-			return <Video key={file.video_url} file={file} user={user} baseUrl={baseUrl} onOpenFileModal={onOpenFileModal} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
+			return <Video key={file.video_url} file={file} user={user} baseUrl={baseUrl} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />;
 		}
 
 		// eslint-disable-next-line react/no-array-index-key
@@ -36,7 +36,7 @@ Attachments.propTypes = {
 	user: PropTypes.object,
 	baseUrl: PropTypes.string,
 	useMarkdown: PropTypes.bool,
-	onOpenFileModal: PropTypes.func,
+	showAttachment: PropTypes.func,
 	getCustomEmoji: PropTypes.func,
 	theme: PropTypes.string
 };

app/containers/message/Image.js

@@ -33,14 +33,14 @@ const Image = React.memo(({ img, theme }) => (
 ));
 
 const ImageContainer = React.memo(({
-	file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji, split, theme
+	file, baseUrl, user, useMarkdown, showAttachment, getCustomEmoji, split, theme
 }) => {
 	const img = formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl);
 	if (!img) {
 		return null;
 	}
 
-	const onPress = () => onOpenFileModal(file);
+	const onPress = () => showAttachment(file);
 
 	if (file.description) {
 		return (
@@ -65,7 +65,7 @@ ImageContainer.propTypes = {
 	baseUrl: PropTypes.string,
 	user: PropTypes.object,
 	useMarkdown: PropTypes.bool,
-	onOpenFileModal: PropTypes.func,
+	showAttachment: PropTypes.func,
 	theme: PropTypes.string,
 	getCustomEmoji: PropTypes.func,
 	split: PropTypes.bool

app/containers/message/Video.js

@@ -27,15 +27,15 @@ const styles = StyleSheet.create({
 });
 
 const Video = React.memo(({
-	file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji, theme
+	file, baseUrl, user, useMarkdown, showAttachment, getCustomEmoji, theme
 }) => {
 	if (!baseUrl) {
 		return null;
 	}
 
 	const onPress = () => {
 		if (isTypeSupported(file.video_type)) {
-			return onOpenFileModal(file);
+			return showAttachment(file);
 		}
 		const uri = formatAttachmentUrl(file.video_url, user.id, user.token, baseUrl);
 		openLink(uri, theme);
@@ -64,7 +64,7 @@ Video.propTypes = {
 	baseUrl: PropTypes.string,
 	user: PropTypes.object,
 	useMarkdown: PropTypes.bool,
-	onOpenFileModal: PropTypes.func,
+	showAttachment: PropTypes.func,
 	getCustomEmoji: PropTypes.func,
 	theme: PropTypes.string
 };

app/containers/message/index.js

@@ -40,7 +40,7 @@ class MessageContainer extends React.Component {
 		replyBroadcast: PropTypes.func,
 		reactionInit: PropTypes.func,
 		fetchThreadName: PropTypes.func,
-		onOpenFileModal: PropTypes.func,
+		showAttachment: PropTypes.func,
 		onReactionLongPress: PropTypes.func,
 		navToRoomInfo: PropTypes.func,
 		callJitsi: PropTypes.func,
@@ -212,7 +212,7 @@ class MessageContainer extends React.Component {
 
 	render() {
 		const {
-			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, onOpenFileModal, timeFormat, useMarkdown, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, theme
+			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, showAttachment, timeFormat, useMarkdown, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, theme
 		} = this.props;
 		const {
 			id, msg, ts, attachments, urls, reactions, t, avatar, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, autoTranslate: autoTranslateMessage
@@ -275,7 +275,7 @@ class MessageContainer extends React.Component {
 				replyBroadcast={this.replyBroadcast}
 				reactionInit={this.reactionInit}
 				onDiscussionPress={this.onDiscussionPress}
-				onOpenFileModal={onOpenFileModal}
+				showAttachment={showAttachment}
 				getCustomEmoji={getCustomEmoji}
 				navToRoomInfo={navToRoomInfo}
 				callJitsi={callJitsi}

app/i18n/locales/en.js

@@ -16,6 +16,7 @@ export default {
 	'error-duplicate-channel-name': 'A channel with name {{channel_name}} exists',
 	'error-email-domain-blacklisted': 'The email domain is blacklisted',
 	'error-email-send-failed': 'Error trying to send email: {{message}}',
+	'error-save-image': 'Error in saving image',
 	'error-field-unavailable': '{{field}} is already in use :(',
 	'error-file-too-large': 'File is too large',
 	'error-importer-not-defined': 'The importer was not defined correctly, it is missing the Import class.',
@@ -338,6 +339,7 @@ export default {
 	saving_preferences: 'saving preferences',
 	saving_profile: 'saving profile',
 	saving_settings: 'saving settings',
+	saved_to_gallery: 'Saved to gallery',
 	Search_Messages: 'Search Messages',
 	Search: 'Search',
 	Search_by: 'Search by',
@@ -434,6 +436,8 @@ export default {
 	Welcome_to_RocketChat: 'Welcome to Rocket.Chat',
 	Whats_your_2fa: 'What\'s your 2FA code?',
 	Without_Servers: 'Without Servers',
+	Write_External_Permission_Message: 'Rocket Chat needs access to your gallery so you can save images.',
+	Write_External_Permission: 'Gallery Permission',
 	Yes_action_it: 'Yes, {{action}} it!',
 	Yesterday: 'Yesterday',
 	You_are_in_preview_mode: 'You are in preview mode',

app/i18n/locales/pt-BR.js

@@ -401,6 +401,8 @@ export default {
 	You: 'Você',
 	You_need_to_access_at_least_one_RocketChat_server_to_share_something: 'Você precisa acessar ao menos um servidor Rocket.Chat para compartilhar.',
 	You_will_not_be_able_to_recover_this_message: 'Você não será capaz de recuperar essa mensagem!',
+	Write_External_Permission_Message: 'Rocket Chat precisa de acesso a sua galeria para salvar imagens.',
+	Write_External_Permission: 'Acesso a Galeria',
 	Crash_report_disclaimer: 'Nós não rastreamos o conteúdo das suas conversas. O relatório de erros apenas contém informações relevantes para identificarmos problemas e corrigí-los.',
 	Type_message: 'Digitar mensagem',
 	Room_search: 'Busca de sala',

app/index.js

@@ -258,9 +258,19 @@ const NewMessageStack = createStackNavigator({
 	cardStyle
 });
 
+const AttachmentStack = createStackNavigator({
+	AttachmentView: {
+		getScreen: () => require('./views/AttachmentView').default
+	}
+}, {
+	defaultNavigationOptions: defaultHeader,
+	cardStyle
+});
+
 const InsideStackModal = createStackNavigator({
 	Main: ChatsDrawer,
 	NewMessageStack,
+	AttachmentStack,
 	JitsiMeetView: {
 		getScreen: () => require('./views/JitsiMeetView').default
 	}

app/lib/utils.js

@@ -1,3 +1,9 @@
-export const formatAttachmentUrl = (attachmentUrl, userId, token, server) => (
-	encodeURI(attachmentUrl.startsWith('http') ? attachmentUrl : `${ server }${ attachmentUrl }?rc_uid=${ userId }&rc_token=${ token }`)
-);
+export const formatAttachmentUrl = (attachmentUrl, userId, token, server) => {
+	if (attachmentUrl.startsWith('http')) {
+		if (attachmentUrl.includes('rc_token')) {
+			return encodeURI(attachmentUrl);
+		}
+		return encodeURI(`${ attachmentUrl }?rc_uid=${ userId }&rc_token=${ token }`);
+	}
+	return encodeURI(`${ server }${ attachmentUrl }?rc_uid=${ userId }&rc_token=${ token }`);
+};