update-

package.json

 {
 	"name": "boxdialer",
-	"version": "4.8.10",
+	"version": "4.8.11",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/InnerCaller/index.jsx

@@ -4,9 +4,22 @@ import React from 'react';
 import Block from './style';
 import { useTranslator } from '@eo-locale/react';
 import { intervalToDuration } from 'date-fns';
+import { useState } from 'react';
+import { useEffect } from 'react';
+
+import MicIcon from '@mui/icons-material/Mic';
+import MicOffIcon from '@mui/icons-material/MicOff';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PauseIcon from '@mui/icons-material/Pause';
+
 const InnerCaller = ({ hidden, type, from, innerTimer }) => {
 	const boxDialer = window.BoxDialer;
 	const translator = useTranslator();
+
+	const [callEvents, setCallEvents] = useState({});
+	useEffect(() => {
+		boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
+	}, []);
 	const dataFormatter = (secund) => {
 		let ts = intervalToDuration({
 			start: 0,
@@ -21,7 +34,24 @@ const InnerCaller = ({ hidden, type, from, innerTimer }) => {
 			case 'connected':
 				return (
 					<>
-						<div className='button timer'>{dataFormatter(innerTimer)}</div>
+						<div className='button timer'>
+							<div>{dataFormatter(innerTimer)}</div>
+
+							<div onClick={() => boxDialer.holdButtonClick()}>
+								{callEvents.callHold ? (
+									<PlayArrowIcon style={{ color: '#fff' }} />
+								) : (
+									<PauseIcon style={{ color: '#fff' }} />
+								)}
+							</div>
+							<div onClick={() => boxDialer.muteButtonClick()}>
+								{callEvents.callMute ? (
+									<MicOffIcon style={{ color: '#fff' }} />
+								) : (
+									<MicIcon style={{ color: '#fff' }} />
+								)}
+							</div>
+						</div>
 						<button
 							className='button red nocopy'
 							onClick={() => boxDialer.hangupButtonClick()}>
@@ -75,7 +105,7 @@ const InnerCaller = ({ hidden, type, from, innerTimer }) => {
 					)}
 				</p>
 			</div>
-			<div className='bottom'>{selectModalType(type)}</div>
+			<div className='bottom'>{selectModalType('connected')}</div>
 		</Block>
 	);
 };

src/components/InnerCaller/style.js

@@ -46,7 +46,8 @@ const Block = styled.div`
 	.timer {
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		justify-content: space-between;
+		gap: 10px;
 		color: #fff;
 		font-weight: bold;
 		font-size: 18px;

src/components/ModalPhoneNumpad/index.jsx

@@ -28,6 +28,8 @@ const ModalPhoneNumpad = ({
 	const [numberSelectHistory, setNumberSelectHistory] = useState(0);
 	const [exNum, setExNum] = useState();
 	const translator = useTranslator();
+
+	
 	useEffect(() => {
 		let currentCalls = localStorage.getItem('callhistory')
 			? JSON.parse(localStorage.getItem('callhistory'))

src/components/ModalPhoneNumpad/style.js

@@ -201,8 +201,8 @@ NumberButton.CallButtonModal = styled.div`
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
 	padding: 3px 3px 15px 3px;
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
 	transition: 0.1s;
 	clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
 	${({ visiblevalue }) =>

src/root/index.jsx

@@ -203,8 +203,10 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 			/>
 
 			<InnerCaller
-				hidden={innerCallerModal.bool}
-				type={innerCallerModal.type}
+				// hidden={innerCallerModal.bool}
+				hidden={true}
+				// type={innerCallerModal.type}
+				type={'connectingIncoming'}
 				from={innerCallerModal.from}
 				innerTimer={innerTimer}
 			/>
@@ -214,3 +216,4 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 	);
 };
 export default Root;
+