|
@@ -6,7 +6,9 @@ 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 CommentIcon from '@mui/icons-material/Comment';
|
|
|
import Avatar from '@mui/material/Avatar';
|
|
|
+import TextField from '@mui/material/TextField';
|
|
|
import Picker from 'emoji-picker-react';
|
|
|
|
|
|
import { useReactMediaRecorder } from "react-media-recorder";
|
|
@@ -23,7 +25,6 @@ import { getRightIsOpen } from '../../../../../redux/control/selector'
|
|
|
import { playNotification,prodBaseURL } from "../../../../../helpers";
|
|
|
import { typingChat } from "../../../../../api-data";
|
|
|
|
|
|
-
|
|
|
const useStyles = makeStyles({
|
|
|
container: {
|
|
|
width: '35vw',
|
|
@@ -69,7 +70,7 @@ const useStyles = makeStyles({
|
|
|
fontWeight: 600,
|
|
|
fontSize:20
|
|
|
}
|
|
|
- },
|
|
|
+ },
|
|
|
attachIcon: {
|
|
|
transform:'rotate(30deg)',
|
|
|
},
|
|
@@ -99,6 +100,16 @@ const useStyles = makeStyles({
|
|
|
zIndex: 10,
|
|
|
visibility: 'visible',
|
|
|
},
|
|
|
+ captionTextField: {
|
|
|
+ position: 'absolute',
|
|
|
+ bottom:'10vh',
|
|
|
+ zIndex: 10,
|
|
|
+ visibility: 'visible',
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
+ padding: 10,
|
|
|
+ borderRadius: 10,
|
|
|
+ width: '15vw',
|
|
|
+ },
|
|
|
iconCancel: {
|
|
|
position: 'absolute',
|
|
|
left: -72,
|
|
@@ -232,6 +243,8 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
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 [isRecording, setIsRecording] = useState<boolean>(false)
|
|
@@ -249,15 +262,17 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
isRecording && setIsRecording(false)
|
|
|
isFilming && setIsFilming(false)
|
|
|
value && setValue('')
|
|
|
+ caption&& setCaption('')
|
|
|
type && setType('')
|
|
|
mediaBlobUrl && clearBlobUrl()
|
|
|
_mediaBlobUrl && _clearBlobUrl()
|
|
|
isOpenMenu && setIsOpenMenu(false)
|
|
|
isOpenEmoji && setIsOpenEmoji(false)
|
|
|
+ isOpenCaption && setIsOpenCaption(false)
|
|
|
|
|
|
}
|
|
|
const sentMessage = async () => {
|
|
|
- if (value) sentMessageById(companionId, value)
|
|
|
+ if (value) sentMessageById(companionId, value,caption.trim())
|
|
|
if (mediaBlobUrl && type === 'recording') {
|
|
|
const audio = new XMLHttpRequest();
|
|
|
audio.open('GET', mediaBlobUrl, true);
|
|
@@ -270,7 +285,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
})
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("audio", file)
|
|
|
- sentAudioMessageById(companionId, formData)
|
|
|
+ sentAudioMessageById(companionId, formData,caption.trim())
|
|
|
clearBlobUrl()
|
|
|
}
|
|
|
}
|
|
@@ -288,7 +303,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
})
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("video", file)
|
|
|
- sentVideoMessageById(companionId, formData)
|
|
|
+ sentVideoMessageById(companionId, formData,caption.trim())
|
|
|
_clearBlobUrl()
|
|
|
}
|
|
|
}
|
|
@@ -298,34 +313,40 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
if (file.type.includes('image') && type === 'content') {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("image", file);
|
|
|
- await sentImgMessageById(companionId, formData)
|
|
|
+ await sentImgMessageById(companionId, formData, caption.trim())
|
|
|
}
|
|
|
if (file.type.includes('audio') && type === 'content') {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("audio", file);
|
|
|
- sentAudioMessageById(companionId, formData)
|
|
|
+ sentAudioMessageById(companionId, formData,caption.trim())
|
|
|
}
|
|
|
if (file.type.includes('video') && type === 'content') {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("video", file);
|
|
|
- sentVideoMessageById(companionId, formData)
|
|
|
+ sentVideoMessageById(companionId, formData,caption.trim())
|
|
|
}
|
|
|
if (file.type.includes('application') && type === 'application') {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("file", file);
|
|
|
- sentFileMessageById(companionId, formData)
|
|
|
+ sentFileMessageById(companionId, formData,caption.trim())
|
|
|
}
|
|
|
}
|
|
|
clearMessage()
|
|
|
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).toLocaleLowerCase())
|
|
|
+ else setCaption(e.target.value.toLocaleLowerCase())
|
|
|
+ }
|
|
|
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 handleOpenEmoji = () => !isOpenEmoji && setIsOpenEmoji(true)
|
|
|
+ const handleCloseEmoji = (e: any) => e.target.id === 'overlay' && isOpenEmoji && setIsOpenEmoji(false)
|
|
|
+ const handleOpenCaption = () => !isOpenCaption && setIsOpenCaption(true)
|
|
|
+ const handleCloseCaption = (e: any) => e.target.id === 'overlay' && isOpenCaption && setIsOpenCaption(false)
|
|
|
const handleRecording = () => {
|
|
|
if (isRecording) return stopRecording()
|
|
|
startRecording()
|
|
@@ -367,13 +388,13 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
<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 || status === 'stopped'
|
|
|
|| _status === 'stopped' ? '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 ? 'none' : 'block'}} />
|
|
|
+ style={{ display: status !== 'idle' || _status === 'stopped' || file || value || isFilming ? 'none' : 'block' }} />
|
|
|
<SendIcon onClick={sentMessage} className={classes.avatarRight}
|
|
|
sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
|
|
|
style={{display: value || file || status === 'stopped' || _status === 'stopped' ? 'block':'none' }}/>
|
|
@@ -383,6 +404,10 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
<SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
|
|
|
fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
|
|
|
pointerEvents: file || status !== 'idle' || _status !== 'idle' ? '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",
|
|
|
'&:hover': { color: 'rgb(41, 139, 231)'}}} />
|
|
|
<div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
|
|
|
style={{ display: isOpenEmoji ? 'block':'none'}}>
|
|
@@ -390,12 +415,20 @@ const SendMessage = ({isArrow }:ISendMessage) => {
|
|
|
<Picker onEmojiClick={onEmojiClick} />
|
|
|
</div>
|
|
|
</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>
|
|
|
+ </div>
|
|
|
<textarea disabled={file || status !== 'idle' || _status !== 'idle' ? 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}
|
|
|
+ `${status === 'stopped' || _status === 'stopped' ? 'Recorded' : 'Recording in progress...'}`} rows={1}
|
|
|
style={{color:value || file || status !== 'idle' || _status !== 'idle' ?'rgb(41, 139, 231)':'#6b6b6b'}}>
|
|
|
- </textarea>
|
|
|
+ </textarea>
|
|
|
<AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
|
|
|
fontSize='medium' sx={{color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
|
|
|
pointerEvents: value || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",'&:hover': { color: 'rgb(41, 139, 231)'}}} />
|