Skip to content

B
BoxDialer
Commit 71674725 authored by Muhammadali's avatar Muhammadali
Browse files
Options

update-

parent 4c503192
Hide whitespace changes
Inline Side-by-side
Showing with 679 additions and 412 deletions
package-lock.json
View file @ 71674725
{ {
"name": "boxdialer", "name": "boxdialer",
"version": "3.3.3", "version": "3.3.4",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "boxdialer", "name": "boxdialer",
"version": "3.3.3", "version": "3.3.4",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1", "@emotion/react": "^11.11.1",
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git", "ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git",
"i": "^0.3.7", "i": "^0.3.7",
"jssip": "^3.10.0",
"npm": "^10.1.0", "npm": "^10.1.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
...@@ -2401,6 +2402,14 @@ ...@@ -2401,6 +2402,14 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/debug": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.9.tgz",
"integrity": "sha512-8Hz50m2eoS56ldRlepxSBa6PWEVCtzUo/92HgLc2qTMnotJNIm7xP+UZhyWoYsyOdd5dxZ+NZLb24rsKyFs2ow==",
"dependencies": {
"@types/ms": "*"
}
},
"node_modules/@types/eslint": { "node_modules/@types/eslint": {
"version": "8.44.2", "version": "8.44.2",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
...@@ -2427,6 +2436,11 @@ ...@@ -2427,6 +2436,11 @@
"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
"dev": true "dev": true
}, },
"node_modules/@types/events": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.1.tgz",
"integrity": "sha512-QfUFdKjGSc+iCf8OFZhqJKfDuqB6lP57kSMkPw8ba3yNDANicUwCdaPt5ytZ4nDXXVFxQkvT8v73I4stSVrCxA=="
},
"node_modules/@types/express": { "node_modules/@types/express": {
"version": "4.17.17", "version": "4.17.17",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz", "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
...@@ -2484,6 +2498,11 @@ ...@@ -2484,6 +2498,11 @@
"integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==", "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
"dev": true "dev": true
}, },
"node_modules/@types/ms": {
"version": "0.7.32",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.32.tgz",
"integrity": "sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g=="
},
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.5.1", "version": "20.5.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz",
...@@ -4172,7 +4191,6 @@ ...@@ -4172,7 +4191,6 @@
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"dev": true,
"engines": { "engines": {
"node": ">=0.8.x" "node": ">=0.8.x"
} }
...@@ -5202,6 +5220,39 @@ ...@@ -5202,6 +5220,39 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/jssip": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/jssip/-/jssip-3.10.0.tgz",
"integrity": "sha512-iJj+bhnNl0S296sUDc2ZjIbAetnelzZ92aWARyW01oKZ0X8t+5aGrYfJdMFliLFm8hxMcnkep3vmSRGe/yRjsA==",
"dependencies": {
"@types/debug": "^4.1.7",
"@types/events": "^3.0.0",
"debug": "^4.3.1",
"events": "^3.3.0",
"sdp-transform": "^2.14.1"
}
},
"node_modules/jssip/node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dependencies": {
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/jssip/node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/kind-of": { "node_modules/kind-of": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
...@@ -9412,6 +9463,14 @@ ...@@ -9412,6 +9463,14 @@
"url": "https://opencollective.com/webpack" "url": "https://opencollective.com/webpack"
} }
}, },
"node_modules/sdp-transform": {
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz",
"integrity": "sha512-RjZyX3nVwJyCuTo5tGPx+PZWkDMCg7oOLpSlhjDdZfwUoNqG1mM8nyj31IGHyaPWXhjbP7cdK3qZ2bmkJ1GzRw==",
"bin": {
"sdp-verify": "checker.js"
}
},
"node_modules/select-hose": { "node_modules/select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
......
package.json
View file @ 71674725
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git", "ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git",
"i": "^0.3.7", "i": "^0.3.7",
"jssip": "^3.10.0",
"npm": "^10.1.0", "npm": "^10.1.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
......
src/components/Modal/index.jsx
View file @ 71674725
...@@ -11,21 +11,16 @@ import PauseIcon from '@mui/icons-material/Pause'; ...@@ -11,21 +11,16 @@ import PauseIcon from '@mui/icons-material/Pause';
import SendToMobileIcon from '@mui/icons-material/SendToMobile'; import SendToMobileIcon from '@mui/icons-material/SendToMobile';
import DialpadIcon from '@mui/icons-material/Dialpad'; import DialpadIcon from '@mui/icons-material/Dialpad';
import CallCardDropDown from '../CallCardDropDown'; import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad';
const Modal = ({ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
children,
hidden,
hangupButton,
phoneNumber,
callType,
callAnswerType,
}) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const [rollUp, setRollUp] = useState(false); const [rollUp, setRollUp] = useState(false);
const [modalHidden, setModalHidden] = useState(false); const [modalHidden, setModalHidden] = useState(false);
const [callEvents, setCallEvents] = useState({}); const [callEvents, setCallEvents] = useState({});
const [transferModel, setTransferModel] = useState(true); const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
useEffect(() => { useEffect(() => {
boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents'); boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
}, []); }, []);
...@@ -41,75 +36,44 @@ const Modal = ({ ...@@ -41,75 +36,44 @@ const Modal = ({
} }
}; };
const openNumpad = () => {
if (window.BX) {
} else {
setNumpadModal(!numpadModal);
}
};
if (!modalHidden) return; if (!modalHidden) return;
return (
<MainBlock
hidden={modalHidden || modalHidden}
rollUp={rollUp}
onClick={(e) => e.stopPropagation()}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
{children}
<ModalContainer.Top className={'top'} rollUp={rollUp}>
{callType === 'outcoming' ? (
<p>Звонок на {phoneNumber}</p>
) : (
<p>Звонок от {phoneNumber}</p>
)}
<p className='rollUpButton' onClick={() => setRollUp(true)}> const selectModalType = (type) => {
Свернуть switch (type) {
</p> case 'incoming':
</ModalContainer.Top> return (
<hr /> <ModalContainer.Footer rollUp={rollUp}>
<ModalContainer.Head rollUp={rollUp}> <button
<div className='round'></div> className='redButton'
<p className='name'>No name</p> onClick={() => boxDialer.skipButtonClick()}>
</ModalContainer.Head>
<hr />
<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
<hr />
<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
<hr />
{callType === 'outcoming' ? (
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'>
<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
className='transferAreaIcon'
onClick={() => {
window.BX
? boxDialer.selectUser()
: setTransferModel(!transferModel);
}}>
<SendToMobileIcon style={{ color: '#fff' }} />
<CallCardDropDown
hiddenState={transferModel}
selectUserFunc={selectUserFunc}
/>
</div>
<div>
<DialpadIcon style={{ color: '#fff' }} />
</div>
</div>
<button className='redButton' onClick={() => hangupButton()}>
<CallEndIcon /> <CallEndIcon />
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer> </ModalContainer.Footer>
) : callAnswerType !== 'answered' ? ( );
case 'outgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>
);
case 'connectingIncoming':
return (
<ModalContainer.Footer rollUp={rollUp}> <ModalContainer.Footer rollUp={rollUp}>
<button <button
className='redButton' className='redButton'
...@@ -117,13 +81,21 @@ const Modal = ({ ...@@ -117,13 +81,21 @@ const Modal = ({
<CallEndIcon /> <CallEndIcon />
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
</ModalContainer.Footer>
);
case 'connectingOutgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button <button
className='greenButton' className='redButton'
onClick={() => boxDialer.answerButtonClick()}> onClick={() => boxDialer.skipButtonClick()}>
ОТВЕТИТЬ <CallEndIcon />
ЗАКРЫТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>
) : ( );
case 'connected':
return (
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}> <ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'> <div className='outcomingEventStyle'>
<div onClick={() => boxDialer.holdButtonClick()}> <div onClick={() => boxDialer.holdButtonClick()}>
...@@ -153,8 +125,12 @@ const Modal = ({ ...@@ -153,8 +125,12 @@ const Modal = ({
selectUserFunc={selectUserFunc} selectUserFunc={selectUserFunc}
/> />
</div> </div>
<div> <div className={'openNumpadAreaIcon'}>
<DialpadIcon style={{ color: '#fff' }} /> <DialpadIcon
style={{ color: '#fff' }}
onClick={() => openNumpad()}
/>
<ModalNumpad hidden={numpadModal} />
</div> </div>
</div> </div>
<button <button
...@@ -164,7 +140,43 @@ const Modal = ({ ...@@ -164,7 +140,43 @@ const Modal = ({
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>
)} );
default:
return (
<ModalContainer.Footer rollUp={rollUp}>
Do not fount event
</ModalContainer.Footer>
);
}
};
return (
<MainBlock
hidden={modalHidden || modalHidden}
rollUp={rollUp}
onClick={(e) => e.stopPropagation()}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
{children}
<ModalContainer.Top className={'top'} rollUp={rollUp}>
<p>
Звонок {callType === 'outcoming' ? 'на' : 'от'} {phoneNumber}
</p>
<p className='rollUpButton' onClick={() => setRollUp(true)}>
Свернуть
</p>
</ModalContainer.Top>
<hr />
<ModalContainer.Head rollUp={rollUp}>
<div className='round'></div>
<p className='name'>No name</p>
</ModalContainer.Head>
{/* <hr />
<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
<hr />
<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
<hr /> */}
{selectModalType(callType)}
</ModalContainer> </ModalContainer>
<div className='rollUpVesion'> <div className='rollUpVesion'>
<button <button
......
src/components/Modal/style.js
View file @ 71674725
...@@ -113,6 +113,7 @@ ModalContainer.Footer = styled.div` ...@@ -113,6 +113,7 @@ ModalContainer.Footer = styled.div`
align-items: center; align-items: center;
padding: 15px; padding: 15px;
gap: 20px; gap: 20px;
color: #fff;
.outcomingEventStyle { .outcomingEventStyle {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -132,6 +133,9 @@ ModalContainer.Footer = styled.div` ...@@ -132,6 +133,9 @@ ModalContainer.Footer = styled.div`
.transferAreaIcon { .transferAreaIcon {
position: relative; position: relative;
} }
.openNumpadAreaIcon {
position: relative;
}
.redButton { .redButton {
background-color: #9d0f23; background-color: #9d0f23;
border-radius: 50px; border-radius: 50px;
......
src/components/ModalNumpad/index.jsx 0 → 100644
View file @ 71674725
/** @format */
import React, { useState } from 'react';
import Block, { NumberButton } from './style';
import numbers from '../../lib/numbers';
const ModalNumpad = ({ hidden }) => {
const boxDialer = window.BoxDialer;
const [dtmfValue, setDtmfValue] = useState('');
const selectNumberType = (value) => {
boxDialer.sipSendDTMF(value);
if (dtmfValue.length > 10) {
let sliceValue = (dtmfValue + value).slice(1);
setDtmfValue(sliceValue);
} else {
setDtmfValue(dtmfValue + value);
}
};
// 11
return (
<Block visiblevalue={hidden}>
<Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea>
{numbers?.map((mapItem) => (
<NumberButton
className='nocopy'
key={mapItem.id}
onClick={() => selectNumberType(mapItem.value)}>
{mapItem.nameNumber}
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
</NumberButton>
))}
</Block>
);
};
export default ModalNumpad;
src/components/ModalNumpad/style.js 0 → 100644
View file @ 71674725
/** @format */
import styled from 'styled-components';
const Block = styled.div`
width: 200px;
padding: 8px;
background-color: #c9d5d9;
position: absolute;
bottom: 50px;
border-radius: 10px;
left: 50%;
transition: 0.3s;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px;
transform: translate(-50%, 0);
${({ visiblevalue }) =>
visiblevalue
? {
opacity: '1',
transform: 'translate(-50%, 0)',
}
: {
opacity: '0',
transform: 'translate(-50%, 0)',
}}
`;
Block.ShowNumbersArea = styled.div`
grid-column: 1/4;
height: 33px;
color: #000;
font-size: 22px;
text-align: center;
letter-spacing: 5px;
font-weight: bold;
`;
const NumberButton = styled.div`
color: #fff;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
font-size: 22px;
cursor: pointer;
height: 33px;
background-color: ${({ status = '', type = '' }) =>
type === 'call_button'
? status === 'pending'
? 'orange'
: status === 'connected' && '#a0c13d'
: '#5e5e5e'};
`;
NumberButton.Icon = styled.div`
font-size: 20px;
`;
export { NumberButton };
export default Block;
src/components/ModalPhoneNumpad/index.jsx
View file @ 71674725
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import ModalPhoneNumpadStyle, { NumberButton, Input } from './style'; import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
import numbers from './numbers'; import numbers from '../../lib/numbers';
import CallIcon from '@mui/icons-material/Call'; import CallIcon from '@mui/icons-material/Call';
import { toast } from 'react-hot-toast'; import { toast } from 'react-hot-toast';
import DropDown from '../DropDown'; import DropDown from '../DropDown';
...@@ -45,7 +45,7 @@ const ModalPhoneNumpad = ({ ...@@ -45,7 +45,7 @@ const ModalPhoneNumpad = ({
const inputController = ({ value, type, from }) => { const inputController = ({ value, type, from }) => {
boxDialer.onSoundType({ type: 'pick', bool: true }); boxDialer.onSoundType({ type: 'pick', bool: true });
if (modalState.callType === 'outcoming' && modalState.bool) { if (modalState.callType === 'outcoming' && modalState.bool) {
boxDialer.sipSendDTMF(value); // boxDialer.sipSendDTMF(value);
} }
switch (type) { switch (type) {
case 'add': case 'add':
......
src/lib/boxDIaler.js
View file @ 71674725
/** @format */ /** @format */
import SIPml from 'ecmascript-webrtc-sipml'; // import SIPml from 'ecmascript-webrtc-sipml';
import { toast } from 'react-hot-toast'; import { toast } from 'react-hot-toast';
import outcomingringTone from '../sounds/ringtone.wav'; import outcomingringTone from '../sounds/ringtone.wav';
import waitRingTone from '../sounds/ringbacktone.wav'; import waitRingTone from '../sounds/ringbacktone.wav';
import pickSound from '../sounds/dtmf.wav'; import pickSound from '../sounds/dtmf.wav';
import { WebSocketInterface, UA } from 'jssip';
import tugpng from '../img/tug.png';
export class BoxDialer { export class BoxDialer {
sTransferNumber; sTransferNumber;
oRingTone; oRingTone;
...@@ -17,7 +18,7 @@ export class BoxDialer { ...@@ -17,7 +18,7 @@ export class BoxDialer {
oSipSessionTransferCall; oSipSessionTransferCall;
videoRemote; videoRemote;
videoLocal; videoLocal;
audioRemote; remoteAudio;
bFullScreen = false; bFullScreen = false;
oNotifICall; oNotifICall;
bDisableVideo = false; bDisableVideo = false;
...@@ -39,22 +40,26 @@ export class BoxDialer { ...@@ -39,22 +40,26 @@ export class BoxDialer {
type: null, type: null,
}; };
options;
socket;
ua;
testTimer; testTimer;
callSession;
sipDomain;
constructor() { constructor() {
console.log('registerData: ', this.registerData);
this.played = false; this.played = false;
document.body.addEventListener('click', () => { document.body.addEventListener('click', () => {
this.played = true; this.played = true;
}); });
this.videoRemote = document.createElement('video'); this.videoRemote = document.createElement('video');
this.videoLocal = document.createElement('video'); this.videoLocal = document.createElement('video');
this.audioRemote = document.createElement('audio'); this.remoteAudio = document.createElement('audio');
this.remoteAudio.autoplay = true;
this.audioRemote.autoplay = true;
document.body.appendChild(this.videoRemote); document.body.appendChild(this.videoRemote);
document.body.appendChild(this.videoLocal); document.body.appendChild(this.videoLocal);
document.body.appendChild(this.audioRemote); document.body.appendChild(this.remoteAudio);
this.ringtone = new Audio(outcomingringTone); this.ringtone = new Audio(outcomingringTone);
this.waitRingTone = new Audio(waitRingTone); this.waitRingTone = new Audio(waitRingTone);
...@@ -67,27 +72,59 @@ export class BoxDialer { ...@@ -67,27 +72,59 @@ export class BoxDialer {
callHold: false, callHold: false,
callMute: null, callMute: null,
}; };
this.oConfigCall = {
audio_remote: this.audioRemote, this.options = {
video_local: this.viewVideoLocal, //this.viewVideoLocal eventHandlers: this.uaEvents(),
video_remote: this.viewVideoRemote, // this.viewVideoRemote mediaConstraints: { audio: true, video: false },
screencast_window_id: 0x00000000, // entire desktop };
bandwidth: { audio: undefined, video: undefined }, }
video_size: { uaEvents() {
minWidth: undefined, return {
minHeight: undefined, progress: (e) => {
maxWidth: undefined, console.log('call is in progress');
maxHeight: undefined, this.hangupButtonClick();
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: '',
},
});
},
failed: (e) => {
console.log('call failed with cause: ' + e.data);
}, },
events_listener: { ended: (e) => {
events: '*', console.log('call ended with cause: ' + e.data);
listener: (event) => this.onSessionEvent({ type: 'call', event }), this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: '',
},
});
},
confirmed: (e) => {
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
callFromName: 'Test',
},
});
// ===============
// this.setGuiPhoneState({
// funcName: 'modalState',
// funcParam: {
// bool: true,
// callType: 'answered',
// callAnswerType: 'oncoming',
// },
// });
}, },
sip_caps: [
{ name: '+g.oma.sip-im' },
{ name: 'language', value: '"en,fr"' },
],
}; };
} }
...@@ -104,6 +141,19 @@ export class BoxDialer { ...@@ -104,6 +141,19 @@ export class BoxDialer {
this.onSipStateChange.setDndTimer(this.timer.time); this.onSipStateChange.setDndTimer(this.timer.time);
} }
showNotification(cbk) {
const greeting = new Notification('Alovoice call', {
body: 'Answer Call',
icon: tugpng,
});
// navigate to the https://www.javascripttutorial.net/ on click
greeting.addEventListener('click', cbk);
// greeting.addEventListener('click', function(){
// window.open('https://www.javascripttutorial.net/web-apis/javascript-notification/');
// });
}
onSoundType({ type, bool }) { onSoundType({ type, bool }) {
if (this.played) { if (this.played) {
switch (type) { switch (type) {
...@@ -150,70 +200,223 @@ export class BoxDialer { ...@@ -150,70 +200,223 @@ export class BoxDialer {
sipRegister = ({ number, secret, wsurl, isIce }) => { sipRegister = ({ number, secret, wsurl, isIce }) => {
try { try {
Notification.requestPermission(); if (this.options) {
this.socket = new WebSocketInterface(`wss://${wsurl}/ws`);
SIPml.setDebugLevel( this.callSession = false;
window.localStorage && this.sipDomain = wsurl;
window.localStorage.getItem('org.doubango.expert.disable_debug') === console.log('ua_configure', {
'true' sockets: [this.socket],
? 'error' uri: `sip:${number}@${wsurl}`,
: 'info', password: secret,
); stun_server: 'stun:stun.l.google.com:19302',
});
this.ua = new UA({
sockets: [this.socket],
uri: `sip:${number}@${wsurl}`,
password: secret,
stun_server: 'stun:stun.l.google.com:19302',
});
// create SIP stack this.ua.on('connected', (e) => {
console.log('sip_register [connected]: ', e);
let ostackConfig = { });
realm: wsurl, // 'cld.alovoice.uz:61040', this.ua.on('disconnected', (e) => {
impi: number, //'3003', this.onSipStateChange.dynamicValue('pending');
impu: `sip:${number}@${wsurl}`, //'sip:3003@cld.alovoice.uz:61040', console.log('sip_register [disconnected]: ', e);
password: secret, //'944ad5', });
display_name: number, //'3003', this.ua.on('registered', (e) => {
websocket_proxy_url: `wss://${wsurl}/ws`, //'wss://cld.alovoice.uz:61040/ws', this.onSipStateChange.dynamicValue('connected');
// outbound_proxy_url: '', //(window.localStorage ? window.localStorage.getItem('org.doubango.expert.sip_outboundproxy_url') : null), console.log('sip_register [registered]: ', e);
ice_servers: isIce ? [{ url: 'stun:stun.l.google.com:19302' }] : '[]', //(window.localStorage ? window.localStorage.getItem('org.doubango.expert.ice_servers') : null), });
enable_rtcweb_breaker: false, //(window.localStorage ? window.localStorage.getItem('org.doubango.expert.enable_rtcweb_breaker') == "true" : false), this.ua.on('unregistered', (e) => {
events_listener: { console.log('sip_register [unregistered]: ', e);
events: '*', });
listener: (event) => this.onSessionEvent({ type: 'stack', event }),
}, this.ua.on('registrationFailed', (e) => {
enable_early_ims: true, //(window.localStorage ? window.localStorage.getItem('org.doubango.expert.disable_early_ims') != "true" : true), // Must be true unless you're using a real IMS network console.log('sip_register [registrationFailed]: ', e);
enable_media_stream_cache: false, //(window.localStorage ? window.localStorage.getItem('org.doubango.expert.enable_media_caching') == "true" : false), });
//bandwidth: (window.localStorage ? tsk_string_to_object(window.localStorage.getItem('org.doubango.expert.bandwidth')) : null), // could be redefined a session-level this.ua.on('connecting', (e) => {
//video_size: (window.localStorage ? tsk_string_to_object(window.localStorage.getItem('org.doubango.expert.video_size')) : null), // could be redefined a session-level console.log('connecting: ', e);
sip_headers: [ });
{ this.ua.on('registrationExpiring', (e) => {
name: 'User-Agent', console.log('registrationExpiring: ', e);
value: 'Alovoice-client/v1.0-2023.08.08', });
}, this.ua.on('newRTCSession', (e) => {
{ name: 'Organization', value: 'Technounit' }, console.log('newRTCSession: ', e);
], });
}; this.ua.on('newMessage', (e) => {
console.log('_ostackConfig: ', ostackConfig); console.log('newMessage: ', e);
this.oSipStack = new SIPml.Stack(ostackConfig); });
this.ua.on('sipEvent', (e) => {
if (this.oSipStack.start() !== 0) { console.log('sipEvent: ', e);
console.log('<b>Failed to start the SIP stack</b>'); });
} else return; this.ua.on('newOptions', (e) => {
} catch (e) { console.log('newOptions: ', e);
console.log('<b>2:' + e + '</b>'); });
this.ua.on('newRTCSession', (data) => {
this.callSession = data.session;
console.log('--=== newRTCSession', this.callSession);
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
},
});
if (this.callSession.direction === 'incoming') {
this.showNotification(() => {
this.answerButtonClick();
});
this.onSoundType({ type: 'ring', bool: true });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'incoming',
},
});
// incoming call here
this.callSession.on('accepted', () => {
// the call has answered
console.log('incoming accepted');
this.onSoundType({ type: 'ring', bool: false });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
},
});
// const numberRegexp = /\"(\d+)\"/;
// const fromNumber = numberRegexp.exec(
// data.request.headers.From[0].raw,
// )[1];
// const toNumber = numberRegexp
// .exec(data.request.headers.Contact[0].raw)[1]
// .slice(1);
});
this.callSession.on('confirmed', () => {
// this handler will be called for incoming calls too
console.log('incoming confirmed');
});
this.callSession.on('ended', () => {
// the call has ended
console.log('incoming ended');
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: '',
},
});
});
this.callSession.on('failed', () => {
// unable to establish the call
console.log('incoming failed');
this.onSoundType({ type: 'ring', bool: false });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: '',
},
});
});
// this.callSession.on('addstream', (e) => {
// // set remote audio stream (to listen to remote audio)
// // remoteAudio is <audio> element on page
// console.log('incoming addstream');
// this.remoteAudio.src = window.URL.createObjectURL(e.stream);
// this.remoteAudio.play();
// });
this.callSession.on('peerconnection', (e) => {
console.log('peerconnection: ', e);
});
this.callSession.on('connecting', (e) => {
console.log('connecting: ', e);
});
this.callSession.on('sending', (e) => {
console.log('sending: ', e);
});
this.callSession.on('progress', (e) => {
console.log('progress: ', e);
});
this.callSession.on('newDTMF', (e) => {
console.log('newDTMF: ', e);
});
this.callSession.on('newInfo', (e) => {
console.log('newInfo: ', e);
});
this.callSession.on('hold', (e) => {
console.log('___________hold: ', e);
});
this.callSession.on('unhold', (e) => {
console.log('___________unhold: ', e);
});
this.callSession.on('muted', (e) => {
console.log('muted: ', e);
});
this.callSession.on('unmuted', (e) => {
console.log('unmuted: ', e);
});
this.callSession.on('reinvite', (e) => {
console.log('reinvite: ', e);
});
this.callSession.on('update', (e) => {
console.log('update: ', e);
});
this.callSession.on('refer', (e) => {
console.log('refer: ', e);
});
this.callSession.on('replaces', (e) => {
console.log('replaces: ', e);
});
this.callSession.on('sdp', (e) => {
console.log('sdp: ', e);
});
this.callSession.on('icecandidate', (e) => {
console.log('icecandidate: ', e);
});
this.callSession.on('getusermediafailed', (e) => {
console.log('getusermediafailed: ', e);
});
this.callSession.on('peerconnection: createofferfailed', (e) => {
console.log('peerconnection: createofferfailed: ', e);
});
this.callSession.on('peerconnection: createanswerfailed', (e) => {
console.log('peerconnection: createanswerfailed: ', e);
});
this.callSession.on(
'peerconnection: setlocaldescriptionfailed',
(e) => {
console.log('peerconnection: setlocaldescriptionfailed: ', e);
},
);
this.callSession.on(
'peerconnection: setremotedescriptionfailed',
(e) => {
console.log('peerconnection: setremotedescriptionfailed: ', e);
},
);
// Answer call
// session.answer(callOptions);
// Reject call (or hang up it)
// session.terminate();
}
});
this.ua.start();
}
} catch (err) {
console.log(`jsSip_error: `, err);
} }
}; };
register() {
if (this.oSipSessionRegister) this.oSipSessionRegister.unregister();
this.oSipSessionRegister = this.oSipStack.newSession('register', {
expires: 200,
events_listener: {
events: '*',
listener: (event) => {
this.onSessionEvent({ type: 'register', event });
return event;
},
},
});
this.oSipSessionRegister.register();
}
getBxUiState(sipState) { getBxUiState(sipState) {
console.log('this_callDirection: ', this.callDirection); console.log('this_callDirection: ', this.callDirection);
...@@ -252,6 +455,14 @@ export class BoxDialer { ...@@ -252,6 +455,14 @@ export class BoxDialer {
window?.BX24.placement.call(bxMethodName, bxFuncParams, callback); window?.BX24.placement.call(bxMethodName, bxFuncParams, callback);
} else if (window.alovoicePhone && window.alovoicePhone.callMethods) { } else if (window.alovoicePhone && window.alovoicePhone.callMethods) {
window.alovoicePhone.callMethods[bxMethodName](bxFuncParams, callback); window.alovoicePhone.callMethods[bxMethodName](bxFuncParams, callback);
} else if (
window?.BX &&
!window.alovoicePhone &&
bxMethodName === 'CallCardSetUiState' &&
bxFuncParams.uiState &&
bxFuncParams.uiState == '5'
) {
BX.localStorage.remove('viExternalCard');
} }
} }
closeBxCall() { closeBxCall() {
...@@ -266,8 +477,9 @@ export class BoxDialer { ...@@ -266,8 +477,9 @@ export class BoxDialer {
} }
} }
setGuiPhoneState({ stateCode, funcName, funcParam }) { setGuiPhoneState({ stateCode, funcName, funcParam }) {
// { stateCode, funcName, funcParam }
console.log('setGuiPhoneState: ');
if (window?.alovoice_wsphone && !!stateCode?.length) { if (window?.alovoice_wsphone && !!stateCode?.length) {
console.log('getBxUiState:', this.getBxUiState(stateCode));
this.callBxMethods({ this.callBxMethods({
bxMethodName: 'CallCardSetUiState', bxMethodName: 'CallCardSetUiState',
bxFuncParams: { uiState: this.getBxUiState(stateCode) }, bxFuncParams: { uiState: this.getBxUiState(stateCode) },
...@@ -289,143 +501,7 @@ export class BoxDialer { ...@@ -289,143 +501,7 @@ export class BoxDialer {
console.log(`%c BXLOG:`, datas, 'background-color: red;'); console.log(`%c BXLOG:`, datas, 'background-color: red;');
} }
onSessionEvent({ type, event }) { onSessionEvent({ type, event }) {}
this.sipState = type + '_' + event?.type;
// console.log('---onSessionEvent EVENT [' + this.sipState + ']', event);
this.stateLog(this.sipState);
this.setGuiPhoneState({ stateCode: this.sipState });
switch (this.sipState) {
case 'register_stopping':
case 'register_stoped':
case 'register_failed_to_start':
case 'register_failed_to_stop':
this.oSipStack = null;
this.oSipSessionRegister = null;
this.oSipSessionCall = null;
break;
case 'register_terminated':
// оторвался
break;
case 'register_connected':
this.onSipStateChange.dynamicValue('connected');
break;
case 'register_connecting':
this.onSipStateChange.dynamicValue('pending');
break;
case 'stack_started':
this.register();
break;
case 'call_connecting':
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'outcoming',
callAnswerType: null,
},
});
break;
case 'call_m_stream_audio_remote_added':
case 'call_connected':
// this.setGuiPhoneState({ stateCode: this.sipState });
// QORA EKRANDA ULANYAPTI.. SOZINI VAHTGA OZGARTIRISH KERE ( SEKKUNDAMER )
break;
case 'call_i_ao_request':
// this.setGuiPhoneState({ stateCode: this.sipState });
break;
case 'hangup_terminating':
// QORA EKRANNI OCHIRISH KERE
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: 'outcoming',
callAnswerType: null,
},
});
break;
case 'call_terminated':
this.onSoundType({ type: 'ring', bool: false });
this.closeBxCall();
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: 'outcoming',
callAnswerType: null,
callFromName: null,
},
});
break;
case 'stack_i_new_call':
console.log('stack_i_new_call', event);
if (this?.oSipSessionCall?.o_session?.o_stream_remote?.id) {
// this.onSipStateChange.secondLine(true);
this.setGuiPhoneState({
funcName: 'secondLine',
funcParam: true,
});
this.callDirection = 'in';
this.oSipSessionCallSecond = event.newSession;
this.oSipSessionCallSecond.setConfiguration(this.oConfigCall);
// this.onSoundType({ type: 'ring', bool: true });
// this.setGuiPhoneState({
// funcName: 'modalState',
// funcParam: {
// bool: true,
// callType: '',
// callAnswerType: null,
// callFromName: event?.o_event?.o_session?.o_uri_from?.s_user_name,
// },
// });
}
{
// this.onSipStateChange.secondLine(false);
this.setGuiPhoneState({
funcName: 'secondLine',
funcParam: false,
});
this.callDirection = 'in';
this.oSipSessionCall = event.newSession;
this.oSipSessionCall.setConfiguration(this.oConfigCall);
this.onSoundType({ type: 'ring', bool: true });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: '',
callAnswerType: null,
callFromName: event?.o_event?.o_session?.o_uri_from?.s_user_name,
},
});
// console.log(
// this.oSipSessionCall.o_session.o_stream_remote.id,
// 'oSipSessionCall',
// );
}
break;
case 'stack_stopped':
this.register();
break;
default:
break;
}
}
selectUser() { selectUser() {
BX.Runtime.loadExtension('ui.entity-selector').then((exports) => { BX.Runtime.loadExtension('ui.entity-selector').then((exports) => {
...@@ -483,26 +559,18 @@ export class BoxDialer { ...@@ -483,26 +559,18 @@ export class BoxDialer {
} }
initialized(phoneNumber) { initialized(phoneNumber) {
// if (phoneNumber == phone) {
// toast.error('Please enter another number');
// return;
// }
this.callDirection = 'out'; this.callDirection = 'out';
this.callBxMethods({
bxMethodName: 'CallCardSetUiState',
bxFuncParams: { uiState: 'connectingOutgoing' },
callback: (e) => {
console.log(e, `CallCardSetUiState method done ${e}`);
},
});
let phoneNumberString = phoneNumber.toString(); let phoneNumberString = phoneNumber.toString();
if (phoneNumberString.length) { if (phoneNumberString.length) {
this.oSipSessionCall = this.oSipStack.newSession( this.callSession = this.ua.call(
'call-audio', 'sip:' + phoneNumberString + '@' + this.sipDomain,
this.oConfigCall, this.options,
); );
this.oSipSessionCall.call(phoneNumberString); this.callSession.connection.addEventListener('addstream', (event) => {
console.log('--== ss OUT STREAM: ');
this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play();
});
} else { } else {
toast.error('Do not correct number', { toast.error('Do not correct number', {
style: { style: {
...@@ -510,56 +578,92 @@ export class BoxDialer { ...@@ -510,56 +578,92 @@ export class BoxDialer {
}, },
}); });
} }
this.onSipStateChange.phoneModal(false); // this.onSipStateChange.phoneModal(false);
console.log(this.oSipSessionCall, 'oSipSessionCall_Inset');
} }
skipButtonClick() { skipButtonClick() {
console.log('skipButtonClick');
this.onSoundType({ type: 'ring', bool: false }); this.onSoundType({ type: 'ring', bool: false });
this.hangupButtonClick(); this.hangupButtonClick();
} }
answerButtonClick() { answerButtonClick() {
this.oSipSessionCall.accept(this.oConfigCall); // this.onSoundType({ type: 'ring', bool: false });
this.onSoundType({ type: 'ring', bool: false }); // this.setGuiPhoneState({
this.setGuiPhoneState({ // funcName: 'modalState',
funcName: 'modalState', // funcParam: {
funcParam: { // bool: true,
bool: true, // callType: 'answered',
callType: 'answered', // },
callAnswerType: 'oncoming', // });
},
this.callSession.answer(this.options);
this.callSession.connection.addEventListener('addstream', (event) => {
console.log('--== ss Added STREAM: ');
console.log('--=============================');
console.log('--=============================');
console.log('--=============================');
// console.log('-= CallSESS conn EvntLst: ', event);
// console.log(
// '--=========Adding Remote Audio: ',
// remoteAudio,
// event.stream,
// );
// if (window.remoteAudio && window.remoteAudio.id) {
this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play();
// }
}); });
} }
sipSendDTMF(c) { sipSendDTMF(code) {
if (this.oSipSessionCall && c) { // if (this.oSipSessionCall && c) {
this.oSipSessionCall.dtmf(c); // this.oSipSessionCall.dtmf(c);
} // }
// var options = {
// duration: 160,
// extraHeaders: ['X-Foo: foo', 'X-Bar: bar'],
// eventHandlers: {
// succeeded: function (e) {
// /* Your code here */
// console.log('sipSendDTMF succeeded', e);
// },
// failed: function (e) {
// /* Your code here */
// console.log('sipSendDTMF failed', e);
// },
// },
// };
// var dtmf = new JsSIP.RTCSession.DTMF(this.callSession);
// dtmf.send(code, options);
// this.callSession.send(code, options);
this.callSession.sendDTMF(code);
} }
addCommentButtonClick() { addCommentButtonClick() {
console.log('addCommentButtonClick'); console.log('addCommentButtonClick');
} }
muteButtonClick() { muteButtonClick() {
console.log('muteButtonClick'); // this.callBxMethods({
// bxMethodName: 'CallCardSetMute',
this.callEvetsBoxDialer = { // bxFuncParams: { muted: this.oSipSessionCall.bMute },
...this.callEvetsBoxDialer, // callback: (e) => {
callMute: !this.oSipSessionCall.bMute, // console.log(e, `CallCardSetMute method done ${e}`);
}; // },
// });
this.oSipSessionCall.mute('audio', this.callEvetsBoxDialer.callMute); let { audio } = this.callSession.isMuted();
this.oSipSessionCall.bMute = this.callEvetsBoxDialer.callMute; if (audio) {
this.onSipStateChange.setCallEvents(this.callEvetsBoxDialer); this.callSession.unmute();
this.callBxMethods({ this.setGuiPhoneState({
bxMethodName: 'CallCardSetMute', funcName: 'setCallEvents',
bxFuncParams: { muted: this.oSipSessionCall.bMute }, funcParam: { callMute: false },
callback: (e) => { });
console.log(e, `CallCardSetMute method done ${e}`); } else {
}, this.callSession.mute();
}); this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callMute: true },
});
}
} }
holdButtonClick() { holdButtonClick() {
// console.log( // console.log(
...@@ -567,7 +671,6 @@ export class BoxDialer { ...@@ -567,7 +671,6 @@ export class BoxDialer {
// this.callEvetsBoxDialer.callHold, // this.callEvetsBoxDialer.callHold,
// ); // );
// // BX24.placement.call('CallCardSetHold', { held: true }, () => { // // BX24.placement.call('CallCardSetHold', { held: true }, () => {
// // }); // // });
// if (this.callEvetsBoxDialer.callHold) { // if (this.callEvetsBoxDialer.callHold) {
// this.oSipSessionCall.resume(); // this.oSipSessionCall.resume();
...@@ -582,10 +685,8 @@ export class BoxDialer { ...@@ -582,10 +685,8 @@ export class BoxDialer {
// callHold: true, // callHold: true,
// }; // };
// } // }
// this.oSipSessionCall.bHeld = this.callHold; // this.oSipSessionCall.bHeld = this.callHold;
// this.onSipStateChange.setCallEvents(this.callEvetsBoxDialer); // this.onSipStateChange.setCallEvents(this.callEvetsBoxDialer);
// this.callBxMethods({ // this.callBxMethods({
// bxMethodName: 'CallCardSetHold', // bxMethodName: 'CallCardSetHold',
// bxFuncParams: { held: this.oSipSessionCall.bHeld }, // bxFuncParams: { held: this.oSipSessionCall.bHeld },
...@@ -594,9 +695,7 @@ export class BoxDialer { ...@@ -594,9 +695,7 @@ export class BoxDialer {
// console.log(e, `CallCardSetUiState method done ${e}`); // console.log(e, `CallCardSetUiState method done ${e}`);
// }, // },
// }); // });
// ----------------------------------------------------- // -----------------------------------------------------
// if (this.oSipSessionCall && this.oSipSessionCall.bHeld === false) { // if (this.oSipSessionCall && this.oSipSessionCall.bHeld === false) {
// this.oSipSessionCall.hold({ // this.oSipSessionCall.hold({
// events_listener: { // events_listener: {
...@@ -626,9 +725,7 @@ export class BoxDialer { ...@@ -626,9 +725,7 @@ export class BoxDialer {
// }, // },
// }); // });
// } // }
// console.log('this_oSipSessionCall_bHeld: ', this.oSipSessionCall.bHeld); // console.log('this_oSipSessionCall_bHeld: ', this.oSipSessionCall.bHeld);
// if (this.oSipSessionCall.bHeld) { // if (this.oSipSessionCall.bHeld) {
// this.oSipSessionCall.resume(); // this.oSipSessionCall.resume();
// // this.callBxMethods({ // // this.callBxMethods({
...@@ -648,61 +745,57 @@ export class BoxDialer { ...@@ -648,61 +745,57 @@ export class BoxDialer {
// // }, // // },
// // }); // // });
// } // }
// ----------------------------------------------------
// console.log('this_callSession: ', this.callSession.isOnHold());
if (this.oSipSessionCall) { // console.log('this_callSession: ', this.callSession.isOnHold());
i_ret = this.oSipSessionCall.bHeld let { local } = this.callSession.isOnHold();
? this.oSipSessionCall.resume() if (local) {
: this.oSipSessionCall.hold(); this.callSession.unhold();
this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callHold: false },
});
} else {
this.callSession.hold();
this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callHold: true },
});
} }
} }
closeButtonClick() { closeButtonClick() {
console.log('closeButtonClick');
this.hangupButtonClick(); this.hangupButtonClick();
} }
hangupButtonClick() { hangupButtonClick() {
this.onSoundType({ type: 'ring', bool: false }); // this.onSoundType({ type: 'ring', bool: false });
// this.setGuiPhoneState({
this.setGuiPhoneState({ // funcName: 'modalState',
funcName: 'modalState', // funcParam: {
funcParam: { // bool: false,
bool: false, // callType: 'answered',
callType: 'answered', // callAnswerType: 'oncoming',
callAnswerType: 'oncoming', // callFromName: null,
callFromName: null, // },
}, // });
}); if (this.callSession) {
this.callSession.terminate();
if (this.oSipSessionCall) {
this.oSipSessionCall.hangup({
events_listener: {
events: '*',
listener: (event) => this.onSessionEvent({ type: 'hangup', event }),
},
});
} }
} }
transferButtonClick(number) { transferButtonClick(number) {
console.log('transferButtonClick', number, this.oSipSessionCall); // this.setGuiPhoneState({
if (this.oSipSessionCall) { // funcName: 'modalState',
if (this.oSipSessionCall.transfer(number) != 0) { // funcParam: {
toast.error('Call transfer failed'); // bool: false,
return; // callType: 'answered',
} // callFromName: null,
if (!window?.alovoice_wsphone) { // },
toast('Call transfered'); // });
} // this.callBxMethods({ bxMethodName: 'modalState', bxFuncParams, callback });
this.setGuiPhoneState({ // const target = UserAgent.makeUri('sip:bob@example.com');
funcName: 'modalState', this.callSession.refer(number, this.options);
funcParam: {
bool: false,
callType: 'answered',
callAnswerType: 'oncoming',
callFromName: null,
},
});
}
} }
cancelTransferButtonClick() { cancelTransferButtonClick() {
console.log('cancelTransferButtonClick'); console.log('cancelTransferButtonClick');
......
src/lib/controlRenderBX.jsx
View file @ 71674725
...@@ -10,10 +10,10 @@ const ControlRenderBX = () => { ...@@ -10,10 +10,10 @@ const ControlRenderBX = () => {
if (!window.alovoice_wsphone) { if (!window.alovoice_wsphone) {
setWsphonedata({ setWsphonedata({
iscloud: true, iscloud: true,
number: '4003', number: '2020',
wsurl: 'cld.alovoice.uz:61040', wsurl: 'cld.alovoice.uz:61040',
server_id: 40, server_id: 40,
secret: '26a830', secret: '97bff7',
lefttime: 231461, lefttime: 231461,
reasons: ['free', 'outcalls', 'home', 'totop'], reasons: ['free', 'outcalls', 'home', 'totop'],
reason: 'free', reason: 'free',
......
src/root/index.jsx
View file @ 71674725
...@@ -52,20 +52,20 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => { ...@@ -52,20 +52,20 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
if (wsphonedata && wsphonedata?.number) { if (wsphonedata && wsphonedata?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue'); boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState'); boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine'); boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
boxDialer.sipRegister(wsphonedata); boxDialer.sipRegister(wsphonedata);
} }
// setData(data);
}, []); }, []);
const hangupButton = () => { const hangupButton = () => {
boxDialer.hangupButtonClick(); boxDialer.hangupButtonClick();
}; };
window.setWSData = (result) => { window.setWSData = (result) => {
console.log('setWsphonedata', result); console.log('setWsphonedata', result);
setWsphonedata(result); setWsphonedata(result);
}; };
const reasonSelect = async (e) => { const reasonSelect = async (e) => {
let result = await onSetDnd(e); let result = await onSetDnd(e);
setWsphonedata(result); setWsphonedata(result);
...@@ -130,9 +130,10 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => { ...@@ -130,9 +130,10 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
<Modal <Modal
className='tailwindGlobalCss' className='tailwindGlobalCss'
callAnswerType={modalState.callType}
hidden={modalState.bool} hidden={modalState.bool}
// hidden={true}
callType={modalState.callType} callType={modalState.callType}
// callType={'connected'}
hangupButton={hangupButton} hangupButton={hangupButton}
phoneNumber={ phoneNumber={
modalState.callType === 'outcoming' modalState.callType === 'outcoming'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023