isometrik-chat 0.1.0

package/src/view/component/Chatbox.js/AudioRecorder.js

@@ -0,0 +1,311 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import ImageComponent from '../../../components/ImageComponent';
+import { AUDIO_PAUSE, AUDIO_PLAY, CANCEl, CHAT_AUDIO_PAUSE, CHAT_AUDIO_PLAY, DELETEICON } from '../../../utils/global';
+import { convertSecondsToMinutes, dataURLtoFile, generatedMessagePresignedUrls, getMediaUrl } from '../../../lib/helpers';
+import CustomModal from '../../../components/CustomModal';
+import MicPermissionDisableModal from '../../../components/Modal/MicPermissionDisableModal';
+import { mobile } from '../../../utils/media';
+import AllowMicPermissionModal from '../../../components/Modal/AllowMicPermissionModal';
+import WaveSurfer from 'wavesurfer.js';
+
+const AudioRecorderWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0.5rem 2rem;
+    gap: 1rem;
+    visibility: ${props => props.isVisible ? 'visible' : 'hidden'};
+
+    ${mobile(css`
+        width: 90%;
+        padding: 0 0.8rem;
+    `)}
+
+    .stop_recording_icon{
+      width: 30px;
+      height: 30px;
+      filter: ${props => props.theme ? 'invert(0)' : ''};
+      cursor: pointer;
+    }
+`;
+
+const AudioMicWrapper = styled.div`
+    height: 76px;
+`;
+
+const ShowRecordedAudioWrapper = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: ${props => props.audioRecorded ? '50%' : 'fit-content'};
+
+      
+    .wave_container{
+      width: 100%;
+
+      wave{
+          ::-webkit-scrollbar {
+          display: none;
+          }
+          -ms-overflow-style: none;  /* IE and Edge */
+          scrollbar-width: none;  /* Firefox */
+      }
+    }
+
+    .chat_audio_play_pause{
+      width: 16px;
+      height: 16px;
+      margin-right: 1rem;
+      filter: ${props => props.theme === true  ? 'invert(1)' : 'unset'};
+    }
+`;
+
+const AudioTime = styled.p`
+    font-size: 14px;
+    color: var(--chat_timing);
+    margin-bottom: 0;
+    margin-left: 1rem;
+`;
+
+const AudioRecordDot = styled.div`
+    width: 16px;
+    height: 16px;
+    background-color: var(--profile-color);
+    border-radius: 50%;
+    animation: blink 1s infinite;
+
+    @keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+`;
+
+const AudioRecorder = React.forwardRef((props, ref) => {
+  const { theme, onClose, conversationId, setRecordedStream, setMessageText, recordedStream, setAudioRecorderStatus, audioRecorderStatus } = props;
+  const [recording, setRecording] = useState(true);
+  const [recordingStream, setRecordingStream] = useState(null);
+  const [finalAudioLink, setFinalAudioLink] = useState('');
+  const mediaRecorderRef = useRef(null);
+  const audioRef = useRef(null);
+  const waveformRef = useRef(null);
+  const wavesurfer = useRef(null);
+  const [isMicPermissionDisable, setIsMicPermissionDisable] = useState(false);
+  const [isMicPermissionAllow, setIsMicPermissionAllow] = useState(true);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [audioDuration, setAudioDuration] = useState(0);
+  const [time, setTime] = useState(0);
+  // const [recordedChunks, setRecordedChunks] = useState({});
+  let recordedChunks = [];
+  let combinedChunks = [];
+
+  const startRecording = async (e) => {
+    try {
+      setMessageText(false);
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      setRecordingStream(stream);
+      startTimer();
+      setIsMicPermissionAllow(false);
+      mediaRecorderRef.current = new MediaRecorder(stream);
+      mediaRecorderRef.current.addEventListener("dataavailable", handleDataAvailable);
+      mediaRecorderRef.current.start();
+      setRecording(true);
+    } catch (error) {
+      console.error('error', error);
+      setIsMicPermissionDisable(true);
+      setIsMicPermissionAllow(true);
+    }
+  };
+
+  useEffect(() => {
+    try {
+        if (finalAudioLink?.length > 0) {
+        wavesurfer.current = WaveSurfer.create({
+          container: waveformRef.current,
+          waveColor: '#6f8171',
+          progressColor: '#6f8171',
+          height: 40,
+          barHeight: 1.5,
+          barWidth: 3,
+          barGap: 2,
+        });
+  
+        wavesurfer.current.load(finalAudioLink);
+  
+        wavesurfer.current.on('ready', () => {
+          const totalDuration = wavesurfer.current.getDuration();
+          const getSortedTime = convertSecondsToMinutes(Math.round(totalDuration));
+          setAudioDuration(getSortedTime);
+        });
+
+        wavesurfer.current.on('audioprocess', () => {
+          const totalDuration = wavesurfer.current.getCurrentTime();
+          const getSortedTime = convertSecondsToMinutes(Math.round(totalDuration));
+          setAudioDuration(getSortedTime);
+      });
+  
+        wavesurfer.current.on('finish', () => {
+          setIsPlaying(false);
+        });
+      }
+      } catch (error) {
+        console.error('error', error);
+      }
+
+
+    return () => {
+      wavesurfer?.current?.destroy();
+      setIsPlaying(false);
+    };
+
+  }, [finalAudioLink]);
+
+
+  const audioHandler = () => {
+    if (!wavesurfer.current.isPlaying()) {
+      setIsPlaying(true);
+      wavesurfer.current.play();
+    } else {
+      setIsPlaying(false);
+      wavesurfer.current.pause();
+    }
+  };
+
+  const getPlayPauseIcon = () => {
+    if (isPlaying) {
+      return (
+        <ImageComponent className="chat_audio_play_pause pointer" src={AUDIO_PLAY } alt="chat_audio_pause" />
+      )
+    } else {
+      return (
+        <ImageComponent className="chat_audio_play_pause  pointer" src={AUDIO_PAUSE} alt="chat_audio_play" />
+      )
+    }
+  }
+
+
+  useEffect(() => {
+    startRecording();
+  }, [])
+
+  const stopRecording = async (e) => {
+    if (recordingStream) {
+      recordingStream.getTracks().forEach((track) => {
+        track.stop();
+      });
+    }
+    setRecordingStream(null);
+    setRecording(false);
+    setMessageText(true);
+  };
+
+  const handleDataAvailable = async ({ data }) => {
+    setRecordedStream(data);
+    recordedChunks.push(data)
+    const audioURL = URL.createObjectURL(data);
+    setFinalAudioLink(audioURL);
+  };
+
+  const handleDeleteButtonClick = () => {
+    stopRecording();
+    onClose();
+  }
+
+  React.useImperativeHandle(ref, () => ({
+    handleDeleteButtonClick
+  }));
+
+  const handleMicPermissionModalClose = (e) => {
+    onClose();
+    setIsMicPermissionDisable(false);
+    setIsMicPermissionAllow(false);
+  };
+
+  const startTimer = () => {
+    try {
+      setInterval(() => {
+        setTime((prevTime) => prevTime + 1);
+      }, 1000);
+    } catch (error) {
+      console.error('error', error);
+    }
+   
+  };
+
+  const formatTime = () => {
+    try {
+      const minutes = Math.floor(time / 60).toString().padStart(2, '0');
+      const seconds = (time % 60).toString().padStart(2, '0');
+      return `${minutes}:${seconds}`;
+    } catch (error) {
+      console.error('error', error);
+    }
+  };
+  
+
+  return (
+    <>
+      <AudioRecorderWrapper isVisible={!isMicPermissionAllow && !isMicPermissionDisable} theme={theme}>
+        <ImageComponent className="pointer" onClick={handleDeleteButtonClick} src={DELETEICON} alt="delete_icon" />
+        <ShowRecordedAudioWrapper theme={theme} audioRecorded={finalAudioLink.length} >
+          {finalAudioLink.length > 0 &&
+            <div onClick={audioHandler}>{getPlayPauseIcon()}</div>
+          }
+          {
+            !finalAudioLink.length && 
+            <AudioRecordDot />
+          }
+          {
+            !finalAudioLink.length &&
+            <AudioTime>{formatTime()}</AudioTime>
+          }
+          {
+            finalAudioLink.length > 0 &&
+            <div className='wave_container' ref={waveformRef}></div>
+          }
+          {
+            finalAudioLink.length > 0 && 
+            <AudioTime>{audioDuration || ''}</AudioTime>
+          }
+        </ShowRecordedAudioWrapper>
+        {recording ?
+          <div onClick={stopRecording} className='stop_recording_icon'>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14.75" fill="none" stroke="currentColor" stroke-width="2.5" /><path fill="currentColor" d="M20.65 21.69V10.25h-3.34v11.44Zm-9.3-11.44v11.44h3.34V10.25Z" class="iwt3stqw s79hpmcy ksz6vod1" /></svg>
+          </div>
+          :
+          <></>
+        }
+      </AudioRecorderWrapper>
+      {
+        isMicPermissionDisable &&
+        <>
+          <AudioMicWrapper>
+          </AudioMicWrapper>
+          <CustomModal backDropClick={true} onClose={handleMicPermissionModalClose} open={isMicPermissionDisable}>
+            <MicPermissionDisableModal onClose={handleMicPermissionModalClose} />
+          </CustomModal>
+        </>
+      }
+      {
+        isMicPermissionAllow &&
+        <>
+          <AudioMicWrapper>
+          </AudioMicWrapper>
+          <CustomModal backDropClick={true} onClose={handleMicPermissionModalClose} open={isMicPermissionAllow}>
+            <AllowMicPermissionModal onClose={handleMicPermissionModalClose} />
+          </CustomModal>
+        </>
+      }
+    </>
+  );
+})
+
+export default AudioRecorder;

