update-

package.json

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

src/components/CallHistoryInputDropdown/index.jsx

@@ -36,6 +36,10 @@ const CallHistoryInputDropdown = ({
 		}
 	}, [numberSelectHistory]);
 
+	useEffect(() => { }, [
+		
+	])
+
 	return (
 		<Block>
 			<Input
@@ -43,6 +47,7 @@ const CallHistoryInputDropdown = ({
 					setDefaultHistoryNumberHistory();
 					setModal(!modal);
 				}}
+				id='numbersDiv'
 				className='nocopy'
 				type='text'
 				value={inputValue}>

src/components/CallHistoryInputDropdown/style.js

@@ -8,24 +8,44 @@ const Block = styled.div`
 `;
 
 const Input = styled.div`
+	overflow-x: scroll;
+	overflow-y: hidden;
+
 	position: absolute;
 	top: 0;
 	left: 0;
 	margin: 0;
-	padding: 0;
 	box-sizing: border-box;
-	width: 100%;
+	width: 165px;
 	height: 100%;
 	max-height: 45px;
 	border-radius: 3px;
 	background-color: #fff;
 	border: 0;
-	padding: 0 35px 0 10px;
+	padding: 0 0 0 10px;
 	font-size: 22px;
 	color: #000;
 	display: flex;
 	align-items: center;
+	::-webkit-scrollbar {
+		height: 5px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #fff0;
+	}
 
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #abaaaa;
+		border-radius: 10px;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
 	:focus {
 		border-color: inherit;
 		-webkit-box-shadow: none;

src/components/ModalPhoneNumpad/index.jsx

@@ -41,7 +41,7 @@ const ModalPhoneNumpad = ({
 	}, [modalState.bool]);
 
 	const inputController = ({ value, type, from }) => {
-		boxDialer.onSoundType({ type: 'pick', bool: true });
+		// boxDialer.onSoundType({ type: 'pick', bool: true });
 		switch (type) {
 			case 'add':
 				if (
@@ -224,7 +224,7 @@ const ModalPhoneNumpad = ({
 					numberSelectHistory={numberSelectHistory}
 					setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
 				/>
-				{inputValue.length ? (
+				{inputValue?.length ? (
 					<Input.BackSpaceIcon
 						onClick={() => inputController({ type: 'delete', from: 'button' })}
 					/>
@@ -235,6 +235,11 @@ const ModalPhoneNumpad = ({
 			<ModalPhoneNumpadStyle.ButtonArea>
 				{numbers?.map((mapItem) => (
 					<NumberButton
+						onMouseDown={() =>
+							boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])
+						}
+						onMouseUp={() => boxDialer.stop()}
+						onMouseOut={() => boxDialer.stop()}
 						className='nocopy'
 						key={mapItem.id}
 						onClick={() => {

src/lib/boxDIaler.js

@@ -34,7 +34,18 @@ export class BoxDialer {
 	soundBool;
 	onSipStateChange = {};
 	callEvetsBoxDialer;
-	extnum
+	contextClass =
+		window.AudioContext ||
+		window.webkitAudioContext ||
+		window.mozAudioContext ||
+		window.oAudioContext ||
+		window.msAudioContext;
+	musicContext;
+	gainNode;
+	gainNode;
+	oscillator1;
+	oscillator2;
+	extnum;
 	timer = {
 		time: 0,
 		type: null,
@@ -81,8 +92,60 @@ export class BoxDialer {
 			eventHandlers: this.uaEvents(),
 			mediaConstraints: { audio: true, video: false },
 		};
+		if (this.contextClass) {
+			// Web Audio API is available.
+			this.musicContext = new this.contextClass();
+		}
 	}
 
+	dialTone(freq1, freq2) {
+		// merger = context.createChannelMerger(2);
+
+		this.oscillator1 = this.musicContext.createOscillator();
+		this.oscillator1.type = 0;
+		this.oscillator1.frequency.value = freq1;
+		this.gainNode = this.musicContext.createGain
+			? this.musicContext.createGain()
+			: this.musicContext.createGainNode();
+		this.oscillator1.connect(this.gainNode, 0, 0);
+		this.gainNode.connect(this.musicContext.destination);
+		this.gainNode.gain.value = 0.1;
+		this.oscillator1.start
+			? this.oscillator1.start(0)
+			: this.oscillator1.noteOn(0);
+
+		// this.gainNode.connect(merger,0,1);
+
+		this.oscillator2 = this.musicContext.createOscillator();
+		this.oscillator2.type = 0;
+		this.oscillator2.frequency.value = freq2;
+		this.gainNode = this.musicContext.createGain
+			? this.musicContext.createGain()
+			: this.musicContext.createGainNode();
+		this.oscillator2.connect(this.gainNode);
+		this.gainNode.connect(this.musicContext.destination);
+		// this.gainNode.connect(merger,0,0);
+
+		this.gainNode.gain.value = 0.1;
+		this.oscillator2.start
+			? this.oscillator2.start(0)
+			: this.oscillator2.noteOn(0);
+
+		// merger.connect(context.destination);
+	}
+	start() {
+		if (typeof this.oscillator1 != 'undefined') this.oscillator1.disconnect();
+		if (typeof this.oscillator2 != 'undefined') this.oscillator2.disconnect();
+		oscOn(
+			parseFloat(document.getElementById('freq').value),
+			parseFloat(document.getElementById('freq2').value),
+		);
+	}
+
+	stop() {
+		this.oscillator1?.disconnect();
+		this.oscillator2?.disconnect();
+	}
 	uaEvents() {
 		return {
 			progress: (e) => {
@@ -213,6 +276,9 @@ export class BoxDialer {
 	}
 
 	onSoundType({ type, bool }) {
+		this.ringtone.remove();
+		this.waitRingTone.remove();
+		this.pickSound.remove();
 		if (this.played) {
 			switch (type) {
 				case 'ring':
@@ -323,13 +389,6 @@ export class BoxDialer {
 						e,
 					);
 				});
-				this.ua.on('newRTCSession', (e) => {
-					console.log(
-						'%c newRTCSession: ',
-						'font-size: 22px; color: yellow;',
-						e,
-					);
-				});
 				this.ua.on('newMessage', (e) => {
 					console.log('%c newMessage: ', 'font-size: 22px; color: yellow;', e);
 				});
@@ -350,6 +409,15 @@ export class BoxDialer {
 							callType: 'connected',
 						},
 					});
+					data.session.connection.onaddstream = (e) => {
+						console.log('--== UA Conn Added STREAM: ', e);
+						let strmTrack = e.stream.getAudioTracks();
+						if (strmTrack[0]) {
+							let rmMediaStream = new MediaStream([strmTrack[0]]);
+							this.remoteAudio.srcObject = rmMediaStream;
+							this.remoteAudio.play();
+						}
+					};
 					// innerCallerModal;
 					this.onSipStateChange.innerCallerModal({
 						bool: true,

src/lib/numbers.js

@@ -8,6 +8,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [852.0, 1209.0],
 	},
 	{
 		id: 9,
@@ -16,6 +17,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [852.0, 1336.0],
 	},
 	{
 		id: 14,
@@ -24,6 +26,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [852.0, 1477.0],
 	},
 	{
 		id: 5,
@@ -32,6 +35,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [770.0, 1209.0],
 	},
 	{
 		id: 6,
@@ -40,6 +44,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [770.0, 1336.0],
 	},
 	{
 		id: 7,
@@ -48,6 +53,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [770.0, 1477.0],
 	},
 	{
 		id: 2,
@@ -56,6 +62,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [697.0, 1209.0],
 	},
 	{
 		id: 3,
@@ -64,6 +71,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [697.0, 1336.0],
 	},
 	{
 		id: 4,
@@ -72,6 +80,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [697.0, 1477.0],
 	},
 	{
 		id: 10,
@@ -80,6 +89,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [941.0, 1209.0],
 	},
 	{
 		id: 1,
@@ -88,6 +98,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [941.0, 1336.0],
 	},
 	{
 		id: 11,
@@ -96,6 +107,7 @@ const numbers = [
 		type: 'number',
 		style: {},
 		icon: null,
+		ringHz: [941.0, 1477.0],
 	},
 	// {
 	// 	id: 12,