Fix android thumbs (spacedriveapp#2121)

* replace react-native-fs with an active fork * time sink * fix
Rocky43007 · Feb 23, 2024 · f7a7b00 · f7a7b00
1 parent 6358c57
commit f7a7b00
Show file tree

Hide file tree

Showing 6 changed files with 670 additions and 48 deletions.
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -18,6 +18,7 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
+		"@dr.pogodin/react-native-fs": "^2.24.1",
 		"@gorhom/bottom-sheet": "^4.4.7",
 		"@hookform/resolvers": "^3.1.0",
 		"@oscartbeaumont-sd/rspc-client": "=0.0.0-main-dc31e5b2",
@@ -54,7 +55,6 @@
 		"react-native-circular-progress": "^1.3.9",
 		"react-native-document-picker": "^9.0.1",
 		"react-native-file-viewer": "^2.1.5",
-		"react-native-fs": "^2.20.0",
 		"react-native-gesture-handler": "~2.14.1",
 		"react-native-linear-gradient": "^2.8.3",
 		"react-native-popup-menu": "^0.16.1",

diff --git a/apps/mobile/src/components/explorer/FileThumb.tsx b/apps/mobile/src/components/explorer/FileThumb.tsx
@@ -1,7 +1,7 @@
+import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs';
 import { getIcon } from '@sd/assets/util';
 import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react';
 import { Image, View } from 'react-native';
-import { DocumentDirectoryPath } from 'react-native-fs';
 import {
 	getExplorerItemData,
 	getItemFilePath,
@@ -13,10 +13,12 @@ import { flattenThumbnailKey, useExplorerStore } from '~/stores/explorerStore';
 
 import { tw } from '../../lib/tailwind';
 
-export const getThumbnailUrlByThumbKey = (thumbKey: string[]) =>
-	`${DocumentDirectoryPath}/thumbnails/${thumbKey
+// NOTE: `file://` is required for Android to load local files!
+export const getThumbnailUrlByThumbKey = (thumbKey: string[]) => {
+	return `file://${DocumentDirectoryPath}/thumbnails/${thumbKey
 		.map((i) => encodeURIComponent(i))
 		.join('/')}.webp`;
+};
 
 const FileThumbWrapper = ({ children, size = 1 }: PropsWithChildren<{ size: number }>) => (
 	<View style={[tw`items-center justify-center`, { width: 80 * size, height: 80 * size }]}>

diff --git a/apps/mobile/src/components/modal/ImportModal.tsx b/apps/mobile/src/components/modal/ImportModal.tsx
@@ -1,7 +1,7 @@
+import * as RNFS from '@dr.pogodin/react-native-fs';
 import { forwardRef, useCallback } from 'react';
 import { Alert, Platform, Text, View } from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
-import RNFS from 'react-native-fs';
 import { useLibraryMutation, useRspcLibraryContext } from '@sd/client';
 import { Modal, ModalRef } from '~/components/layout/Modal';
 import { Button } from '~/components/primitive/Button';

diff --git a/apps/mobile/src/components/overview/Categories.tsx b/apps/mobile/src/components/overview/Categories.tsx
@@ -43,12 +43,7 @@ const Categories = ({ kinds }: Props) => {
 										break;
 								}
 								return (
-										<KindItem
-											kind={kind}
-											name={name}
-											icon={icon}
-											items={count}
-										/>
+									<KindItem kind={kind} name={name} icon={icon} items={count} />
 								);
 							}}
 						/>
@@ -76,7 +71,9 @@ const KindItem = ({ name, icon, items }: KindItemProps) => {
 				//TODO: implement
 			}}
 		>
-			<View style={twStyle('mr-10 shrink-0 flex-row items-center', 'gap-2 rounded-lg text-sm')}>
+			<View
+				style={twStyle('mr-10 shrink-0 flex-row items-center', 'gap-2 rounded-lg text-sm')}
+			>
 				<Icon name={icon} size={40} style={tw`mr-3 h-12 w-12`} />
 				<View>
 					<Text style={tw`text-sm font-medium text-ink`}>{name}</Text>

diff --git a/apps/mobile/src/components/overview/OverviewStats.tsx b/apps/mobile/src/components/overview/OverviewStats.tsx
@@ -1,8 +1,8 @@
+import * as RNFS from '@dr.pogodin/react-native-fs';
 import { AlphaRSPCError } from '@oscartbeaumont-sd/rspc-client/v2';
 import { UseQueryResult } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
-import RNFS from 'react-native-fs';
 import { ClassInput } from 'twrnc/dist/esm/types';
 import { byteSize, Statistics, StatisticsResponse, useLibraryContext } from '@sd/client';
 import useCounter from '~/hooks/useCounter';
@@ -60,7 +60,13 @@ const OverviewStats = ({ stats }: Props) => {
 
 	// For Demo purposes as we probably wanna save this to database
 	// Sets Total Capacity and Free Space of the device
-	const [sizeInfo, setSizeInfo] = useState<RNFS.FSInfoResult>({ freeSpace: 0, totalSpace: 0 });
+	const [sizeInfo, setSizeInfo] = useState<RNFS.FSInfoResultT>({
+		freeSpace: 0,
+		totalSpace: 0,
+		// external storage (android only) - may not be reliable
+		freeSpaceEx: 0,
+		totalSpaceEx: 0
+	});
 
 	useEffect(() => {
 		const getFSInfo = async () => {