diff --git a/src/assets/icons/avatar.png b/src/assets/icons/avatar.png new file mode 100644 index 0000000..5822e20 Binary files /dev/null and b/src/assets/icons/avatar.png differ diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 8abf3a3..70a0a21 100644 --- a/src/components/Avatar.js +++ b/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 ( - setOpenModal(true)} style={[ tw("rounded-full overflow-hidden flex justify-center items-center"), { - minWidth: size, - minHeight: size, + width: size, + height: size, backgroundColor: theme === "light" ? Colors.theme1.grayE3 - : Colors.theme1.white + '55', + : Colors.theme1.white + "55", }, ]} > {source ? ( ) : ( @@ -39,22 +58,105 @@ function Avatar({ source, size, theme }) { )} - + + setOpenModal(!openModal)} + > + setOpenModal(false)} + /> + action()} + style={{ + position: "absolute", + top: 16, + left: 16, + color: "white", + fontFamily: "bold", + fontSize: fontSize.tiny, + }} + > + ویرایش + + e.stopPropagation()} + style={{ width, height: width, backgroundColor: "white" }} + > + + + + + ); } +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, }); diff --git a/src/components/Drawer.js b/src/components/Drawer.js index b6c23e9..f5c46b9 100644 --- a/src/components/Drawer.js +++ b/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" )} > - + pickImage()} /> {theme === "light" ? ( { + return ( + { + setOpenModal(!openModal); + }} + > + {children} + + ); +}; + +export default MyModal; diff --git a/src/screens/Profile/components/User.js b/src/screens/Profile/components/User.js index b2b8a51..9b4faa5 100644 --- a/src/screens/Profile/components/User.js +++ b/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)} > - + pickImage()} + /> { + 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} />