Update index.php

sipjs/index.php

@@ -21,15 +21,22 @@
 	the Initial Developer. All Rights Reserved.
 */
 
-//includes
-	require_once "root.php";
-	require_once "resources/require.php";
+//includes files
+	require_once dirname(__DIR__, 2) . "/resources/require.php";
+	require_once "resources/check_auth.php";
 
 //check permissions
-	require_once "resources/check_auth.php";
+	if (permission_exists('extension_add') || permission_exists('extension_edit')) {
+		//access granted
+	}
+	else {
+		echo "access denied";
+		exit;
+	}
 
-//show the header
-	require_once "resources/header.php";
+//add multi-lingual support
+	$language = new text;
+	$text = $language->get();
 
 //get the user ID
 	$sql = "SELECT d.domain_name,e.extension,e.password FROM ";
@@ -48,9 +55,17 @@
 		$user_password = $row['password'];
 	}
 
+//show the header
+	require_once "resources/header.php";
+
 ?>
 
+
 <style type="text/css">
+body {
+	background-color: #333;
+}
+
 .inner {
 	position: absolute;
 }
@@ -65,132 +80,334 @@
 </style>
 
 <div class="">
-   <div style="position: absolute;"><video id="remote_video" width="640" height="480" muted="muted"></video></div>
-   <div style="position: absolute;"><video id="local_video" width="160" height="120" muted="muted"></video></div>
+	<div style="position: absolute;"><video id="remote_video" width="640" height="480" style="display: none;"></video></div>
+	<div style="position: absolute;display: none;"><video id="local_video" width="160" height="120" style="display: none;"></video></div>
 	<!--<input id='send' name="send" type="button" class='btn btn-success' onclick="send();" value="Send" />-->
 </div>
-<div class="buttons">
-	<input id='answer' name="answer" type="button" class='btn btn-success' style="display: none;" onclick="answer();" value="Answer" />
-	<input id='decline' name="decline" type="button" class='btn btn-danger' style="display: none;" onclick="" value="Decline" />
 
-	<input id='mute_audio' name="mute_audio" type="button" class='btn btn-danger' style="display: none;" onclick="mute_audio();" value="Mute Audio" />
-	<input id='mute_video' name="mute_video" type="button" class='btn btn-danger' style="display: none;" onclick="mute_video();" value="Mute Video" />
+<audio id="ringtone" preload="auto" style="display: none;">
+	<source src="resources/ringtones/ringtone.mp3" type="audio/mpeg" loop="loop" />
+</audio>
 
-	<input id='unmute_audio' name="unmute_audio" type="button" class='btn btn-danger' style="display: none;" onclick="unmute_audio();" value="Unmute Audio" />
-	<input id='unmute_video' name="unmute_video" type="button" class='btn btn-danger' style="display: none;" onclick="unmute_video();" value="Unmute Video" />
+<script src="resources/sip-0.7.8.min.js"></script>
+<!--<script src="./resources/sip-0.21.2.js"></script>-->
+<!--<script type="module" src="./resources/app.php"></script>-->
 
-	<input id='end' name="end" type="button" class='btn btn-danger' style="display: none;" onclick="hangup();" value="End" />
-	<br />
-</div>
 
-<script src="resources/sip-0.7.8.min.js"></script>
 <script language="JavaScript" type="text/javascript">
 
+function sanitize_string(str) {
+	let temp = document.createElement('div');
+	temp.textContent = str;
+	return temp.innerHTML;
+}
+
 <?php
-echo "	var session;\n";
+echo "	let user_agent;\n";
+echo "	let session;\n";
+echo "	let answer_time;\n";
 echo "	var config = {\n";
 echo "		uri: '".$user_extension."@".$domain_name."',\n";
 echo "		ws_servers: 'wss://".$domain_name.":7443',\n";
 echo "		authorizationUser: '".$user_extension."',\n";
