isometrik-chat 0.1.0

package/src/view/component/Profile/ProfileUpdate.js

@@ -0,0 +1,178 @@
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+import ImageComponent from '../../../components/ImageComponent';
+import client from '../../../utils/chatSdk';
+import { getMediaUrl, uploadPicturePresignedURl, userProfilePicturePlaceholder, checkFileSize, checkLetterUppercase } from '../../../lib/helpers';
+import OutsideAlerter from '../../../components/OutsideAlerter/OutsideAlerter';
+import TakeProfilePhoto from './TakeProfilePhoto';
+import Toaster from '../Toaster/Toaster';
+import ProfilePictureUploadPreview from '../../../components/Modal/ProfilePictureUploadPreview';
+import CustomModal from '../../../components/CustomModal';
+
+
+const ProfilePictureTextContainer = styled.div`
+    position: absolute;
+    top: 0;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: var(--photopicker_overlay_background);
+    justify-content: center;
+    cursor: pointer;
+`;
+
+const ProfilePictureText = styled.p`
+    text-transform: uppercase;
+    color: #fff;
+    font-size: 0.8rem;
+    overflow-wrap: break-word;
+    margin-bottom: 0;
+    margin-top: 5px;
+    text-align: center;
+`;
+
+const ProfilePictureTextImageContainer = styled.div`
+    max-width: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .camera_icon{
+        width: 30px;
+        height: 30px;
+    }
+`;
+
+const ProfileModalContainer = styled.div`   
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 999;
+    -webkit-transform: translate(0%,0%);
+    -ms-transform: translate(0%,0%);
+    transform: translate(0%,0%);
+    padding: 20px;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);    
+    border-radius: 3px; 
+    display: flex;
+    flex-direction: column;
+    gap: 10px;   
+
+`;
+
+const ProfileModalOptionText = styled.p`
+    color: var(--black);
+    margin-bottom: 0px;
+    cursor: pointer;
+`;
+
+const ProfileUpdate = (props) => { 
+    const  {  setUpdateUserDetails, updateUserProfile, showImageUploaderOption, setUserDetails, setShowProfilePicture, theme, updateUserDetails, setShowUsernameInvalid, setNameDisable } = props;
+    const [showProfileModal, setShowProfileModal] = useState(false);
+    const [isTakePhotoModal, setIsTakePhotoModal] = useState(false);
+    const [toastStatus, setToastStatus] = useState({open: false, message: '', variant: ''});
+    const [getUploadedProfilePictureLink, setGetUploadedProfilePictureLink] = useState('');
+    const uploadFileRef = useRef(null);
+    const profileOptions = [{ id: 1, title: 'View Photo' }, { id: 2, title: 'Take Photo' }, { id: 3, title: 'Upload Photo' }, { id: 4, title: 'Remove Photo' }];
+
+    const uploadProfileData = (data) => {
+        if (data.id === 3) {
+            uploadFileRef.current.click();
+        }else if (data.id === 4) {
+            updateProfileImageRequest(userProfilePicturePlaceholder);
+        }else if (data.id === 1) {
+            setShowProfilePicture({showProfile: true, userName: updateUserDetails.userName , userImageSrc: updateUserDetails.userProfileImageUrl, theme: theme});
+        }else if( data.id === 2){
+            setIsTakePhotoModal(true);
+        }
+        setShowProfileModal(false);
+    }
+
+    const updateProfileImageRequest = (mediaUrl) => {
+        setUpdateUserDetails((prev) => {
+            return{
+                ...prev,
+                userName: updateUserDetails?.userName,
+                userProfileImageUrl: mediaUrl
+            }
+        })
+        setUserDetails((prev) => {
+            return{
+                ...prev,
+                userName: updateUserDetails?.userName,
+                userProfileImageUrl: mediaUrl
+            }
+        })
+        const body = {
+            userName: updateUserDetails?.userName,
+            userProfileImageUrl: mediaUrl
+        };
+        try {
+            const res =  client.user.patchUser(body);
+            setToastStatus({open: true, variant:"success", message: 'Profile updated successfully' });
+            setNameDisable(true);
+        } catch (error) {
+            setToastStatus({open: true, variant:"error", message: 'Profile updated fail!' });
+        }
+      
+    }
+
+    const uploadMediaChange = async (e) => {
+        setShowProfileModal(false);
+        const file = e.target.files[0];
+        setGetUploadedProfilePictureLink(URL.createObjectURL(file));
+        e.target.value = null;
+    }
+
+    return (
+        <>
+            <ProfilePictureTextContainer className='profile_picture_uploader' showImageUploaderOption={showImageUploaderOption} onClick={() => setShowProfileModal(true)} >
+                <ProfilePictureTextImageContainer>
+                    <ImageComponent className={'camera_icon'} src={'https://www.shutterstock.com/image-vector/photo-camera-lens-button3d-vector-600w-2087249068.jpg'} alt="camera_icon" />
+                    <ProfilePictureText>{'Change Profile Photo'}</ProfilePictureText>
+                </ProfilePictureTextImageContainer>
+                <input ref={uploadFileRef} onChange={uploadMediaChange} type='file' style={{ display: 'none' }} accept="image/png, image/gif, image/jpeg" />
+            </ProfilePictureTextContainer>
+            {
+                showProfileModal &&
+                <OutsideAlerter onClose={() => setShowProfileModal(false)} >
+                    <ProfileModalContainer>
+                        {
+                            profileOptions.map((data, index) => (
+                                <ProfileModalOptionText key={data.id}
+                                    onClick={() => uploadProfileData(data)}
+                                >{data.title}</ProfileModalOptionText>
+                            ))
+                        }
+                    </ProfileModalContainer>
+                </OutsideAlerter>
+            }
+            {
+                getUploadedProfilePictureLink.length > 0 &&
+                <CustomModal backDropClick={true} open={getUploadedProfilePictureLink.length}  onClose={() => setGetUploadedProfilePictureLink('')}>
+                    <ProfilePictureUploadPreview theme={theme} 
+                    imageUrl={getUploadedProfilePictureLink}
+                    isActive={getUploadedProfilePictureLink.length} updateProfileImageRequest={updateProfileImageRequest} 
+                    onClose={() => setGetUploadedProfilePictureLink('')}
+                    updateUserDetails={updateUserDetails}
+                    setToastStatus={setToastStatus}
+                    uploadFileRef={uploadFileRef}
+                    />
+                </CustomModal>  
+            }
+
+            {
+                isTakePhotoModal && 
+                <TakeProfilePhoto isTakePhotoModal={isTakePhotoModal} theme={theme} onClose={() => setIsTakePhotoModal(false)} updateProfileImageRequest={updateProfileImageRequest} setIsTakePhotoModal={setIsTakePhotoModal} setShowUsernameInvalid={setShowUsernameInvalid} updateUserDetails={updateUserDetails} setNameDisable={setNameDisable} />
+            }
+
+            {
+                <Toaster message={toastStatus.message} variant={toastStatus.variant} open={toastStatus.open} onClose={() => setToastStatus({open: false})} theme={theme} />
+            }
+        </>
+    )
+}
+
+export default ProfileUpdate;

