123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644 |
- import { makeStyles } from "@material-ui/core/styles";
- import SendIcon from '@mui/icons-material/Send';
- import MicNoneIcon from '@mui/icons-material/MicNone';
- import VideocamIcon from '@mui/icons-material/Videocam';
- import PauseIcon from '@mui/icons-material/Pause';
- import AttachFileIcon from '@mui/icons-material/AttachFile';
- import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
- import CloseIcon from '@mui/icons-material/Close';
- import PhotoCameraFrontIcon from '@mui/icons-material/PhotoCameraFront';
- import CommentIcon from '@mui/icons-material/Comment';
- import Avatar from '@mui/material/Avatar';
- import Webcam from "react-webcam";
- import CameraIcon from '@mui/icons-material/Camera';
- import TextField from '@material-ui/core/TextField';
- import Picker from 'emoji-picker-react';
- import InputAdornment from '@mui/material/InputAdornment';
- import { useReactMediaRecorder } from "react-media-recorder";
- import { useState,useEffect,useCallback } from "react";
- import { useSelector } from "react-redux";
- import FilesMenu from "./FilesMenu";
- import ReplyBar from './ReplyBar'
- import ForwardBar from "./ForwardBar";
- import EditBar from "./EditBar";
- import {
- sentMessageById, sentImgMessageById, sentAudioMessageById,
- sentVideoMessageById,sentFileMessageById,sentMessageReplyById,sentMessageForwardById
- } from '../../../../../api-data'
- import { getChat } from '../../../../../redux/chat/selector'
- import { getRightIsOpen } from '../../../../../redux/control/selector'
- import { playNotification,prodBaseURL } from "../../../../../helpers";
- import { typingChat } from "../../../../../api-data";
- import { TMessage } from "../../../../../typescript/redux/messages/types";
- const useStyles = makeStyles({
- container: {
- width: '35vw',
- height:'6vh',
- position: 'fixed',
- bottom: '2vh',
- borderRadius: 8,
- padding: 10,
- display: 'flex',
- flexWrap: 'nowrap',
- alignContent: 'start',
- alignItems: 'start',
- color: '#6b6b6b',
- border:'solid 2px #ffffff',
- backgroundColor: '#ffffff',
- },
- containerActive: {
- width: '35vw',
- height:'6vh',
- position: 'fixed',
- bottom: '2vh',
- borderRadius: 8,
- padding: 10,
- display: 'flex',
- flexWrap: 'nowrap',
- alignContent: 'start',
- alignItems: 'start',
- border:'solid 2px rgb(41, 139, 231)',
- backgroundColor: '#ffffff',
- },
- textarea: {
- width: '100%',
- height: '100%',
- outline: 'none',
- border:'none',
- padding: '0px 10px',
- marginLeft: 8,
- marginRight: 8,
- overflowY:'auto',
- resize: 'none',
- '&::placeholder': {
- color: 'inherit',
- fontWeight: 600,
- fontSize:20
- },
- },
- attachIcon: {
- transform:'rotate(30deg)',
- },
- borderTop: {
- position: 'absolute',
- left: 0,
- top: -21,
- width: '100%',
- height: 1,
- background:'#ffffff',
- },
- filesMenu: {
- background: '#fdfdfd',
- position: 'absolute',
- width: '15vw',
- maxWidth: '100%',
- left: '61%',
- bottom:'9vh',
- zIndex: 10,
- visibility: 'visible',
- borderRadius: 10,
- padding: '4px 6px',
- },
- emoji: {
- position: 'absolute',
- zIndex: 10,
- visibility: 'visible',
- },
- captionTextField: {
- zIndex: 10,
- visibility: 'visible',
- width: '35vw',
- backgroundColor: '#ffffff',
- borderRadius: 4,
- height: '6vh',
- overflowY: 'auto',
- },
- iconCancel: {
- position: 'absolute',
- left: -72,
- bottom:-1,
- display:'flex',
- backgroundColor: '#ffffff',
- color: 'rgb(243, 69, 69)',
- border:'solid 4px rgb(243, 69, 69)',
- borderRadius: '50%',
- '&:hover': {
- backgroundColor: 'rgb(243, 69, 69)',
- color: '#ffffff',
- }
- },
- avatarCamera: {
- position: 'absolute',
- left: -72,
- bottom:-1,
- display: 'flex',
- borderRadius: '50%',
- zIndex: 10,
- border: 'solid 14px #ffffff',
- '&:hover': {
- backgroundColor: 'rgb(41, 139, 231)',
- border:'solid 14px rgb(41, 139, 231)',
- color: '#ffffff',
- }
- },
- avatarRight: {
- position: 'absolute',
- right: -72,
- bottom:-1,
- display: 'flex',
- borderRadius: '50%',
- zIndex: 10,
- border: 'solid 14px #ffffff',
- '&:hover': {
- backgroundColor: 'rgb(41, 139, 231)',
- border:'solid 14px rgb(41, 139, 231)',
- color: '#ffffff'
- }
- },
- pauseLeft: {
- position: 'absolute',
- left: -72,
- bottom:-1,
- zIndex: 10,
- },
- pauseRight: {
- position: 'absolute',
- right: -72,
- bottom:-1,
- zIndex: 10,
- },
- avatarPause: {
- backgroundColor: '#ffffff',
- cursor: 'pointer',
- animation: `$shake 1s`,
- animationIterationCount:'infinite',
- '&:hover': {
- backgroundColor: 'rgb(41, 139, 231)',
- color: '#ffffff',
- }
- },
- overlay: {
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100vw',
- height: '100vh',
- zIndex:100
- },
- ringContainerLeft: {
- position: 'absolute',
- left: -25,
- top: -25,
- zIndex: 10,
- },
- ringContainerRight: {
- position: 'absolute',
- right: -25,
- top: -25,
- zIndex: 10,
- },
- circle: {
- width: 15,
- height: 15,
- backgroundColor: 'rgb(255, 4, 4)',
- borderRadius: '50%',
- position: 'relative'
- },
- ringRing: {
- border: '3px solid rgb(255, 4, 4)',
- borderRadius: '50%',
- height: 25,
- width: 25,
- position: 'absolute',
- right: -5,
- top: -5,
- animation: `$pulsate 1s ease-out`,
- animationIterationCount: 'infinite',
- opacity: 0
- },
- '@keyframes pulsate': {
- '0%': {transform: 'scale(0.1, 0.1)', opacity: 0},
- '50%': { opacity: 1},
- '100%': {transform: 'scale(1.2, 1.2)', opacity: 0},
- },
- '@keyframes shake': {
- '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},
- '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},
- '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},
- '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},
- '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},
- '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},
- '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},
- '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},
- '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},
- '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},
- '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},
- },
- overlayCamera: {
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100vw',
- height: '100vh',
- zIndex: 100,
- backgroundColor: 'rgba(104, 105, 104, 0.6)',
- overflowY: 'hidden',
- display: 'flex',
- justifyContent: 'center',
- alignContent: 'center',
- alignItems: 'center',
- flexDirection:'column'
- },
- capturedPicture: {
- borderRadius: 10,
- border:'solid 2px rgb(62, 149, 231)'
- },
- capturePhoto: {
- color: '#ffffff',
- cursor: 'pointer',
- '&:hover': {
- color: '#48ff00',
- animation: `$rotating 2s linear infinite`
- },
- },
- '@keyframes rotating': {
- 'from': { transform: 'rotate(0deg)'},
- 'to': { transform: 'rotate(360deg)'},
- },
- });
- interface ISendMessage{
- isArrow: boolean,
- silentMode: boolean,
- isReply:TMessage | undefined,
- setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
- isForward: TMessage | undefined,
- setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
- isEdit: TMessage | undefined,
- setIsEdit: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
- modalForward: boolean,
- handleScrollToTheMessage: (_id: string) => void,
- }
- const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,isEdit,setIsEdit,modalForward,handleScrollToTheMessage }:ISendMessage) => {
- const classes = useStyles();
- const { companionId } = useSelector(getChat)
- const rightIsOpen = useSelector(getRightIsOpen)
- const [value, setValue] = useState<string>('')
- const [file, setFile] = useState<any>(false)
- const [caption, setCaption] = useState<string>('')
- const [isOpenCaption, setIsOpenCaption] = useState<boolean>(false)
- const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
- const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
- const [isOpenCaptionEmoji, setIsOpenCaptionEmoji] = useState<boolean>(false)
- const [isRecording, setIsRecording] = useState<boolean>(false)
- const [isFilming, setIsFilming] = useState<boolean>(false)
- const [isOpenCamera, setIsOpenCamera] = useState<boolean>(false)
- const [type, setType] = useState<string>('')
- const [status, setStatus] = useState<string | null>(null)
- const [_status, _setStatus] = useState<string | null>(null)
- const { startRecording, stopRecording, mediaBlobUrl, clearBlobUrl, } = useReactMediaRecorder({ audio: true,blobPropertyBag:{type: "audio/mp3"}});
- const { startRecording: _startRecording, stopRecording: _stopRecording,
- mediaBlobUrl: _mediaBlobUrl, clearBlobUrl: _clearBlobUrl } = useReactMediaRecorder({ video: true, blobPropertyBag: { type: "video/mp4" } });
- const videoConstraints = {
- width: 1280,
- height: 720,
- facingMode: "user"
- };
- const onEmojiClick = (_e: any, emojiObject: any, flag: string) => {
- if (flag === 'input') {
- setValue(prevValue => prevValue + emojiObject.emoji)
- setIsOpenEmoji(false)
- }
- if (flag ==='caption') {
- setCaption(prevValue => prevValue + emojiObject.emoji)
- setIsOpenCaptionEmoji(false)
- }
- };
- const clearMessage = () => {
- setFile(false)
- setIsRecording(false)
- setIsFilming(false)
- setValue('')
- setCaption('')
- setType('')
- clearBlobUrl()
- _clearBlobUrl()
- setIsOpenMenu(false)
- setIsOpenEmoji(false)
- setIsOpenCaption(false)
- setIsOpenCaptionEmoji(false)
- setStatus(null)
- _setStatus(null)
- }
- const sentMessage = async () => {
- if (value && !isReply && !isForward && !isEdit) sentMessageById(companionId, value, caption.trim())
- if (value && isReply && !isForward && !isEdit) {
- sentMessageReplyById(isReply._id, value, caption.trim())
- setIsReply(undefined)
- }
- if (value&&isForward && !isEdit && !isReply) {
- sentMessageForwardById(isForward._id,isForward.companionIdForwardToAndFrom,value,caption.trim())
- setIsForward(undefined)
- }
- if (value&&isEdit && !isForward && !isReply) {
- //sent edited messages
- setIsEdit(undefined)
- }
- if (mediaBlobUrl && type === 'recording') {
- const audio = new XMLHttpRequest();
- audio.open('GET', mediaBlobUrl, true);
- audio.responseType = 'blob';
- audio.onload = () => {
- if (audio.status === 200) {
- const blob = audio.response
- const file = new File([blob], 'audio.mp3', {
- type: 'audio/mpeg'
- })
- const formData: any = new FormData()
- formData.append("audio", file)
- sentAudioMessageById(companionId, formData,caption.trim())
- clearBlobUrl()
- }
- }
- audio.send();
- }
- if (_mediaBlobUrl && type === 'filming') {
- const video = new XMLHttpRequest();
- video.open('GET', _mediaBlobUrl, true);
- video.responseType = 'blob';
- video.onload = () => {
- if (video.status === 200) {
- const blob = video.response
- const file = new File([blob], 'video.mp4',{
- type: "video/mp4"
- })
- const formData: any = new FormData()
- formData.append("video", file)
- sentVideoMessageById(companionId, formData,caption.trim())
- _clearBlobUrl()
- }
- }
- video.send();
- }
- if (file && type && type !== 'base64') {
- if (file.type.includes('image') && type === 'content') {
- const formData: any = new FormData()
- formData.append("image", file);
- sentImgMessageById(companionId, formData, caption.trim())
- }
- if (file.type.includes('audio') && type === 'content') {
- const formData: any = new FormData()
- formData.append("audio", file);
- sentAudioMessageById(companionId, formData,caption.trim())
- }
- if (file.type.includes('video') && type === 'content') {
- const formData: any = new FormData()
- formData.append("video", file);
- sentVideoMessageById(companionId, formData,caption.trim())
- }
- if (file.type.includes('application') && type === 'application') {
- const formData: any = new FormData()
- formData.append("file", file);
- sentFileMessageById(companionId, formData,caption.trim())
- }
- }
- if (typeof file === 'string' && type === 'base64') {
- fetch(file).then(res => res.blob()).then(blob => {
- const imgFile = new File([blob], "selfie", { type: "image/jpeg" })
- const formData: any = new FormData()
- formData.append("image", imgFile);
- sentImgMessageById(companionId, formData, caption.trim())
- })
- }
- clearMessage()
- !silentMode&&playNotification(`${prodBaseURL}/send.mp3`)
- }
- const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
- const handleTextareaCaption = (e: React.ChangeEvent<HTMLTextAreaElement>) => setCaption(e.target.value)
- const handleFocusTextarea = async () => await typingChat(companionId,true)
- const handleBlurTextarea = async () => await typingChat(companionId,false)
- const handleOpenFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
- const handleCloseFileMenu = (e:any) => e.target.id === 'overlay'&&isOpenMenu&&setIsOpenMenu(false)
- const handleOpenEmoji = () => !isOpenEmoji && setIsOpenEmoji(true)
- const handleCloseEmoji = (e: any) => e.target.id === 'overlay' && isOpenEmoji && setIsOpenEmoji(false)
- const handleOpenCaptionEmoji = () => !isOpenEmoji && setIsOpenCaptionEmoji(true)
- const handleOpenCaption = () => !isOpenCaption && setIsOpenCaption(true)
- const handleCloseCaption = (e: any) => {
- if (e.target.id === 'overlay') {
- if(isOpenCaptionEmoji) return setIsOpenCaptionEmoji(false)
- isOpenCaption && setIsOpenCaption(false)
- }
- }
- const handleRecording = () => {
- if (isRecording) {
- setStatus('stopped')
- stopRecording()
- return
- }
- startRecording()
- setStatus('recording')
- setType('recording')
- setIsRecording(true)
- }
- const handleFilming = () => {
- if (isFilming) {
- _setStatus('stopped')
- _stopRecording()
- return
- }
- _startRecording()
- _setStatus('recording')
- setType('filming')
- setIsFilming(true)
- }
- const handleOpenCamera = () => setIsOpenCamera(true)
- const handleCloseCamera = (e: any) => {
- const id = e.target.id
- if (id === 'overlay') setIsOpenCamera(false)
- }
-
- const handleCaptureAvatar = (getScreenshot:() => string| null) => {
- setFile(getScreenshot())
- setType('base64')
- !silentMode&&playNotification(`${prodBaseURL}/cameraCapture.mp3`)
- }
- const handleCloseReply = () => {
- setIsReply(undefined)
- clearMessage()
- }
- const handleCloseForward= () => {
- setIsForward(undefined)
- clearMessage()
- }
-
- const handleCloseEdit = () => {
- setIsEdit(undefined)
- clearMessage()
- }
- const defaultState = useCallback(() => {
- stopRecording()
- _stopRecording()
- clearBlobUrl()
- _clearBlobUrl()
- setStatus(null)
- _setStatus(null)
- setIsRecording(false)
- setIsFilming(false)
- setFile(false)
- setValue('')
- setCaption('')
- setType('')
- setIsOpenMenu(false)
- setIsOpenEmoji(false)
- setIsOpenCaption(false)
- setIsOpenCaptionEmoji(false)
- },[_clearBlobUrl,clearBlobUrl,_stopRecording,stopRecording])
- useEffect(() => {
- defaultState()
- }, [isReply, isForward,isEdit, companionId])
-
- useEffect(() => {
- setIsReply(undefined)
- setIsEdit(undefined)
- }, [companionId, setIsReply,setIsEdit])
- useEffect(() => {
- if (isEdit) {
- isEdit.type ==='text'&&setValue(isEdit.message?isEdit.message:'')
- setCaption(isEdit.caption?isEdit.caption:'')
- }
- }, [isEdit, companionId])
-
- useEffect(() => {
- const companionIdForwardToAndFrom = isForward?.companionIdForwardToAndFrom
- if(companionIdForwardToAndFrom&&companionIdForwardToAndFrom !== companionId) setIsForward(undefined)
- },[companionId])
-
- return (
- <div className={(isEdit&&value&&(isEdit.message !== value)) || (isEdit&&caption&&(isEdit.caption !== caption)) || (value&&!isEdit) || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
- {isArrow && <div className={classes.borderTop}></div>}
- {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
- handleScrollToTheMessage={handleScrollToTheMessage} />}
- {isEdit && <EditBar isEdit={isEdit} handleCloseEdit={handleCloseEdit}
- handleScrollToTheMessage={handleScrollToTheMessage} />}
- {isForward && !modalForward && <ForwardBar companionId={companionId}
- isForward={isForward} handleCloseForward={handleCloseForward}
- handleScrollToTheMessage={handleScrollToTheMessage} setIsForward={setIsForward}/>}
- {isFilming && _status !== 'stopped' &&
- <>
- <div className={classes.pauseLeft}>
- <Avatar onClick={handleFilming } className={classes.avatarPause}
- sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
- <PauseIcon fontSize="large"/>
- </Avatar>
- </div>
- <div className={classes.ringContainerLeft}>
- <div className={classes.ringRing}></div>
- <div className={classes.circle}></div>
- </div>
- </>}
- {isRecording && status !== 'stopped' &&
- <>
- <div className={classes.pauseRight}>
- <Avatar onClick={handleRecording} className={classes.avatarPause}
- sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
- <PauseIcon fontSize="large"/>
- </Avatar>
- </div>
- <div className={classes.ringContainerRight}>
- <div className={classes.ringRing}></div>
- <div className={classes.circle}></div>
- </div>
- </>}
- <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
- sx={{width: 56, height: 56, display: file || (value&&!isReply&&!isForward&&!isEdit) || (status === 'stopped'&&type)
- || (_status === 'stopped'&&type) ? 'inline-block' : 'none'}} />
- <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
- sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
- style={{ display: status !== null || _status === 'stopped' || file || value || isFilming || isReply || isForward || isEdit? 'none' : 'block' }} />
- <SendIcon onClick={sentMessage} className={classes.avatarRight}
- sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
- style={{display: (isEdit&&value&&(isEdit.message !== value)) || (isEdit&&caption&&(isEdit.caption !== caption)) || (value&&!isEdit) || file || status === 'stopped' || _status === 'stopped'? 'block':'none' }}/>
- <MicNoneIcon onClick={handleRecording} className={classes.avatarRight}
- sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
- style={{display: !value && !file && status !== 'stopped' && _status === null&&!isRecording && !isReply && !isForward && !isEdit ? 'block' : 'none'}}/>
- <SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
- fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
- pointerEvents: file || status || _status || (isEdit&&isEdit.type !== 'text') ? 'none' : "auto",
- '&:hover': { color: 'rgb(41, 139, 231)' }, marginRight:1}}/>
- <CommentIcon onClick={handleOpenCaption}
- fontSize='medium' sx={{color: isOpenCaption || caption ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
- pointerEvents: value || file || status === 'stopped' || _status === 'stopped' || (isEdit&&isEdit.type !== 'text')? 'auto' : "none",
- '&:hover': { color: 'rgb(41, 139, 231)'}}} />
- <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
- style={{ display: isOpenEmoji ? 'block':'none'}}>
- <div className={classes.emoji} style={{left: rightIsOpen?'32.5vw':'45vw',bottom:'9vh'}}>
- <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'input')} />
- </div>
- </div>
- <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
- style={{ display: isOpenCaption ? 'block' : 'none' }}>
- {isOpenCaptionEmoji && <div className={classes.emoji}
- style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:isReply || isForward || isEdit?'23vh':'16vh' }}>
- <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'caption')} />
- </div>}
- <TextField multiline className={classes.captionTextField} onChange={handleTextareaCaption}
- style={{left: rightIsOpen ? '32.5vw' : '45vw', top: isReply || isForward || isEdit?'78.5vh':'85vh' }}
- placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'
- InputProps={{
- startAdornment: (<InputAdornment position="start" sx={{marginRight:4}}>
- <SentimentSatisfiedAltIcon onClick={handleOpenCaptionEmoji}
- sx={{color: isOpenCaptionEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
- '&:hover': { color: 'rgb(41, 139, 231)' },position:'fixed',top: isReply || isForward || isEdit?'80vh':'86.5vh'}} />
- </InputAdornment>
- ),}}/>
- </div>
- <textarea disabled={file || type === 'recording' || type === 'filming' || (isEdit&&isEdit.type !== 'text')? true : false} value={value} onBlur={handleBlurTextarea}
- onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
- placeholder={file ? 'The File is ready to send' : status === null && _status === null ? 'Message' :
- `${status === 'stopped' || _status === 'stopped' ? type === 'recording' || type === 'filming'?'Recorded':'Message':'Recording in progress...'}`} rows={1}
- style={{color:value || file || type === 'recording' || type === 'filming' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
- </textarea>
- <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='medium'
- sx={{color: isOpenCamera || type === 'base64' ? 'rgb(62, 149, 231)' : '#6b6b6b', marginRight: 1, cursor: 'pointer',
- pointerEvents: type === 'content' || type === 'application' || value || status !== null
- || _status !== null || isReply || isForward || isEdit ? 'none' : "auto",
- '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
- <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
- fontSize='medium' sx={{color: isOpenMenu || type === 'content' || type === 'application' ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
- pointerEvents: type === 'base64' || value || status !== null || _status !== null || isReply || isForward || isEdit? 'none' : "auto", '&:hover':
- { color: 'rgb(41, 139, 231)'}}}/>
- <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
- style={{ display: isOpenMenu ? 'block':'none'}}>
- <div className={classes.filesMenu} style={{left: rightIsOpen?'52.5vw':'65vw'}}>
- <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType} type={type}/>
- </div>
- </div>
- {isOpenCamera &&
- <div onClick={handleCloseCamera} id='overlay' className={classes.overlayCamera}>
- <Webcam audio={false} screenshotFormat="image/jpeg" width='40%'
- videoConstraints={videoConstraints} style={{marginBottom:30}}>
- {({ getScreenshot }) => <>
- <CameraIcon onClick={() => handleCaptureAvatar(getScreenshot)}
- className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
- <img className={classes.capturedPicture} width='300' height='174'
- style={{visibility:file?'visible':'hidden'}} src={file} alt='chosen pic'></img>
- </>}
- </Webcam>
- </div>}
- </div>
- )
- }
- export default SendMessage
|