-echo "		password: atob('".base64_encode($user_password)."')\n";
+echo "		password: atob('".base64_encode($user_password)."'),\n";
+echo "		registerExpires: 120,\n";
+echo "		displayName: \"".$user_extension."\"\n";
 echo "	};\n";
 ?>
 
-	var user_agent = new SIP.UA(config);
+	user_agent = new SIP.UA(config);
 
 	//here you determine whether the call has video and audio
 	var options = {
 		media: {
 			constraints: {
 				audio: true,
-				video: true
+				video: false
 			},
 			render: {
 				remote: document.getElementById('remote_video'),
 				local: document.getElementById('local_video')
+			},
+			RTCConstraints: {
+				"optional": [{ 'DtlsSrtpKeyAgreement': 'true'} ]
 			}
 		}
 	};
-	//makes the call
-	//session = user_agent.invite('sip:[email protected]', options);
 
 	//answer
-	user_agent.on('invite', function (session) {
-		document.getElementById('dialplad').style.display = "none";
+	user_agent.on('invite', function (s) {
+
+		if (typeof session !== "undefined" && session.display_name != s.remoteIdentity.displayName) {
+			return;
+		}
+
+		//save the session to the global session
+		session = s;
+		session.display_name = session.remoteIdentity.displayName;
+		session.uri_user = session.remoteIdentity.uri.user;
+
+		//send the object to the browser console
+		//console.log(session);
+
+		//play the ringtone
+		document.getElementById('ringtone').play();
+
+		//add the caller ID
+		document.getElementById('ringing_caller_id').innerHTML = sanitize_string(session.display_name) + "<br /><a href='https://<?php echo $_SESSION['domain_name']; ?>/app/contacts/contacts.php?search=" + sanitize_string(session.uri_user) + "' target='_blank'>" + sanitize_string(session.uri_user) + "</a>";
+		document.getElementById('active_caller_id').innerHTML = sanitize_string(session.display_name) + "<br /><a href='https://<?php echo $_SESSION['domain_name']; ?>/app/contacts/contacts.php?search=" + sanitize_string(session.uri_user) + "' target='_blank'>" + sanitize_string(session.uri_user) + "</a>";
+
+		//show or hide the panels
+		document.getElementById('dialpad').style.display = "none";
+		document.getElementById('ringing').style.display = "inline";
+
+		//show or hide the buttons
 		document.getElementById('answer').style.display = "inline";
 		document.getElementById('decline').style.display = "inline";
-		document.getElementById('end').style.display = "none";
+		document.getElementById('hangup').style.display = "none";
 		document.getElementById('mute_audio').style.display = "inline";
-		document.getElementById('mute_video').style.display = "inline";
-		var answer = document.getElementById('answer');
-		answer.addEventListener("click", function () {
-			session.accept({
-				media: {
-					render: {
-						remote: document.getElementById('remote_video'),
-						local: document.getElementById('local_video')
-					}
-				}
-			});
+		document.getElementById('mute_video').style.display = "none";
+
+		session.on('cancel', function (s) {
+			//play the ringtone
+			document.getElementById('ringtone').pause();
 
-		}, false);
+			//show or hide the panels
+			document.getElementById('dialpad').style.display = "grid";
+			document.getElementById('ringing').style.display = "none";
+			document.getElementById('active').style.display = "none";
 
-		var decline = document.getElementById('decline');
-		decline.addEventListener("click", function () {
-			session.cancel();
-			document.getElementById('dialplad').style.display = "grid";
+			//show or hide the buttons
 			document.getElementById('answer').style.display = "none";
 			document.getElementById('decline').style.display = "none";
-			document.getElementById('end').style.display = "none";
-		}, false);
+			document.getElementById('hangup').style.display = "none";
 
-	});
+			//clear the caller id
+			document.getElementById('ringing_caller_id').innerHTML = '';
+			document.getElementById('active_caller_id').innerHTML = '';
 
-	user_agent.on('cancel', function (session) {
-		document.getElementById('dialplad').style.display = "grid";
-		document.getElementById('answer').style.display = "none";
-		document.getElementById('decline').style.display = "none";
-		document.getElementById('end').style.display = "none";
-		document.getElementById('dialpad').style.display = "inline";
-	});
+			//clear the answer time
+			answer_time = null;
+		});
+
+		session.on('bye', function (s) {
+			//play the ringtone
+			document.getElementById('ringtone').pause();
+
+			//show or hide the panels
+			document.getElementById('dialpad').style.display = "grid";
+			document.getElementById('ringing').style.display = "none";
+			document.getElementById('active').style.display = "none";
+
+			//show or hide the buttons
+			document.getElementById('answer').style.display = "none";
+			document.getElementById('decline').style.display = "none";
+			document.getElementById('hangup').style.display = "none";
+
+			//clear the answer time
+			answer_time = null;
+
+			//end the call
+			hangup();
+		});
+
+		session.on('failed', function (s) {
+			//play the ringtone
+			document.getElementById('ringtone').pause();
+
+			//show or hide the panels
+			document.getElementById('dialpad').style.display = "grid";
+			document.getElementById('ringing').style.display = "none";
+			document.getElementById('active').style.display = "none";
+
+			//show or hide the buttons
+			document.getElementById('answer').style.display = "none";
+			document.getElementById('decline').style.display = "none";
+			document.getElementById('hangup').style.display = "none";
+
+			//clear the answer time
+			answer_time = null;
+
+			//end the call
+			hangup();
+		});
+
+		session.on('rejected', function (s) {
+			//play the ringtone
+			document.getElementById('ringtone').pause();
+
+			//show or hide the panels
+			document.getElementById('dialpad').style.display = "grid";
+			document.getElementById('ringing').style.display = "none";
+			document.getElementById('active').style.display = "none";
+
+			//show or hide the buttons
+			document.getElementById('answer').style.display = "none";
+			document.getElementById('decline').style.display = "none";
+			document.getElementById('hangup').style.display = "none";
+
+			//clear the answer time
+			answer_time = null;
+
+			//end the call
+			hangup();
+		});
 
-	user_agent.on('bye', function (session) {
-		hangup();
 	});
 
 	function answer() {
-		document.getElementById('dialplad').style.display = "none";
+
+		//continue if the session exists
+		if (!session) {
+			return false;
+		}
+
+		//start the answer time
+		answer_time = Date.now();
+
+		//pause the ringtone
+		document.getElementById('ringtone').pause();
+
+		//answer the call
+		session.accept({
+			media: {
+				constraints: {
+					audio: true,
+					video: false
+				},
+				render: {
+					remote: document.getElementById('remote_video'),
+					local: document.getElementById('local_video')
+				},
+				RTCConstraints: {
+					"optional": [{ 'DtlsSrtpKeyAgreement': 'true'} ]
+				}
+			}
+		});
+
+		//show the or hide the panels
+		document.getElementById('dialpad').style.display = "none";
+		document.getElementById('ringing').style.display = "none";
+		document.getElementById('active').style.display = "grid";
+
+		//show or hide the buttons
 		document.getElementById('answer').style.display = "none";
 		document.getElementById('decline').style.display = "none";
-		document.getElementById('end').style.display = "inline";
+		document.getElementById('unhold').style.display = "none";
+		document.getElementById('hangup').style.display = "inline";
 	}
 
+	// Function to pad numbers with leading zeros
+	function pad(number, length) {
+		return (number < 10 ? '0' : '') + number;
+	}
+
+	//function to get the current time in seconds
+	function get_session_time() {
+		if (answer_time) {
+			// get the elapsed time using the answer time
+			elapsed_time = Date.now() - answer_time;
+
+			// Calculate hours, minutes, and seconds
+			var hours = Math.floor(elapsed_time / (1000 * 60 * 60));
+			var minutes = Math.floor((elapsed_time % (1000 * 60 * 60)) / (1000 * 60));
+			var seconds = Math.floor((elapsed_time % (1000 * 60)) / 1000);
+
+			// Format the time with leading zeros if necessary
+			var formatted_time = pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2);
+
+			// Update the element with id="elapsed-time" to display the formatted elapsed time
+			document.getElementById("answer_time").textContent = "Time Elapsed: " + formatted_time;
+		} else {
+			console.log('Call has not been answered yet');
+			return null;
+		}
+	}
+
+	//update elapsed time every second
+	setInterval(get_session_time, 1000);
+
+	//function used to end the session
 	function hangup() {
+
 		//session.bye();
 		session.terminate();
-		//session.cancel();
-		end();
+
+		//show or hide the panels
+		document.getElementById('dialpad').style.display = "grid";
+		document.getElementById('ringing').style.display = "none";
+		document.getElementById('active').style.display = "none";
+
+		//show or hide the buttons
+		document.getElementById('answer').style.display = "none";
+		document.getElementById('decline').style.display = "none";
+		document.getElementById('hangup').style.display = "none";
+
+		document.getElementById('local_video').style.display = "none";
+		document.getElementById('remote_video').style.display = "none";
+
+		document.getElementById('mute_audio').style.display = "none";
+		document.getElementById('mute_video').style.display = "none";
+		document.getElementById('unmute_audio').style.display = "none";
+		document.getElementById('unmute_video').style.display = "none";
+
+		//clear the caller id
+		document.getElementById('ringing_caller_id').innerHTML = '';
+		document.getElementById('active_caller_id').innerHTML = '';
+	}
+
+	function hold() {
+		document.getElementById('hold').style.display = "none";
+		document.getElementById('unhold').style.display = "grid";
+		session.hold();
+	}
+
+	function unhold() {
+		document.getElementById('hold').style.display = "grid";
+		document.getElementById('unhold').style.display = "none";
+		session.unhold();
 	}
 
 	function send() {
+
+		//get the destination number
 		destination = document.getElementById('destination').value;
-		document.getElementById('dialplad').style.display = "none";
+
+		//return immediately if there is no destination
+		if (destination.length == 0) {
+			return;
+		}
+
+		//show or hide the panels
+		document.getElementById('dialpad').style.display = "none";
+		document.getElementById('ringing').style.display = "none";
+		document.getElementById('active').style.display = "grid";
+
 		document.getElementById('answer').style.display = "none";
 		document.getElementById('decline').style.display = "none";
-		document.getElementById('end').style.display = "inline";
-		document.getElementById('local_video').style.display = "inline";
-		document.getElementById('remote_video').style.display = "inline";
+		document.getElementById('hangup').style.display = "inline";
+		//document.getElementById('local_video').style.display = "inline";
+		//document.getElementById('remote_video').style.display = "inline";
 		document.getElementById('mute_audio').style.display = "inline";
-		document.getElementById('mute_video').style.display = "inline";
+		//document.getElementById('mute_video').style.display = "inline";
+
+		//make a call using a sip invite
 		session = user_agent.invite('sip:'+destination+'@<?php echo $domain_name; ?>', options);
-		
+
 		var remote_video = document.getElementById("remote_video");
 		remote_video.setAttribute("controls","controls");
 
+		//start the answer time
+		answer_time = Date.now();
+
+		//set the caller ID to the destination
+		document.getElementById('ringing_caller_id').innerHTML = destination;
+		document.getElementById('active_caller_id').innerHTML = destination;
+
 	}
 
 	function mute_audio(destination) {
-		session.mute({audio: true}); 
+		session.mute({audio: true});
 		document.getElementById('mute_audio').style.display = "none";
 		document.getElementById('unmute_audio').style.display = "inline";
 	}
@@ -203,7 +420,7 @@ echo "	};\n";
 	}
 
 	function unmute_audio(destination) {
-		session.unmute({audio: true}); 
+		session.unmute({audio: true});
 		document.getElementById('mute_audio').style.display = "inline";
 		document.getElementById('unmute_audio').style.display = "none";
 	}
