update Avatar.js, Drawer.js, User.js and src/screens/VideoDisplay/index.js

src/components/Avatar.js

@@ -1,31 +1,50 @@
 import React from "react";
-import { Image, View } from "react-native";
+import {
+  Image,
+  View,
+  Pressable,
+  Dimensions,
+  StyleSheet,
+  Text,
+} from "react-native";
 import Svg, { G, Path } from "react-native-svg";
 import { connect } from "react-redux";
+import { Ionicons } from "@expo/vector-icons";
+
+//components
+import Modal from "../components/Modal";
+
+//assets
+import avatarPng from "../assets/icons/avatar.png";
 
 //style
 import tw from "tailwind-rn";
 import Colors from "../constants/Colors";
+import fontSize from "../constants/fontSize";
 
-function Avatar({ source, size, theme }) {
+const { height, width } = Dimensions.get("window");
+
+function Avatar({ source, size, theme, action }) {
+  const [openModal, setOpenModal] = React.useState(false);
   return (
-    <View
+    <Pressable
+      onPress={() => setOpenModal(true)}
       style={[
         tw("rounded-full overflow-hidden flex justify-center items-center"),
         {
-          minWidth: size,
+          width: size,
-          minHeight: size,
+          height: size,
           backgroundColor:
             theme === "light"
               ? Colors.theme1.grayE3
-              : Colors.theme1.white + '55',
+              : Colors.theme1.white + "55",
         },
       ]}
     >
       {source ? (
         <Image
-          source={{ uri: `https:dnvn.ir/api/v1/file/${source}` }}
+          source={{ uri: source }}
-          style={{ minWidth: "100%", minHeight: "100%" }}
+          style={{ width: "100%", height: "100%" }}
           resizeMode="contain"
         />
       ) : (
@@ -39,22 +58,105 @@ function Avatar({ source, size, theme }) {
             <Path d="M18.488 3.081a7.311 7.311 0 0 0-.185 14.621 1.243 1.243 0 0 1 .339 0h.108a7.313 7.313 0 0 0-.262-14.621Z" />
             <Path
               d="M18.488 5.081a5.324 5.324 0 0 0-5.318 5.318c0 1.395.528 2.705 1.486 3.689.94.965 2.215 1.535 3.6 1.61.165-.011.328-.01.484.002a5.31 5.31 0 0 0 5.066-5.304 5.324 5.324 0 0 0-5.318-5.315m0-2a7.325 7.325 0 0 1 7.318 7.318 7.3 7.3 0 0 1-7.056 7.303h-.108a1.243 1.243 0 0 0-.339 0c-4.036-.14-7.133-3.344-7.133-7.303a7.325 7.325 0 0 1 7.318-7.318Z"
-              fill={theme === 'light' ? "#818181" : Colors.theme1.white}
+              fill={theme === "light" ? "#818181" : Colors.theme1.white}
             />
             <G data-name="Vector">
               <Path d="M26.314 21.8a15.3 15.3 0 0 0-15.637 0 6.081 6.081 0 0 0-3.035 4.976 6.03 6.03 0 0 0 3.02 4.945 14.234 14.234 0 0 0 7.826 2.172 14.234 14.234 0 0 0 7.826-2.172 6.078 6.078 0 0 0 3.02-4.976 6.066 6.066 0 0 0-3.02-4.945Z" />
               <Path
                 d="M18.507 21.651c-2.528 0-4.977.661-6.721 1.814-1.383.926-2.144 2.102-2.144 3.311 0 1.201.756 2.366 2.129 3.282l.006.003c1.734 1.165 4.18 1.833 6.711 1.833 2.53 0 4.977-.668 6.708-1.83 1.762-1.189 2.136-2.455 2.138-3.31-.01-.862-.388-2.129-2.129-3.29-1.729-1.152-4.17-1.813-6.698-1.813m0-2c2.831 0 5.658.716 7.807 2.15 1.942 1.293 3.005 3.05 3.02 4.945 0 1.91-1.078 3.666-3.02 4.976-4.313 2.896-11.339 2.896-15.652 0-1.942-1.294-3.02-3.05-3.02-4.946 0-1.895 1.078-3.666 3.035-4.976 2.165-1.433 5-2.149 7.83-2.149Z"
-                fill={theme === 'light' ? "#818181" : Colors.theme1.white}
+                fill={theme === "light" ? "#818181" : Colors.theme1.white}
               />
             </G>
           </G>
         </Svg>
       )}
-    </View>
+      <Modal openModal={openModal} setOpenModal={setOpenModal} type="fade">
+        <Pressable
+          style={[tw("flex-1 justify-center items-center bg-black relative")]}
+          onPress={() => setOpenModal(!openModal)}
+        >
+          <Ionicons
+            name="arrow-forward"
+            style={tw("mr-2 absolute top-4 right-2")}
+            size={24}
+            color={
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+            }
+            onPress={() => setOpenModal(false)}
+          />
+          <Text
+            onPress={() => action()}
+            style={{
+              position: "absolute",
+              top: 16,
+              left: 16,
+              color: "white",
+              fontFamily: "bold",
+              fontSize: fontSize.tiny,
+            }}
+          >
+            ویرایش
+          </Text>
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            style={{ width, height: width, backgroundColor: "white" }}
+          >
+            <Image
+              source={source ? { uri: source } : avatarPng}
+              style={{ width: "100%", height: width }}
+              resizeMode="contain"
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </Pressable>
   );
 }
 
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: "#F194FF",
+  },
+  buttonClose: {
+    backgroundColor: "#2196F3",
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+  },
+});
+
 const mapStateToProps = (state) => ({
   theme: state.publicApi.theme,
 });

