[MOB-37, MOB-38, MOB-39] Preview for PDF, Text and Media files (space…

…driveapp#2098)

* version & microphonePermission text & eslint

* remove polyfill as hermes supports intl now

* why do we have solid on mobile?

* cleanup

* add solid back =_=

* pnpm lock

* we hate relative paths here

* android config

* open file logic

* visual tweaks

---------

Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>

apps/mobile/app.json

@@ -3,7 +3,7 @@
 		"name": "Spacedrive",
 		"slug": "spacedrive",
 		"owner": "spacedrive",
-		"version": "0.0.1",
+		"version": "0.1.0",
 		"orientation": "portrait",
 		"jsEngine": "hermes",
 		"scheme": "spacedrive",
@@ -58,7 +58,14 @@
 					}
 				}
 			],
-			["./withRiveAssets.js"]
+			[
+				"expo-av",
+				{
+					"microphonePermission": "Allow Spacedrive to access your microphone."
+				}
+			],
+			["./scripts/withRiveAssets.js"],
+			["./scripts/withAndroidIntent.js"]
 		]
 	}
 }

apps/mobile/modules/sd-core/android/build.gradle

@@ -4,7 +4,7 @@ apply plugin: 'maven-publish'
 
 
 group = 'com.spacedrive.core'
-version = '0.0.1'
+version = '0.1.0'
 
 buildscript {
   def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
@@ -72,7 +72,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 28)
     targetSdkVersion safeExtGet("targetSdkVersion", 34)
     versionCode 1
