From 4a2db10c8316e488aae8e03ae5f7ffe77a7ff758 Mon Sep 17 00:00:00 2001
From: Otavio Stasiak <otaviostasiakdev@gmail.com>
Date: Thu, 3 Oct 2024 13:28:31 -0300
Subject: [PATCH] fix: moved Thumbnail component to Video.tsx

---
 .../Components/Attachments/Thumbnail.tsx      | 86 ------------------
 .../message/Components/Attachments/Video.tsx  | 87 ++++++++++++++++---
 2 files changed, 77 insertions(+), 96 deletions(-)
 delete mode 100644 app/containers/message/Components/Attachments/Thumbnail.tsx

diff --git a/app/containers/message/Components/Attachments/Thumbnail.tsx b/app/containers/message/Components/Attachments/Thumbnail.tsx
deleted file mode 100644
index e7054b9d93..0000000000
--- a/app/containers/message/Components/Attachments/Thumbnail.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { getThumbnailAsync } from 'expo-video-thumbnails';
-import FastImage from 'react-native-fast-image';
-
-import { CustomIcon } from '../../../CustomIcon';
-import OverlayComponent from '../OverlayComponent';
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	overlay: {
-		flex: 1
-	},
-	image: {
-		width: '100%',
-		height: '100%'
-	},
-	playerIcon: {
-		position: 'absolute',
-		shadowColor: '#000',
-		shadowOpacity: 0.3,
-		shadowOffset: {
-			width: 1,
-			height: 1
-		}
-	}
-});
-
-type Image = {
-	loading: boolean;
-	uri: string | null;
-};
-
-type ThumbnailProps = {
-	url: string;
-	encrypted?: boolean;
-};
-
-const Thumbnail = ({ url, encrypted = false }: ThumbnailProps) => {
-	const icon = encrypted ? 'encrypted' : 'play-filled';
-
-	const [image, setImage] = useState<Image>({
-		loading: true,
-		uri: null
-	});
-
-	const generateThumbnail = async () => {
-		try {
-			if (!url) return;
-
-			const { uri } = await getThumbnailAsync(url, {
-				time: 1
-			});
-			setImage({
-				loading: false,
-				uri
-			});
-		} catch (e) {
-			console.warn(e);
-		}
-	};
-
-	useEffect(() => {
-		generateThumbnail();
-	}, [url]);
-
-	return (
-		<View style={styles.container}>
-			{image.loading || !image.uri ? (
-				<OverlayComponent style={styles.overlay} loading={image.loading} iconName='arrow-down-circle' />
-			) : (
-				<>
-					<FastImage style={styles.image} source={{ uri: image.uri }} />
-					<CustomIcon name={icon} size={54} color='#fff' style={styles.playerIcon} />
-				</>
-			)}
-		</View>
-	);
-};
-
-export default Thumbnail;
diff --git a/app/containers/message/Components/Attachments/Video.tsx b/app/containers/message/Components/Attachments/Video.tsx
index 42cdced03d..c867fe638e 100644
--- a/app/containers/message/Components/Attachments/Video.tsx
+++ b/app/containers/message/Components/Attachments/Video.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import { StyleProp, StyleSheet, TextStyle } from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
+import { StyleProp, StyleSheet, TextStyle, View } from 'react-native';
 
 import { IUserMessage } from '../../../../definitions';
 import { IAttachment } from '../../../../definitions/IAttachment';
@@ -15,23 +15,90 @@ import MessageContext from '../../Context';
 import Touchable from '../../Touchable';
 import { useMediaAutoDownload } from '../../hooks/useMediaAutoDownload';
 import messageStyles from '../../styles';
-import Thumbnail from './Thumbnail';
+import { getThumbnailAsync } from 'expo-video-thumbnails';
+import OverlayComponent from '../OverlayComponent';
+import FastImage from 'react-native-fast-image';
+import { CustomIcon } from '../../../CustomIcon';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
 const isTypeSupported = (type: string) => SUPPORTED_TYPES.indexOf(type) !== -1;
 
 const styles = StyleSheet.create({
-	cancelContainer: {
-		position: 'absolute',
-		top: 8,
-		right: 8
+	container: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	overlay: {
+		flex: 1
+	},
+	image: {
+		width: '100%',
+		height: '100%'
 	},
-	text: {
-		...sharedStyles.textRegular,
-		fontSize: 12
+	playerIcon: {
+		position: 'absolute',
+		shadowColor: '#000',
+		shadowOpacity: 0.3,
+		shadowOffset: {
+			width: 1,
+			height: 1
+		}
 	}
 });
 
+type Image = {
+	loading: boolean;
+	uri: string | null;
+};
+
+type ThumbnailProps = {
+	url: string;
+	encrypted?: boolean;
+};
+
+const Thumbnail = ({ url, encrypted = false }: ThumbnailProps) => {
+	const icon = encrypted ? 'encrypted' : 'play-filled';
+
+	const [image, setImage] = useState<Image>({
+		loading: true,
+		uri: null
+	});
+
+	const generateThumbnail = async () => {
+		try {
+			if (!url) return;
+
+			const { uri } = await getThumbnailAsync(url, {
+				time: 1
+			});
+			setImage({
+				loading: false,
+				uri
+			});
+		} catch (e) {
+			console.warn(e);
+		}
+	};
+
+	useEffect(() => {
+		generateThumbnail();
+	}, [url]);
+
+	return (
+		<View style={styles.container}>
+			{image.loading || !image.uri ? (
+				<OverlayComponent style={styles.overlay} loading={image.loading} iconName='arrow-down-circle' />
+			) : (
+				<>
+					<FastImage style={styles.image} source={{ uri: image.uri }} />
+					<CustomIcon name={icon} size={54} color='#fff' style={styles.playerIcon} />
+				</>
+			)}
+		</View>
+	);
+};
+
 interface IMessageVideo {
 	file: IAttachment;
 	showAttachment?: (file: IAttachment) => void;