@@ -215,23 +432,6 @@ echo "	};\n";
 		document.getElementById('unmute_video').style.display = "none";
 	}
 
-	function end() {
-		document.getElementById('dialplad').style.display = "grid";
-		document.getElementById('answer').style.display = "none";
-		document.getElementById('decline').style.display = "none";
-		document.getElementById('end').style.display = "none";
-
-		document.getElementById('local_video').style.display = "none";
-		document.getElementById('remote_video').style.display = "none";
-		
-		document.getElementById('mute_audio').style.display = "none";
-		document.getElementById('mute_video').style.display = "none";
-		document.getElementById('unmute_audio').style.display = "none";
-		document.getElementById('unmute_video').style.display = "none";
-		
-		document.getElementById('dialpad').style.display = "grid";
-	}
-
 	function digit_add($digit) {
 		document.getElementById('destination').value = document.getElementById('destination').value + $digit;
 	}
@@ -245,9 +445,21 @@ echo "	};\n";
 		document.getElementById('destination').value = '';
 	}
 
+    //function to check for Enter key press
+	function send_enter_key(event) {
+		if (event.key === "Enter") {
+			send();
+		}
+	}
+
+	//add event listener for keydown event on input field
+	document.addEventListener("DOMContentLoaded", function() {
+		document.getElementById("destination").addEventListener("keydown", send_enter_key);
+	});
+
 </script>
 
