layout overhaul, layered video

public/chat.html

@@ -5,6 +5,7 @@
     <title>Neon Chat</title>
     <link rel="shortcut icon" href="images/logo.svg">
     <link rel="stylesheet" href="../css/chat.css">
+    <link rel="stylesheet" href="../css/snackbar.css">
     <script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
     <meta property="og:title" content="Join your friends call - Neonchat">
@@ -28,8 +29,8 @@
 
 
 <div class="videos">
-    <video id="remote-video" height="500" autoplay ondblclick={openFullscreen()}></video>
+    <video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
-    <video id="local-video" height="150" autoplay muted></video>
+    <video id="local-video" autoplay muted></video>
 </div>
 
 

public/css/chat.css

@@ -1,141 +1,56 @@
 @import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
 
-
-.videos {
-    display: flex;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    align-items: center;
-}
-
 body {
     background: #16171B;
     margin: 0;
     padding: 0;
 }
 
-video {
+.videos {
-    background: #292B32;
+    height: 80vh;
-    margin: 0 5%;
+    width: 80vw;
-    box-sizing: border-box;
-    border-radius: 10px;
     padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+
+video {
+    /*background: #292B32;*/
+    background: #16171a;
 }
 
 
 #local-video {
     width: 20%;
     height: auto;
+    position: absolute;
+    z-index: 100;
+    right: 14px;
+    bottom: 10px;
+    border-radius: 20px;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
     background: #16171a;
 }
 
 #remote-video {
-    width: 70%;
+    max-height: 100%;
-    height: auto;
+    max-width: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    border-radius: 10px;
+    object-fit: cover;
     background-image: url(../images/loader.gif);
     background-size: 400px auto;
     background-repeat: no-repeat;
     background-position: center center;
-}
-
-
-.snackbar-container {
     box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
-    transition: all .5s ease;
-    transition-property: top, right, bottom, left, opacity;
-    font-family: "Heebo", sans-serif;
-    font-size: 14px;
-    min-height: 14px;
-    position: fixed;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #fff;
-    line-height: 22px;
-    padding: 18px 24px;
-    bottom: -100px;
-    top: -100px;
-    opacity: 0;
-    z-index: 9999
-}
 
-.snackbar-container .action {
-    background: inherit;
-    display: inline-block;
-    border: none;
-    font-size: inherit;
-    text-transform: uppercase;
-    color: #4caf50;
-    margin: 0 0 0 24px;
-    padding: 0;
-    min-width: min-content;
-    cursor: pointer
-}
-
-@media (min-width: 640px) {
-    .snackbar-container {
-        min-width: 288px;
-        max-width: 568px;
-        display: inline-flex;
-        border-radius: 2px;
-        margin: 24px
-    }
-}
-
-@media (max-width: 640px) {
-    .snackbar-container {
-        left: 0;
-        right: 0;
-        width: 100%
-    }
-}
-
-.snackbar-pos.bottom-center {
-    top: auto !important;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 0)
-}
-
-.snackbar-pos.bottom-left {
-    top: auto !important;
-    bottom: 0;
-    left: 0
-}
-
-.snackbar-pos.bottom-right {
-    top: auto !important;
-    bottom: 0;
-    right: 0
-}
-
-.snackbar-pos.top-left {
-    bottom: auto !important;
-    top: 0;
-    left: 0
-}
-
-.snackbar-pos.top-center {
-    bottom: auto !important;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, 0)
-}
-
-.snackbar-pos.top-right {
-    bottom: auto !important;
-    top: 0;
-    right: 0
-}
-
-@media (max-width: 640px) {
-    .snackbar-pos.bottom-center, .snackbar-pos.top-center {
-        left: 0;
-        transform: none
-    }
 }
 
 
