From c85f98955c7ea8a8a449d53f348aa357ceaa494b Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Tue, 4 Jul 2023 12:31:59 -0300
Subject: [PATCH] set the blur as always dark and add the possibility to
 overlay

---
 .../message/Components/BlurComponent/index.tsx   | 16 +++++++---------
 app/containers/message/Image.tsx                 |  4 +++-
 app/containers/message/Video.tsx                 |  7 ++++++-
 app/containers/message/styles.ts                 |  3 +++
 app/lib/constants/colors.ts                      |  3 +++
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/containers/message/Components/BlurComponent/index.tsx b/app/containers/message/Components/BlurComponent/index.tsx
index 445d4c681..b3ccd2e67 100644
--- a/app/containers/message/Components/BlurComponent/index.tsx
+++ b/app/containers/message/Components/BlurComponent/index.tsx
@@ -11,24 +11,22 @@ const BlurComponent = ({
 	loading = false,
 	style = {},
 	iconName,
-	blurAmount = 2
+	showOverlay = false
 }: {
 	loading: boolean;
 	style: StyleProp<ViewStyle>;
 	iconName: TIconsName;
-	blurAmount?: number;
+	showOverlay?: boolean;
 }) => {
 	const { colors } = useTheme();
-	// const { theme, colors } = useTheme();
 
 	return (
 		<>
-			<BlurView
-				style={[style, styles.blurView]}
-				blurType={'dark'}
-				// blurType={theme === 'light' ? 'light' : 'dark'}
-				blurAmount={blurAmount}
-			/>
+			{!showOverlay ? (
+				<BlurView style={[style, styles.blurView]} blurType={'dark'} blurAmount={2} />
+			) : (
+				<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
+			)}
 			<View style={[style, styles.blurIndicator]}>
 				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
 			</View>
diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx
index 9e049989b..f6b6c31f1 100644
--- a/app/containers/message/Image.tsx
+++ b/app/containers/message/Image.tsx
@@ -54,7 +54,9 @@ export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: s
 				source={{ uri: encodeURI(imgUri) }}
 				resizeMode={FastImage.resizeMode.cover}
 			/>
-			{!cached ? <BlurComponent loading={loading} style={styles.image} iconName='arrow-down-circle' /> : null}
+			{!cached ? (
+				<BlurComponent loading={loading} style={[styles.image, styles.imageBlurContainer]} iconName='arrow-down-circle' />
+			) : null}
 		</>
 	);
 });
diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx
index 1d5916096..ca0833e61 100644
--- a/app/containers/message/Video.tsx
+++ b/app/containers/message/Video.tsx
@@ -88,7 +88,12 @@ const Thumbnail = ({ loading, video, cached }: { loading: boolean; video: string
 	return (
 		<>
 			{thumbnailImage ? <FastImage style={styles.thumbnailImage} source={{ uri: thumbnailImage }} /> : null}
-			<BlurComponent iconName={cached ? 'play-filled' : 'arrow-down-circle'} loading={loading} style={styles.button} />
+			<BlurComponent
+				iconName={cached ? 'play-filled' : 'arrow-down-circle'}
+				loading={loading}
+				style={styles.button}
+				showOverlay={cached}
+			/>
 			{loading ? <CancelIndicator /> : null}
 		</>
 	);
diff --git a/app/containers/message/styles.ts b/app/containers/message/styles.ts
index eedc620da..9bdf79bbe 100644
--- a/app/containers/message/styles.ts
+++ b/app/containers/message/styles.ts
@@ -105,6 +105,9 @@ export default StyleSheet.create({
 		borderWidth: 1,
 		overflow: 'hidden'
 	},
+	imageBlurContainer: {
+		height: '100%'
+	},
 	imagePressed: {
 		opacity: 0.5
 	},
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index b9db875f9..6176bd843 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -89,6 +89,7 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#E4E7EA',
+		overlayColor: '#1F2329B2',
 		...mentions
 	},
 	dark: {
@@ -159,6 +160,7 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#030b1b', // backgroundColor
+		overlayColor: '#1F2329B2',
 		...mentions
 	},
 	black: {
@@ -229,6 +231,7 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#000000', // backgroundColor
+		overlayColor: '#1F2329B2',
 		...mentions
 	}
 };