Skip to content

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

update-

parent 1db3176d
Hide whitespace changes
Inline Side-by-side
Showing with 1321 additions and 1257 deletions
package.json
View file @ b0526d9d
{ {
"name": "boxdialer", "name": "boxdialer",
"version": "4.8.68", "version": "4.8.69",
"description": "", "description": "",
"main": "src/boxDialer.js", "main": "src/boxDialer.js",
"scripts": { "scripts": {
......
src/components/ModalPhoneNumpad/index.jsx
View file @ b0526d9d
/** @format */ /** @format */
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 '../../lib/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';
import {CommentsDisabledOutlined} from '@mui/icons-material'; import { CommentsDisabledOutlined } from '@mui/icons-material';
import CallHistoryInputDropdown from '../CallHistoryInputDropdown'; import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey'; import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey';
import {Text, useTranslator} from '@eo-locale/react'; import { Text, useTranslator } from '@eo-locale/react';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import {useColorConfig} from "../../storage/globalColorConfig" import { useColorConfig } from '../../storage/globalColorConfig';
const ModalPhoneNumpad = ({ const ModalPhoneNumpad = ({
phoneModal, phoneModal,
modalState, modalState,
reasons, reasons,
reason, reason,
onSetDnd, onSetDnd,
dynamicValue, dynamicValue,
position, position,
variant, variant,
extnums, extnums,
setSettingHidden, setSettingHidden,
settingHidden settingHidden,
}) => { }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store) const useColorConfigStore = useColorConfig((store) => store);
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [call_history, setCall_history] = useState([]); const [call_history, setCall_history] = useState([]);
const [numberSelectHistory, setNumberSelectHistory] = useState(0); const [numberSelectHistory, setNumberSelectHistory] = useState(0);
const [exNum, setExNum] = useState(); const [exNum, setExNum] = useState();
const translator = useTranslator(); const translator = useTranslator();
useEffect(() => { useEffect(() => {
let currentCalls = localStorage.getItem('callhistory') ? JSON.parse(localStorage.getItem('callhistory')) : false; let currentCalls = localStorage.getItem('callhistory')
if (currentCalls) { ? JSON.parse(localStorage.getItem('callhistory'))
setCall_history(currentCalls); : false;
} if (currentCalls) {
}, [localStorage.getItem('callhistory'), inputValue]); setCall_history(currentCalls);
}
}, [localStorage.getItem('callhistory'), inputValue]);
useEffect(() => { useEffect(() => {
if (!modalState.bool) setInputValue(''); if (!modalState.bool) setInputValue('');
}, [modalState.bool]); }, [modalState.bool]);
useEffect(() => { useEffect(() => {
if (!phoneModal) setSettingHidden(false) if (!phoneModal) setSettingHidden(false);
}, [phoneModal]) }, [phoneModal]);
const inputController = ({value, type, from}) => { const inputController = ({ value, type, from }) => {
boxDialer.onSoundType({type: 'pick', bool: true}); boxDialer.onSoundType({ type: 'pick', bool: true });
switch (type) { switch (type) {
case 'add': case 'add':
if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) { if (
if (from === 'input') return setInputValue(value); value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length
if (from === 'button') setInputValue(inputValue + value); ) {
} if (from === 'input') return setInputValue(value);
if (from === 'button') setInputValue(inputValue + value);
}
break; break;
case 'delete': case 'delete':
if (from === 'button') { if (from === 'button') {
setInputValue(inputValue setInputValue(
.split('') inputValue
.slice(0, inputValue.length - 1) .split('')
.join(''),); .slice(0, inputValue.length - 1)
} .join(''),
if (from === 'input') { );
setInputValue(value); }
} if (from === 'input') {
break; setInputValue(value);
default: }
break; break;
} default:
}; break;
}
};
const history = ({type}) => { const history = ({ type }) => {
if (phoneModal && (modalState.bool ? false : true)) { if (phoneModal && (modalState.bool ? false : true)) {
if ((type === 'up' && numberSelectHistory < call_history.length) || numberSelectHistory === 'zero') { if (
setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,); (type === 'up' && numberSelectHistory < call_history.length) ||
} numberSelectHistory === 'zero'
if (type === 'down' && numberSelectHistory > 0) { ) {
setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,); setNumberSelectHistory(
} numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,
} );
}; }
if (type === 'down' && numberSelectHistory > 0) {
setNumberSelectHistory(
numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,
);
}
}
};
useEffect(() => { useEffect(() => {
if (phoneModal && (modalState.bool ? false : true)) { if (phoneModal && (modalState.bool ? false : true)) {
let selectedNumber; let selectedNumber;
if (numberSelectHistory == 0) { if (numberSelectHistory == 0) {
setInputValue(''); setInputValue('');
} }
selectedNumber = call_history.slice(numberSelectHistory * -1)[0] ? call_history.slice(numberSelectHistory * -1)[0] : false; selectedNumber = call_history.slice(numberSelectHistory * -1)[0]
? call_history.slice(numberSelectHistory * -1)[0]
: false;
if (numberSelectHistory === 0) { if (numberSelectHistory === 0) {
selectedNumber = ''; selectedNumber = '';
setNumberSelectHistory('zero'); setNumberSelectHistory('zero');
} }
if (numberSelectHistory === 'zero') { if (numberSelectHistory === 'zero') {
selectedNumber = ''; selectedNumber = '';
setNumberSelectHistory('zero'); setNumberSelectHistory('zero');
} }
if (selectedNumber) { if (selectedNumber) {
setInputValue(selectedNumber.value); setInputValue(selectedNumber.value);
} }
} }
}, [numberSelectHistory]); }, [numberSelectHistory]);
document.onkeydown = function (e) { document.onkeydown = function (e) {
if (phoneModal && modalState.bool ? false : true) { if (phoneModal && modalState.bool ? false : true) {
e = e || window.event; e = e || window.event;
let actualKeyCode = e.keyCode; let actualKeyCode = e.keyCode;
if (e.ctrlKey && actualKeyCode === 86) { if (e.ctrlKey && actualKeyCode === 86) {
navigator.clipboard navigator.clipboard
.readText() .readText()
.then((text) => { .then((text) => {
inputController({type: 'add', value: text, from: 'button'}); inputController({ type: 'add', value: text, from: 'button' });
}) })
.catch((err) => { .catch((err) => {
console.log('Something went wrong', err); console.log('Something went wrong', err);
}); });
} }
return true; return true;
} }
}; };
const gameState = { const gameState = {
toggleCP: (e) => { toggleCP: (e) => {
if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') { if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
callButton(); callButton();
} else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') { } else if (
inputController({type: 'delete', from: 'button', value: e.value}); phoneModal &&
} else if (phoneModal && (modalState.bool ? false : true) && !isNaN(+e.key)) { (modalState.bool ? false : true) &&
inputController({type: 'add', value: e.key, from: 'button'}); e.key === 'Backspace'
} else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') { ) {
} else if ((phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) || e.keyCode == 40) history({type: e.keyCode === 38 ? 'up' : 'down'}); inputController({ type: 'delete', from: 'button', value: e.value });
}, } else if (
}; phoneModal &&
(modalState.bool ? false : true) &&
!isNaN(+e.key)
) {
inputController({ type: 'add', value: e.key, from: 'button' });
} else if (
phoneModal &&
(modalState.bool ? false : true) &&
e.key === 'Backspace'
) {
} else if (
(phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) ||
e.keyCode == 40
)
history({ type: e.keyCode === 38 ? 'up' : 'down' });
},
};
const handleKeyUp = useCallback((event) => { const handleKeyUp = useCallback(
gameState.toggleCP(event); (event) => {
}, [gameState.toggleCP],); gameState.toggleCP(event);
},
[gameState.toggleCP],
);
useEffect(() => { useEffect(() => {
document.addEventListener('keyup', handleKeyUp); document.addEventListener('keyup', handleKeyUp);
return () => { return () => {
document.removeEventListener('keyup', handleKeyUp); document.removeEventListener('keyup', handleKeyUp);
}; };
}, [handleKeyUp]); }, [handleKeyUp]);
// `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}` // `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}`
const callButton = () => { const callButton = () => {
// inset if ---------- // inset if ----------
// ------------------- // -------------------
var currentTime = new Date(); var currentTime = new Date();
if (dynamicValue === 'connected') { if (dynamicValue === 'connected') {
if (Boolean(inputValue.toString().length) && call_history.slice(-1)[0]?.value != inputValue) { if (
let newCallsStringify = JSON.stringify([...call_history, { Boolean(inputValue.toString().length) &&
value: inputValue, call_history.slice(-1)[0]?.value != inputValue
time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`, ) {
},]); let newCallsStringify = JSON.stringify([
localStorage.setItem('callhistory', newCallsStringify); ...call_history,
} {
boxDialer.initialized(inputValue); value: inputValue,
setInputValue(''); time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`,
} else { },
toast.error('Please wait', { ]);
style: { localStorage.setItem('callhistory', newCallsStringify);
zIndex: '99999999999999999', }
}, boxDialer.initialized(inputValue);
}); setInputValue('');
} } else {
}; toast.error('Please wait', {
const selectFunc = (e) => { style: {
setInputValue(e); zIndex: '99999999999999999',
}; },
const setDefaultHistoryNumberHistory = () => { });
setNumberSelectHistory('zero'); }
}; };
const selectFunc = (e) => {
setInputValue(e);
};
const setDefaultHistoryNumberHistory = () => {
setNumberSelectHistory('zero');
};
document.querySelector('body').addEventListener('click', function (e) { document.querySelector('body').addEventListener('click', function (e) {
if (exNum) setExNum(false); if (exNum) setExNum(false);
}); });
return (<ModalPhoneNumpadStyle return (
switchAnim={useColorConfigStore.state?.switchAnim} <ModalPhoneNumpadStyle
position={position} switchAnim={useColorConfigStore.state?.switchAnim}
hiddenValue={!phoneModal} position={position}
variant={variant} hiddenValue={!phoneModal}
onClick={(e) => e.stopPropagation()}> variant={variant}
<SettingsIcon className={'settingIcon'} onClick={() => setSettingHidden(!settingHidden)}/> onClick={(e) => e.stopPropagation()}>
<ModalPhoneNumpadStyle.InputArea> <SettingsIcon
<CallHistoryInputDropdown className={'settingIcon'}
call_history={call_history} onClick={() => setSettingHidden(!settingHidden)}
inputValue={inputValue} />
selectFunc={selectFunc} <ModalPhoneNumpadStyle.InputArea>
numberSelectHistory={numberSelectHistory} <CallHistoryInputDropdown
setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory} call_history={call_history}
/> inputValue={inputValue}
{inputValue?.length ? (<Input.BackSpaceIcon selectFunc={selectFunc}
onClick={() => inputController({type: 'delete', from: 'button'})} numberSelectHistory={numberSelectHistory}
/>) : ('')} setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
</ModalPhoneNumpadStyle.InputArea> />
<ModalPhoneNumpadStyle.ButtonArea> {inputValue?.length ? (
{numbers?.map((mapItem) => (<NumberButton <Input.BackSpaceIcon
switchAnim={useColorConfigStore.state?.switchAnim} onClick={() => inputController({ type: 'delete', from: 'button' })}
sizeContext={useColorConfigStore.state.sizePixel} />
onMouseDown={() => boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])} ) : (
onMouseUp={() => boxDialer.stop()} ''
onMouseOut={() => boxDialer.stop()} )}
className='nocopy' </ModalPhoneNumpadStyle.InputArea>
key={mapItem.id} <ModalPhoneNumpadStyle.ButtonArea>
onClick={() => { {numbers?.map((mapItem) => (
mapItem.type === 'number' && inputController({ <NumberButton
value: mapItem.value, type: 'add', from: 'button', switchAnim={useColorConfigStore.state?.switchAnim}
}); sizeContext={useColorConfigStore.state.sizePixel}
}}> onMouseDown={() =>
{mapItem.nameNumber} boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon> }
</NumberButton>))} onMouseUp={() => boxDialer.stop()}
{!modalState.bool ? (<> onMouseOut={() => boxDialer.stop()}
<NumberButton className='nocopy'
style={{gridColumn: '1/4'}} key={mapItem.id}
status={dynamicValue} onClick={() => {
type={'call_button'}> mapItem.type === 'number' &&
<NumberButton.CallButton exNum={exNum}> inputController({
<div className='left' onClick={() => callButton()}> value: mapItem.value,
<CallIcon className='callIcon'/> type: 'add',
<p className='call_text'>{translator.translate('CALL')}</p> from: 'button',
</div> });
<div className='right' onClick={() => setExNum(!exNum)}> }}>
{/* <KeyboardControlKeyIcon className='icon' /> */} {mapItem.nameNumber}
<div className='icon'></div> <NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
</div> </NumberButton>
</NumberButton.CallButton> ))}
<NumberButton.CallButtonModal switchAnim={useColorConfigStore.state?.switchAnim} visiblevalue={exNum}> {!modalState.bool ? (
<NumberButton.CallButtonModalInset switchAnim={useColorConfigStore.state?.switchAnim}> <>
{extnums?.map(({number, title}, index) => (<p <NumberButton
key={index} style={{ gridColumn: '1/4' }}
className='num_item' status={dynamicValue}
onClick={() => { type={'call_button'}>
boxDialer.extnum = number; <NumberButton.CallButton exNum={exNum}>
setExNum(false); <div className='left' onClick={() => callButton()}>
callButton(); <CallIcon className='callIcon' />
}}> <p className='call_text'>{translator.translate('CALL')}</p>
{title} </div>
</p>))} <div className='right' onClick={() => setExNum(!exNum)}>
</NumberButton.CallButtonModalInset> {/* <KeyboardControlKeyIcon className='icon' /> */}
</NumberButton.CallButtonModal> <div className='icon'></div>
{/* <ModalPhoneNumpadStyle.Window </div>
</NumberButton.CallButton>
<NumberButton.CallButtonModal
switchAnim={useColorConfigStore.state?.switchAnim}
visiblevalue={exNum}>
<NumberButton.CallButtonModalInset
switchAnim={useColorConfigStore.state?.switchAnim}>
{extnums?.map(({ number, title }, index) => (
<p
key={index}
className='num_item'
onClick={() => {
boxDialer.extnum = number;
setExNum(false);
callButton();
}}>
{title}
</p>
))}
</NumberButton.CallButtonModalInset>
</NumberButton.CallButtonModal>
{/* <ModalPhoneNumpadStyle.Window
visiblevalue={exNum} visiblevalue={exNum}
onClick={() => setExNum(false)} onClick={() => setExNum(false)}
/> */} /> */}
</NumberButton> </NumberButton>
</>) : (<> </>
<div style={{height: '33px'}}></div> ) : (
<div style={{height: '33px'}}></div> <>
</>)} <div style={{ height: '33px' }}></div>
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason}/> <div style={{ height: '33px' }}></div>
</ModalPhoneNumpadStyle.ButtonArea> </>
</ModalPhoneNumpadStyle>); )}
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
</ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle>
);
}; };
export default ModalPhoneNumpad; export default ModalPhoneNumpad;
src/components/ModalPhoneNumpad/style.js
View file @ b0526d9d
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import {sizePixelPixelSizeFunc} from "../../lib/sizeContext" import { sizePixelPixelSizeFunc } from '../../lib/sizeContext';
const ModalPhoneNumpadStyle = styled.div` const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0 0 20px #00000047; box-shadow: 0 0 20px #00000047;
...@@ -15,8 +15,9 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -15,8 +15,9 @@ const ModalPhoneNumpadStyle = styled.div`
width: 230px; width: 230px;
position: fixed; position: fixed;
bottom: 120px; bottom: 120px;
transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.2s' : '0s' : '0.2s' }; transition: ${({ switchAnim }) =>
${({switchAnim})=> console.log('switchAnim: ', switchAnim)} typeof switchAnim !== 'undefined' ? (switchAnim ? '0.2s' : '0s') : '0.2s'};
${({ switchAnim }) => console.log('switchAnim: ', switchAnim)}
z-index: 9999; z-index: 9999;
${({ hiddenValue, position, variant }) => ${({ hiddenValue, position, variant }) =>
hiddenValue hiddenValue
...@@ -28,7 +29,7 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -28,7 +29,7 @@ const ModalPhoneNumpadStyle = styled.div`
grid-template-rows: 40px 1fr; grid-template-rows: 40px 1fr;
grid-gap: 15px; grid-gap: 15px;
cursor: default; cursor: default;
.settingIcon{ .settingIcon {
position: absolute; position: absolute;
font-size: 11px; font-size: 11px;
cursor: pointer; cursor: pointer;
...@@ -103,7 +104,7 @@ const NumberButton = styled.div` ...@@ -103,7 +104,7 @@ const NumberButton = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
${({sizeContext})=> sizePixelPixelSizeFunc(sizeContext, 22)} ${({ sizeContext }) => sizePixelPixelSizeFunc(sizeContext, 22)}
cursor: pointer; cursor: pointer;
height: 33px; height: 33px;
position: relative; position: relative;
...@@ -113,8 +114,9 @@ const NumberButton = styled.div` ...@@ -113,8 +114,9 @@ const NumberButton = styled.div`
? 'orange' ? 'orange'
: status === 'connected' && '#a0c13d' : status === 'connected' && '#a0c13d'
: '#0000007d'}; : '#0000007d'};
transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' }; transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.3s' : '0s') : '0.3s'};
.callIcon { .callIcon {
color: #0000007d; color: #0000007d;
} }
...@@ -169,7 +171,6 @@ NumberButton.CallButton = styled.div` ...@@ -169,7 +171,6 @@ NumberButton.CallButton = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
.icon { .icon {
margin: 0 auto; margin: 0 auto;
border: 4px solid transparent; border: 4px solid transparent;
width: 8px; width: 8px;
...@@ -210,8 +211,9 @@ NumberButton.CallButtonModal = styled.div` ...@@ -210,8 +211,9 @@ NumberButton.CallButtonModal = styled.div`
padding: 3px 3px 15px 3px; padding: 3px 3px 15px 3px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' }; transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.1s' : '0s') : '0.1s'};
clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0); clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
${({ visiblevalue }) => ${({ visiblevalue }) =>
visiblevalue visiblevalue
...@@ -236,7 +238,12 @@ NumberButton.CallButtonModalInset = styled.div` ...@@ -236,7 +238,12 @@ NumberButton.CallButtonModalInset = styled.div`
.num_item { .num_item {
text-wrap: nowrap; text-wrap: nowrap;
color: #000; color: #000;
transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.2s' : '0s' : '0.2s' }; transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined'
? switchAnim
? '0.2s'
: '0s'
: '0.2s'};
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
margin: 2px 0; margin: 2px 0;
......
src/lib/boxDIaler.js
View file @ b0526d9d
/** @format */ /** @format */
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 { WebSocketInterface, UA } from 'jssip';
import tugpng from '../img/tug.png'; import tugpng from '../img/tug.png';
import packageJson from '../../package.json'; import packageJson from '../../package.json';
export class BoxDialer { export class BoxDialer {
sTransferNumber; sTransferNumber;
oRingTone; oRingTone;
oRingbackTone; oRingbackTone;
oSipStack; oSipStack;
oSipSessionRegister; oSipSessionRegister;
oSipSessionCall; oSipSessionCall;
oSipSessionCallSecond; oSipSessionCallSecond;
oSipSessionTransferCall; oSipSessionTransferCall;
videoRemote; videoRemote;
videoLocal; videoLocal;
remoteAudio; remoteAudio;
bFullScreen = false; bFullScreen = false;
oNotifICall; oNotifICall;
bDisableVideo = false; bDisableVideo = false;
viewVideoLocal; viewVideoLocal;
viewVideoRemote; viewVideoRemote;
viewLocalScreencast; // <video> (webrtc) or <div> (webrtc4all) viewLocalScreencast; // <video> (webrtc) or <div> (webrtc4all)
oConfigCall; oConfigCall;
callDirection; callDirection;
oReadyStateTimer; oReadyStateTimer;
ringtone; ringtone;
ringbacktone; ringbacktone;
sipState; sipState;
sipBxState; sipBxState;
soundBool; soundBool;
onSipStateChange = {}; onSipStateChange = {};
callEvetsBoxDialer; callEvetsBoxDialer;
musicContext; musicContext;
gainNode; gainNode;
gainNode; gainNode;
oscillator1; oscillator1;
oscillator2; oscillator2;
extnum; extnum;
timer = { timer = {
time: 0, time: 0,
type: null, type: null,
}; };
innerTimer = { innerTimer = {
time: 0, time: 0,
type: null, type: null,
}; };
options; options;
socket; socket;
ua; ua;
testTimer; testTimer;
testInnerTimer; testInnerTimer;
callSession; callSession;
sipDomain; sipDomain;
player; player;
strmTrack; strmTrack;
isRestarting; isRestarting;
globalHistoryData globalHistoryData;
constructor() {
constructor() { this.played = false;
this.played = false; document.body.addEventListener('click', () => {
document.body.addEventListener('click', () => { this.played = true;
this.played = true; });
}); this.isRestarting = false;
this.isRestarting = false; this.videoRemote = document.createElement('video');
this.videoRemote = document.createElement('video'); this.videoLocal = document.createElement('video');
this.videoLocal = document.createElement('video'); this.remoteAudio = document.createElement('audio');
this.remoteAudio = document.createElement('audio'); this.remoteAudio.autoplay = true;
this.remoteAudio.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.remoteAudio);
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); this.pickSound = new Audio(pickSound);
this.pickSound = new Audio(pickSound);
this.ringtone.loop = true;
this.ringtone.loop = true; this.waitRingTone.loop = true;
this.waitRingTone.loop = true;
this.callEvetsBoxDialer = {
this.callEvetsBoxDialer = { callHold: false,
callHold: false, callMute: null,
callMute: null, };
};
this.options = {
this.options = { eventHandlers: this.uaEvents(),
eventHandlers: this.uaEvents(), mediaConstraints: { audio: true, video: false },
mediaConstraints: {audio: true, video: false}, };
}; }
}
setGlobalHistoryData(data) {
setGlobalHistoryData(data){ console.log('setGlobalHistoryData: ', data);
console.log('setGlobalHistoryData: ', data) this.globalHistoryData = data;
this.globalHistoryData = data }
}
dialTone(freq1, freq2) {
dialTone(freq1, freq2) { // merger = context.createChannelMerger(2);
// merger = context.createChannelMerger(2); // setTimeout(() => {
// setTimeout(() => { // console.log('-= sTOPING BY TIMEOUT');
// console.log('-= sTOPING BY TIMEOUT'); // this.stop();
// this.stop(); // }, 1000);
// }, 1000); // if (this.oscillator1 || this.oscillator2) return;
// if (this.oscillator1 || this.oscillator2) return; // console.log('Begin dialTone:', this.oscillator1, this.oscillator2);
// console.log('Begin dialTone:', this.oscillator1, this.oscillator2); // this.oscillator1 = this.musicContext.createOscillator();
// this.oscillator1 = this.musicContext.createOscillator(); // // this.oscillator1.type = null;
// // this.oscillator1.type = null; // this.oscillator1.frequency.value = freq1;
// this.oscillator1.frequency.value = freq1; // this.gainNode = this.musicContext.createGain
// this.gainNode = this.musicContext.createGain // ? this.musicContext.createGain()
// ? this.musicContext.createGain() // : this.musicContext.createGainNode();
// : this.musicContext.createGainNode(); // this.oscillator1.connect(this.gainNode, 0, 0);
// this.oscillator1.connect(this.gainNode, 0, 0); // this.gainNode.connect(this.musicContext.destination);
// this.gainNode.connect(this.musicContext.destination); // this.gainNode.gain.value = 0.1;
// this.gainNode.gain.value = 0.1; // this.oscillator1.start
// this.oscillator1.start // ? this.oscillator1.start(0)
// ? this.oscillator1.start(0) // : this.oscillator1.noteOn(0);
// : this.oscillator1.noteOn(0); // // this.gainNode.connect(merger,0,1);
// // this.gainNode.connect(merger,0,1); // this.oscillator2 = this.musicContext.createOscillator();
// this.oscillator2 = this.musicContext.createOscillator(); // // this.oscillator2.type = null;
// // this.oscillator2.type = null; // this.oscillator2.frequency.value = freq2;
// this.oscillator2.frequency.value = freq2; // this.gainNode = this.musicContext.createGain
// this.gainNode = this.musicContext.createGain // ? this.musicContext.createGain()
// ? this.musicContext.createGain() // : this.musicContext.createGainNode();
// : this.musicContext.createGainNode(); // this.oscillator2.connect(this.gainNode);
// this.oscillator2.connect(this.gainNode); // this.gainNode.connect(this.musicContext.destination);
// this.gainNode.connect(this.musicContext.destination); // // this.gainNode.connect(merger,0,0);
// // this.gainNode.connect(merger,0,0); // this.gainNode.gain.value = 0.1;
// this.gainNode.gain.value = 0.1; // this.oscillator2.start
// this.oscillator2.start // ? this.oscillator2.start(0)
// ? this.oscillator2.start(0) // : this.oscillator2.noteOn(0);
// : this.oscillator2.noteOn(0); }
}
start() {
start() { // if (typeof this.oscillator1 != 'undefined') this.oscillator1.disconnect();
// if (typeof this.oscillator1 != 'undefined') this.oscillator1.disconnect(); // if (typeof this.oscillator2 != 'undefined') this.oscillator2.disconnect();
// if (typeof this.oscillator2 != 'undefined') this.oscillator2.disconnect(); // oscOn(
// oscOn( // parseFloat(document.getElementById('freq').value),
// parseFloat(document.getElementById('freq').value), // parseFloat(document.getElementById('freq2').value),
// parseFloat(document.getElementById('freq2').value), // );
// ); }
}
stop() {
stop() { // console.log('STOP', this.oscillator1, this.oscillator2);
// console.log('STOP', this.oscillator1, this.oscillator2); // console.log('FUNC', this.oscillator1?.disconnect, this.oscillator1?.stop);
// console.log('FUNC', this.oscillator1?.disconnect, this.oscillator1?.stop); // this.oscillator1?.disconnect();
// this.oscillator1?.disconnect(); // this.oscillator2?.disconnect();
// this.oscillator2?.disconnect(); // this.oscillator1?.stop();
// this.oscillator1?.stop(); // this.oscillator2?.stop();
// this.oscillator2?.stop(); // this.oscillator1 = null;
// this.oscillator1 = null; // this.oscillator2 = null;
// this.oscillator2 = null; }
}
uaEvents() {
uaEvents() { return {
return { progress: (e) => {
progress: (e) => { console.log('%c progress', 'font-size: 22px; color: green;', e);
console.log('%c progress', 'font-size: 22px; color: green;', e); // this.hangupButtonClick();
// this.hangupButtonClick(); // this.closeBxCall();
// this.closeBxCall();
// window.innerCallBegin(true);
// window.innerCallBegin(true); this.onSipStateChange.innerCallerModal({
this.onSipStateChange.innerCallerModal({ bool: true,
bool: true, type: 'connectingOutgoing',
type: 'connectingOutgoing', from: this?.callSession?._remote_identity?._uri?.user,
from: this?.callSession?._remote_identity?._uri?.user, });
}); this.setGuiPhoneState({
this.setGuiPhoneState({ funcName: 'modalState',
funcName: 'modalState', stateCode: 'connectingOutgoing',
stateCode: 'connectingOutgoing', funcParam: {
funcParam: { bool: false,
bool: false, callType: '',
callType: '', },
}, });
}); },
}, failed: (e) => {
failed: (e) => { console.log('%c failed', 'font-size: 22px; color: green;', e);
console.log('%c failed', 'font-size: 22px; color: green;', e); if (e?.cause) {
if (e?.cause) { toast.error(e?.cause);
toast.error(e?.cause); }
} // console.log('call failed with cause: ' + e.data);
// console.log('call failed with cause: ' + e.data); this.closeBxCall();
this.closeBxCall(); this.onSipStateChange.innerCallerModal({
this.onSipStateChange.innerCallerModal({ bool: false,
bool: false, type: null,
type: null, from: '',
from: '', });
}); this.stopInnerTimer();
this.stopInnerTimer(); if (e.cause == 'User Denied Media Access') {
if (e.cause == 'User Denied Media Access') { console.log('User_Danied_Media_Access');
console.log('User_Danied_Media_Access'); toast.error('Your micrafon is OFF', {
toast.error('Your micrafon is OFF', { style: {
style: { zIndex: '99999999999999999',
zIndex: '99999999999999999', },
}, });
});
window.navigator.mediaDevices
window.navigator.mediaDevices .getUserMedia({ audio: true })
.getUserMedia({audio: true}) .then(function (stream) {
.then(function (stream) { console.log(
console.log( 'User_Danied_Media_Access',
'User_Danied_Media_Access', 'You let me use your mic!',
'You let me use your mic!', );
); })
}) .catch(function (err) {
.catch(function (err) { console.log('User_Danied_Media_Access', 'No mic for you!');
console.log('User_Danied_Media_Access', 'No mic for you!'); });
}); }
} },
}, ended: (e) => {
ended: (e) => { console.log('%c ended', 'font-size: 22px; color: green;');
console.log('%c ended', 'font-size: 22px; color: green;'); this.closeBxCall();
this.closeBxCall(); this.onSipStateChange.innerCallerModal({
this.onSipStateChange.innerCallerModal({ bool: false,
bool: false, type: null,
type: null, from: '',
from: '', });
}); this.stopInnerTimer();
this.stopInnerTimer(); this.setGuiPhoneState({
this.setGuiPhoneState({ funcName: 'modalState',
funcName: 'modalState', funcParam: {
funcParam: { bool: false,
bool: false, callType: '',
callType: '', },
}, });
}); this.removeViExternalCard();
this.removeViExternalCard(); },
}, confirmed: (e) => {
confirmed: (e) => { console.log('%c confirmed', 'font-size: 22px; color: green;', e);
console.log('%c confirmed', 'font-size: 22px; color: green;', e); // console.log(`%c BXLOG:`, datas, 'background-color: red;');
// console.log(`%c BXLOG:`, datas, 'background-color: red;'); this.onSipStateChange.innerCallerModal({
this.onSipStateChange.innerCallerModal({ bool: true,
bool: true, type: 'connected',
type: 'connected', from: this?.callSession?._remote_identity?._uri?.user,
from: this?.callSession?._remote_identity?._uri?.user, });
}); this.startInnerTimer();
this.startInnerTimer(); this.setGuiPhoneState({
this.setGuiPhoneState({ funcName: 'modalState',
funcName: 'modalState', stateCode: 'connected',
stateCode: 'connected', funcParam: {
funcParam: { bool: true,
bool: true, callType: 'connected',
callType: 'connected', callFromName: 'Test',
callFromName: 'Test', },
}, });
}); },
}, };
}; }
}
isUaRunning() {
isUaRunning() { return (
return ( Boolean(typeof window.BX !== 'undefined') &&
Boolean(typeof window.BX !== 'undefined') && Boolean(window.localStorage.getItem(BX.bitrix_sessid() + '_mycall')) &&
Boolean(window.localStorage.getItem(BX.bitrix_sessid() + '_mycall')) && Boolean(window.localStorage.getItem('mycall'))
Boolean(window.localStorage.getItem('mycall')) );
); }
}
removeViExternalCard() {
removeViExternalCard() { // if (
// if ( // typeof BX !== 'undefined' &&
// typeof BX !== 'undefined' && // window.localStorage.getItem(BX.bitrix_sessid() + '_mycall') &&
// window.localStorage.getItem(BX.bitrix_sessid() + '_mycall') && // window.localStorage.getItem('mycall')
// window.localStorage.getItem('mycall') // ) {
// ) { // BX?.localStorage?.remove('viExternalCard');
// BX?.localStorage?.remove('viExternalCard'); // } else if (typeof BX !== 'undefined') {
// } else if (typeof BX !== 'undefined') { // BX?.localStorage?.remove('viExternalCard');
// BX?.localStorage?.remove('viExternalCard'); // }
// } }
}
startTimer() {
startTimer() { this.testTimer = setInterval(() => {
this.testTimer = setInterval(() => { this.timer.time = this.timer.time + 1;
this.timer.time = this.timer.time + 1; this.onSipStateChange.setDndTimer(this.timer.time);
this.onSipStateChange.setDndTimer(this.timer.time); }, 1000);
}, 1000); }
}
stopTimer() {
stopTimer() { clearInterval(this.testTimer);
clearInterval(this.testTimer); this.timer.time = 0;
this.timer.time = 0; this.onSipStateChange.setDndTimer(this.timer.time);
this.onSipStateChange.setDndTimer(this.timer.time); }
}
startInnerTimer() {
startInnerTimer() { this.testInnerTimer = setInterval(() => {
this.testInnerTimer = setInterval(() => { this.innerTimer.time = this.innerTimer.time + 1;
this.innerTimer.time = this.innerTimer.time + 1; this.onSipStateChange.innerTimer(this.innerTimer.time);
this.onSipStateChange.innerTimer(this.innerTimer.time); }, 1000);
}, 1000); }
}
stopInnerTimer() {
stopInnerTimer() { clearInterval(this.testInnerTimer);
clearInterval(this.testInnerTimer); this.innerTimer.time = 0;
this.innerTimer.time = 0; this.onSipStateChange.innerTimer(this.innerTimer.time);
this.onSipStateChange.innerTimer(this.innerTimer.time); }
}
showNotification(cbk) {
showNotification(cbk) { let callerId = this.callSession._remote_identity._uri.user;
let callerId = this.callSession._remote_identity._uri.user; const greeting = new Notification(`Звонок от ${callerId}`, {
const greeting = new Notification(`Звонок от ${callerId}`, { body: 'Answer Call',
body: 'Answer Call', icon: tugpng,
icon: tugpng, });
}); greeting.addEventListener('click', cbk);
greeting.addEventListener('click', cbk); }
}
onSoundType({ type, bool }) {
onSoundType({type, bool}) { this.ringtone.remove();
this.ringtone.remove(); this.waitRingTone.remove();
this.waitRingTone.remove(); this.pickSound.remove();
this.pickSound.remove(); if (this.played) {
if (this.played) { switch (type) {
switch (type) { case 'ring':
case 'ring': if (bool) {
if (bool) { this.ringtone.pause();
this.ringtone.pause(); this.ringtone.remove();
this.ringtone.remove();
this.ringtone.play();
this.ringtone.play(); } else {
} else { this.ringtone.pause();
this.ringtone.pause(); this.ringtone.remove();
this.ringtone.remove(); }
} break;
break; case 'wait':
case 'wait': if (bool) {
if (bool) { this.waitRingTone.pause();
this.waitRingTone.pause(); this.waitRingTone.remove();
this.waitRingTone.remove(); console.log(this.waitRingTone, 'sound waitRingTone');
console.log(this.waitRingTone, 'sound waitRingTone');
this.waitRingTone.play();
this.waitRingTone.play(); } else {
} else { this.waitRingTone.pause();
this.waitRingTone.pause(); this.waitRingTone.remove();
this.waitRingTone.remove(); }
} break;
break; case 'pick':
case 'pick': if (bool) {
if (bool) { this.pickSound.remove();
this.pickSound.remove(); this.pickSound.pause();
this.pickSound.pause();
this.pickSound.play();
this.pickSound.play(); } else {
} else { this.pickSound.pause();
this.pickSound.pause(); this.pickSound.remove();
this.pickSound.remove(); }
} break;
break; default:
default: console.error('onSoundType: Such a sound does not exist');
console.error('onSoundType: Such a sound does not exist'); break;
break; }
} }
} }
}
sipRegister = ({ number, secret, wsurl, isIce }) => {
sipRegister = ({number, secret, wsurl, isIce}) => { try {
try { if (window?.alovoice_setversion && packageJson?.version) {
if (window?.alovoice_setversion && packageJson?.version) { window.alovoice_setversion(packageJson?.version);
window.alovoice_setversion(packageJson?.version); }
} if (this.options) {
if (this.options) { if (typeof BX !== 'undefined')
if (typeof BX !== 'undefined') BX?.localStorage?.remove('viExternalCard');
BX?.localStorage?.remove('viExternalCard');
this.socket = new WebSocketInterface(`wss://${wsurl}/ws`);
this.socket = new WebSocketInterface(`wss://${wsurl}/ws`); this.callSession = false;
this.callSession = false; this.sipDomain = wsurl;
this.sipDomain = wsurl; console.log('ua_configure ', {
console.log('ua_configure ', { sockets: [this.socket],
sockets: [this.socket], uri: `sip:${number}@${wsurl}`,
uri: `sip:${number}@${wsurl}`, password: secret,
password: secret, stun_server: 'stun:stun.l.google.com:19302',
stun_server: 'stun:stun.l.google.com:19302', });
}); this.ua = new UA({
this.ua = new UA({ sockets: [this.socket],
sockets: [this.socket], uri: `sip:${number}@${wsurl}`,
uri: `sip:${number}@${wsurl}`, password: secret,
password: secret, stun_server: 'stun:stun.l.google.com:19302',
stun_server: 'stun:stun.l.google.com:19302', register_expires: 60,
register_expires: 60, });
}); if (typeof BX !== 'undefined') {
if (typeof BX !== 'undefined') { console.log(
console.log( 'setting_my_call =============================-----------',
'setting_my_call =============================-----------', );
); window.localStorage.setItem(
window.localStorage.setItem( BX.bitrix_sessid() + '_mycall',
BX.bitrix_sessid() + '_mycall', this.ua.configuration.instance_id,
this.ua.configuration.instance_id, );
); window.localStorage.setItem(
window.localStorage.setItem( 'mycall',
'mycall', this.ua.configuration.instance_id,
this.ua.configuration.instance_id, );
); }
}
this.ua.on('connected', (e) => {
this.ua.on('connected', (e) => { console.log(
console.log( '%c sip_register [connected]: ',
'%c sip_register [connected]: ', 'font-size: 22px; color: yellow;',
'font-size: 22px; color: yellow;', e,
e, );
); });
});
this.ua.on('disconnected', (e) => { this.ua.on('disconnected', (e) => {
this.onSipStateChange.dynamicValue('pending'); this.onSipStateChange.dynamicValue('pending');
console.log( console.log(
'%c sip_register [disconnected]: ', '%c sip_register [disconnected]: ',
'font-size: 22px; color: yellow;', 'font-size: 22px; color: yellow;',
e, e,
); );
}); });
this.ua.on('registered', (e) => { this.ua.on('registered', (e) => {
this.onSipStateChange.dynamicValue('connected'); this.onSipStateChange.dynamicValue('connected');
console.log( console.log(
'%c sip_register [registered]: ', '%c sip_register [registered]: ',
'font-size: 22px; color: yellow;', 'font-size: 22px; color: yellow;',
e, e,
); );
}); });
this.ua.on('unregistered', (e) => { this.ua.on('unregistered', (e) => {
console.log( console.log(
'%c sip_register [unregistered]: ', '%c sip_register [unregistered]: ',
'font-size: 22px; color: yellow;', 'font-size: 22px; color: yellow;',
e, e,
); );
}); });
this.ua.on('registrationFailed', (e) => { this.ua.on('registrationFailed', (e) => {
console.log( console.log(
'%c sip_register [registrationFailed]: ', '%c sip_register [registrationFailed]: ',
'font-size: 22px; color: yellow;', 'font-size: 22px; color: yellow;',
e, e,
); );
}); });
this.ua.on('connecting', (e) => { this.ua.on('connecting', (e) => {
console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e); console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e);
});
}); this.ua.on('registrationExpiring', (e) => {
this.ua.on('registrationExpiring', (e) => { console.log(
console.log( '%c registrationExpiring: ',
'%c registrationExpiring: ', 'font-size: 22px; color: yellow;',
'font-size: 22px; color: yellow;', e,
e, );
); this.ua.register();
this.ua.register(); });
}); this.ua.on('newMessage', (e) => {
this.ua.on('newMessage', (e) => { console.log('%c newMessage: ', 'font-size: 22px; color: yellow;', e);
console.log('%c newMessage: ', 'font-size: 22px; color: yellow;', e); });
}); this.ua.on('sipEvent', (e) => {
this.ua.on('sipEvent', (e) => { console.log('%c sipEvent: ', 'font-size: 22px; color: yellow;', e);
console.log('%c sipEvent: ', 'font-size: 22px; color: yellow;', e); });
}); this.ua.on('newOptions', (e) => {
this.ua.on('newOptions', (e) => { console.log('%c newOptions: ', 'font-size: 22px; color: yellow;', e);
console.log('%c newOptions: ', 'font-size: 22px; color: yellow;', e); });
});
this.ua.on('newRTCSession', (data) => {
this.ua.on('newRTCSession', (data) => { console.log(
console.log( '%c newRTCSession: ',
'%c newRTCSession: ', 'font-size: 22px; color: yellow;',
'font-size: 22px; color: yellow;', data,
data, );
); this.callSession = data.session;
this.callSession = data.session;
if (this.callSession && this.callSession.connection) {
if (this.callSession && this.callSession.connection) { this.callSession.connection.onaddstream = (e) => {
this.callSession.connection.onaddstream = (e) => { this.strmTrack = e.stream.getAudioTracks();
this.strmTrack = e.stream.getAudioTracks(); if (this.strmTrack[0]) {
if (this.strmTrack[0]) { this.remoteAudio.srcObject = new MediaStream([
this.remoteAudio.srcObject = new MediaStream([ this.strmTrack[0],
this.strmTrack[0], ]);
]); this.remoteAudio.play();
this.remoteAudio.play(); }
} };
}; }
}
this.setGuiPhoneState({
this.setGuiPhoneState({ funcName: 'modalState',
funcName: 'modalState', funcParam: {
funcParam: { bool: true,
bool: true, callType: 'incoming',
callType: 'incoming', },
}, });
});
this.onSipStateChange.innerCallerModal({
this.onSipStateChange.innerCallerModal({ bool: true,
bool: true, type: 'connectingIncoming',
type: 'connectingIncoming', from: this?.callSession?._remote_identity?._uri?.user,
from: this?.callSession?._remote_identity?._uri?.user, });
});
if (this.callSession.direction === 'incoming') {
if (this.callSession.direction === 'incoming') { let second;
console.log(
let second 'auto_answer is work: ',
console.log('auto_answer is work: ', this.globalHistoryData?.autoAnswer) this.globalHistoryData?.autoAnswer,
if (this.globalHistoryData?.autoAnswer) { );
switch (this.globalHistoryData?.autoAnswerSecond) { if (this.globalHistoryData?.autoAnswer) {
case 1: switch (this.globalHistoryData?.autoAnswerSecond) {
second = 1000 case 1:
break second = 1000;
case 50: break;
second = 5000 case 50:
break second = 5000;
case 100: break;
second = 10000 case 100:
break second = 10000;
default: break;
second = 0 default:
} second = 0;
console.log('auto_answer second: ', second) }
setTimeout(() => { console.log('auto_answer second: ', second);
console.log('auto_answer run boxDialer.answerButtonClick()') setTimeout(() => {
this.answerButtonClick() console.log('auto_answer run boxDialer.answerButtonClick()');
}, second) this.answerButtonClick();
} }, second);
}
this.showNotification(() => {
this.answerButtonClick(); this.showNotification(() => {
}); this.answerButtonClick();
this.onSoundType({type: 'ring', bool: true}); });
this.setGuiPhoneState({ this.onSoundType({ type: 'ring', bool: true });
funcName: 'modalState', this.setGuiPhoneState({
stateCode: 'connectingIncoming', funcName: 'modalState',
funcParam: { stateCode: 'connectingIncoming',
bool: true, funcParam: {
callType: 'incoming', bool: true,
}, callType: 'incoming',
}); },
});
// window.innerCallBegin();
// window.innerCallBegin();
this.callSession.on('progress', (e) => {
console.log( this.callSession.on('progress', (e) => {
'%c progress: ', console.log(
'font-size: 22px; color: yellow;', '%c progress: ',
e, 'font-size: 22px; color: yellow;',
); e,
this.setGuiPhoneState({ );
stateCode: 'incoming', this.setGuiPhoneState({
}); stateCode: 'incoming',
}); });
// incoming call here });
this.callSession.on('accepted', () => { // incoming call here
console.log( this.callSession.on('accepted', () => {
'%c newRTCSession accepted: ', console.log(
'font-size: 22px; color: yellow;', '%c newRTCSession accepted: ',
e, 'font-size: 22px; color: yellow;',
); e,
// the call has answered );
this.onSoundType({type: 'ring', bool: false}); // the call has answered
this.setGuiPhoneState({ this.onSoundType({ type: 'ring', bool: false });
funcName: 'modalState', this.setGuiPhoneState({
funcParam: { funcName: 'modalState',
bool: true, funcParam: {
callType: 'connected', bool: true,
}, callType: 'connected',
}); },
this.onSipStateChange.innerCallerModal({ });
bool: false, this.onSipStateChange.innerCallerModal({
type: '', bool: false,
from: '', type: '',
}); from: '',
}); });
this.callSession.on('confirmed', () => { });
console.log( this.callSession.on('confirmed', () => {
'%c newRTCSession confirmed: ', console.log(
'font-size: 22px; color: yellow;', '%c newRTCSession confirmed: ',
); 'font-size: 22px; color: yellow;',
// this handler will be called for incoming calls too );
console.log( // this handler will be called for incoming calls too
'%c incoming confirmed', console.log(
'font-size: 22px; color: yellow;', '%c incoming confirmed',
); 'font-size: 22px; color: yellow;',
this.onSipStateChange.innerCallerModal({ );
bool: true, this.onSipStateChange.innerCallerModal({
type: 'connected', bool: true,
from: this?.callSession?._remote_identity?._uri?.user, type: 'connected',
}); from: this?.callSession?._remote_identity?._uri?.user,
this.startInnerTimer(); });
this.setGuiPhoneState({ this.startInnerTimer();
funcName: 'modalState', this.setGuiPhoneState({
funcParam: { funcName: 'modalState',
bool: true, funcParam: {
callType: 'connected', bool: true,
}, callType: 'connected',
}); },
}); });
this.callSession.on('ended', () => { });
console.log( this.callSession.on('ended', () => {
'%c newRTCSession ended: ', console.log(
'font-size: 22px; color: yellow;', '%c newRTCSession ended: ',
); 'font-size: 22px; color: yellow;',
// the call has ended );
console.log('%c incoming end', 'font-size: 22px; color: yellow;'); // the call has ended
this.onSipStateChange.innerCallerModal({ console.log('%c incoming end', 'font-size: 22px; color: yellow;');
bool: false, this.onSipStateChange.innerCallerModal({
type: null, bool: false,
from: '', type: null,
}); from: '',
this.stopInnerTimer(); });
this.setGuiPhoneState({ this.stopInnerTimer();
funcName: 'modalState', this.setGuiPhoneState({
funcParam: { funcName: 'modalState',
bool: false, funcParam: {
callType: '', bool: false,
}, callType: '',
}); },
this.closeBxCall(); });
this.hangupButtonClick(); this.closeBxCall();
this.removeViExternalCard(); this.hangupButtonClick();
}); this.removeViExternalCard();
this.callSession.on('failed', () => { });
// unable to establish the call this.callSession.on('failed', () => {
console.log( // unable to establish the call
'%c incoming faile ', console.log(
'font-size: 22px; color: yellow;', '%c incoming faile ',
); 'font-size: 22px; color: yellow;',
this.onSipStateChange.innerCallerModal({ );
bool: false, this.onSipStateChange.innerCallerModal({
type: null, bool: false,
}); type: null,
this.stopInnerTimer(); });
this.onSoundType({type: 'ring', bool: false}); this.stopInnerTimer();
this.closeBxCall(); this.onSoundType({ type: 'ring', bool: false });
this.hangupButtonClick(); this.closeBxCall();
this.setGuiPhoneState({ this.hangupButtonClick();
funcName: 'modalState', this.setGuiPhoneState({
funcParam: { funcName: 'modalState',
bool: false, funcParam: {
callType: '', bool: false,
}, callType: '',
}); },
}); });
this.callSession.on('connecting', (e) => { });
console.log( this.callSession.on('connecting', (e) => {
'%c connecting: ', console.log(
'font-size: 22px; color: yellow;', '%c connecting: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('sending', (e) => { });
console.log('%c sending: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('sending', (e) => {
}); console.log('%c sending: ', 'font-size: 22px; color: yellow;', e);
});
this.callSession.on('newDTMF', (e) => {
console.log('%c newDTMF: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('newDTMF', (e) => {
}); console.log('%c newDTMF: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('newInfo', (e) => { });
console.log('%c newInfo: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('newInfo', (e) => {
}); console.log('%c newInfo: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('hold', (e) => { });
console.log( this.callSession.on('hold', (e) => {
'%c ___________hold: ', console.log(
'font-size: 22px; color: yellow;', '%c ___________hold: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('unhold', (e) => { });
console.log( this.callSession.on('unhold', (e) => {
'%c ___________unhold: ', console.log(
'font-size: 22px; color: yellow;', '%c ___________unhold: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('muted', (e) => { });
console.log('%c muted: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('muted', (e) => {
}); console.log('%c muted: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('unmuted', (e) => { });
console.log('%c unmuted: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('unmuted', (e) => {
}); console.log('%c unmuted: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('reinvite', (e) => { });
console.log( this.callSession.on('reinvite', (e) => {
'%c reinvite: ', console.log(
'font-size: 22px; color: yellow;', '%c reinvite: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('update', (e) => { });
console.log('%c update: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('update', (e) => {
}); console.log('%c update: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('refer', (e) => { });
console.log('%c refer: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('refer', (e) => {
}); console.log('%c refer: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('replaces', (e) => { });
console.log( this.callSession.on('replaces', (e) => {
'%c replaces: ', console.log(
'font-size: 22px; color: yellow;', '%c replaces: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('sdp', (e) => { });
console.log('%c sdp: ', 'font-size: 22px; color: yellow;', e); this.callSession.on('sdp', (e) => {
}); console.log('%c sdp: ', 'font-size: 22px; color: yellow;', e);
this.callSession.on('icecandidate', (e) => { });
console.log( this.callSession.on('icecandidate', (e) => {
'%c icecandidate: ', console.log(
'font-size: 22px; color: yellow;', '%c icecandidate: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('getusermediafailed', (e) => { });
console.log( this.callSession.on('getusermediafailed', (e) => {
'%c getusermediafailed: ', console.log(
'font-size: 22px; color: yellow;', '%c getusermediafailed: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on('peerconnection: createofferfailed', (e) => { });
console.log( this.callSession.on('peerconnection: createofferfailed', (e) => {
'%c peerconnection: createofferfailed: ', console.log(
'font-size: 22px; color: yellow;', '%c peerconnection: createofferfailed: ',
e, 'font-size: 22px; color: yellow;',
); e,
}); );
this.callSession.on( });
'peerconnection: setlocaldescriptionfailed', this.callSession.on(
(e) => { 'peerconnection: setlocaldescriptionfailed',
console.log( (e) => {
'%c peerconnection: setlocaldescriptionfailed: ', console.log(
'font-size: 22px; color: yellow;', '%c peerconnection: setlocaldescriptionfailed: ',
e, 'font-size: 22px; color: yellow;',
); e,
}, );
); },
this.callSession.on( );
'peerconnection: setremotedescriptionfailed', this.callSession.on(
(e) => { 'peerconnection: setremotedescriptionfailed',
console.log( (e) => {
'%c peerconnection: setremotedescriptionfailed: ', console.log(
'font-size: 22px; color: yellow;', '%c peerconnection: setremotedescriptionfailed: ',
e, 'font-size: 22px; color: yellow;',
); e,
}, );
); },
} );
}); }
});
this.ua.start();
} this.ua.start();
} catch (err) { }
console.log(`jsSip_error: `, err); } catch (err) {
} console.log(`jsSip_error: `, err);
}; }
};
getBxUiState(sipState) {
// if (sipState && !!sipState.length) sipState = this.sipState; getBxUiState(sipState) {
let uiStates = { // if (sipState && !!sipState.length) sipState = this.sipState;
incoming: '1', let uiStates = {
transferIncoming: '2', incoming: '1',
outgoing: '3', transferIncoming: '2',
connectingIncoming: '4', outgoing: '3',
connectingOutgoing: '5', connectingIncoming: '4',
connected: '6', connectingOutgoing: '5',
transferring: '7', connected: '6',
transferFailed: '8', transferring: '7',
transferConnected: '9', transferFailed: '8',
idle: '10', transferConnected: '9',
error: '11', idle: '10',
moneyError: '12', error: '11',
sipPhoneError: '13', moneyError: '12',
redial: '14', sipPhoneError: '13',
externalCard: '15', redial: '14',
}; externalCard: '15',
console.log('getBxUiState_inset: ', sipState, uiStates[sipState]); };
this.sipBxState = uiStates[sipState]; console.log('getBxUiState_inset: ', sipState, uiStates[sipState]);
return sipState && uiStates[sipState] ? uiStates[sipState] : ''; this.sipBxState = uiStates[sipState];
} return sipState && uiStates[sipState] ? uiStates[sipState] : '';
}
callBxMethods({bxMethodName, bxFuncParams, callback}) {
if (window.BX24 && window.BX24.placement) { callBxMethods({ bxMethodName, bxFuncParams, callback }) {
window?.BX24.placement.call(bxMethodName, bxFuncParams, callback); if (window.BX24 && window.BX24.placement) {
} else if (window.alovoicePhone && window.alovoicePhone.callMethods) { window?.BX24.placement.call(bxMethodName, bxFuncParams, callback);
window.alovoicePhone.callMethods[bxMethodName](bxFuncParams, callback); } else if (window.alovoicePhone && window.alovoicePhone.callMethods) {
} window.alovoicePhone.callMethods[bxMethodName](bxFuncParams, callback);
if (bxFuncParams.uiState == '5') { }
this.removeViExternalCard(); if (bxFuncParams.uiState == '5') {
} this.removeViExternalCard();
} }
}
closeBxCall() {
if (window.BX24 && window.BX24.placement) { closeBxCall() {
window?.BX24.placement.call('CallCardClose', {}, () => { if (window.BX24 && window.BX24.placement) {
}); window?.BX24.placement.call('CallCardClose', {}, () => {});
} else if ( } else if (
window.alovoicePhone && window.alovoicePhone &&
window.alovoicePhone.callMethods && window.alovoicePhone.callMethods &&
window.alovoicePhone.bodClose window.alovoicePhone.bodClose
) { ) {
window?.alovoicePhone?.bodClose(); window?.alovoicePhone?.bodClose();
} }
} }
setGuiPhoneState({stateCode, funcName, funcParam}) { setGuiPhoneState({ stateCode, funcName, funcParam }) {
if (window?.alovoice_wsphone && !!stateCode?.length) { console.log('boxdialer_setGuiPhoneState_states: ', { stateCode, funcName, funcParam })
console.log( if (window?.alovoice_wsphone && !!stateCode?.length) {
'this_getBxUiState_stateCode', console.log(
stateCode, 'this_getBxUiState_stateCode',
this.getBxUiState(stateCode), stateCode,
); this.getBxUiState(stateCode),
this.callBxMethods({ );
bxMethodName: 'CallCardSetUiState', this.callBxMethods({
bxFuncParams: {uiState: this.getBxUiState(stateCode)}, bxMethodName: 'CallCardSetUiState',
callback: (e) => { bxFuncParams: { uiState: this.getBxUiState(stateCode) },
console.log(e, `CallCardSetUiState method done ${e}`); callback: (e) => {
}, console.log(e, `CallCardSetUiState method done ${e}`);
}); },
} else if ( });
!window?.alovoice_wsphone && } else if (
!stateCode?.length && !window?.alovoice_wsphone &&
!!funcName && !stateCode?.length &&
this.onSipStateChange[funcName] !== 'undefined' !!funcName &&
) { this.onSipStateChange[funcName] !== 'undefined'
this.onSipStateChange[funcName](funcParam); ) {
} this.onSipStateChange[funcName](funcParam);
} }
}
bxLog(...datas) {
console.log(`%c BXLOG:`, datas, 'background-color: red;'); bxLog(...datas) {
} console.log(`%c BXLOG:`, datas, 'background-color: red;');
}
onSessionEvent({type, event}) {
} onSessionEvent({ type, event }) {}
selectUser() { selectUser() {
BX.Runtime.loadExtension('ui.entity-selector').then((exports) => { BX.Runtime.loadExtension('ui.entity-selector').then((exports) => {
const {Dialog, TagSelector} = exports; const { Dialog, TagSelector } = exports;
const dialog = new BX.UI.EntitySelector.Dialog({ const dialog = new BX.UI.EntitySelector.Dialog({
// targetNode: button, // targetNode: button,
enableSearch: true, enableSearch: true,
multiple: false, multiple: false,
context: 'MY_MODULE_CONTEXT', context: 'MY_MODULE_CONTEXT',
entities: [ entities: [
{ {
id: 'user', // пользователи id: 'user', // пользователи
options: {selectFields: ['ufPhoneInner']}, options: { selectFields: ['ufPhoneInner'] },
}, },
{ {
id: 'department', // структура компании: выбор только пользователей id: 'department', // структура компании: выбор только пользователей
}, },
], ],
events: { events: {
'_Item:onSelect': (event) => { '_Item:onSelect': (event) => {
const {item} = event.getData(); const { item } = event.getData();
const dialog = event.getTarget(); const dialog = event.getTarget();
const selectedItems = dialog.getSelectedItems(); const selectedItems = dialog.getSelectedItems();
if (item.customData.get('ufPhoneInner')) { if (item.customData.get('ufPhoneInner')) {
this.transferButtonClick(item.customData.get('ufPhoneInner')); this.transferButtonClick(item.customData.get('ufPhoneInner'));
} }
}, },
get 'Item:onSelect'() { get 'Item:onSelect'() {
return this['_Item:onSelect']; return this['_Item:onSelect'];
}, },
set 'Item:onSelect'(value) { set 'Item:onSelect'(value) {
this['_Item:onSelect'] = value; this['_Item:onSelect'] = value;
}, },
}, },
}); });
dialog.show(); dialog.show();
}); });
} }
// call_connected; // call_connected;
setSipStateChangeCallback(callback, funcName) { setSipStateChangeCallback(callback, funcName) {
this.onSipStateChange[funcName] = callback.bind(this); this.onSipStateChange[funcName] = callback.bind(this);
} }
sipHangUp() { sipHangUp() {
console.log('sipHangUp'); console.log('sipHangUp');
} }
sipUnRegister() { sipUnRegister() {
console.log('sipUnRegister'); console.log('sipUnRegister');
} }
sipTransfer() { sipTransfer() {
console.log('sipTransfer'); console.log('sipTransfer');
} }
initialized(phoneNumber) { initialized(phoneNumber) {
this.sipBxState = null; this.sipBxState = null;
this.callDirection = 'out'; this.callDirection = 'out';
let phoneNumberString = phoneNumber.toString(); let phoneNumberString = phoneNumber.toString();
if (phoneNumberString.length) { if (phoneNumberString.length) {
this.onSipStateChange.phoneModal(false); this.onSipStateChange.phoneModal(false);
this.options.extraHeaders = [`X-ALOVOICE-EXTNUM: ${this.extnum}`]; this.options.extraHeaders = [`X-ALOVOICE-EXTNUM: ${this.extnum}`];
this.callSession = this.ua.call( this.callSession = this.ua.call(
'sip:' + phoneNumberString + '@' + this.sipDomain, 'sip:' + phoneNumberString + '@' + this.sipDomain,
this.options, this.options,
); );
// this.callSession.connection.addEventListener('addstream', (event) => { // this.callSession.connection.addEventListener('addstream', (event) => {
// console.log('--== ss OUT STREAM: '); // console.log('--== ss OUT STREAM: ');
// this.remoteAudio.srcObject = event.stream; // this.remoteAudio.srcObject = event.stream;
// this.remoteAudio.play(); // this.remoteAudio.play();
// }); // });
} else { } else {
toast.error('Do not correct number', { toast.error('Do not correct number', {
style: { style: {
zIndex: '99999999999999999', zIndex: '99999999999999999',
}, },
}); });
} }
// this.onSipStateChange.phoneModal(false); // this.onSipStateChange.phoneModal(false);
} }
skipButtonClick() { skipButtonClick() {
this.onSoundType({type: 'ring', bool: false}); this.onSoundType({ type: 'ring', bool: false });
this.hangupButtonClick(); this.hangupButtonClick();
} }
answerButtonClick() { sipSendDTMF(code) {
this.onSoundType({type: 'ring', bool: false}); this.callSession.sendDTMF(code);
this.callSession?.answer(this.options); }
this.callSession.connection.addEventListener('addstream', (event) => {
this.remoteAudio.srcObject = event.stream; addCommentButtonClick() {
this.remoteAudio.play(); console.log('addCommentButtonClick');
}); }
}
muteButtonClick() {
sipSendDTMF(code) {
this.callSession.sendDTMF(code); let { audio } = this.callSession.isMuted();
} if (audio) {
this.callSession.unmute();
addCommentButtonClick() { console.log('muteButtonClick_unmute');
console.log('addCommentButtonClick');
} this.onSipStateChange['setCallEvents']({ callMute: false });
} else {
muteButtonClick() { this.callSession.mute();
let {audio} = this.callSession.isMuted(); console.log('muteButtonClick_mute');
if (audio) {
this.callSession.unmute(); this.onSipStateChange['setCallEvents']({ callMute: true });
console.log('muteButtonClick_unmute'); }
this.onSipStateChange['setCallEvents']({callMute: false}); }
} else {
this.callSession.mute(); holdButtonClick() {
console.log('muteButtonClick_mute'); let { local } = this.callSession.isOnHold();
console.log('local: ', local);
this.onSipStateChange['setCallEvents']({callMute: true}); if (local) {
} this.callSession.unhold();
} this.onSipStateChange['setCallEvents']({ callHold: false });
} else {
holdButtonClick() { this.callSession.hold();
let {local} = this.callSession.isOnHold();
console.log('local: ', local); this.onSipStateChange['setCallEvents']({ callHold: true });
if (local) { }
this.callSession.unhold(); }
this.onSipStateChange['setCallEvents']({callHold: false}); closeButtonClick() {
} else { this.hangupButtonClick();
this.callSession.hold(); }
this.onSipStateChange['setCallEvents']({callHold: true}); hangupButtonClick() {
} this.onSoundType({ type: 'ring', bool: false });
} this.onSipStateChange.innerCallerModal({
bool: false,
closeButtonClick() { type: null,
this.hangupButtonClick(); from: '',
} });
console.log(
hangupButtonClick() { 'hangupButtonClick========-----------',
this.onSoundType({type: 'ring', bool: false}); this.callSession._status,
this.onSipStateChange.innerCallerModal({ );
bool: false, if (this.callSession && this.callSession._status != '8')
type: null, this.callSession.terminate();
from: '', }
});
console.log( transferButtonClick(number) {
'hangupButtonClick========-----------', this.callSession.refer(number, this.options);
this.callSession._status, }
);
if (this.callSession && this.callSession._status != '8') cancelTransferButtonClick() {
this.callSession.terminate(); console.log('cancelTransferButtonClick');
} }
transferButtonClick(number) { completeTransferButtonClick() {
this.callSession.refer(number, this.options); console.log('completeTransferButtonClick');
} }
cancelTransferButtonClick() { nextButtonClick() {
console.log('cancelTransferButtonClick'); console.log('nextButtonClick');
} }
completeTransferButtonClick() { entityChanged() {
console.log('completeTransferButtonClick'); console.log('entityChanged');
} }
nextButtonClick() { qualityMeterClick() {
console.log('nextButtonClick'); console.log('qualityMeterClick');
} }
entityChanged() { dialpadButtonClick(c) {
console.log('entityChanged'); console.log('dialpadButtonClick');
} this.sipSendDTMF(c);
}
qualityMeterClick() {
console.log('qualityMeterClick'); notifyAdminButtonClick() {
} console.log('notifyAdminButtonClick');
}
dialpadButtonClick(c) {
console.log('dialpadButtonClick'); stateLog(state) {
this.sipSendDTMF(c); let stColor = state && state.slice(0, 4) == 'call' ? 'blue' : 'green';
} if (state && state.slice(0, 8) == 'register') {
stColor = 'yellow';
notifyAdminButtonClick() { }
console.log('notifyAdminButtonClick'); let css = 'color:' + stColor + '; font-size: 20px;';
}
console.log(' ---onSessionEvent EVENT: %c %s', css, state);
stateLog(state) { }
let stColor = state && state.slice(0, 4) == 'call' ? 'blue' : 'green';
if (state && state.slice(0, 8) == 'register') {
stColor = 'yellow';
}
let css = 'color:' + stColor + '; font-size: 20px;';
console.log(' ---onSessionEvent EVENT: %c %s', css, state);
}
} }
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