@@ -154,16 +69,13 @@ button:hover {
     color: white;
     border-radius: 100px;
     background: #16171a;
-    /*box-shadow:  9px 9px 16px #1e1f21, -9px -9px 16px #2f3035;*/
-
 }
 
 .multi-button {
     position: absolute;
-    right: 50px;
+    right: calc(5vw - 40px);
-    top: 50px;
+    top: 10vh;
     z-index: 999;
-    /*border-radius: 50px;*/
     border-radius: 10px;
     background: #16171a;
     box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
@@ -171,7 +83,6 @@ button:hover {
     display: grid;
     grid-gap: 0.5rem;
     width: 50px;
-    margin-left: 200px;
 }
 
 .HoverState {
@@ -182,6 +93,9 @@ button:hover {
     white-space: nowrap;
     top: 25px;
     font-weight: bold;
+    background: #16171a;
+    padding: 10px;
+    border-radius: 10px;
 }
 
 .buttonContainer {

public/css/snackbar.css

@@ -0,0 +1,95 @@
+.snackbar-container {
+    box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
+    transition: all .5s ease;
+    transition-property: top, right, bottom, left, opacity;
+    font-family: "Heebo", sans-serif;
+    font-size: 14px;
+    min-height: 14px;
+    position: fixed;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #b4b4b4;
+    line-height: 22px;
+    padding: 18px 24px;
+    bottom: -100px;
+    top: -100px;
+    opacity: 0;
+    z-index: 9999
+}
+
+.snackbar-container .action {
+    background: inherit;
+    display: inline-block;
+    border: none;
+    font-size: inherit;
+    text-transform: uppercase;
+    color: #4caf50;
+    margin: 0 0 0 24px;
+    padding: 0;
+    min-width: min-content;
+    cursor: pointer
+}
+
+@media (min-width: 640px) {
+    .snackbar-container {
+        min-width: 288px;
+        max-width: 568px;
+        display: inline-flex;
+        border-radius: 5px;
+        margin: 24px
+    }
+}
+
+@media (max-width: 640px) {
+    .snackbar-container {
+        left: 0;
+        right: 0;
+        width: 100%
+    }
+}
+
+.snackbar-pos.bottom-center {
+    top: auto !important;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0)
+}
+
+.snackbar-pos.bottom-left {
+    top: auto !important;
+    bottom: 0;
+    left: 0
+}
+
+.snackbar-pos.bottom-right {
+    top: auto !important;
+    bottom: 0;
+    right: 0
+}
+
+.snackbar-pos.top-left {
+    bottom: auto !important;
+    top: 0;
+    left: 0
+}
+
+.snackbar-pos.top-center {
+    bottom: auto !important;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0)
+}
+
+.snackbar-pos.top-right {
+    bottom: auto !important;
+    top: 0;
+    right: 0
+}
+
+@media (max-width: 640px) {
+    .snackbar-pos.bottom-center, .snackbar-pos.top-center {
+        left: 0;
+        transform: none
+    }
+}

public/js/chat.js

@@ -93,7 +93,7 @@ var VideoChat = {
             pos: 'top-left',
             actionTextColor: '#8688ff',
             duration: 500000,
-            backgroundColor: '#292B32',
+            backgroundColor: '#16171a',
             onActionClick: function (element) {
                 var copyContent = window.location.href;
                 $('<input id="some-element">').val(copyContent).appendTo('body').select();
@@ -263,19 +263,37 @@ var VideoChat = {
         logIt('<<< Received new stream from remote. Adding it...');
         VideoChat.remoteVideo.srcObject = event.stream;
         Snackbar.close();
+        VideoChat.remoteVideo.style.background = 'none';
     }
 };
 
 
+var isFullscreen = false;
+
 function openFullscreen() {
-    if (VideoChat.remoteVideo.requestFullscreen) {
+    var elem = document.getElementsByClassName("videos")[0];
-        VideoChat.remoteVideo.requestFullscreen();
+    if (!isFullscreen) {
-    } else if (VideoChat.remoteVideo.mozRequestFullScreen) { /* Firefox */
+        isFullscreen = true;
-        VideoChat.remoteVideo.mozRequestFullScreen();
+        if (elem.requestFullscreen) {
-    } else if (VideoChat.remoteVideo.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+            elem.requestFullscreen();
-        VideoChat.remoteVideo.webkitRequestFullscreen();
+        } else if (elem.mozRequestFullScreen) { /* Firefox */
-    } else if (VideoChat.remoteVideo.msRequestFullscreen) { /* IE/Edge */
+            elem.mozRequestFullScreen();
-        VideoChat.remoteVideo.msRequestFullscreen();
+        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) { /* IE/Edge */
+            elem.msRequestFullscreen();
+        }
+    } else {
+        isFullscreen = false;
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) { /* Firefox */
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) { /* IE/Edge */
+            document.msExitFullscreen();
+        }
     }
 }