caching and deleting video's thumbnails

app/containers/message/Video.tsx

@@ -18,10 +18,17 @@ import { IAttachment } from '../../definitions/IAttachment';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { useTheme } from '../../theme';
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
-import { cancelDownload, downloadMediaFile, isDownloadActive, getMediaCache } from '../../lib/methods/handleMediaDownload';
+import {
+	cancelDownload,
+	downloadMediaFile,
+	isDownloadActive,
+	getMediaCache,
+	getFileInfoAsync
+} from '../../lib/methods/handleMediaDownload';
 import { fetchAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference';
 import sharedStyles from '../../views/Styles';
 import BlurComponent from './Components/BlurComponent';
+import { useUserPreferences } from '../../lib/methods';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
 const isTypeSupported = (type: string) => SUPPORTED_TYPES.indexOf(type) !== -1;
@@ -69,7 +76,7 @@ const CancelIndicator = () => {
 };
 
 const Thumbnail = ({ loading, video, cached }: { loading: boolean; video: string; cached: boolean }) => {
-	const [thumbnailImage, setThumbnailImage] = useState('');
+	const [thumbnailImage, setThumbnailImage] = useUserPreferences(`thumbnail-${video}`, '');
 
 	useEffect(() => {
 		const generateThumbnail = async () => {
@@ -82,7 +89,19 @@ const Thumbnail = ({ loading, video, cached }: { loading: boolean; video: string
 				// do nothing
 			}
 		};
-		generateThumbnail();
+
+		const handleThumbnailSearch = async () => {
+			const file = await getFileInfoAsync(thumbnailImage);
+			if (!file.exists) {
+				generateThumbnail();
+			}
+		};
+
+		if (!thumbnailImage) {
+			generateThumbnail();
+		} else {
+			handleThumbnailSearch();
+		}
 	}, []);
 
 	return (

app/lib/methods/handleMediaDownload.ts

@@ -15,6 +15,7 @@ const defaultType = {
 };
 
 export const LOCAL_DOCUMENT_DIRECTORY = FileSystem.documentDirectory;
+export const LOCAL_CACHE_DIRECTORY = FileSystem.cacheDirectory;
 
 const sanitizeString = (value: string) => {
 	const urlWithoutQueryString = value.split('?')[0];
@@ -111,6 +112,11 @@ const getFolderPath = () => {
 	return folderPath;
 };
 
+export const getFileInfoAsync = async (filePath: string) => {
+	const file = await FileSystem.getInfoAsync(filePath);
+	return file;
+};
+
 export const getMediaCache = async ({
 	type,
 	mimeType,
@@ -130,7 +136,7 @@ export const getMediaCache = async ({
 			return null;
 		}
 		await ensureDirAsync(folderPath);
-		const file = await FileSystem.getInfoAsync(filePath);
+		const file = await getFileInfoAsync(filePath);
 		return file;
 	} catch (error) {
 		log(error);
@@ -138,11 +144,23 @@ export const getMediaCache = async ({
 	}
 };
 
+const deleteVideoThumbnails = async () => {
+	try {
+		// https://github.com/expo/expo/blob/e8f02c96cf2613c7f3e2ab2b0171eb39da80032b/packages/expo-video-thumbnails/ios/VideoThumbnailsModule.swift#L51
+		// https://github.com/expo/expo/blob/e8f02c96cf2613c7f3e2ab2b0171eb39da80032b/packages/expo-video-thumbnails/android/src/main/java/expo/modules/videothumbnails/VideoThumbnailsModule.kt#L44C5-L44C5
+		const videoThumbnailPath = `${LOCAL_CACHE_DIRECTORY}/VideoThumbnails/`;
+		await FileSystem.deleteAsync(videoThumbnailPath, { idempotent: true });
+	} catch (error) {
+		log(error);
+	}
+};
+
 export const deleteMediaFiles = async (serverUrl: string): Promise<void> => {
 	try {
 		const serverUrlParsed = serverUrlParsedAsPath(serverUrl);
 		const path = `${LOCAL_DOCUMENT_DIRECTORY}${serverUrlParsed}`;
 		await FileSystem.deleteAsync(path, { idempotent: true });
+		await deleteVideoThumbnails();
 	} catch (error) {
 		log(error);
 	}