package/src/view/component/Profile/TakeProfilePhoto.js

@@ -0,0 +1,391 @@
+import React, { useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import OutsideAlerter from '../../../components/OutsideAlerter/OutsideAlerter';
+import ImageComponent from '../../../components/ImageComponent';
+import { CAMERA_RETAKE, CAMERA_SWITCH, CLOSE_ICON, CORRECT_ICON } from '../../../utils/global';
+import { checkFileSize, checkLetterUppercase, dataURLtoFile, getMediaUrl, uploadPicturePresignedURl } from '../../../lib/helpers';
+import Loader from '../Loader/Loader';
+import CustomModal from '../../../components/CustomModal';
+import CameraPermissionBlockedModal from '../../../components/Modal/CameraPermissionBlockedModal';
+import CameraPermissionRequestModal from '../../../components/Modal/CameraPermissionRequestModal';
+import Toaster from '../Toaster/Toaster';
+import { mobile } from '../../../utils/media';
+import useDeviceType from '../../../hooks/useDeviceType';
+import ImageCropper from '../ImageCropper/ImageCropper';
+
+const TakeProfilePhotoWrapper = styled.div`
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    background-color:  var(--modal-backdrop);
+    position: fixed;
+    border: none;
+    z-index: 1001;
+    cursor: default;
+    visibility: hidden;
+    ${(props) =>
+        props.isActive &&
+        css`
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+    `}
+
+    .cross_icon{
+        width: 24px;
+        height: 24px;
+    }
+`;
+
+const TakePhotoContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    max-width: 500px;
+    max-height: 700px;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: ${props => props.isPadding ? '0 2rem' : 'unset'};
+    padding-bottom: 3rem;
+    visibility: hidden;
+    ${(props) =>
+        props.isActive &&
+        css`
+        visibility: visible;
+        opacity: 1;
+    `}
+    ${mobile(css`
+        width: 100%;
+        height: 80%;
+    `)}
+
+    .video_play{
+        width: 500px;
+        height: 375px;
+        max-width: 500px;
+        max-height: 500px;
+        ${mobile(css`
+            width: 100%;
+            height: 100%;
+            max-height: 480px;
+        `)}
+    }
+
+    .user_clicked_pic{
+        width: 500px;
+        height: 400px;
+        border-radius: 0;
+        ${mobile(css`
+            width: 100%;
+        `)}
+    }
+`;
+
+const CameraIconContainer = styled.div`
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: var(--profile-name);
+    display: ${props => !props.isActive ? 'flex' : 'none'};
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    bottom: -20px;
+    cursor: pointer;
+
+    ${mobile(css`
+        bottom: 0;
+    `)}
+
+    .camera_icon{
+        width: 24px;
+        height: 24px;
+    }
+`;
+
+const TakePhotoHeader = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    ${mobile(css`
+        padding: 1rem;
+    `)}
+    .header_wrapper{
+        display: flex;
+    }
+`;
+
+const TakePhotoHeaderText = styled.p`
+    margin-bottom: 0;
+    color: var(--black);
+    margin-left: 1rem;
+    padding-top:${props => props.isPaddingTop ? '2rem' : 'unset'};
+`;
+
+const ClickedImageWrapper = styled.div`
+    position: relative;
+    ${mobile(css`
+        height: 100%;
+        display: flex;
+        align-items: center;
+    `)}
+`;
+
+const CorrectIconWrapper = styled.div`
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: var(--profile-name);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 50px;
+    bottom: -30px;
+
+    ${mobile(css`
+        bottom: 0;
+    `)}
+
+    img{
+        width: 30px;
+        height: 30px;
+    }
+`;
+
+const VideoWrapper = styled.div`
+    display: ${props => !props.isActive ? 'block' : 'none'};
+    ${mobile(css`
+        height: 100%;
+    `)}
+`
+
+const LoaderWrapper = styled.div`
+    display: ${props => props.isActive ? 'block' : 'none'};
+`;
+
+const LoaderVideoContainer = styled.div`
+    position: relative;
+    ${mobile(css`
+        height: 100%;
+    `)}
+`;
+
+const ModalAllowCameraCTA = styled.button`
+    border: none;
+    padding: 10px 20px;
+    background: var(--profile-name);
+    color: #fff;
+    border-radius: 45px;
+    margin: 2rem 0 0;
+`;
+
+const ModalHeaderTitle = styled.h3`
+    font-size: 2rem;
+    color: var(--black);
+    padding-top: 2rem;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+`;
+
+const CameraSwitchContainer = styled.div`
+    display: flex;
+    align-items: center;
+
+    .camera_switch{
+        width: 20px;
+        height: 20px;
+        filter: ${props => props.theme ? ' invert(1) ' : ''} ;
+    }
+`;
+
+const TakeProfilePhoto = (props) => {
+    const { isTakePhotoModal, onClose, updateProfileImageRequest, setIsTakePhotoModal, setShowUsernameInvalid, updateUserDetails, setNameDisable, theme } = props;
+    const [getClickedPictureUrl, setGetClickedPictureUrl] = useState('');
+    const [takePhoto, setTakePhoto] = useState(true);
+    const [currentStream, setCurrentStream] = useState('');
+    const [loaderStatus, setLoaderStatus] = useState(true);
+    const [notAllowCameraPermission, setNotAllowCameraPermission] = useState(false);
+    const [accessCamera, setAccessCamera] = useState(false);
+    const [toastStatus, setToastStatus] = useState({ open: false, message: '', variant: '' });
+    const [isCameraSwitch, setIsCameraSwitch] = useState(false);
+    const [rotateCameraIcon, setRotateCameraIcon] = useState(true);
+    const [croppedImg, setCroppedImg] = useState("");
+    const isMobile = useDeviceType();
+
+
+    const closeStream = (stream) => {
+        setRotateCameraIcon(false);
+        const tracks = stream.getTracks();
+        tracks.forEach(function (track) {
+            track.stop();
+        });
+    }
+
+    useEffect(() => {
+        if (!takePhoto) return;
+        let newFacingMode;
+        if (isCameraSwitch) {
+            const videoTrack = currentStream.getVideoTracks()[0];
+            const currentFacingMode = videoTrack.getSettings().facingMode;
+            newFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
+            videoTrack.stop();
+        }
+        setLoaderStatus(true);
+        const video = document.querySelector("video");
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const takePictureButton = document.querySelector("#take-picture");
+        setAccessCamera(true);
+        navigator.mediaDevices
+            .getUserMedia({ video: isCameraSwitch ? { facingMode: newFacingMode } : true })
+            .then((stream) => {
+                setAccessCamera(false);
+                video.srcObject = stream;
+                video.play();
+                setCurrentStream(stream);
+                takePictureButton.addEventListener('click', () => closeStream(stream));
+            })
+            .catch((err) => {
+                setAccessCamera(false);
+                setNotAllowCameraPermission(true);
+                console.error(err);
+            });
+
+        takePictureButton.addEventListener("click", () => {
+            // Set the canvas dimensions to match the video dimensions
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+
+            // Draw the current video frame onto the canvas
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            // Convert the canvas image data to a base64-encoded URL
+            const imageDataUrl = canvas.toDataURL();
+            setTakePhoto(false);
+            setGetClickedPictureUrl(imageDataUrl);
+        });
+        setTimeout(() => {
+            setLoaderStatus(false);
+        }, 900);
+    }, [takePhoto, isCameraSwitch]);
+
+    const submitHandler = async () => {
+            const file = dataURLtoFile(croppedImg, 'myimage.png');
+            const { valid, error } = checkFileSize(file);
+            const isValidUsername = checkLetterUppercase(updateUserDetails?.userName);
+            if (valid && isValidUsername) {
+                const response = await uploadPicturePresignedURl(file.type);
+                if (response?.presignedUrl) {
+                    onClose();
+                    const uploadImage = await getMediaUrl(response?.presignedUrl, file, file.type);
+                    updateProfileImageRequest(response?.mediaUrl);
+                }
+            } else {
+                setShowUsernameInvalid(true);
+                allowCameraModalHandler();
+                if (isValidUsername) {
+                    setToastStatus({ open: true, message: error, variant: 'error' });
+                }
+            }
+    }
+
+    const closeModalCameraAccessHandler = () => {
+        currentStream && closeStream(currentStream);
+        onClose();
+    }
+
+    const allowCameraModalHandler = () => {
+        onClose();
+    }
+    return (
+        <>
+            <TakeProfilePhotoWrapper isActive={isTakePhotoModal} className="App">
+                <OutsideAlerter onClose={closeModalCameraAccessHandler}>
+                    <TakePhotoContainer isActive={!notAllowCameraPermission && !accessCamera}>
+                        <TakePhotoHeader>
+                            <div className='header_wrapper'>
+                                <ImageComponent
+                                    id="takePhotoModal"
+                                    onClick={closeModalCameraAccessHandler}
+                                    src={CLOSE_ICON}
+                                    className={`${props?.theme ? "darkicons" : "lighticons"} cross_icon`}
+                                />
+                                <TakePhotoHeaderText>{getClickedPictureUrl.length ? 'Drag the image to adjust' : 'Take Photo'}</TakePhotoHeaderText>
+                            </div>
+                            {
+                                getClickedPictureUrl.length > 0 &&
+                                <div onClick={() => {
+                                    setGetClickedPictureUrl('');
+                                    setTakePhoto(true);
+                                    setRotateCameraIcon(true);
+                                }} className='header_wrapper pointer'>
+                                    <ImageComponent
+                                        src={CAMERA_RETAKE}
+                                        className={`${props?.theme ? "darkicons" : "lighticons"} cross_icon`}
+                                    />
+                                    <TakePhotoHeaderText>{'Retake'}</TakePhotoHeaderText>
+                                </div>
+                            }
+
+                            {
+                                rotateCameraIcon && isMobile &&
+                                <CameraSwitchContainer theme={theme}>
+                                    <ImageComponent className="camera_switch" src={CAMERA_SWITCH} alt="camera_switch" />
+                                    <TakePhotoHeaderText onClick={() => setIsCameraSwitch(!isCameraSwitch)}>{'Rotate camera'}</TakePhotoHeaderText>
+                                </CameraSwitchContainer>
+                            }
+
+                        </TakePhotoHeader>
+                        <>
+                            {
+                                getClickedPictureUrl?.length > 0 &&
+                                <>
+                                    <ClickedImageWrapper >
+                                        <ImageCropper setCroppedImg={setCroppedImg} imageUrl={getClickedPictureUrl} />
+                                        <CorrectIconWrapper>
+                                            <ImageComponent onClick={submitHandler} className={`darkicons`} src={CORRECT_ICON} alt={"correct_icon"} />
+                                        </CorrectIconWrapper>
+                                    </ClickedImageWrapper>
+
+                                </>
+                            }
+                            <LoaderVideoContainer>
+                                <VideoWrapper isActive={getClickedPictureUrl}>
+                                    <video className='video_play'></video>
+                                    <CameraIconContainer isActive={getClickedPictureUrl} id='take-picture'>
+                                        <ImageComponent className={'camera_icon'} src={'https://www.shutterstock.com/image-vector/photo-camera-lens-button3d-vector-600w-2087249068.jpg'} alt={'camera_icon'} />
+                                    </CameraIconContainer>
+                                </VideoWrapper>
+                            </LoaderVideoContainer>
+                        </>
+                    </TakePhotoContainer>
+                </OutsideAlerter>
+            </TakeProfilePhotoWrapper>
+            {
+                notAllowCameraPermission &&
+                <CustomModal open={notAllowCameraPermission} backDropClick={true} onClose={allowCameraModalHandler} >
+                    <CameraPermissionBlockedModal onClick={allowCameraModalHandler} />
+                </CustomModal>
+            }
+            {
+                accessCamera &&
+                <CustomModal open={accessCamera} backDropClick={true} onClose={allowCameraModalHandler} >
+                    <CameraPermissionRequestModal onClick={allowCameraModalHandler} />
+                </CustomModal>
+            }
+            {
+                <Toaster message={toastStatus.message} variant={toastStatus.variant} open={toastStatus.open} onClose={() => setToastStatus({ open: false })} theme={theme} />
+            }
+        </>
+    );
+}
+
+export default TakeProfilePhoto;