fix: moved Thumbnail component to Video.tsx

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;