From 781ff323db4c70e4ca476f9ef13a04e5aa063585 Mon Sep 17 00:00:00 2001 From: enahum Date: Fri, 16 Sep 2016 15:35:13 -0300 Subject: 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/components/_module.scss | 1 + webapp/sass/components/_webrtc.scss | 297 +++++++++++++++++++++++++++++++++ webapp/sass/layout/_content.scss | 3 +- webapp/sass/layout/_headers.scss | 3 +- webapp/sass/layout/_sidebar-right.scss | 9 +- webapp/sass/responsive/_desktop.scss | 9 +- webapp/sass/responsive/_mobile.scss | 6 +- webapp/sass/responsive/_tablet.scss | 12 +- webapp/sass/routes/_print.scss | 3 +- webapp/sass/utils/_mixins.scss | 72 +++++++- webapp/sass/utils/_variables.scss | 10 ++ 11 files changed, 410 insertions(+), 15 deletions(-) create mode 100644 webapp/sass/components/_webrtc.scss (limited to 'webapp/sass') diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss index 8c2c575c2..3e587707d 100644 --- a/webapp/sass/components/_module.scss +++ b/webapp/sass/components/_module.scss @@ -19,3 +19,4 @@ @import 'tooltip'; @import 'tutorial'; @import 'videos'; +@import 'webrtc'; diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss new file mode 100644 index 000000000..b8fc64442 --- /dev/null +++ b/webapp/sass/components/_webrtc.scss @@ -0,0 +1,297 @@ +@charset 'UTF-8'; + +.webrtc__user-profile { + @include webrtc-button; + text-align: center; + + #webrtc-btn { + display: inherit; + } +} + +.webrtc__header { + @include webrtc-button; + float: left; + margin-right: 10px; + position: relative; + top: 13px; +} + +.webrtc__notification--rhs { + background: $button--ready; + border-radius: 3px 0 0 3px; + bottom: 10px; + color: $white; + cursor: pointer; + padding: 10px 15px; + position: absolute; + right: 0; + z-index: 9999; + + &:empty { + display: none; + } + + .fa { + margin-right: 6px; + } +} + +.webrtc__error { + padding: 0 20px; + text-align: center; + + .control-label { + @include border-radius(3px); + background: #f2f2f2; + font-size: 14px; + font-weight: normal; + margin: 1em 0 -1em; + padding: .7em 1em; + width: 100%; + } + + .has-error { + .control-label { + color: #a94442; + font-size: .95em; + + &:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #a94442; + content: '\F071'; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + margin-right: 4px; + text-rendering: auto; + transform: translate(0, 0); + } + } + } +} + +#videos { + background: $black; + font-size: 0; + left: 0; + pointer-events: none; + position: relative; + text-align: center; + transition: all 1s; + width: 100%; + + #main-video video { + width: 100%; + } + + #local-video { + border: 1px solid gray; + max-width: 30%; + opacity: 1; + position: absolute; + right: 10px; + top: 10px; + transition: opacity 1s; + z-index: 2; + + video { + -moz-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -webkit-transform: scale(-1, 1); + height: 100%; + max-height: 100%; + max-width: 100%; + object-fit: cover; + transform: scale(-1, 1); + transition: opacity 1s; + width: 100%; + } + } + + .webrtc__local-image { + position: absolute; + right: 10px; + top: 10px; + z-index: 2; + + img { + border-radius: 50%; + height: 64px; + max-width: 100%; + width: 64px; + } + } + + .webrtc__remote-image { + background-color: $black; + border: 1px solid alpha-color($black, .2); + padding: 40px 0; + + img { + border-radius: 50%; + max-height: 128px; + max-width: 128px; + width: 100%; + } + } + + .webrtc__remote-mute { + bottom: 0; + position: absolute; + right: 10px; + z-index: 9999; + } +} + +.webrtc-buttons { + margin-top: 1.2em; + text-align: center; + + .webrtc-icons__call { + border-radius: 48px; + + circle { + fill: $button--ready; + } + + &:hover { + cursor: pointer; + + circle { + fill: darken($button--ready, 5%); + } + } + + &[disabled] { + circle { + fill: $video-circle-offline; + } + } + } + + .webrtc-icons__cancel { + border-radius: 48px; + + circle { + fill: $button--cancel; + } + + &:hover { + cursor: pointer; + + circle { + fill: darken($button--cancel, 5%); + } + } + } +} + +.webrtc-icons { + &.active { + svg { + transform: translateY(0); + } + } + + svg { + border-radius: 48px; + margin: 5px; + + path { + &.on { + display: block; + } + + &.off { + display: none; + } + } + } +} + +.connecting { + position: absolute; + top: 0; + width: 100%; + + .loading-screen { + background-color: rgba(0,0,0, .3); + color: $connecting; + margin-left: 5px; + padding: 20px; + position: relative; + top: 75px; + width: 97%; + + .loading__content { + .round { + background: $connecting !important; + } + } + } +} + +.webrtc-notification { + background-color: $webrtc-notification-bg; + color: $white; + left: calc(50% - 200px); + padding: 20px 30px 10px; + position: absolute; + text-align: center; + top: calc(50% - 115px); + width: 400px; + z-index: 99999; + + .webrtc-buttons { + margin-top: 1.2em; + text-align: center; + + .webrtc-icons__pickup { + circle { + fill: $button--pickup; + } + + &:hover { + cursor: pointer; + + circle { + fill: darken($button--pickup, 3%); + } + } + } + } +} + +.sidebar--right--expanded { + #videos { + height: 100%; + position: absolute; + + #main-video { + height: 100%; + + video { + height: 100%; + width: auto; + } + } + } + + .webrtc-buttons { + bottom: 5px; + position: absolute; + width: 100%; + } + + #videos { + #local-video { + max-width: 200px; + } + } + + #videos.small { + position: relative; + } +} diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss index 514093f1f..22e8a5369 100644 --- a/webapp/sass/layout/_content.scss +++ b/webapp/sass/layout/_content.scss @@ -1,7 +1,8 @@ @charset 'UTF-8'; .inner-wrap { - &.move--left { + &.move--left, + &.webrtc--show { .search-bar__container { display: none; } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index c3a5f8fda..7e1ccc554 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -388,7 +388,8 @@ } } - .channel__wrap.move--left & { + .channel__wrap.move--left &, + .channel__wrap.webrtc--show & { position: absolute; right: -400px; top: 14px; diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index a70c30b16..915bb2d09 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -8,7 +8,11 @@ position: fixed; right: 0; width: 400px; - z-index: 5; + z-index: 6; + + &.webrtc { + z-index: 5; + } .sidebar--right__bg { @include single-transition(background-color, .5s, ease); @@ -20,7 +24,8 @@ width: 300%; } - &.move--left { + &.move--left, + &.webrtc--show { .sidebar--right__bg { left: -100%; } diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index d891fe17f..50df5ba02 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -2,7 +2,8 @@ @media screen and (max-width: 1800px) { .inner-wrap { - &.move--left { + &.move--left, + &.webrtc--show { .date-separator, .new-separator { &.hovered--comment { @@ -18,7 +19,8 @@ @media screen and (max-width: 1440px) { .inner-wrap { - &.move--left { + &.move--left, + &.webrtc--show { .help__format-text { display: none; } @@ -53,7 +55,8 @@ } .inner-wrap { - &.move--left { + &.move--left, + &.webrtc--show { .file-overlay { font-size: em(18px); diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index e00b818e7..c39870bd8 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -779,7 +779,8 @@ display: block; width: 290px; - &.move--left { + &.move--left, + &.webrtc--show { @include translate3d(0, 0, 0); } } @@ -958,7 +959,8 @@ } } - &.move--left { + &.move--left, + &.webrtc--show { margin: 0; @include translate3d(-100%, 0, 0); } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 36b6af851..45fc4fad4 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -17,7 +17,8 @@ @include single-transition(all, .5s, ease); @include translateX(100%); - &.move--left { + &.move--left, + &.webrtc--show { -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -ms-transform: translateX(0) !important; @@ -53,7 +54,8 @@ margin-right: 0 !important; } - &.move--left { + &.move--left, + &.webrtc--show { margin-right: 0 !important; .channel-header__links { @@ -72,7 +74,8 @@ } .sidebar--right { - &.move--left { + &.move--left, + &.webrtc--show { @include translateX(0); } @@ -106,7 +109,8 @@ } .inner-wrap { - &.move--left { + &.move--left, + &.webrtc--show { margin-right: 400px; } } diff --git a/webapp/sass/routes/_print.scss b/webapp/sass/routes/_print.scss index e7380e21c..079fc200e 100644 --- a/webapp/sass/routes/_print.scss +++ b/webapp/sass/routes/_print.scss @@ -78,7 +78,8 @@ margin-left: 0; } - #channel_view .inner-wrap.move--left { + #channel_view .inner-wrap.move--left, + #channel_view .inner-wrap.webrtc--show { margin-right: 0; } diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss index 6e4488fca..e252086ae 100644 --- a/webapp/sass/utils/_mixins.scss +++ b/webapp/sass/utils/_mixins.scss @@ -26,4 +26,74 @@ @mixin cursor($value) { cursor: -webkit-$value; cursor: zoom-$value; -} \ No newline at end of file +} + +// 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; + } + } + } + } + } +} diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss index 53004520e..ffbcc847e 100644 --- a/webapp/sass/utils/_variables.scss +++ b/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); \ No newline at end of file -- cgit v1.2.3-1-g7c22