From 004ec973ad985bd153e2b6c67bd07b016b3cf67e Mon Sep 17 00:00:00 2001
From: Mathieu Dombrock <matdombrock@gmail.com>
Date: Sun, 26 Feb 2023 18:44:13 -0800
Subject: [PATCH] cleanup

---
 client/index.html | 16 ++++++----
 client/webrtc.js  | 76 ++++++++++++++++++++++++++++++-----------------
 2 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/client/index.html b/client/index.html
index 9340202..aa72d89 100755
--- a/client/index.html
+++ b/client/index.html
@@ -16,17 +16,18 @@
       <input type="button" id="dbg" onclick="showStatus(true)" value="DBG"></input>
       <input type="button" id="start" onclick="start(true)" value="Connect"></input>
     </div>
-      <div id="chatWrap" class="chat-wrap" style="visibility:hidden">
+      <div id="chatWrap" class="chat-wrap" style="display:none;">
 	<div id="msgArea" class="msg-area">
 	  MESSAG AREA<br>
 	</div>
 	<div class="chat-input">
-	  <input type="text" id="chatInput" placeholder="Write a message...">
+	  <!--<input type="text" id="chatInput" placeholder="Write a message...">-->
+	  <textarea id="chatInput" placeholder="Write a message..."></textarea>	
 	  <br><br>
 	  <input type="button" id="send" onclick="sendMsg()" value="send"></input>
 	</div>
       </div>
-    <div id="statusWrap" class="status-wrap" style="visibility: hidden">
+    <div id="statusWrap" class="status-wrap" style="display:none;">
       Status: <span id="status">Page Loaded</span>
     </div>
 
@@ -58,7 +59,8 @@
     input[type="button"]:hover{
       background: var(--accent2);
     }
