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",
"version": "3.3.3",
"version": "3.3.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "boxdialer",
"version": "3.3.3",
"version": "3.3.4",
"license": "ISC",
"dependencies": {
"@emotion/react": "^11.11.1",
......@@ -19,6 +19,7 @@
"date-fns": "^2.30.0",
"ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git",
"i": "^0.3.7",
"jssip": "^3.10.0",
"npm": "^10.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
......@@ -2401,6 +2402,14 @@
"@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": {
"version": "8.44.2",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
......@@ -2427,6 +2436,11 @@
"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
"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": {
"version": "4.17.17",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
......@@ -2484,6 +2498,11 @@
"integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
"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": {
"version": "20.5.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz",
......@@ -4172,7 +4191,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"dev": true,
"engines": {
"node": ">=0.8.x"
}
......@@ -5202,6 +5220,39 @@
"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": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
......@@ -9412,6 +9463,14 @@
"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": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
......
package.json
View file @ 71674725
......@@ -22,6 +22,7 @@
"date-fns": "^2.30.0",
"ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git",
"i": "^0.3.7",
"jssip": "^3.10.0",
"npm": "^10.1.0",
"react": "^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';
import SendToMobileIcon from '@mui/icons-material/SendToMobile';
import DialpadIcon from '@mui/icons-material/Dialpad';
import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad';
const Modal = ({
children,
hidden,
hangupButton,
phoneNumber,
callType,
callAnswerType,
}) => {
const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
const boxDialer = window.BoxDialer;
const [rollUp, setRollUp] = useState(false);
const [modalHidden, setModalHidden] = useState(false);
const [callEvents, setCallEvents] = useState({});
const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
useEffect(() => {
boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
}, []);
......@@ -41,75 +36,44 @@ const Modal = ({
}
};
const openNumpad = () => {
if (window.BX) {
} else {
setNumpadModal(!numpadModal);
}
};
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)}>
Свернуть
</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 />
{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()}>
const selectModalType = (type) => {
switch (type) {
case 'incoming':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
ЗАКРЫТЬ
</button>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</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}>
<button
className='redButton'
......@@ -117,13 +81,21 @@ const Modal = ({
<CallEndIcon />
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
case 'connectingOutgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
) : (
);
case 'connected':
return (
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'>
<div onClick={() => boxDialer.holdButtonClick()}>
......@@ -153,8 +125,12 @@ const Modal = ({
selectUserFunc={selectUserFunc}
/>
</div>
<div>
<DialpadIcon style={{ color: '#fff' }} />
<div className={'openNumpadAreaIcon'}>
<DialpadIcon
style={{ color: '#fff' }}
onClick={() => openNumpad()}
/>
<ModalNumpad hidden={numpadModal} />
</div>
</div>
<button
......@@ -164,7 +140,43 @@ const Modal = ({
ЗАКРЫТЬ
</button>
</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>
<div className='rollUpVesion'>
<button
......
src/components/Modal/style.js
View file @ 71674725
......@@ -113,6 +113,7 @@ ModalContainer.Footer = styled.div`
align-items: center;
padding: 15px;
gap: 20px;
color: #fff;
.outcomingEventStyle {
display: flex;
align-items: center;
......@@ -132,6 +133,9 @@ ModalContainer.Footer = styled.div`
.transferAreaIcon {
position: relative;
}
.openNumpadAreaIcon {
position: relative;
}
.redButton {
background-color: #9d0f23;
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 @@
import React, { useCallback, useEffect, useState } from 'react';
import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
import numbers from './numbers';
import numbers from '../../lib/numbers';
import CallIcon from '@mui/icons-material/Call';
import { toast } from 'react-hot-toast';
import DropDown from '../DropDown';
......@@ -45,7 +45,7 @@ const ModalPhoneNumpad = ({
const inputController = ({ value, type, from }) => {
boxDialer.onSoundType({ type: 'pick', bool: true });
if (modalState.callType === 'outcoming' && modalState.bool) {
boxDialer.sipSendDTMF(value);
// boxDialer.sipSendDTMF(value);
}
switch (type) {
case 'add':
......
src/lib/boxDIaler.js
View file @ 71674725
/** @format */
import SIPml from 'ecmascript-webrtc-sipml';
// import SIPml from 'ecmascript-webrtc-sipml';
import { toast } from 'react-hot-toast';
import outcomingringTone from '../sounds/ringtone.wav';
import waitRingTone from '../sounds/ringbacktone.wav';
import pickSound from '../sounds/dtmf.wav';
import { WebSocketInterface, UA } from 'jssip';
import tugpng from '../img/tug.png';
export class BoxDialer {
sTransferNumber;
oRingTone;
......@@ -17,7 +18,7 @@ export class BoxDialer {
oSipSessionTransferCall;
videoRemote;
videoLocal;
audioRemote;
remoteAudio;
bFullScreen = false;
oNotifICall;
bDisableVideo = false;
......@@ -39,22 +40,26 @@ export class BoxDialer {
type: null,
};
options;
socket;
ua;
testTimer;
callSession;
sipDomain;
constructor() {
console.log('registerData: ', this.registerData);
this.played = false;
document.body.addEventListener('click', () => {
this.played = true;
});
this.videoRemote = document.createElement('video');
this.videoLocal = document.createElement('video');
this.audioRemote = document.createElement('audio');
this.audioRemote.autoplay = true;
this.remoteAudio = document.createElement('audio');
this.remoteAudio.autoplay = true;
document.body.appendChild(this.videoRemote);
document.body.appendChild(this.videoLocal);
document.body.appendChild(this.audioRemote);
document.body.appendChild(this.remoteAudio);
this.ringtone = new Audio(outcomingringTone);
this.waitRingTone = new Audio(waitRingTone);
......@@ -67,27 +72,59 @@ export class BoxDialer {
callHold: false,
callMute: null,
};
this.oConfigCall = {
audio_remote: this.audioRemote,
video_local: this.viewVideoLocal, //this.viewVideoLocal
video_remote: this.viewVideoRemote, // this.viewVideoRemote
screencast_window_id: 0x00000000, // entire desktop
bandwidth: { audio: undefined, video: undefined },
video_size: {
minWidth: undefined,
minHeight: undefined,
maxWidth: undefined,
maxHeight: undefined,
this.options = {
eventHandlers: this.uaEvents(),
mediaConstraints: { audio: true, video: false },
};
}
uaEvents() {
return {
progress: (e) => {
console.log('call is in progress');
this.hangupButtonClick();
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: '',
},
});
},
failed: (e) => {
console.log('call failed with cause: ' + e.data);
},
events_listener: {
events: '*',
listener: (event) => this.onSessionEvent({ type: 'call', event }),
ended: (e) => {
console.log('call ended with cause: ' + e.data);
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 {
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 }) {
if (this.played) {
switch (type) {
......@@ -150,70 +200,223 @@ export class BoxDialer {
sipRegister = ({ number, secret, wsurl, isIce }) => {
try {
Notification.requestPermission();
SIPml.setDebugLevel(
window.localStorage &&
window.localStorage.getItem('org.doubango.expert.disable_debug') ===
'true'
? 'error'
: 'info',
);
if (this.options) {
this.socket = new WebSocketInterface(`wss://${wsurl}/ws`);
this.callSession = false;
this.sipDomain = wsurl;
console.log('ua_configure', {
sockets: [this.socket],
uri: `sip:${number}@${wsurl}`,
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
let ostackConfig = {
realm: wsurl, // 'cld.alovoice.uz:61040',
impi: number, //'3003',
impu: `sip:${number}@${wsurl}`, //'sip:3003@cld.alovoice.uz:61040',
password: secret, //'944ad5',
display_name: number, //'3003',
websocket_proxy_url: `wss://${wsurl}/ws`, //'wss://cld.alovoice.uz:61040/ws',
// outbound_proxy_url: '', //(window.localStorage ? window.localStorage.getItem('org.doubango.expert.sip_outboundproxy_url') : null),
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),
events_listener: {
events: '*',
listener: (event) => this.onSessionEvent({ type: 'stack', event }),
},
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
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
//video_size: (window.localStorage ? tsk_string_to_object(window.localStorage.getItem('org.doubango.expert.video_size')) : null), // could be redefined a session-level
sip_headers: [
{
name: 'User-Agent',
value: 'Alovoice-client/v1.0-2023.08.08',
},
{ name: 'Organization', value: 'Technounit' },
],
};
console.log('_ostackConfig: ', ostackConfig);
this.oSipStack = new SIPml.Stack(ostackConfig);
if (this.oSipStack.start() !== 0) {
console.log('<b>Failed to start the SIP stack</b>');
} else return;
} catch (e) {
console.log('<b>2:' + e + '</b>');
this.ua.on('connected', (e) => {
console.log('sip_register [connected]: ', e);
});
this.ua.on('disconnected', (e) => {
this.onSipStateChange.dynamicValue('pending');
console.log('sip_register [disconnected]: ', e);
});
this.ua.on('registered', (e) => {
this.onSipStateChange.dynamicValue('connected');
console.log('sip_register [registered]: ', e);
});
this.ua.on('unregistered', (e) => {
console.log('sip_register [unregistered]: ', e);
});
this.ua.on('registrationFailed', (e) => {
console.log('sip_register [registrationFailed]: ', e);
});
this.ua.on('connecting', (e) => {
console.log('connecting: ', e);
});
this.ua.on('registrationExpiring', (e) => {
console.log('registrationExpiring: ', e);
});
this.ua.on('newRTCSession', (e) => {
console.log('newRTCSession: ', e);
});
this.ua.on('newMessage', (e) => {
console.log('newMessage: ', e);
});
this.ua.on('sipEvent', (e) => {
console.log('sipEvent: ', e);
});
this.ua.on('newOptions', (e) => {
console.log('newOptions: ', e);
});
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) {
console.log('this_callDirection: ', this.callDirection);
......@@ -252,6 +455,14 @@ export class BoxDialer {
window?.BX24.placement.call(bxMethodName, bxFuncParams, callback);
} else if (window.alovoicePhone && window.alovoicePhone.callMethods) {
window.alovoicePhone.callMethods[bxMethodName](bxFuncParams, callback);
} else if (
window?.BX &&
!window.alovoicePhone &&
bxMethodName === 'CallCardSetUiState' &&
bxFuncParams.uiState &&
bxFuncParams.uiState == '5'
) {
BX.localStorage.remove('viExternalCard');
}
}
closeBxCall() {
......@@ -266,8 +477,9 @@ export class BoxDialer {
}
}
setGuiPhoneState({ stateCode, funcName, funcParam }) {
// { stateCode, funcName, funcParam }
console.log('setGuiPhoneState: ');
if (window?.alovoice_wsphone && !!stateCode?.length) {
console.log('getBxUiState:', this.getBxUiState(stateCode));
this.callBxMethods({
bxMethodName: 'CallCardSetUiState',
bxFuncParams: { uiState: this.getBxUiState(stateCode) },
......@@ -289,143 +501,7 @@ export class BoxDialer {
console.log(`%c BXLOG:`, datas, 'background-color: red;');
}
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;
}
}
onSessionEvent({ type, event }) {}
selectUser() {
BX.Runtime.loadExtension('ui.entity-selector').then((exports) => {
......@@ -483,26 +559,18 @@ export class BoxDialer {
}
initialized(phoneNumber) {
// if (phoneNumber == phone) {
// toast.error('Please enter another number');
// return;
// }
this.callDirection = 'out';
this.callBxMethods({
bxMethodName: 'CallCardSetUiState',
bxFuncParams: { uiState: 'connectingOutgoing' },
callback: (e) => {
console.log(e, `CallCardSetUiState method done ${e}`);
},
});
let phoneNumberString = phoneNumber.toString();
if (phoneNumberString.length) {
this.oSipSessionCall = this.oSipStack.newSession(
'call-audio',
this.oConfigCall,
this.callSession = this.ua.call(
'sip:' + phoneNumberString + '@' + this.sipDomain,
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 {
toast.error('Do not correct number', {
style: {
......@@ -510,56 +578,92 @@ export class BoxDialer {
},
});
}
this.onSipStateChange.phoneModal(false);
console.log(this.oSipSessionCall, 'oSipSessionCall_Inset');
// this.onSipStateChange.phoneModal(false);
}
skipButtonClick() {
console.log('skipButtonClick');
this.onSoundType({ type: 'ring', bool: false });
this.hangupButtonClick();
}
answerButtonClick() {
this.oSipSessionCall.accept(this.oConfigCall);
this.onSoundType({ type: 'ring', bool: false });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'answered',
callAnswerType: 'oncoming',
},
// this.onSoundType({ type: 'ring', bool: false });
// this.setGuiPhoneState({
// funcName: 'modalState',
// funcParam: {
// bool: true,
// callType: 'answered',
// },
// });
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) {
if (this.oSipSessionCall && c) {
this.oSipSessionCall.dtmf(c);
}
sipSendDTMF(code) {
// if (this.oSipSessionCall && 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() {
console.log('addCommentButtonClick');
}
muteButtonClick() {
console.log('muteButtonClick');
this.callEvetsBoxDialer = {
...this.callEvetsBoxDialer,
callMute: !this.oSipSessionCall.bMute,
};
this.oSipSessionCall.mute('audio', this.callEvetsBoxDialer.callMute);
this.oSipSessionCall.bMute = this.callEvetsBoxDialer.callMute;
this.onSipStateChange.setCallEvents(this.callEvetsBoxDialer);
this.callBxMethods({
bxMethodName: 'CallCardSetMute',
bxFuncParams: { muted: this.oSipSessionCall.bMute },
callback: (e) => {
console.log(e, `CallCardSetMute method done ${e}`);
},
});
// this.callBxMethods({
// bxMethodName: 'CallCardSetMute',
// bxFuncParams: { muted: this.oSipSessionCall.bMute },
// callback: (e) => {
// console.log(e, `CallCardSetMute method done ${e}`);
// },
// });
let { audio } = this.callSession.isMuted();
if (audio) {
this.callSession.unmute();
this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callMute: false },
});
} else {
this.callSession.mute();
this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callMute: true },
});
}
}
holdButtonClick() {
// console.log(
......@@ -567,7 +671,6 @@ export class BoxDialer {
// this.callEvetsBoxDialer.callHold,
// );
// // BX24.placement.call('CallCardSetHold', { held: true }, () => {
// // });
// if (this.callEvetsBoxDialer.callHold) {
// this.oSipSessionCall.resume();
......@@ -582,10 +685,8 @@ export class BoxDialer {
// callHold: true,
// };
// }
// this.oSipSessionCall.bHeld = this.callHold;
// this.onSipStateChange.setCallEvents(this.callEvetsBoxDialer);
// this.callBxMethods({
// bxMethodName: 'CallCardSetHold',
// bxFuncParams: { held: this.oSipSessionCall.bHeld },
......@@ -594,9 +695,7 @@ export class BoxDialer {
// console.log(e, `CallCardSetUiState method done ${e}`);
// },
// });
// -----------------------------------------------------
// if (this.oSipSessionCall && this.oSipSessionCall.bHeld === false) {
// this.oSipSessionCall.hold({
// events_listener: {
......@@ -626,9 +725,7 @@ export class BoxDialer {
// },
// });
// }
// console.log('this_oSipSessionCall_bHeld: ', this.oSipSessionCall.bHeld);
// if (this.oSipSessionCall.bHeld) {
// this.oSipSessionCall.resume();
// // this.callBxMethods({
......@@ -648,61 +745,57 @@ export class BoxDialer {
// // },
// // });
// }
// ----------------------------------------------------
// console.log('this_callSession: ', this.callSession.isOnHold());
if (this.oSipSessionCall) {
i_ret = this.oSipSessionCall.bHeld
? this.oSipSessionCall.resume()
: this.oSipSessionCall.hold();
// console.log('this_callSession: ', this.callSession.isOnHold());
let { local } = this.callSession.isOnHold();
if (local) {
this.callSession.unhold();
this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callHold: false },
});
} else {
this.callSession.hold();
this.setGuiPhoneState({
funcName: 'setCallEvents',
funcParam: { callHold: true },
});
}
}
closeButtonClick() {
console.log('closeButtonClick');
this.hangupButtonClick();
}
hangupButtonClick() {
this.onSoundType({ type: 'ring', bool: false });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: 'answered',
callAnswerType: 'oncoming',
callFromName: null,
},
});
if (this.oSipSessionCall) {
this.oSipSessionCall.hangup({
events_listener: {
events: '*',
listener: (event) => this.onSessionEvent({ type: 'hangup', event }),
},
});
// this.onSoundType({ type: 'ring', bool: false });
// this.setGuiPhoneState({
// funcName: 'modalState',
// funcParam: {
// bool: false,
// callType: 'answered',
// callAnswerType: 'oncoming',
// callFromName: null,
// },
// });
if (this.callSession) {
this.callSession.terminate();
}
}
transferButtonClick(number) {
console.log('transferButtonClick', number, this.oSipSessionCall);
if (this.oSipSessionCall) {
if (this.oSipSessionCall.transfer(number) != 0) {
toast.error('Call transfer failed');
return;
}
if (!window?.alovoice_wsphone) {
toast('Call transfered');
}
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: false,
callType: 'answered',
callAnswerType: 'oncoming',
callFromName: null,
},
});
}
// this.setGuiPhoneState({
// funcName: 'modalState',
// funcParam: {
// bool: false,
// callType: 'answered',
// callFromName: null,
// },
// });
// this.callBxMethods({ bxMethodName: 'modalState', bxFuncParams, callback });
// const target = UserAgent.makeUri('sip:bob@example.com');
this.callSession.refer(number, this.options);
}
cancelTransferButtonClick() {
console.log('cancelTransferButtonClick');
......
src/lib/controlRenderBX.jsx
View file @ 71674725
......@@ -10,10 +10,10 @@ const ControlRenderBX = () => {
if (!window.alovoice_wsphone) {
setWsphonedata({
iscloud: true,
number: '4003',
number: '2020',
wsurl: 'cld.alovoice.uz:61040',
server_id: 40,
secret: '26a830',
secret: '97bff7',
lefttime: 231461,
reasons: ['free', 'outcalls', 'home', 'totop'],
reason: 'free',
......
src/root/index.jsx
View file @ 71674725
......@@ -52,20 +52,20 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
if (wsphonedata && wsphonedata?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
boxDialer.sipRegister(wsphonedata);
}
// setData(data);
}, []);
const hangupButton = () => {
boxDialer.hangupButtonClick();
};
window.setWSData = (result) => {
console.log('setWsphonedata', result);
setWsphonedata(result);
};
const reasonSelect = async (e) => {
let result = await onSetDnd(e);
setWsphonedata(result);
......@@ -130,9 +130,10 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
<Modal
className='tailwindGlobalCss'
callAnswerType={modalState.callType}
hidden={modalState.bool}
// hidden={true}
callType={modalState.callType}
// callType={'connected'}
hangupButton={hangupButton}
phoneNumber={
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