|
@@ -84,7 +84,7 @@ const useStyles = makeStyles({
|
|
|
borderTop: {
|
|
|
position: 'absolute',
|
|
|
left: 0,
|
|
|
- top: '-2vh',
|
|
|
+ top: -21,
|
|
|
width: '100%',
|
|
|
height: 1,
|
|
|
background:'#ffffff',
|
|
@@ -123,33 +123,30 @@ const useStyles = makeStyles({
|
|
|
width: 2,
|
|
|
backgroundColor: '#00aeff',
|
|
|
},
|
|
|
- filesMenu: {
|
|
|
- background: '#fdfdfd',
|
|
|
- position: 'absolute',
|
|
|
- width: '15vw',
|
|
|
- maxWidth: '100%',
|
|
|
- left: '61%',
|
|
|
- bottom:'10vh',
|
|
|
- zIndex: 10,
|
|
|
- visibility: 'visible',
|
|
|
- borderRadius: 10,
|
|
|
- padding: '4px 6px',
|
|
|
- },
|
|
|
- emoji: {
|
|
|
- position: 'absolute',
|
|
|
- bottom:'10vh',
|
|
|
- zIndex: 10,
|
|
|
- visibility: 'visible',
|
|
|
- },
|
|
|
+ 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',
|
|
|
+ bottom:'9vh',
|
|
|
+ zIndex: 10,
|
|
|
+ visibility: 'visible',
|
|
|
+ },
|
|
|
captionTextField: {
|
|
|
- position: 'absolute',
|
|
|
- bottom:'10vh',
|
|
|
zIndex: 10,
|
|
|
visibility: 'visible',
|
|
|
+ width: '35vw',
|
|
|
backgroundColor: '#ffffff',
|
|
|
- padding: 10,
|
|
|
- borderRadius: 10,
|
|
|
- width: '20vw',
|
|
|
+ borderRadius:4,
|
|
|
},
|
|
|
iconCancel: {
|
|
|
position: 'absolute',
|
|
@@ -310,11 +307,10 @@ interface ISendMessage{
|
|
|
silentMode: boolean,
|
|
|
isReply:TMessage | undefined,
|
|
|
setIsReply: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
|
|
|
- chatDivRef: any | null,
|
|
|
handleScrollToTheMessage: (_id:string) => void
|
|
|
}
|
|
|
|
|
|
-const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScrollToTheMessage }:ISendMessage) => {
|
|
|
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMessage }:ISendMessage) => {
|
|
|
const classes = useStyles();
|
|
|
const { companionId } = useSelector(getChat)
|
|
|
const rightIsOpen = useSelector(getRightIsOpen)
|
|
@@ -352,24 +348,14 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
|
|
|
isOpenMenu && setIsOpenMenu(false)
|
|
|
isOpenEmoji && setIsOpenEmoji(false)
|
|
|
isOpenCaption && setIsOpenCaption(false)
|
|
|
- isReply&&setIsReply(undefined)
|
|
|
}
|
|
|
- const defaultState = () => {
|
|
|
- clearBlobUrl()
|
|
|
- _clearBlobUrl()
|
|
|
- setIsRecording(false)
|
|
|
- setIsFilming(false)
|
|
|
- setFile(false)
|
|
|
- setValue('')
|
|
|
- setCaption('')
|
|
|
- setType('')
|
|
|
- setIsOpenMenu(false)
|
|
|
- setIsOpenEmoji(false)
|
|
|
- setIsOpenCaption(false)
|
|
|
- }
|
|
|
+
|
|
|
const sentMessage = async () => {
|
|
|
if (value && !isReply) sentMessageById(companionId, value, caption.trim())
|
|
|
- if (value && isReply) sentMessageReplyById(isReply._id, value, caption.trim())
|
|
|
+ if (value && isReply) {
|
|
|
+ sentMessageReplyById(isReply._id, value, caption.trim())
|
|
|
+ isReply&&setIsReply(undefined)
|
|
|
+ }
|
|
|
if (mediaBlobUrl && type === 'recording') {
|
|
|
const audio = new XMLHttpRequest();
|
|
|
audio.open('GET', mediaBlobUrl, true);
|
|
@@ -440,10 +426,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
|
|
|
!silentMode&&playNotification(`${prodBaseURL}/send.mp3`)
|
|
|
}
|
|
|
const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
|
|
|
- const handleTextareaCaption = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
|
- if (caption.length >= 25) setCaption(e.target.value.slice(0,-1))
|
|
|
- else setCaption(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)
|
|
@@ -483,9 +466,23 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (isReply) defaultState()
|
|
|
- },[isReply])
|
|
|
-
|
|
|
+ if (isReply) {
|
|
|
+ stopRecording()
|
|
|
+ _stopRecording()
|
|
|
+ clearBlobUrl()
|
|
|
+ _clearBlobUrl()
|
|
|
+ setIsRecording(false)
|
|
|
+ setIsFilming(false)
|
|
|
+ setFile(false)
|
|
|
+ setValue('')
|
|
|
+ setCaption('')
|
|
|
+ setType('')
|
|
|
+ setIsOpenMenu(false)
|
|
|
+ setIsOpenEmoji(false)
|
|
|
+ setIsOpenCaption(false)
|
|
|
+ }
|
|
|
+ }, [isReply])
|
|
|
+ console.log(file,'file', status ,'status', _status, '_status')
|
|
|
return (
|
|
|
<div className={value || file || status === 'stopped' || _status === 'stopped' ?classes.containerActive:classes.container}>
|
|
|
{isArrow && <div className={classes.borderTop}></div>}
|
|
@@ -530,8 +527,8 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
|
|
|
</div>
|
|
|
</>}
|
|
|
<CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
|
|
|
- sx={{width: 56, height: 56, display: file || value || status === 'stopped'
|
|
|
- || _status === 'stopped' ? 'inline-block' : 'none'}} />
|
|
|
+ sx={{width: 56, height: 56, display: file || value || (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 !== 'idle' || _status === 'stopped' || file || value || isFilming || isReply ? 'none' : 'block' }} />
|
|
@@ -543,11 +540,11 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
|
|
|
style={{display: !value && !file && status !== 'stopped' && _status === 'idle'&&!isRecording && !isReply ? 'block' : 'none'}}/>
|
|
|
<SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
|
|
|
fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
|
|
|
- pointerEvents: file || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",
|
|
|
+ pointerEvents: file || type === 'recording' || type === 'filming' ? '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'? 'auto' : "none",
|
|
|
+ pointerEvents: value || file || type === 'recording' || type === 'filming'? 'auto' : "none",
|
|
|
'&:hover': { color: 'rgb(41, 139, 231)'}}} />
|
|
|
<div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
|
|
|
style={{ display: isOpenEmoji ? 'block':'none'}}>
|
|
@@ -557,16 +554,15 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,chatDivRef,handleScr
|
|
|
</div>
|
|
|
<div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
|
|
|
style={{ display: isOpenCaption ? 'block' : 'none' }}>
|
|
|
- <div className={classes.captionTextField} style={{left: rightIsOpen?'32.5vw':'45vw'}}>
|
|
|
- <TextField onChange={handleTextareaCaption} label="Caption"
|
|
|
- value={caption} fullWidth variant='outlined' id="caption" name='caption'/>
|
|
|
- </div>
|
|
|
+ <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
|
|
|
+ style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply?'78.5vh':'85vh' }}
|
|
|
+ placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'/>
|
|
|
</div>
|
|
|
- <textarea disabled={file || status !== 'idle' || _status !== 'idle' ? true : false} value={value} onBlur={handleBlurTextarea}
|
|
|
+ <textarea disabled={file || type === 'recording' || type === 'filming' ? true : false} value={value} onBlur={handleBlurTextarea}
|
|
|
onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
|
|
|
- placeholder={file ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? 'Message ' :
|
|
|
- `${status === 'stopped' || _status === 'stopped' ? 'Recorded' : 'Recording in progress...'}`} rows={1}
|
|
|
- style={{color:value || file || status !== 'idle' || _status !== 'idle' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
|
|
|
+ placeholder={file ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? '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',
|