From 1b7a81a2ddd8ef614ffeb109189c60a65d3e89da Mon Sep 17 00:00:00 2001
From: ian ramzy <ianramzy@gmail.com>
Date: Sat, 28 Mar 2020 13:30:38 -0400
Subject: [PATCH] auto position local video, move btns to left, fix
 connected=true is good

---
 public/chat.html    | 15 ++++++-----
 public/css/chat.css | 61 +++++++++++++++++++++++++++++++--------------
 public/js/chat.js   | 24 +++++++++++++++---
 3 files changed, 72 insertions(+), 28 deletions(-)
diff --git a/public/chat.html b/public/chat.html
index 5049ec6..79a85fc 100644
--- a/public/chat.html
+++ b/public/chat.html
@@ -28,20 +28,23 @@
 </head>
 <body>
 
+
 <div id="header">
     <img src="/images/logo.svg" alt="Neon" width="48" height="48">
     <p>Neon Chat</p>
 </div>
 
-<p id="remote-video-text">Waiting for peer to connect...</p>
-<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
 
-
-<div id="moveable">
-    <p id="local-video-text">No webcam input</p>
-    <video id="local-video" autoplay muted></video>
+<div>
+    <p id="remote-video-text">Waiting for peer to connect...</p>
+    <video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
+    <div id="moveable">
+        <p id="local-video-text">No webcam input</p>
+        <video id="local-video" autoplay muted></video>
+    </div>
 </div>
 
+
 <div class="multi-button">
     <div class="buttonContainer">
         <button class="hoverButton" onclick="{muteMicrophone()}">
diff --git a/public/css/chat.css b/public/css/chat.css
index 72bbe87..bc57470 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -2,9 +2,33 @@
 
 
 /*Fade in page on load*/
-@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 /*Fade in page on load*/
 
 
@@ -12,16 +36,16 @@ body {
     background: #16171B;
     margin: 0;
     padding: 0;
-    opacity:0;  /* make things invisible upon start */
-    -webkit-animation:fadeIn ease-in 1;
-    -moz-animation:fadeIn ease-in 1;
-    animation:fadeIn ease-in 1;
-    -webkit-animation-fill-mode:forwards;
-    -moz-animation-fill-mode:forwards;
-    animation-fill-mode:forwards;
-    -webkit-animation-duration:0.3s;
-    -moz-animation-duration:0.3s;
-    animation-duration:0.3s;
+    opacity: 0; /* make things invisible upon start */
+    -webkit-animation: fadeIn ease-in 1;
+    -moz-animation: fadeIn ease-in 1;
+    animation: fadeIn ease-in 1;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 0.3s;
+    -moz-animation-duration: 0.3s;
+    animation-duration: 0.3s;
 }
 
 
@@ -52,14 +76,13 @@ video {
 
 #moveable {
     z-index: 100;
-    right: 14px;
-    bottom: 10px;
     position: absolute;
     width: 15%;
     cursor: move;
 
 }
 
+
 #moveable p {
     z-index: 101;
     position: absolute;
@@ -71,9 +94,9 @@ video {
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-weight: bold;
-    background: rgba(0, 0, 0, 0.38);
+    background: rgba(0, 0, 0, 0.12);
     padding: 10px;
-    transition: 0.5s;
+    border-radius: 5px;
 }
 
 #local-video {
@@ -144,7 +167,7 @@ button:hover {
 
 .multi-button {
     position: absolute;
-    right: calc(5vw - 40px);
+    left: calc(5vw - 40px);
     top: calc(50vh - 175px);
     z-index: 999;
     border-radius: 10px;
@@ -160,7 +183,7 @@ button:hover {
     color: white;
     font-family: "Heebo", sans-serif;
     position: absolute;
-    right: 70px;
+    left: 70px;
     white-space: nowrap;
     top: 25px;
     font-weight: bold;
diff --git a/public/js/chat.js b/public/js/chat.js
index b6ca6ad..0d62f47 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -204,7 +204,6 @@ var VideoChat = {
         logIt("createAnswer");
         return function () {
             logIt('>>> Creating answer...');
-            // VideoChat.connected = true;
             rtcOffer = new RTCSessionDescription(JSON.parse(offer));
             VideoChat.peerConnection.setRemoteDescription(rtcOffer);
             VideoChat.peerConnection.createAnswer(
@@ -237,8 +236,6 @@ var VideoChat = {
 
         var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
         VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
-        VideoChat.connected = true;
-        // should prolly move conneted = true to onaddstream
         VideoChat.localICECandidates.forEach(candidate => {
             // The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
             logIt(`>>> Sending local ICE candidate (${candidate.address})`);
@@ -257,7 +254,27 @@ var VideoChat = {
         VideoChat.remoteVideo.srcObject = event.stream;
         Snackbar.close();
         VideoChat.remoteVideo.style.background = 'none';
+        VideoChat.connected = true;
         $('#remote-video-text').text("");
+
+
+        var timesRun = 0;
+        var interval = setInterval(function(){
+            timesRun += 1;
+            if(timesRun === 20){
+                clearInterval(interval);
+            }
+            VideoChat.rePositionLocalVideo()
+        }, 300);
+
+
+    },
+
+    rePositionLocalVideo: function(){
+        var bounds = $("#remote-video").position();
+        bounds.top +=  10;
+        bounds.left +=  10;
+        $("#moveable").css(bounds)
     }
 };
 
@@ -425,3 +442,4 @@ $("#moveable").draggable({containment: 'window'});
 
 // auto get media
 VideoChat.requestMediaStream();
+VideoChat.rePositionLocalVideo()
