Implement media saving
This commit is contained in:
parent
112af9b86c
commit
674d9ccb8b
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
5
example/package-lock.json
generated
5
example/package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user