Implement media saving

example/src/Media.tsx

@@ -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,
+  },
 });