-    versionName "0.2.0"
+    versionName "0.1.0"
   }
   lintOptions {
     abortOnError false

apps/mobile/package.json

@@ -1,83 +1,84 @@
 {
-  "name": "@sd/mobile",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "GPL-3.0-only",
-  "private": true,
-  "scripts": {
-    "start": "expo start --dev-client",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "prebuild": "expo prebuild",
-    "xcode": "open ios/Spacedrive.xcworkspace",
-    "android-studio": "open -a '/Applications/Android Studio.app' ./android",
-    "lint": "eslint src --cache",
-    "test": "cd ../.. && ./apps/mobile/scripts/run-maestro-tests ios",
-    "export": "expo export",
-    "typecheck": "tsc -b"
-  },
-  "dependencies": {
-    "@gorhom/bottom-sheet": "^4.4.7",
-    "@hookform/resolvers": "^3.1.0",
-    "@oscartbeaumont-sd/rspc-client": "=0.0.0-main-dc31e5b2",
-    "@oscartbeaumont-sd/rspc-react": "=0.0.0-main-dc31e5b2",
-    "@react-native-async-storage/async-storage": "~1.21.0",
-    "@react-native-masked-view/masked-view": "^0.3.0",
-    "@react-navigation/bottom-tabs": "^6.5.8",
-    "@react-navigation/drawer": "^6.6.3",
-    "@react-navigation/native": "^6.1.7",
-    "@react-navigation/stack": "^6.3.17",
-    "@sd/assets": "workspace:*",
-    "@sd/client": "workspace:*",
-    "@shopify/flash-list": "1.6.3",
-    "@tanstack/react-query": "^4.36.1",
-    "babel-preset-solid": "^1.8.9",
-    "class-variance-authority": "^0.7.0",
-    "dayjs": "^1.11.10",
-    "event-target-polyfill": "^0.0.3",
-    "expo": "~50.0.6",
-    "expo-av": "^13.10.5",
-    "expo-blur": "^12.9.1",
-    "expo-build-properties": "~0.11.1",
-    "expo-linking": "~6.2.2",
-    "expo-media-library": "~15.9.1",
-    "expo-splash-screen": "~0.26.4",
-    "expo-status-bar": "~1.11.1",
-    "intl": "^1.2.5",
-    "lottie-react-native": "6.5.1",
-    "metro-react-native-babel-transformer": "^0.77.0",
-    "moti": "^0.26.0",
-    "phosphor-react-native": "^2.0.0",
-    "react": "^18.2.0",
-    "react-hook-form": "^7.47.0",
-    "react-native": "0.73.4",
-    "react-native-circular-progress": "^1.3.9",
-    "react-native-document-picker": "^9.0.1",
-    "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",
-    "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-svg": "14.1.0",
-    "react-native-wheel-color-picker": "^1.2.0",
-    "rive-react-native": "^6.2.3",
-    "solid-js": "^1.8.8",
-    "twrnc": "^3.6.4",
-    "use-count-up": "^3.0.1",
-    "use-debounce": "^9.0.4",
-    "valtio": "^1.11.2",
-    "zod": "~3.22.4"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@rnx-kit/metro-config": "^1.3.12",
-    "@sd/config": "workspace:*",
-    "@types/react": "^18.2.52",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "eslint-plugin-react-native": "^4.1.0",
-    "react-native-svg-transformer": "^1.1.0",
-    "typescript": "^5.3.3"
-  }
+	"name": "@sd/mobile",
+	"version": "1.0.0",
+	"main": "index.js",
+	"license": "GPL-3.0-only",
+	"private": true,
+	"scripts": {
+		"start": "expo start --dev-client",
+		"android": "expo run:android",
+		"ios": "expo run:ios",
+		"prebuild": "expo prebuild",
+		"xcode": "open ios/Spacedrive.xcworkspace",
+		"android-studio": "open -a '/Applications/Android Studio.app' ./android",
+		"lint": "eslint src --cache",
+		"test": "cd ../.. && ./apps/mobile/scripts/run-maestro-tests ios",
+		"export": "expo export",
+		"typecheck": "tsc -b",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@gorhom/bottom-sheet": "^4.4.7",
+		"@hookform/resolvers": "^3.1.0",
+		"@oscartbeaumont-sd/rspc-client": "=0.0.0-main-dc31e5b2",
+		"@oscartbeaumont-sd/rspc-react": "=0.0.0-main-dc31e5b2",
+		"@react-native-async-storage/async-storage": "~1.21.0",
+		"@react-native-masked-view/masked-view": "^0.3.0",
+		"@react-navigation/bottom-tabs": "^6.5.8",
+		"@react-navigation/drawer": "^6.6.3",
+		"@react-navigation/native": "^6.1.7",
+		"@react-navigation/stack": "^6.3.17",
+		"@sd/assets": "workspace:*",
+		"@sd/client": "workspace:*",
+		"@shopify/flash-list": "1.6.3",
+		"@tanstack/react-query": "^4.36.1",
+		"babel-preset-solid": "^1.8.9",
+		"class-variance-authority": "^0.7.0",
+		"dayjs": "^1.11.10",
+		"event-target-polyfill": "^0.0.3",
+		"expo": "~50.0.6",
+		"expo-av": "^13.10.5",
+		"expo-blur": "^12.9.1",
+		"expo-build-properties": "~0.11.1",
+		"expo-linking": "~6.2.2",
+		"expo-media-library": "~15.9.1",
+		"expo-splash-screen": "~0.26.4",
+		"expo-status-bar": "~1.11.1",
+		"lottie-react-native": "6.5.1",
+		"metro-react-native-babel-transformer": "^0.77.0",
+		"moti": "^0.26.0",
+		"phosphor-react-native": "^2.0.0",
+		"react": "^18.2.0",
+		"react-hook-form": "^7.47.0",
+		"react-native": "0.73.4",
+		"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",
+		"react-native-reanimated": "~3.6.2",
+		"react-native-safe-area-context": "4.8.2",
+		"react-native-screens": "~3.29.0",
+		"react-native-svg": "14.1.0",
+		"react-native-wheel-color-picker": "^1.2.0",
+		"rive-react-native": "^6.2.3",
+		"solid-js": "^1.8.8",
+		"twrnc": "^3.6.4",
+		"use-count-up": "^3.0.1",
+		"use-debounce": "^9.0.4",
+		"valtio": "^1.11.2",
+		"zod": "~3.22.4"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.23.2",
+		"@rnx-kit/metro-config": "^1.3.12",
+		"@sd/config": "workspace:*",
+		"@types/react": "^18.2.52",
+		"babel-plugin-module-resolver": "^5.0.0",
+		"eslint-plugin-react-native": "^4.1.0",
+		"react-native-svg-transformer": "^1.1.0",
+		"typescript": "^5.3.3"
+	}
 }

apps/mobile/scripts/withAndroidIntent.js

@@ -0,0 +1,26 @@
+const { withAndroidManifest } = require('@expo/config-plugins');
+
+// NOTE: Can be extended if needed (https://forums.expo.dev/t/how-to-edit-android-manifest-was-build/65663/4)
+function modifyAndroidManifest(androidManifest) {
+	const { manifest } = androidManifest;
+
+	const intent = manifest['queries'][0]['intent'][0];
+
+	if (intent) {
+		// Adds <data android:mimeType="*/*" /> to the intents
+		intent['data'].push({
+			$: {
+				'android:mimeType': '*/*'
+			}
+		});
+	}
+
+	return androidManifest;
+}
+
+module.exports = function withAndroidIntent(config) {
+	return withAndroidManifest(config, (config) => {
+		config.modResults = modifyAndroidManifest(config.modResults);
+		return config;
+	});
+};

apps/mobile/src/App.tsx

@@ -68,11 +68,7 @@ function AppNavigation() {
 
 	useEffect(() => {
 		const interval = setInterval(() => {
-			plausibleEvent({
-				event: {
-					type: 'ping'
-				}
-			});
+			plausibleEvent({ event: { type: 'ping' } });
 		}, 270 * 1000);
 
 		return () => clearInterval(interval);

apps/mobile/src/components/explorer/Explorer.tsx

@@ -13,6 +13,7 @@ import { useActionsModalStore } from '~/stores/modalStore';
 
 import FileItem from './FileItem';
 import FileRow from './FileRow';
+import ScreenContainer from '../layout/ScreenContainer';
 
 type ExplorerProps = {
 	items?: ExplorerItem[];
@@ -44,7 +45,7 @@ const Explorer = ({ items }: ExplorerProps) => {
 	}
 
 	return (
-		<View style={tw`flex-1 bg-mobile-screen`}>
+		<ScreenContainer style={'gap-0 py-0'} scrollview={false}>
 			{/* Header */}
 			<View style={tw`flex flex-row items-center justify-between`}>
 				{/* Sort By */}
@@ -99,6 +100,7 @@ const Explorer = ({ items }: ExplorerProps) => {
 							)}
 						</Pressable>
 					)}
+					contentContainerStyle={tw`p-2`}
 					extraData={layoutMode}
 					estimatedItemSize={
 						layoutMode === 'grid'
@@ -107,7 +109,7 @@ const Explorer = ({ items }: ExplorerProps) => {
 					}
 				/>
 			)}
-		</View>
+</ScreenContainer>
 	);
 };
 

