Implement media saving

example/android/app/src/main/AndroidManifest.xml

@@ -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"

example/ios/Podfile.lock

@@ -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

example/ios/VisionCameraExample/Info.plist

@@ -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>

example/package-lock.json

@@ -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",

example/package.json

@@ -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",

example/src/Media.tsx

@@ -1,34 +1,85 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, View, Text, Image, Pressable } from 'react-native';
+import { StyleSheet, View, Image, ActivityIndicator, PermissionsAndroid, Platform } from 'react-native';
-import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
+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,
+    top: SAFE_AREA_PADDING.paddingTop,
-    left: CONTENT_SPACING,
+    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,
+  },
 });