update-

package.json

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

src/lib/boxDIaler.js

@@ -86,7 +86,9 @@ export class BoxDialer {
 				// this.closeBxCall();
 
 				// window.innerCallBegin(true);
-
+				this.onSipStateChange.innerCallerModal({
+					bool: true,
+				});
 				this.setGuiPhoneState({
 					funcName: 'modalState',
 					stateCode: 'connectingOutgoing',
@@ -107,7 +109,9 @@ export class BoxDialer {
 							zIndex: '99999999999999999',
 						},
 					});
-
+					this.onSipStateChange.innerCallerModal({
+						bool: false,
+					});
 					window.navigator.mediaDevices
 						.getUserMedia({ audio: true })
 						.then(function (stream) {
@@ -124,6 +128,9 @@ export class BoxDialer {
 			ended: (e) => {
 				console.log('%c ended', 'font-size: 22px; color: green;');
 				this.closeBxCall();
+				this.onSipStateChange.innerCallerModal({
+					bool: false,
+				});
 				this.setGuiPhoneState({
 					funcName: 'modalState',
 					funcParam: {
@@ -309,6 +316,10 @@ export class BoxDialer {
 							callType: 'connected',
 						},
 					});
+					// innerCallerModal;
+					this.onSipStateChange.innerCallerModal({
+						bool: true,
+					});
 					if (this.callSession.direction === 'incoming') {
 						this.showNotification(() => {
 							this.answerButtonClick();
@@ -380,6 +391,9 @@ export class BoxDialer {
 							);
 							// the call has ended
 							console.log('%c incoming end', 'font-size: 22px; color: yellow;');
+							this.onSipStateChange.innerCallerModal({
+								bool: false,
+							});
 							this.setGuiPhoneState({
 								funcName: 'modalState',
 								funcParam: {

src/root/index.jsx

@@ -36,6 +36,9 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 	const [dynamicValue, setDynamicValue] = useState('pending');
 	const [modalState, setModalState] = useState(false);
 	const [secondLine, setSecondLine] = useState(false);
+	const [innerCallerModal, setInnerCallerModal] = useState({
+		bool: false
+	});
 
 	const boxDialer = window.BoxDialer;
 
@@ -53,6 +56,10 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 			boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
 			boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
 			boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
+			boxDialer.setSipStateChangeCallback(
+				setInnerCallerModal,
+				'innerCallerModal',
+			);
 			boxDialer.sipRegister(wsphonedata);
 		}
 	}, []);
@@ -146,7 +153,7 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 				}
 			/>
 
-			<InnerCaller hidden={modalState.bool} modalState={modalState} />
+			<InnerCaller hidden={innerCallerModal.bool} modalState={} />
 
 			<SecondNotifSip secondLine={secondLine} />
 		</>