Merge from master

front/dist/index.html

@@ -12,11 +12,9 @@
         <script src="bundle.js"></script>
         <div id="webRtc" class="webrtc">
             <div id="activeCam" class="activeCam">
+                <video id="myCamVideo" autoplay muted></video>
             </div>
-            <div id="myCam" class="myCam">
-                <video id="myCamVideo" autoplay></video>
-            </div>
-            <div class="btn-cam-action active">
+            <div class="btn-cam-action">
                 <div class="btn-micro">
                     <img id="microphone" src="resources/logos/microphone.svg">
                     <img id="microphone-close" src="resources/logos/microphone-close.svg">
@@ -25,13 +23,10 @@
                     <img id="cinema" src="resources/logos/cinema.svg">
                     <img id="cinema-close" src="resources/logos/cinema-close.svg">
                 </div>
-                <div class="btn-call">
+                <!--<div class="btn-call">
                     <img src="resources/logos/phone.svg">
-                </div>
+                </div>-->
             </div>
         </div>
-        <div id="phone-open" class="phone-open">
-            <img src="resources/logos/phone-open.svg">
-        </div>
     </body>
 </html>

front/dist/resources/style/style.css

@@ -1,77 +1,50 @@
+video{
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}
 .webrtc{
     display: none;
+    position: absolute;
+    right: 0px;
+    height: 100%;
+    width: 300px;
 }
 .webrtc.active{
     display: block;
 }
-.webrtc, .activeCam{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: black;
-}
+.webrtc, .activeCam{}
 .activeCam video{
     position: absolute;
-    width: 100%;
-    height: 100%;
+    height: 25%;
+    top: 10px;
+    margin: 5px;
+    right: -100px;
+    transition: all 0.2s ease;
+}
+.webrtc:hover .activeCam video{
+    right: 10px;
+}
+.activeCam video#myCamVideo{
+    width: 200px;
+    height: 113px;
 }
 
 /*CSS size for 2 - 3 elements*/
-video:nth-child(1):nth-last-child(3),
-video:nth-child(2):nth-last-child(2),
-video:nth-child(3):nth-last-child(1),
-video:nth-child(1):nth-last-child(2),
-video:nth-child(2):nth-last-child(1){
-    width: 50%;
+.activeCam video:nth-child(1){
+    /*this is for camera of user*/
+    top: 75%;
 }
-video:nth-child(1):nth-last-child(3),
-video:nth-child(2):nth-last-child(2),
-video:nth-child(3):nth-last-child(1){
-    height: 50%;
+.activeCam video:nth-child(2){
+    top: 0%;
 }
-
-/*CSS position for 2 elements*/
-video:nth-child(1):nth-last-child(2){
-    left: 0;
+.activeCam video:nth-child(3){
+    top: 25%;
 }
-video:nth-child(2):nth-last-child(1){
-    left: 50%;
-}
-
-/*CSS position for 3 elements*/
-video:nth-child(1):nth-last-child(3){
-    top: 0;
-    left: 0;
-}
-video:nth-child(2):nth-last-child(2){
-    top: 0;
-    left: 50%;
-}
-video:nth-child(3):nth-last-child(1) {
+.activeCam video:nth-child(4) {
     top: 50%;
-    left: 25%;
 }
 
-.myCam{
-    height: 200px;
-    width: 300px;
-    position: absolute;
-    right: 10px;
-    background: black;
-    border: none;
-    bottom: 20px;
-    max-height: 17%;
-    max-width: 17%;
-    opacity: 1;
-    display: block;
-    transition: opacity 1s;
-}
-.myCam video{
-    width: 100%;
-    height: 100%;
-}
+/*btn animation*/
 .btn-cam-action div{
     cursor: pointer;
     position: absolute;
@@ -79,14 +52,14 @@ video:nth-child(3):nth-last-child(1) {
     width: 64px;
     height: 64px;
     background: #666;
-    left: 6vw;
     box-shadow: 2px 2px 24px #444;
     border-radius: 48px;
-    transform: translateX(calc(-6vw - 96px));
+    transform: translateY(12vw);
     transition-timing-function: ease-in-out;
+    bottom: 20px;
 }
-.webrtc:hover .btn-cam-action.active div{
-    transform: translateX(0);
+.webrtc:hover .btn-cam-action div{
+    transform: translateY(0);
 }
 .btn-cam-action div:hover{
     background: #407cf7;
@@ -94,60 +67,21 @@ video:nth-child(3):nth-last-child(1) {
     transition: 280ms;
 }
 .btn-micro{
-    bottom: 277px;
     transition: all .3s;
+    right: 10px;
 }
 .btn-video{
-    bottom: 177px;
     transition: all .2s;
+    right: 114px;
 }
-.btn-call{
-    bottom: 77px;
+/*.btn-call{
     transition: all .1s;
-}
+    left: 0px;
+}*/
 .btn-cam-action div img{
     height: 32px;
     width: 40px;
     top: calc(48px - 32px);
     left: calc(48px - 35px);
     position: relative;
-}
-.phone-open{
-    position: absolute;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    left: calc(50% - 70px);
-    padding: 20px;
-    bottom: 20px;
-    box-shadow: 2px 2px 24px #444;
-    background-color: green;
-    opacity: 0;
-    transition: all .4s ease-in-out;
-}
-.phone-open.active{
-    opacity: 1;
-    animation-name: phone-move;
-    animation-duration: 0.4s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-.phone-open:hover{
-    animation: none;
-    cursor: pointer;
-}
-
-@keyframes phone-move {
-    0%   {
-        left: calc(50% - 70px);
-        bottom: 20px;
-    }
-    25% {
-        left: calc(50% - 65px);
-        bottom: 15px;
-    }
-    25% {
-        left: calc(50% - 75px);
-        bottom: 25px;
-    }
 }