|
@@ -15,6 +15,7 @@ import TextField from '@mui/material/TextField';
|
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
|
import Picker from 'emoji-picker-react';
|
|
|
+import InputAdornment from '@mui/material/InputAdornment';
|
|
|
|
|
|
import { useReactMediaRecorder } from "react-media-recorder";
|
|
|
import { useState,useEffect } from "react";
|
|
@@ -137,7 +138,6 @@ const useStyles = makeStyles({
|
|
|
},
|
|
|
emoji: {
|
|
|
position: 'absolute',
|
|
|
- bottom:'9vh',
|
|
|
zIndex: 10,
|
|
|
visibility: 'visible',
|
|
|
},
|
|
@@ -320,6 +320,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
|
|
|
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)
|
|
@@ -332,9 +333,15 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
|
|
|
height: 720,
|
|
|
facingMode: "user"
|
|
|
};
|
|
|
- const onEmojiClick = (_e:any, emojiObject:any) => {
|
|
|
+ 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 = () => {
|
|
|
file && setFile(false)
|
|
@@ -348,6 +355,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
|
|
|
isOpenMenu && setIsOpenMenu(false)
|
|
|
isOpenEmoji && setIsOpenEmoji(false)
|
|
|
isOpenCaption && setIsOpenCaption(false)
|
|
|
+ isOpenCaptionEmoji && setIsOpenCaptionEmoji(false)
|
|
|
}
|
|
|
|
|
|
const sentMessage = async () => {
|
|
@@ -433,8 +441,14 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
|
|
|
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) => e.target.id === 'overlay' && isOpenCaption && setIsOpenCaption(false)
|
|
|
+ const handleCloseCaption = (e: any) => {
|
|
|
+ if (e.target.id === 'overlay') {
|
|
|
+ if(isOpenCaptionEmoji) return setIsOpenCaptionEmoji(false)
|
|
|
+ isOpenCaption && setIsOpenCaption(false)
|
|
|
+ }
|
|
|
+ }
|
|
|
const handleRecording = () => {
|
|
|
if (isRecording) return stopRecording()
|
|
|
startRecording()
|
|
@@ -480,6 +494,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
|
|
|
setIsOpenMenu(false)
|
|
|
setIsOpenEmoji(false)
|
|
|
setIsOpenCaption(false)
|
|
|
+ setIsOpenCaptionEmoji(false)
|
|
|
}
|
|
|
}, [isReply])
|
|
|
console.log(file,'file', status ,'status', _status, '_status')
|
|
@@ -548,15 +563,26 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
|
|
|
'&: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'}}>
|
|
|
- <Picker onEmojiClick={onEmojiClick} />
|
|
|
+ <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:'23vh' }}>
|
|
|
+ <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'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'/>
|
|
|
+ placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'
|
|
|
+ InputProps={{
|
|
|
+ startAdornment: (<InputAdornment position="start">
|
|
|
+ <SentimentSatisfiedAltIcon onClick={handleOpenCaptionEmoji}
|
|
|
+ sx={{color: isOpenCaptionEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
|
|
|
+ '&:hover': { color: 'rgb(41, 139, 231)' }}} />
|
|
|
+ </InputAdornment>
|
|
|
+ ),}}/>
|
|
|
</div>
|
|
|
<textarea disabled={file || type === 'recording' || type === 'filming' ? true : false} value={value} onBlur={handleBlurTextarea}
|
|
|
onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
|