Webrtc client side (#4026)

* WebRTC Server side

* WebRTC client side

* Bug fixes and improvements

* Pushing UI improvements for webrtc (#3728)

* Pushing UI improvements for webrtc

* Updating webrtc css

* PLT-3943 WebRTC P1: bug fixes and improvements

* Video resolution set to std, reduce volume of ringtone and flip video horizontally

* Fix calling a user B while WebRTC RHS is still opened

* Leave RHS opened when call ends, Fix isBusy on popover and channel_header

* Fix pre-release feature, RHS & System Console

* PLT-3945 - Updating UI for webrtc (#3908)

* PLT-3943 Webrtc p1

* Add ongoing call indicator when RHS is opened

* UI updates to to webrtc notifcation (#3959)

webapp/sass/utils/_mixins.scss

@@ -26,4 +26,74 @@
 @mixin cursor($value) {
     cursor: -webkit-$value;
     cursor: zoom-$value;
-}
+}
+
+// Webrtc button
+@mixin webrtc-button {
+    .webrtc__button {
+        @include border-radius(50px);
+        display: block;
+        height: 32px;
+        width: 32px;
+
+        &.on,
+        &:hover {
+            background: darken($button--ready, 5%);
+        }
+
+        &:hover circle {
+            fill: darken($button--ready, 5%);
+        }
+
+        circle {
+            fill: $button--ready;
+
+            &.offline {
+                fill: $video-circle-offline;
+            }
+        }
+
+        path {
+            .on {
+                display: none;
+            }
+
+            .off {
+                display: block;
+            }
+        }
+
+        &.on {
+            path {
+                .on {
+                    display: block;
+                }
+
+                .off {
+                    display: none;
+                }
+            }
+
+            circle {
+                fill-opacity: 0;
+            }
+        }
+    }
+
+    a {
+        &[disabled] {
+            .webrtc__button {
+                &:hover {
+                    background: none;
+                    box-shadow: none;
+                }
+
+                &:hover {
+                    circle {
+                        fill: $video-circle-offline;
+                    }
+                }
+            }
+        }
+    }
+}

webapp/sass/utils/_variables.scss

@@ -17,3 +17,13 @@ $border-gray: 1px solid #ddd;
 
 // Random variables
 $border-rad: 1px;
+
+// Webrtc Variables
+$button--ready: #00A6EE;
+$video-circle-btn: #2f81b7;
+$video-circle-hover: #56C303;
+$video-circle-offline: #aaa;
+$button--cancel: #E41020;
+$button--pickup: #73B001;
+$connecting: $white;
+$webrtc-notification-bg: rgba(112, 128, 144, .8);