package/src/view/component/Chatbox.js/ChatBubbleReply.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import { decodeChatBody } from '../../../lib/helpers';
+const ChatBubbleReplyWrapper = styled.div`
+    background: var(--reply-background-color);
+    padding: 0.5rem;
+    margin-bottom: 0.35rem;
+`;
+const SenderName = styled.h5`
+    color: var(--profile-color);
+    font-size: 0.7rem;
+`;
+const SenderText = styled.p`
+    color: var(--black);
+    margin-bottom: 0;
+    font-size: 0.8rem;
+`;
+const ChatBubbleReply = (props) => {
+    const { replyData, reply } = props;
+    return (
+        <ChatBubbleReplyWrapper>
+            <SenderName>{reply?.senderName}</SenderName>
+            <SenderText>{decodeChatBody(reply?.body)}</SenderText>
+        </ChatBubbleReplyWrapper>
+    );
+}
+export default ChatBubbleReply;

package/src/view/component/Chatbox.js/TakePhoto.js

@@ -0,0 +1,363 @@
+import React, { useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { checkFileSize, dataURLtoFile, } from '../../../lib/helpers';
+import { CAMERA_RETAKE, CAMERA_SWITCH, CLOSE_ICON, SENDICON } from '../../../utils/global';
+import ImageComponent from '../../../components/ImageComponent';
+import CustomModal from '../../../components/CustomModal';
+import Loader from '../Loader/Loader';
+import CameraPermissionBlockedModal from '../../../components/Modal/CameraPermissionBlockedModal';
+import CameraPermissionRequestModal from '../../../components/Modal/CameraPermissionRequestModal';
+import { mobile } from '../../../utils/media';
+import useDeviceType from '../../../hooks/useDeviceType';
+
+const TakeProfilePhotoWrapper = styled.div`
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border: none;
+    cursor: default;
+    visibility: hidden;
+    background: var(--modal-backdrop);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ${(props) =>
+        props.isActive &&
+        css`
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+    `}
+    
+    ${mobile(css`
+        width: 100%;
+        height: 100%;
+    `)}
+
+    .cross_icon{
+        width: 18px;
+        height: 18px;
+    }
+`;
+
+const ModalContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    padding: ${props => props.isPadding ? '0 2rem' : 'unset'};
+    padding-bottom: 3rem;
+    visibility: hidden;
+    width: 100%;
+    display: none;
+    ${(props) =>
+        props.isActive &&
+        css`
+        visibility: visible;
+        opacity: 1;
+        display: block;
+    `}
+
+    ${mobile(css`
+        width: 100%;
+        height: 100%;
+    `)}
+
+    .video_play{
+        width: 100%;
+        height: 80vh;
+        ${mobile(css`
+            height: 100%;
+        `)}
+    }
+
+    .user_clicked_pic{
+        width: 100%;
+        height: 80vh;
+        object-fit: cover;
+        border-radius: 0;
+        ${mobile(css`
+            width: 100%;
+            height: 400px;
+        `)}
+    }
+`;
+
+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;
+
+    .camera_icon{
+        width: 24px;
+        height: 24px;
+    }
+`;
+
+const ModalHeaderContainer = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    ${mobile(css`
+        padding: 1rem;
+    `)}
+    .header_wrapper{
+        display: flex;
+    }
+`;
+
+const ModalHeaderText = 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: 90%;
+        display: flex;
+        align-items: center;
+    `)}
+`;
+
+const CorrectIconWrapper = styled.div`
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: var( --gray_color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: 50px;
+    bottom: -30px;
+
+    img{
+        width: 30px;
+        height: 30px;
+    }
+`;
+
+const VideoWrapper = styled.div`
+    display: ${props => !props.isActive ? 'block' : 'none'};
+    ${mobile(css`
+        height: 100%;
+    `)}
+`
+
+const LoaderVideoContainer = styled.div`
+    position: relative;
+    ${mobile(css`
+        height: 90%;
+    `)}
+`;
+
+const CameraSwitchContainer = styled.div`
+    display: flex;
+    align-items: center;
+
+    .camera_switch{
+        width: 20px;
+        height: 20px;
+        filter: ${props => props.theme ? ' invert(1) ': ''} ;
+    }
+`;
+
+
+const TakePhoto = (props) => {
+    const { isTakePhotoModal, onClose, updateProfileImageRequest, setIsTakePhotoModal, sendClickedImage, setConvertClickedImageToFileType, theme } = props;
+    const [getClickedPictureUrl, setGetClickedPictureUrl] = useState('');
+    const [takePhoto, setTakePhoto] = useState(true);
+    const [currentStream, setCurrentStream] = useState('');
+    const [loaderStatus, setLoaderStatus] = useState(true);
+    const [notAllowCameraPermission, setNotAllowCameraPermission] = useState('');
+    const [accessCamera, setAccessCamera] = useState(false);
+    const [cameraPermission, setCameraPermission] = useState(false);
+    const [isCameraSwitch, setIsCameraSwitch] = useState(false);
+    const [rotateCameraIcon, setRotateCameraIcon] = useState(true);
+    const isMobile = useDeviceType();
+
+
+    const closeStream = (stream) => {
+        const tracks = stream.getTracks();
+        tracks.forEach(function (track) {
+            track.stop();
+        });
+    }
+    
+    const cameraClickedForPicture = (stream) => {
+        closeStream(stream);
+        setRotateCameraIcon(false);
+    }
+    
+    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);
+        !cameraPermission && setAccessCamera(true);
+        const video = document.querySelector("video");
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const takePictureButton = document.querySelector("#take-picture");
+        navigator.mediaDevices
+            .getUserMedia({ video: isCameraSwitch ? { facingMode: newFacingMode } : true })
+            .then((stream) => {
+                setAccessCamera(false);
+                setLoaderStatus(false);
+                setCameraPermission(true);
+                video.srcObject = stream;
+                video.play();
+                setCurrentStream(stream);
+                takePictureButton.addEventListener('click', () => cameraClickedForPicture(stream));
+            })
+            .catch((err) => {
+                setAccessCamera(false);
+                setCameraPermission(false);
+                setNotAllowCameraPermission(true);
+                console.error(err);
+            });
+
+        const showCameraPicture = () =>  {
+            try {
+            // 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);
+            const file = dataURLtoFile(imageDataUrl, 'myimage.png');
+            setConvertClickedImageToFileType(file);
+            } catch (error) {
+                console.log('error', error);
+            }
+        }
+
+        takePictureButton.addEventListener("click", showCameraPicture);
+
+        setTimeout(() => {
+            setLoaderStatus(false);
+        }, 900);
+    
+        return () => {
+            takePictureButton.removeEventListener('click', showCameraPicture);
+        }
+    }, [takePhoto, isCameraSwitch]);
+
+
+    const closeModalCameraAccessHandler = () => {
+        currentStream && closeStream(currentStream);
+        onClose();
+    }
+
+    const allowCameraModalHandler = () => {
+        currentStream && closeStream(currentStream);
+        onClose();
+    }
+
+    return (
+        <>
+        <TakeProfilePhotoWrapper isActive={isTakePhotoModal} className="App">
+            {
+                <ModalContainer isActive={!notAllowCameraPermission && !accessCamera}>
+                    <ModalHeaderContainer>
+                        <div className='header_wrapper'>
+                            <ImageComponent
+                                id="takePhotoModal"
+                                onClick={closeModalCameraAccessHandler}
+                                src={CLOSE_ICON}
+                                className={`${props?.theme ? "darkicons" : "lighticons"} cross_icon`}
+                            />
+                            <ModalHeaderText>{'Take Photo'}</ModalHeaderText>
+                        </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`}
+                                />
+                                <ModalHeaderText>{'Retake'}</ModalHeaderText>
+                            </div>
+                        }
+                        {
+                            rotateCameraIcon  && isMobile && 
+                            <CameraSwitchContainer theme={theme}>
+                            <ImageComponent className="camera_switch" src={CAMERA_SWITCH} alt="camera_switch" />
+                            <ModalHeaderText onClick={() => setIsCameraSwitch(!isCameraSwitch)}>{'Rotate camera'}</ModalHeaderText>
+                            </CameraSwitchContainer>
+                        }
+                    </ModalHeaderContainer>
+                    <>
+                        {
+                            getClickedPictureUrl?.length > 0 &&
+                            <>
+                                <ClickedImageWrapper onClick={sendClickedImage}>
+                                    <ImageComponent className={'user_clicked_pic'} src={getClickedPictureUrl} alt="user_picture" />
+                                    <CorrectIconWrapper>
+                                        <ImageComponent className={`darkicons`} src={SENDICON} 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>
+                    </>
+                </ModalContainer>
+            }
+            {
+                cameraPermission && loaderStatus &&  
+                <Loader theme={theme} top={'75px'}  width={'100%'} height={'80%'} />
+            }
+        </TakeProfilePhotoWrapper>
+        <>
+            {
+                accessCamera &&
+                <CustomModal open={accessCamera} backDropClick={true} modelWidth={'60vw'}  onClose={allowCameraModalHandler}>
+                <CameraPermissionRequestModal onClick={allowCameraModalHandler} />
+                </CustomModal>
+            }
+            {
+                notAllowCameraPermission &&
+                <CustomModal open={notAllowCameraPermission} backDropClick={true} modelWidth={'60vw'}  onClose={allowCameraModalHandler}>
+                    <CameraPermissionBlockedModal onClick={allowCameraModalHandler} />
+                </CustomModal>
+            }
+        </>
+        </>
+    );
+}
+
+export default TakePhoto;