refactor part 1

public/chat.html

@@ -110,7 +110,9 @@
         <button class="hoverButton" onclick="{requestToggleCaptions()}">
           <i class="fas fa-closed-captioning fa-xs"></i>
         </button>
-        <div class="HoverState" id="caption-text">Start Live Caption</div>
+        <div class="HoverState" id="caption-button-text">
+          Start Live Caption
+        </div>
       </div>
 
       <div class="buttonContainer">

public/js/chat.js

@@ -21,6 +21,10 @@ const chatInput = document.querySelector(".compose input");
 const pipVideo = document.getElementById("remote-video");
 const remoteVideo = $("#remote-video");
 const captionText = $("#remote-video-text");
+const localVideoText = $("#local-video-text");
+const captionButtontext = $("#caption-button-text");
+const entireChat = $("#entire-chat");
+const chatZone = $("#chat-zone");
 
 var VideoChat = {
   connected: false,
@@ -45,19 +49,19 @@ var VideoChat = {
       })
       .then((stream) => {
         VideoChat.onMediaStream(stream);
-        $("#local-video-text").text("Drag Me");
+        localVideoText.text("Drag Me");
-        setTimeout(() => $("#local-video-text").fadeOut(), 5000);
+        setTimeout(() => localVideoText.fadeOut(), 5000);
       })
       .catch((error) => {
         logIt(error);
         logIt(
           "Failed to get local webcam video, check webcam privacy settings"
         );
+        // Keep trying to get user media
         setTimeout(VideoChat.requestMediaStream, 1000);
       });
   },
 