apps/mobile/src/components/header/Header.tsx

@@ -2,7 +2,8 @@ import { useNavigation } from '@react-navigation/native';
 import { StackHeaderProps } from '@react-navigation/stack';
 import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
 import { lazy } from 'react';
-import { Platform, Pressable, Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tw, twStyle } from '~/lib/tailwind';
 import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
 
@@ -44,16 +45,18 @@ export default function Header({
 	const explorerStore = useExplorerStore();
 	const routeParams = route?.route.params as any;
 
+	const headerHeight = useSafeAreaInsets().top;
+
 	return (
 		<View
 			style={twStyle(
 				'relative h-auto w-full border-b border-app-line/50 bg-mobile-header',
-				Platform.OS === 'android' ? 'pt-5' : 'pt-10'
+				{ paddingTop: headerHeight }
 			)}
 		>
-			<View style={tw`mx-auto mt-5 h-auto w-full justify-center px-7 pb-5`}>
+			<View style={tw`mx-auto h-auto w-full justify-center px-7 pb-5`}>
 				<View style={tw`w-full flex-row items-center justify-between`}>
-					<View style={tw`flex-row items-center gap-5`}>
+					<View style={tw`flex-row items-center gap-3`}>
 						{navBack && (
 							<Pressable
 								onPress={() => {
@@ -67,7 +70,7 @@ export default function Header({
 							<HeaderIconKind headerKind={headerKind} routeParams={routeParams} />
 							<Text
 								numberOfLines={1}
-								style={tw`max-w-[190px] text-[22px] font-bold text-white`}
+								style={tw`max-w-[200px] text-xl font-bold text-white`}
 							>
 								{title || (routeTitle && route?.options.title)}
 							</Text>
@@ -128,11 +131,11 @@ interface HeaderIconKindProps {
 const HeaderIconKind = ({ headerKind, routeParams }: HeaderIconKindProps) => {
 	switch (headerKind) {
 		case 'location':
-			return <Icon size={32} name="Folder" />;
+			return <Icon size={30} name="Folder" />;
 		case 'tag':
 			return (
 				<View
-					style={twStyle('h-6 w-6 rounded-full', {
+					style={twStyle('h-[30px] w-[30px] rounded-full', {
 						backgroundColor: routeParams.color
 					})}
 				/>