-<div id='dialplad' class='dialpad' style='position:absolute;z-index:999;'>
+<div id='dialpad' class='dialpad' style='position:absolute;z-index:999;'>
 	<div style="align: left">
 		<input type="text" id="destination" name="destination" class="destination" value="" />
 	</div>
@@ -274,6 +486,32 @@ echo "	};\n";
 	</div>
 </div>
 
+<div id='ringing' class='dialpad' style='position:absolute;z-index:100;display: none;'>
+	<div id="ringing_caller_id" class="caller_id"></div>
+	<div class="dialpad_wrapper">
+		<div id='answer' class="button_box" onclick="answer();"><sup>Answer</sup></div>
+		<div id='decline' class="button_box" onclick="hangup();"><sup>Decline</sup></div>
+	</div>
+</div>
+
+<div id='active' class='dialpad' style='position:absolute;z-index:100;display: none;'>
+	<div id="active_caller_id" class="caller_id"></div>
+	<div id="answer_time" class="button_box"></div>
+	<div class="dialpad_wrapper">
+		<div id='mute_audio' class="button_box" onclick="mute_audio();">Mute Audio</div>
+		<div id='unmute_audio' style='display: none;' class="button_box" onclick="unmute_audio();">Unmute Audio</div>
+
+		<div id='hold' class="button_box" onclick="hold();">Hold</div>
+		<div id='unhold' class="button_box" style='display: none;' onclick="unhold();">Unhold</div>
+
+		<div id='hangup' class="button_box" onclick="hangup();">Hangup</div>
+
+		<div id='mute_video' class="button_box" style='display: none;' onclick="mute_video()">&nbsp;</div>
+		<div id='umute_video' class="button_box" style='display: none;' onclick="unmute_video()">&nbsp;</div>
+
+	</div>
+</div>
+
 <style type="text/css" style="display: none;">
 
 	.destination {
@@ -313,11 +551,30 @@ echo "	};\n";
 		font-size: 10px;
 	}
 
+	.button_box {
+		/*background-color: #333333;*/
+		background-color: rgba(0, 0, 0, 0.7);
+		color: #FFFFFF;
+		border-radius: 5px;
+		padding: 10px;
+		font-size: 12px;
+	}
+
+	.caller_id {
+		/*background-color: #333333;*/
+		text-align: center;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: #FFFFFF;
+		border-radius: 5px;
+		padding: 100px;
+		font-size: 12px;
+		margin-bottom: 50px;
+	}
+
 </style>
 
 <?php
 
 //show the footer
 	require_once "resources/footer.php";
-
 ?>