-  // The onMediaStream function receives the media stream as an argument.
   onMediaStream: function (stream) {
     logIt("onMediaStream");
     VideoChat.localStream = stream;
@@ -105,8 +109,7 @@ var VideoChat = {
 
   // Set up a callback to run when we have the ephemeral token to use Twilio's TURN server.
   startCall: function (event) {
-    logIt("startCall");
+    logIt("startCall >>> Sending token request...");
-    logIt(">>> Sending token request...");
     VideoChat.socket.on("token", VideoChat.onToken(VideoChat.createOffer));
     VideoChat.socket.emit("token", roomHash);
   },
@@ -170,20 +173,6 @@ var VideoChat = {
           case "disconnected":
           case "failed":
             logIt("failed/disconnected");
-            // dataChanel.close();
-            // logIt("Refreshing page...");
-            // function reloadScript(id) {
-            //   var $el = $("#" + id);
-            //   $("#" + id).replaceWith(
-            //     '<script id="' +
-            //       id +
-            //       '" src="' +
-            //       $el.prop("src") +
-            //       '"></script>'
-            //   );
-            // }
-            // reloadScript("chatJS");
-            // alert("reloding");
             location.reload();
             break;
           case "closed":
@@ -324,6 +313,7 @@ var VideoChat = {
   },
 };
 
+// Get name of browser session using user agent
 function getBrowserName() {
   var name = "Unknown";
   if (window.navigator.userAgent.indexOf("MSIE") !== -1) {
@@ -339,40 +329,47 @@ function getBrowserName() {
   return name;
 }
 
+// Basic logging class wrapper
 function logIt(message, error) {
   console.log(message);
 }
 
+// Called when socket receives message that room is full
 function chatRoomFull() {
   alert(
     "Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link"
   );
+  // Exit room and redirect
   window.location.href = "/pickname";
 }
 
+// Reposition local video to top left of remote video
 function rePositionLocalVideo() {
+  // Get position of remote video
   var bounds = remoteVideo.position();
   bounds.top += 10;
   bounds.left += 10;
+  // Set position of local video
   $("#moveable").css(bounds);
 }
 
+// Reposition captions to bottom of video
 function rePositionCaptions() {
+  // Get remote video position
   var bounds = remoteVideo.position();
   bounds.top -= 10;
   bounds.top = bounds.top + remoteVideo.height() - 1 * captionText.height();
+  // Reposition captions
   captionText.css(bounds);
 }
 
+// Called when window is resized
 function windowResized() {
   rePositionLocalVideo();
   rePositionCaptions();
 }
 
-//
 // Fullscreen
-//
-
 // function openFullscreen() {
 //   try {
 //     // var elem = document.getElementById("remote-video");
@@ -415,50 +412,40 @@ function windowResized() {
 //   }
 //   setTimeout(windowResized, 1000);
 // }
-
-//
 // End Fullscreen
-//
 
-//
 // Mute microphone
-//
-
 function muteMicrophone() {
   var audioTrack = null;
+  // Get audio track to mute
   VideoChat.peerConnection.getSenders().find(function (s) {
     if (s.track.kind === "audio") {
       audioTrack = s.track;
     }
   });
-
   isMuted = !audioTrack.enabled;
   audioTrack.enabled = isMuted;
   isMuted = !isMuted;
-
+  // select mic button and mic button text
-  const micIcon = document.getElementById("mic-icon");
+  const micButtonIcon = document.getElementById("mic-icon");
-  const micText = document.getElementById("mic-text");
+  const micButtonText = document.getElementById("mic-text");
+  // Update mute button text and icon
   if (isMuted) {
-    micIcon.classList.remove("fa-microphone");
+    micButtonIcon.classList.remove("fa-microphone");
-    micIcon.classList.add("fa-microphone-slash");
+    micButtonIcon.classList.add("fa-microphone-slash");
-    micText.innerText = "Unmute";
+    micButtonText.innerText = "Unmute";
   } else {
-    micIcon.classList.add("fa-microphone");
+    micButtonIcon.classList.add("fa-microphone");
-    micIcon.classList.remove("fa-microphone-slash");
+    micButtonIcon.classList.remove("fa-microphone-slash");
-    micText.innerText = "Mute";
+    micButtonText.innerText = "Mute";
   }
 }
-
-//
 // End Mute microphone
-//
 
-//
 // Pause Video
-//
-
 function pauseVideo() {
   var videoTrack = null;
+  // Get video track to pause
   VideoChat.peerConnection.getSenders().find(function (s) {
     if (s.track.kind === "video") {
       videoTrack = s.track;
@@ -467,27 +454,23 @@ function pauseVideo() {
   videoIsPaused = !videoTrack.enabled;
   videoTrack.enabled = videoIsPaused;
   videoIsPaused = !videoIsPaused;
-  const micIcon = document.getElementById("video-icon");
+  // select video button and video button text
-  const micText = document.getElementById("video-text");
+  const videoButtonIcon = document.getElementById("video-icon");
+  const videoButtonText = document.getElementById("video-text");
+  // update pause button icon and text
   if (videoIsPaused) {
-    micIcon.classList.remove("fa-video");
+    videoButtonIcon.classList.remove("fa-video");
-    micIcon.classList.add("fa-video-slash");
+    videoButtonIcon.classList.add("fa-video-slash");
-    micText.innerText = "Unpause Video";
+    videoButtonText.innerText = "Unpause Video";
   } else {
-    micIcon.classList.add("fa-video");
+    videoButtonIcon.classList.add("fa-video");
-    micIcon.classList.remove("fa-video-slash");
+    videoButtonIcon.classList.remove("fa-video-slash");
-    micText.innerText = "Pause Video";
+    videoButtonText.innerText = "Pause Video";
   }
 }
-
-//
 // End pause Video
-//
 
-//
 // Swap camera / screen share
-//
-
 function swap() {
   if (!VideoChat.connected) {
     alert("You must join a call before you can share your screen.");
@@ -500,20 +483,13 @@ function swap() {
     Snackbar.show({
       text:
         "Please allow screen share. Click the middle of the picture above and then press share.",
-      // actionText: "Show Me How",
       width: "400px",
       pos: "bottom-center",
       actionTextColor: "#616161",
       duration: 50000,
-
-      // onActionClick: function (element) {
-      //   window.open(
-      //     "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",
-      //     "_blank"
-      //   );
-      // },
     });
 
+    // Request screen share
     navigator.mediaDevices
       .getDisplayMedia({
         video: true,
@@ -565,38 +541,42 @@ function switchStreamHelper(stream) {
   }
   VideoChat.localStream = videoTrack;
   VideoChat.localVideo.srcObject = stream;
+  // Unpause video on swap
   if (videoIsPaused) {
     pauseVideo();
   }
 }
-
-//
 // End swap camera / screen share
-//
 
-//
 // Live caption
-//
+// Request captions from other user, toggles state
-
 function requestToggleCaptions() {
+  // Handle requesting captions before connected
   if (!VideoChat.connected) {
     alert("You must be connected to a peer to use Live Caption");
     return;
   }
   if (receivingCaptions) {
     captionText.text("").fadeOut();
-    $("#caption-text").text("Start Live Caption");
+    captionButtontext.text("Start Live Caption");
     receivingCaptions = false;
   } else {
-    alert(
+    Snackbar.show({
-      "This is an experimental feature. Live transcription requires the other user to have chrome."
+      text:
-    );
+        "This is an experimental feature. Live caption requires the other user to be using Chrome",
-    $("#caption-text").text("End Live Caption");
+      width: "400px",
+      pos: "bottom-center",
+      actionTextColor: "#616161",
+      duration: 10000,
+    });
+    captionButtontext.text("End Live Caption");
     receivingCaptions = true;
   }
+  // Send request to get captions over data channel
   dataChanel.send("tog:");
 }
 
+// Start/stop sending captions to other user
 function toggleSendCaptions() {
   if (sendingCaptions) {
     sendingCaptions = false;
@@ -607,29 +587,26 @@ function toggleSendCaptions() {
   }
 }
 
+// Start speech recognition
 function startSpeech() {
   try {
     var SpeechRecognition =
       window.SpeechRecognition || window.webkitSpeechRecognition;
-    var recognition = new SpeechRecognition();
+    VideoChat.recognition = new SpeechRecognition();
-    VideoChat.recognition = recognition;
   } catch (e) {
     sendingCaptions = false;
     logIt(e);
     logIt("error importing speech library");
+    // Alert other user that they cannon use live caption
     dataChanel.send("cap:notusingchrome");
     return;
   }
-
-  // If false, the recording will stop after a few seconds of silence.
-  // When true, the silence period is longer (about 15 seconds),
-  // allowing us to keep recording even when the user pauses.
-  recognition.continuous = true;
-  recognition.interimResults = true;
   // recognition.maxAlternatives = 3;
-
+  VideoChat.recognition.continuous = true;
+  // Show results that aren't final
+  VideoChat.recognition.interimResults = true;
   var finalTranscript;
-  recognition.onresult = (event) => {
+  VideoChat.recognition.onresult = (event) => {
     let interimTranscript = "";
     for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
       var transcript = event.results[i][0].transcript;
@@ -638,6 +615,8 @@ function startSpeech() {
       } else {
         interimTranscript += transcript;
         var charsToKeep = interimTranscript.length % 100;
+        // Send captions over data chanel,
+        // subtracting as many complete 100 char slices from start
         dataChanel.send(
           "cap:" +
             interimTranscript.substring(interimTranscript.length - charsToKeep)
@@ -645,117 +624,105 @@ function startSpeech() {
       }
     }
   };
-
+  VideoChat.recognition.onend = function () {
-  recognition.onstart = function () {
+    logIt("on speech recording end");
-    console.log("recording on");
+    // Restart speech recognition if user has not stopped it
-  };
-
-  recognition.onspeechend = function () {
-    console.log("on speech end");
-  };
-
-  recognition.onerror = function (event) {
-    if (event.error === "no-speech") {
-      console.log("no speech detected");
-    }
-  };
-
-  recognition.onend = function () {
-    console.log("on end");
-    console.log(sendingCaptions);
     if (sendingCaptions) {
       startSpeech();
     } else {
       VideoChat.recognition.stop();
     }
   };
-
+  VideoChat.recognition.start();
-  recognition.start();
 }
 
+// Recieve captions over datachannel
 function recieveCaptions(captions) {
   if (receivingCaptions) {
     captionText.text("").fadeIn();
   } else {
     captionText.text("").fadeOut();
   }
+  // Other user is not using chrome
   if (captions === "notusingchrome") {
     alert(
       "Other caller must be using chrome for this feature to work. Live Caption turned off."
     );
     receivingCaptions = false;
     captionText.text("").fadeOut();
-    $("#caption-text").text("Start Live Caption");
+    captionButtontext.text("Start Live Caption");
     return;
   }
   captionText.text(captions);
   rePositionCaptions();
 }
-
-//
 // End Live caption
-//
 
-//
+// Text Chat
-// Chat
+// Add text message to chat screen on page
-//
+function addMessageToScreen(msg) {
-
-chatInput.addEventListener("keypress", function (event) {
-  if (event.keyCode === 13) {
-    event.preventDefault();
-    var msg = chatInput.value;
-    msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    dataChanel.send("mes:" + msg);
   $(".chat-messages").append(
     '<div class="message-item customer cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
-        msg.autoLink() +
+      msg +
       "</div></div></div>"
   );
-    $("#chat-zone").scrollTop($("#chat-zone")[0].scrollHeight);
+}
+
+// Listen for enter press on chat input
+chatInput.addEventListener("keypress", function (event) {
+  if (event.keyCode === 13) {
+    // Prevent page refresh on enter
+    event.preventDefault();
+    var msg = chatInput.value;
+    // Prevent cross site scripting
+    msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    // Make links clickable
+    msg = msg.autoLink();
+    // Send message over data channel
+    dataChanel.send("mes:" + msg);
+    // Add message to screen
+    addMessageToScreen(msg);
+    // Auto scroll chat down
+    chatZone.scrollTop(chatZone[0].scrollHeight);
+    // Clear chat input
     chatInput.value = "";
   }
 });
 
+// Called when a message is recieved over the dataChannel
 function handleRecieveMessage(msg) {
-  msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  // Add message to screen
-  $(".chat-messages").append(
+  addMessageToScreen(msg);
-    '<div class="message-item moderator cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
+  // Auto scroll chat down
-      msg.autoLink() +
+  chatZone.scrollTop(chatZone[0].scrollHeight);
-      "</div></div></div>"
+  // Show chat if hidden
-  );
+  if (entireChat.is(":hidden")) {
-  $("#chat-zone").scrollTop($("#chat-zone")[0].scrollHeight);
-  if ($("#entire-chat").is(":hidden")) {
     toggleChat();
   }
 }
 
+// Show and hide chat
 function toggleChat() {
-  var entireChat = $("#entire-chat");
   var chatIcon = document.getElementById("chat-icon");
   var chatText = $("#chat-text");
   if (entireChat.is(":visible")) {
     entireChat.fadeOut();
+    // Update show chat buttton
     chatText.text("Show Chat");
     chatIcon.classList.remove("fa-comment-slash");
     chatIcon.classList.add("fa-comment");
   } else {
     entireChat.fadeIn();
+    // Update show chat buttton
     chatText.text("Hide Chat");
     chatIcon.classList.remove("fa-comment");
     chatIcon.classList.add("fa-comment-slash");
   }
 }
+// End Text chat
 
-//
-// End chat
-//
-
-//
 //Picture in picture
-//
-
 function togglePictureInPicture() {
-  // pipVideo.webkitSetPresentationMode("picture-in-picture");
   if (
     "pictureInPictureEnabled" in document ||
     pipVideo.webkitSetPresentationMode
@@ -782,27 +749,17 @@ function togglePictureInPicture() {
     );
   }
 }
-// pipVideo.addEventListener("enterpictureinpicture", () => {
-//   $("#pip-text").text("Exit Picture in Picture");
-//   alert("enter pip");
-// });
-//
-// pipVideo.addEventListener("leavepictureinpicture", () => {
-//   $("#pip-text").text("Enter Picture in Picture");
-//   alert("exit pip");
-// });
-//
 //Picture in picture
-//
 
 function startUp() {
+  // Redirect mobile browsers
   if (
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
       navigator.userAgent
     )
   ) {
     alert(
-      "Zipcall is not currently supported on mobile. Please try again on dekstop."
+      "Zipcall is not currently supported on mobile. Please try again on desktop."
     );
     window.location.href = "/notsupported";
   }
@@ -814,23 +771,25 @@ function startUp() {
     window.location.href = "/notsupported";
   }
 
+  // Set tab title
   document.title = "Zipcall - " + url.substring(url.lastIndexOf("/") + 1);
 
   // get webcam on load
   VideoChat.requestMediaStream();
 
+  // Captions hidden by default
   captionText.text("").fadeOut();
 
+  // Make local video draggable
   $("#moveable").draggable({ containment: "window" });
 
+  // Hide button labels on load
   $(".HoverState").hide();
 
-  $("#entire-chat").hide();
+  // Text chat hidden by default
+  entireChat.hide();
 
-  //
   // Show hide button labels on hover
-  //
-
   $(document).ready(function () {
     $(".hoverButton").mouseover(function () {
       $(".HoverState").hide();
@@ -841,16 +800,8 @@ function startUp() {
     });
   });
 
-  //
-  // End show hide button labels on hover
-  //
-
-  //
   // Fade out / show UI on mouse move
-  //
-
   var timedelay = 1;
-
   function delayCheck() {
     if (timedelay === 5) {
       $(".multi-button").fadeOut();
@@ -859,7 +810,6 @@ function startUp() {
     }
     timedelay = timedelay + 1;
   }
-
   $(document).mousemove(function () {
     $(".multi-button").fadeIn();
     $("#header").fadeIn();
@@ -869,10 +819,6 @@ function startUp() {
   });
   _delay = setInterval(delayCheck, 500);
 
-  //
-  // End Fade out / show UI on mouse move
-  //
-
   // Show accept webcam snackbar
   Snackbar.show({
     text: "Please allow microphone and webcam access",
@@ -889,9 +835,13 @@ function startUp() {
     },
   });
 
+  // Set caption text on start
   captionText.text("Waiting for other user to join...").fadeIn();
+
+  // Reposition captions on start
   rePositionCaptions();
 
+  // On change media devices refresh page and switch to system default
   navigator.mediaDevices.ondevicechange = () => window.location.reload();
 }