|
|
@@ -6,6 +6,7 @@ import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt
|
|
|
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
|
|
import Avatar from '@mui/material/Avatar';
|
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
|
+import { useReactMediaRecorder } from "react-media-recorder";
|
|
|
import { useState } from "react";
|
|
|
import { useSelector } from "react-redux";
|
|
|
|
|
|
@@ -20,7 +21,6 @@ import { getIsOpen } from '../../../../../redux/control/selector'
|
|
|
import { playNotification } from "../../../../../helpers";
|
|
|
import { typingChat } from "../../../../../api-data";
|
|
|
|
|
|
-
|
|
|
const useStyles = makeStyles({
|
|
|
container: {
|
|
|
display: "flex",
|
|
|
@@ -84,7 +84,7 @@ const useStyles = makeStyles({
|
|
|
color: 'rgb(82, 82, 82)',
|
|
|
fontWeight: 600
|
|
|
}
|
|
|
- },
|
|
|
+ },
|
|
|
attachIcon: {
|
|
|
transform:'rotate(30deg)',
|
|
|
},
|
|
|
@@ -162,14 +162,39 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
|
|
|
const [file, setFile] = useState<any>(null)
|
|
|
const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
|
|
|
const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
|
|
|
+ const [isRecording, setIsRecording] = useState<boolean>(false)
|
|
|
const [type, setType] = useState<string>('')
|
|
|
+ const { status, startRecording, stopRecording, mediaBlobUrl,clearBlobUrl } = useReactMediaRecorder({ audio: true });
|
|
|
const sentMessage = async () => {
|
|
|
- setValue('')
|
|
|
setFile(null)
|
|
|
+ setIsRecording(false)
|
|
|
+ setValue('')
|
|
|
+ setType('')
|
|
|
isOpenMenu&&setIsOpenMenu(false)
|
|
|
isOpenEmoji && setIsOpenEmoji(false)
|
|
|
if (value) sentMessageById(companionId, value)
|
|
|
- if (file && file.type&&type) {
|
|
|
+ if (mediaBlobUrl && type) {
|
|
|
+ if (type === 'recording') {
|
|
|
+ const audio = new XMLHttpRequest();
|
|
|
+ audio.open('GET', mediaBlobUrl, true);
|
|
|
+ audio.responseType = 'blob';
|
|
|
+ audio.onload = () => {
|
|
|
+ if (audio.status === 200) {
|
|
|
+ const name = `audioMessage${new Date().getSeconds()}.mp3`
|
|
|
+ const blob = audio.response
|
|
|
+ const file = new File([blob], name, {
|
|
|
+ type: 'audio/mpeg'
|
|
|
+ })
|
|
|
+ const formData: any = new FormData()
|
|
|
+ formData.append("audio", file)
|
|
|
+ sentAudioMessageById(companionId, formData)
|
|
|
+ clearBlobUrl()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ audio.send();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (file && type) {
|
|
|
if (file.type.includes('image') && type === 'content') {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("image", file);
|
|
|
@@ -179,7 +204,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("audio", file);
|
|
|
sentAudioMessageById(companionId, formData)
|
|
|
- }
|
|
|
+ }
|
|
|
if (file.type.includes('video') && type === 'content') {
|
|
|
const formData: any = new FormData()
|
|
|
formData.append("video", file);
|
|
|
@@ -209,16 +234,27 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
|
|
|
const handleCloseEmoji = (e: any) => {
|
|
|
if (e.target.id === 'overlay'&&isOpenEmoji) setIsOpenEmoji(false)
|
|
|
}
|
|
|
+ const handleRecording = () => {
|
|
|
+ if (isRecording) {
|
|
|
+ stopRecording()
|
|
|
+ } else {
|
|
|
+ startRecording()
|
|
|
+ setType('recording')
|
|
|
+ setIsRecording(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
const handleClearMessage = () => {
|
|
|
- file && setFile(null)
|
|
|
+ file&&setFile(null)
|
|
|
value&&setValue('')
|
|
|
+ type&&setType('')
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >
|
|
|
<div onKeyPress={handleKeyPres} className={classes.inputContainer}>
|
|
|
<CloseIcon onClick={handleClearMessage} fontSize="small" className={classes.iconCancel}
|
|
|
- sx={{backgroundColor:'#ffffff',width:36,height:36,color:'#949393',display:file || value?'inline-block':'none'}}/>
|
|
|
+ sx={{backgroundColor: '#ffffff', width: 36, height: 36, color: '#949393',
|
|
|
+ display: file || value ? 'inline-block' : 'none'}} />
|
|
|
<SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
|
|
|
fontSize='medium' sx={{
|
|
|
color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
|
|
|
@@ -232,7 +268,8 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
|
|
|
</div>
|
|
|
<textarea disabled={file ? true : false} value={value} onBlur={handleBlurTextarea}
|
|
|
onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
|
|
|
- placeholder={file ? 'The File is ready to send' : 'Message'} rows={1}>
|
|
|
+ placeholder={file ? 'The File is ready to send' : status === 'idle' ? 'Message' :
|
|
|
+ `${status === 'recording'?'Recording':'Audio message Recorded'}`} rows={1}>
|
|
|
</textarea>
|
|
|
<AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
|
|
|
fontSize='medium' sx={{
|
|
|
@@ -245,22 +282,24 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
|
|
|
<FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Avatar onClick={handleScrollTo} className={classes.avatarArrow} sx={{
|
|
|
- backgroundColor: '#ffffff',
|
|
|
- width: 56, height: 56 ,color: '#6b6b6b',display:isArrow?'flex':'none'}}>
|
|
|
+ <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
|
|
|
+ sx={{backgroundColor: '#ffffff', width: 56, height: 56,
|
|
|
+ color: '#6b6b6b', display: isArrow ? 'flex' : 'none'}}>
|
|
|
<ArrowDownwardIcon fontSize="medium" />
|
|
|
</Avatar>
|
|
|
</div>
|
|
|
- {value || file ?
|
|
|
+ {value || file || mediaBlobUrl ?
|
|
|
<Avatar onClick={sentMessage} className={classes.avatar} sx={{
|
|
|
- backgroundColor: '#ffffff',
|
|
|
- width: 56, height: 56 ,color: 'rgb(41, 139, 231)'}}>
|
|
|
+ backgroundColor: '#ffffff', width: 56, height: 56, color: 'rgb(41, 139, 231)',
|
|
|
+ }}>
|
|
|
<SendIcon fontSize="medium" />
|
|
|
</Avatar> :
|
|
|
- <Avatar className={classes.avatar} sx={{
|
|
|
- backgroundColor: '#ffffff',
|
|
|
- width: 56, height: 56, color: '#6b6b6b'}}>
|
|
|
- <MicNoneIcon fontSize="medium" />
|
|
|
+ <Avatar onClick={handleRecording} className={!isRecording ? classes.avatar : undefined}
|
|
|
+ sx={{backgroundColor: isRecording ? 'rgb(41, 139, 231)' : '#ffffff',
|
|
|
+ color: isRecording ? '#ffffff' : '#6b6b6b', width: 56, height: 56}}
|
|
|
+ style={{animation: isRecording ? 'ripple 1.5s infinite ease-in-out' : 'none',
|
|
|
+ border: isRecording?'solid 5px #ffffff':'none'}}>
|
|
|
+ <MicNoneIcon fontSize="medium" />
|
|
|
</Avatar>}
|
|
|
</div>
|
|
|
)
|
