From bbe15b7e4154049a797b728ea6979faa5d22d6c2 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Tue, 14 Jul 2020 13:43:15 -0300
Subject: [PATCH] [FIX] MessageBox not being shown on ShareView when Preview is
 a video (#2283)

* Wrap video preview with ScrollView so Messagebox is shown properly

* Fix border color
---
 app/containers/MessageBox/index.js |  2 +-
 app/views/ShareView/Preview.js     | 28 +++++++++++++++-------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js
index 81a08c23a..813d7d64c 100644
--- a/app/containers/MessageBox/index.js
+++ b/app/containers/MessageBox/index.js
@@ -908,7 +908,7 @@ class MessageBox extends Component {
 		return (
 			<>
 				{commandsPreviewAndMentions}
-				<View style={[styles.composer, { borderTopColor: themes[theme].separatorColor }]}>
+				<View style={[styles.composer, { borderTopColor: themes[theme].borderColor }]}>
 					{replyPreview}
 					<View
 						style={[
diff --git a/app/views/ShareView/Preview.js b/app/views/ShareView/Preview.js
index fae679535..2aaff22d8 100644
--- a/app/views/ShareView/Preview.js
+++ b/app/views/ShareView/Preview.js
@@ -10,12 +10,13 @@ import { ImageViewer, types } from '../../presentation/ImageViewer';
 import { themes } from '../../constants/colors';
 import { useDimensions, useOrientation } from '../../dimensions';
 import { getHeaderHeight } from '../../containers/Header';
-import { isIOS } from '../../utils/deviceInfo';
 import { THUMBS_HEIGHT } from './constants';
 import sharedStyles from '../Styles';
 import { allowPreview } from './utils';
 import I18n from '../../i18n';
 
+const MESSAGEBOX_HEIGHT = 56;
+
 const styles = StyleSheet.create({
 	fileContainer: {
 		alignItems: 'center',
@@ -58,23 +59,24 @@ const Preview = React.memo(({
 	const { isLandscape } = useOrientation();
 	const insets = useSafeAreaInsets();
 	const headerHeight = getHeaderHeight(isLandscape);
-	const messageboxHeight = isIOS ? 56 : 0;
 	const thumbsHeight = (length > 1) ? THUMBS_HEIGHT : 0;
-	const calculatedHeight = height - insets.top - insets.bottom - messageboxHeight - thumbsHeight - headerHeight;
+	const calculatedHeight = height - insets.top - insets.bottom - MESSAGEBOX_HEIGHT - thumbsHeight - headerHeight;
 
 	if (item?.canUpload) {
 		if (type?.match(/video/)) {
 			return (
-				<Video
-					source={{ uri: item.path }}
-					rate={1.0}
-					volume={1.0}
-					isMuted={false}
-					resizeMode={Video.RESIZE_MODE_CONTAIN}
-					isLooping={false}
-					style={{ width, height: calculatedHeight }}
-					useNativeControls
-				/>
+				<ScrollView style={{ height: calculatedHeight }}>
+					<Video
+						source={{ uri: item.path }}
+						rate={1.0}
+						volume={1.0}
+						isMuted={false}
+						resizeMode={Video.RESIZE_MODE_CONTAIN}
+						isLooping={false}
+						style={{ width, height: calculatedHeight }}
+						useNativeControls
+					/>
+				</ScrollView>
 			);
 		}