src/components/Drawer.js

@@ -12,6 +12,7 @@ import {
   Animated,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
+import * as ImagePicker from "expo-image-picker";
 import { asyncAwesomeAlert } from "../utils/AsyncWrappers";
 import { connect } from "react-redux";
 import { user, publicApi } from "../redux/actions";
@@ -48,9 +49,26 @@ const Drawer = ({
   const [width, setWidth] = useState(Dimensions.get("window").width);
   const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
   const [dropdown, setDropdown] = useState(false);
+  const [image, setImage] = React.useState(null);
   const [dropdownHeight, setDropdownHeight] = useState(0);
   const navigation = useNavigation();
 
+  const pickImage = React.useCallback(async () => {
+    // No permissions request is necessary for launching the image library
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    console.log(result);
+
+    if (!result.cancelled) {
+      setImage(result.uri);
+    }
+  }, [image, user]);
+
   const routes = React.useMemo(() => {
     return [
       {
@@ -381,7 +399,7 @@ const Drawer = ({
               "flex flex-row-reverse items-center w-full justify-between"
             )}
           >
-            <Avatar souce={user?.picFileIds} size={width / 6} />
+            <Avatar source={user?.picFileIds || image} size={width / 6} action={() => pickImage()} />
             {theme === "light" ? (
               <Svg
                 xmlns="http://www.w3.org/2000/svg"

src/components/Modal.js

@@ -0,0 +1,19 @@
+import { Modal } from "react-native";
+import React from "react";
+
+const MyModal = ({ children, openModal, setOpenModal, type = "slide" }) => {
+  return (
+    <Modal
+      animationType={type}
+      transparent={true}
+      visible={openModal}
+      onRequestClose={() => {
+        setOpenModal(!openModal);
+      }}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export default MyModal;

src/screens/Profile/components/User.js

@@ -1,4 +1,5 @@
 import { View, Text, Platform, Pressable, Dimensions } from "react-native";
+import * as ImagePicker from "expo-image-picker";
 import React from "react";
 import { connect } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
@@ -17,8 +18,25 @@ const { width } = Dimensions.get("window");
 
 const User = ({ user, mobile, theme }) => {
   const [dropdown, setDropdown] = React.useState(true);
+  const [image, setImage] = React.useState(null);
   const navigation = useNavigation();
 
+  const pickImage = React.useCallback(async () => {
+    // No permissions request is necessary for launching the image library
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    console.log(result);
+
+    if (!result.cancelled) {
+      setImage(result.uri);
+    }
+  }, [image, user]);
+
   React.useEffect(() => {
     if (!user) {
       navigation.navigate("Login");
@@ -34,7 +52,11 @@ const User = ({ user, mobile, theme }) => {
         onPress={() => setDropdown(!dropdown)}
       >
         <View style={tw(`flex items-center flex-row-reverse`)}>
-          <Avatar source={user?.picFileIds} size={mobile ? width / 5.5 : width / 7} />
+          <Avatar
+            source={user?.picFileIds || image}
+            size={mobile ? width / 5.5 : width / 7}
+            action={() => pickImage()}
+          />
           <View style={tw(`flex mr-2 ${ios ? "items-end" : ""}`)}>
             <Text
               style={{

src/screens/VideoDisplay/index.js

@@ -28,6 +28,7 @@ import Colors from "../../constants/Colors";
 
 const ios = Platform.OS === "ios";
 
+
 function VideoDisplay({ route, mobile, theme }) {
   const video = React.useRef(null);
   const [width, setWidth] = useState(Dimensions.get("window").width);
@@ -38,6 +39,16 @@ function VideoDisplay({ route, mobile, theme }) {
     setPosition(position === "100%" ? "0%" : "100%");
   };
 
+  const onFullscreenUpdate = async ({ fullscreenUpdate }) => {
+    if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) {
+      await ScreenOrientation.unlockAsync();
+    } else if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS) {
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT
+      );
+    }
+  };
+
   React.useEffect(() => {
     video.current.replayAsync();
     video.current.playAsync();
@@ -78,6 +89,7 @@ function VideoDisplay({ route, mobile, theme }) {
             }}
             useNativeControls
             resizeMode="contain"
+            onFullscreenUpdate={onFullscreenUpdate}
           />
           <Text
             style={{