-    input[type="text"]{
+    /*input[type="text"]{*/
+    textarea{
       background: rgb(45,45,45);
       color:white;
       font-size:1.1rem;
@@ -66,6 +68,7 @@
       border: 2px solid white;
       text-align:left;
       width:calc(100% - 1rem);
+      resize: vertical;
     }
     .rnd{
       border-radius:0.5rem;
@@ -103,9 +106,10 @@
     }
     .msg-area{
       background: rgb(65,65,65);
-      padding:1rem;
-      height: 360px;
+      padding: 1rem;
+      height: 4.5rem;
       overflow-y: scroll;
+      resize: vertical;
     }
     .chat-input{
     	text-align:right;
diff --git a/client/webrtc.js b/client/webrtc.js
index d272ede..c86056e 100755
--- a/client/webrtc.js
+++ b/client/webrtc.js
@@ -9,6 +9,8 @@ let _s = {
   statusLog: ''
 };
 
+let _dom = {};
+
 const peerConnectionConfig = {
   'iceServers': [
     {'urls': 'stun:stun.stunprotocol.org:3478'},
@@ -17,13 +19,14 @@ const peerConnectionConfig = {
 };
 
 function pageReady() {
+  setupDOM();
   showStatus(false);
   setStatus('Page Ready');
   _s.uuid = createUUID();
-  document.getElementById('uuid').innerHTML = 'UUID: '+_s.uuid;
+  _dom.uuid.innerHTML = 'UUID: '+_s.uuid;
 
-  _s.localVideo = document.getElementById('localVideo');
-  _s.remoteVideo = document.getElementById('remoteVideo');
+  _s.localVideo = _dom.localVideo;
+  _s.remoteVideo = _dom.remoteVideo;
 
   _s.serverConnection = new WebSocket('wss://' + window.location.hostname + ':8443');
   _s.serverConnection.onmessage = gotMessageFromServer;
@@ -33,45 +36,61 @@ function pageReady() {
     audio: true,
   };
 
-  document.getElementById('chatInput').addEventListener("keypress", function(event) {
-    if (event.key === "Enter") {
+  _dom.chatInput.addEventListener("keypress", function(event) {
+    if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
-      document.getElementById("send").click();
+      _dom.send.click();
     }
   }); 
 
 
   if(navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
-  } else {
+  } 
+  else {
     alert('Your browser does not support getUserMedia API');
   }
 }
 
+function setupDOM(){
+  _dom = {
+    localVideo: document.getElementById('localVideo'),
+    remoteVideo: document.getElementById('remoteVideo'),
+    uuid: document.getElementById('uuid'),
+    chatInput: document.getElementById('chatInput'),
+    statusWrap: document.getElementById('statusWrap'),
+    status: document.getElementById('status'),
+    chatWrap: document.getElementById('chatWrap'),
+    msgArea: document.getElementById('msgArea'),
+    send: document.getElementById('send'),
+  };
+}
+
 function showStatus(show=true){
-  document.getElementById('statusWrap').style.visibility = show ? 'visible' : 'hidden';
+  _dom.statusWrap.style.display = show ? 'block' : 'none';
 }
 
 function showChat(show=true){
-  document.getElementById('chatWrap').style.visibility = show ? 'visible' : 'hidden';
+  _dom.chatWrap.style.display = show ? 'block' : 'node';
 }
 
 function setStatus(msg){
   _s.statusLog = msg + '<br><br>' + _s.statusLog; 
-  document.getElementById('status').innerHTML = _s.statusLog;
+  _dom.status.innerHTML = _s.statusLog;
 }
 
 function sendMsg(){
-  const content = _s.uuid + ': ' + document.getElementById('chatInput').value;
+  const content = _s.uuid + ': ' + _dom.chatInput.value;
   _s.dataChannel.send(content);
   // write local
   writeMsg(content.replace(_s.uuid, 'You'));
-  document.getElementById('chatInput').value = '';
+  _dom.chatInput.value = '';
 }
 
 function writeMsg(msg){
-  //alert(msg);
-  const msgArea = document.getElementById('msgArea');
+  const msgArea = _dom.msgArea;
+  msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br>');
+  msg = '<br>' + msg;
   msgArea.innerHTML += msg + '<br>';
   msgArea.scrollTop = msgArea.scrollHeight;
 }
@@ -90,10 +109,9 @@ function setupDataChannel(){
       alert(e);
     }
     event.channel.onopen = (e) =>{
-      //alert('OPEN');
+      // The peer channel is open
     };
     event.channel.onclose = (e) =>{
-      //alert('CLOSE');
       sendMsg('>> Peer DisconnectedX!');
     }
   };
@@ -103,24 +121,21 @@ function setupDataChannel(){
   _s.dataChannel.onopen = () => {
     // The data channel is now open
     // You can now send data
-    // alert('DC OPEN');
     _s.dataChannel.send(_s.uuid + ': CONNECTED!');
     showChat(true);
   }
 
-  _s.dataChannel.onmessage = function(event){
+  _s.dataChannel.onmessage = (event) => {
     console.log(event);
     alert('GOT MSG');
   }
 
-  _s.dataChannel.onclose = function(event){
+  _s.dataChannel.onclose = (event) => {
     writeMsg('>> Peer Disconnected!');
   }
 
 }
 
-
-
 function start(isCaller) {
   setStatus('Starting');
   _s.peerConnection = new RTCPeerConnection(peerConnectionConfig);
@@ -137,21 +152,25 @@ function start(isCaller) {
 
 function gotMessageFromServer(message) {
   setStatus('Got Message From Server');
-  if(!_s.peerConnection) start(false);
+  if(!_s.peerConnection){start(false);}
   const signal = JSON.parse(message.data);
   setStatus('Signal: '+ JSON.stringify(signal, null, 2));
   // Ignore messages from ourself
-  if(signal.uuid == _s.uuid) return;
+  if(signal.uuid == _s.uuid){return;}
 
   if(signal.sdp) {
     _s.peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
       // Only create answers in response to offers
       if(signal.sdp.type == 'offer') {
-        _s.peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
+        _s.peerConnection.createAnswer().then(createdDescription)
+	  .catch(errorHandler);
       }
-    }).catch(errorHandler);
-  } else if(signal.ice) {
-    _s.peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
+    })
+    .catch(errorHandler);
+  } 
+  else if(signal.ice) {
+    _s.peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice))
+      .catch(errorHandler);
   }
 }
 
@@ -170,7 +189,8 @@ function createdDescription(description) {
 
   _s.peerConnection.setLocalDescription(description).then(function() {
     _s.serverConnection.send(JSON.stringify({'sdp': _s.peerConnection.localDescription, 'uuid': _s.uuid}));
-  }).catch(errorHandler);
+  })
+    .catch(errorHandler);
 }
 
 function gotRemoteStream(event) {