Implement media saving

This commit is contained in:
Marc Rousavy 2021-02-19 19:29:29 +01:00
parent 112af9b86c
commit 674d9ccb8b
6 changed files with 152 additions and 11 deletions

View File

@ -3,12 +3,19 @@
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:requestLegacyExternalStorage="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"

View File

@ -236,6 +236,8 @@ PODS:
- React-jsinspector (0.63.4)
- react-native-blur (0.8.0):
- React
- react-native-cameraroll (4.0.2):
- React-Core
- react-native-video (5.1.1):
- React-Core
- react-native-video/Video (= 5.1.1)
@ -389,6 +391,7 @@ DEPENDENCIES:
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- "react-native-blur (from `../node_modules/@react-native-community/blur`)"
- "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
- react-native-video (from `../node_modules/react-native-video`)
- react-native-vision-camera (from `../..`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@ -456,6 +459,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
react-native-blur:
:path: "../node_modules/@react-native-community/blur"
react-native-cameraroll:
:path: "../node_modules/@react-native-community/cameraroll"
react-native-video:
:path: "../node_modules/react-native-video"
react-native-vision-camera:
@ -521,6 +526,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
react-native-cameraroll: 717193a0427fd0db78d3f10385a008fcc102213c
react-native-video: 1574074179ecaf6a9dd067116c8f31bf9fec15c8
react-native-vision-camera: bf9c62e2795080a21e9ea134050c01b5d9494b6d
React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336

View File

@ -43,6 +43,8 @@
<string></string>
<key>NSMicrophoneUsageDescription</key>
<string>VisionCamera needs access to your Microphone to record videos with audio.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>VisionCamera needs access to your photo library to save captured videos and photos.</string>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>

View File

@ -1015,6 +1015,11 @@
"prop-types": "^15.5.10"
}
},
"@react-native-community/cameraroll": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-native-community/cameraroll/-/cameraroll-4.0.2.tgz",
"integrity": "sha512-GtSZO6pqUzyZvaYidB5zH90o6Yb9YatapgiMQ+JVdbK4bDD74GdrNGDwyinDTzE5LkAQ90HDoAhVgV/uWt5OrQ=="
},
"@react-native-community/cli-debugger-ui": {
"version": "4.13.1",
"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz",

View File

@ -10,6 +10,7 @@
},
"dependencies": {
"@react-native-community/blur": "^3.6.0",
"@react-native-community/cameraroll": "^4.0.2",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.10.1",

View File

@ -1,34 +1,85 @@
import React, { useCallback, useMemo } from 'react';
import { StyleSheet, View, Text, Image, Pressable } from 'react-native';
import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
import React, { useCallback, useMemo, useState } from 'react';
import { StyleSheet, View, Image, ActivityIndicator, PermissionsAndroid, Platform } from 'react-native';
import { Navigation, NavigationFunctionComponent, OptionsModalPresentationStyle } from 'react-native-navigation';
import Video from 'react-native-video';
import { CONTENT_SPACING } from './Constants';
import { SAFE_AREA_PADDING } from './Constants';
import { useIsForeground } from './hooks/useIsForeground';
import { useIsScreenFocused } from './hooks/useIsScreenFocused';
import { PressableOpacity } from './views/PressableOpacity';
import IonIcon from 'react-native-vector-icons/Ionicons';
import { Alert } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
interface MediaProps {
path: string,
type: 'video' | 'photo'
}
const requestSavePermission = async (): Promise<boolean> => {
if (Platform.OS !== "android") {
return true;
}
const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
let hasPermission = await PermissionsAndroid.check(permission);
if (!hasPermission) {
const permissionRequestResult = await PermissionsAndroid.request(permission);
hasPermission = permissionRequestResult === "granted";
}
return hasPermission;
}
export const Media: NavigationFunctionComponent<MediaProps> = ({ componentId, type, path }) => {
const [hasMediaLoaded, setHasMediaLoaded] = useState(false);
const isForeground = useIsForeground();
const isScreenFocused = useIsScreenFocused(componentId);
const isVideoPaused = !isForeground || !isScreenFocused;
const [savingState, setSavingState] = useState<"none" | "saving" | "saved">("none");
const onClosePressed = useCallback(() => {
Navigation.dismissModal(componentId);
}, [componentId]);
const source = useMemo(() => ({ uri: `file://${path}` }), [path])
const onMediaLoadEnd = useCallback(() => {
console.log(`media has loaded.`);
setHasMediaLoaded(true);
}, []);
const onSavePressed = useCallback(async () => {
try {
setSavingState("saving");
const hasPermission = await requestSavePermission();
if (!hasPermission) {
Alert.alert('Permission denied!', 'Vision Camera does not have permission to save the media to your camera roll.');
return;
}
await CameraRoll.save(`file://${path}`, {
type: type,
});
setSavingState("saved");
} catch (e) {
setSavingState("none");
Alert.alert(
"Failed to save!",
`An unexpected error occured while trying to save your ${type}. ${e?.message ?? JSON.stringify(e)}`
);
}
}, [path, type]);
const source = useMemo(() => ({ uri: `file://${path}` }), [path]);
const screenStyle = useMemo(() => ({ opacity: hasMediaLoaded ? 1 : 0 }), [
hasMediaLoaded,
]);
return (
<View style={styles.container}>
<View style={[styles.container, screenStyle]}>
{type === "photo" && (
<Image
source={source}
style={StyleSheet.absoluteFill}
resizeMode="cover" />
resizeMode="cover"
onLoadEnd={onMediaLoadEnd} />
)}
{type === "video" && (
<Video source={source}
@ -43,14 +94,68 @@ export const Media: NavigationFunctionComponent<MediaProps> = ({ componentId, ty
useTextureView={false}
controls={false}
playWhenInactive={true}
ignoreSilentSwitch="ignore" />
ignoreSilentSwitch="ignore"
onReadyForDisplay={onMediaLoadEnd} />
)}
<Pressable style={styles.closeButton} onPress={onClosePressed}><Text>Close.</Text></Pressable>
<PressableOpacity
style={styles.closeButton}
onPress={onClosePressed}>
<IonIcon
name="close"
size={35}
color="white"
style={styles.icon} />
</PressableOpacity>
<PressableOpacity
style={styles.saveButton}
onPress={onSavePressed}
disabled={savingState !== "none"}>
{savingState === "none" && (
<IonIcon
name="download"
size={35}
color="white"
style={styles.icon}
/>
)}
{savingState === "saved" && (
<IonIcon
name="checkmark"
size={35}
color="white"
style={styles.icon}
/>
)}
{savingState === "saving" && (
<ActivityIndicator color="white" />
)}
</PressableOpacity>
</View>
);
}
Media.options = {
modal: {
swipeToDismiss: false,
},
modalPresentationStyle: OptionsModalPresentationStyle.overCurrentContext,
animations: {
showModal: {
waitForRender: true,
enabled: false,
},
dismissModal: {
enabled: false,
},
},
layout: {
backgroundColor: "transparent",
componentBackgroundColor: "transparent",
},
};
const styles = StyleSheet.create({
container: {
flex: 1,
@ -60,9 +165,24 @@ const styles = StyleSheet.create({
},
closeButton: {
position: 'absolute',
top: CONTENT_SPACING,
left: CONTENT_SPACING,
top: SAFE_AREA_PADDING.paddingTop,
left: SAFE_AREA_PADDING.paddingLeft,
width: 40,
height: 40,
},
saveButton: {
position: 'absolute',
bottom: SAFE_AREA_PADDING.paddingBottom,
left: SAFE_AREA_PADDING.paddingLeft,
width: 40,
height: 40,
},
icon: {
textShadowColor: "black",
textShadowOffset: {
height: 0,
width: 0,
},
textShadowRadius: 1,
},
});