PLT-4316 - Webrtc improvements (#4525)

7 files changed, 72 insertions, 93 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 1ce7b4a0e..a281e8e1b 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -300,6 +300,13 @@ export default class ChannelHeader extends React.Component {
 
                 if (isOffline || busy) {
                     circleClass = 'offline';
+                    webrtcMessage = (
+                        <FormattedMessage
+                            id='channel_header.webrtc.offline'
+                            defaultMessage='The user is offline'
+                        />
+                    );
+
                     if (busy) {
                         webrtcMessage = (
                             <FormattedMessage
@@ -317,6 +324,10 @@ export default class ChannelHeader extends React.Component {
                     );
                 }
 
+                const webrtcTooltip = (
+                    <Tooltip id='webrtcTooltip'>{webrtcMessage}</Tooltip>
+                );
+
                 webrtc = (
                     <div className='webrtc__header'>
                         <a
@@ -324,28 +335,18 @@ export default class ChannelHeader extends React.Component {
                             onClick={() => this.initWebrtc(contact.id, !isOffline)}
                             disabled={isOffline}
                         >
-                            <svg
-                                id='webrtc-btn'
-                                className='webrtc__button'
-                                xmlns='http://www.w3.org/2000/svg'
+                            <OverlayTrigger
+                                delayShow={Constants.WEBRTC_TIME_DELAY}
+                                placement='bottom'
+                                overlay={webrtcTooltip}
                             >
-                                <circle
-                                    className={circleClass}
-                                    cx='16'
-                                    cy='16'
-                                    r='18'
+                                <div
+                                    id='webrtc-btn'
+                                    className={'webrtc__button ' + circleClass}
                                 >
-                                    <title>
-                                        {webrtcMessage}
-                                    </title>
-                                </circle>
-                                <path
-                                    className='off'
-                                    transform='scale(0.4), translate(17,16)'
-                                    d='M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-4 24l-8-6.4V32H12V16h16v6.4l8-6.4v16z'
-                                    fill='white'
-                                />
-                            </svg>
+                                    <span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
+                                </div>
+                            </OverlayTrigger>
                         </a>
                     </div>
                 );
diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx
index e69d917a3..21dbf9699 100644
--- a/webapp/components/user_profile.jsx
+++ b/webapp/components/user_profile.jsx
@@ -11,7 +11,7 @@ import Constants from 'utils/constants.jsx';
 const UserStatuses = Constants.UserStatuses;
 const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
-import {Popover, OverlayTrigger} from 'react-bootstrap';
+import {Popover, OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import React from 'react';
@@ -111,8 +111,19 @@ export default class UserProfile extends React.Component {
                         defaultMessage='New call unavailable until your existing call ends'
                     />
                 );
+            } else {
+                webrtcMessage = (
+                    <FormattedMessage
+                        id='user_profile.webrtc.offline'
+                        defaultMessage='The user is offline'
+                    />
+                );
             }
 
+            const webrtcTooltip = (
+                <Tooltip id='webrtcTooltip'>{webrtcMessage}</Tooltip>
+            );
+
             webrtc = (
                 <div
                     className='webrtc__user-profile'
@@ -123,28 +134,18 @@ export default class UserProfile extends React.Component {
                         onClick={() => this.initWebrtc()}
                         disabled={!isOnline}
                     >
-                        <svg
-                            id='webrtc-btn'
-                            className='webrtc__button'
-                            xmlns='http://www.w3.org/2000/svg'
+                        <OverlayTrigger
+                            delayShow={Constants.WEBRTC_TIME_DELAY}
+                            placement='top'
+                            overlay={webrtcTooltip}
                         >
-                            <circle
-                                className={circleClass}
-                                cx='16'
-                                cy='16'
-                                r='18'
+                            <div
+                                id='webrtc-btn'
+                                className={'webrtc__button ' + circleClass}
                             >
-                                <title>
-                                    {webrtcMessage}
-                                </title>
-                            </circle>
-                            <path
-                                className='off'
-                                transform='scale(0.4), translate(17,16)'
-                                d='M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm-4 24l-8-6.4V32H12V16h16v6.4l8-6.4v16z'
-                                fill='white'
-                            />
-                        </svg>
+                                <span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
+                            </div>
+                        </OverlayTrigger>
                     </a>
                 </div>
             );
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index ae8843dc3..6cacc67e8 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -998,6 +998,7 @@
   "channel_header.viewMembers": "View Members",
   "channel_header.webrtc.call": "Start Video Call",
   "channel_header.webrtc.unavailable": "New call unavailable until your existing call ends",
+  "channel_header.webrtc.offline": "The user is offline",
   "channel_info.about": "About",
   "channel_info.close": "Close",
   "channel_info.header": "Header:",
@@ -2055,6 +2056,7 @@
   "user_list.notFound": "No users found",
   "user_profile.webrtc.call": "Start Video Call",
   "user_profile.webrtc.unavailable": "New call unavailable until your existing call ends",
+  "user_profile.webrtc.offline": "The user is offline",
   "view_image.loading": "Loading ",
   "view_image_popover.download": "Download",
   "view_image_popover.file": "File {count} of {total}",
diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss
index 5e71e3a7b..0049fe1b8 100644
--- a/webapp/sass/components/_tooltip.scss
+++ b/webapp/sass/components/_tooltip.scss
@@ -8,3 +8,9 @@
         word-break: break-word;
     }
 }
+
+#webrtcTooltip {
+    .tooltip-inner {
+        word-break: normal;
+    }
+}
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index b025ab00c..c9deada26 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -2,10 +2,14 @@
 
 .webrtc__user-profile {
     @include webrtc-button;
+    position: absolute;
+    right: 7px;
     text-align: center;
+    top: 5px;
 
     #webrtc-btn {
-        display: inherit;
+        height: 23px;
+        width: 23px;
     }
 }
 
@@ -15,6 +19,11 @@
     margin-right: 10px;
     position: relative;
     top: 13px;
+
+    svg {
+        position: relative;
+        width: 20px;
+    }
 }
 
 .webrtc__notification--rhs {
diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index e252086ae..6a041d6ec 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -32,68 +32,27 @@
 @mixin webrtc-button {
     .webrtc__button {
         @include border-radius(50px);
+        background: $button--ready;
         display: block;
-        height: 32px;
-        width: 32px;
+        height: 33px;
+        text-align: center;
+        width: 33px;
 
         &.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;
-                }
-            }
+        &.offline {
+            background: $video-circle-offline;
 
-            circle {
-                fill-opacity: 0;
+            &:hover {
+                background: $video-circle-offline;
             }
         }
-    }
 
-    a {
-        &[disabled] {
-            .webrtc__button {
-                &:hover {
-                    background: none;
-                    box-shadow: none;
-                }
-
-                &:hover {
-                    circle {
-                        fill: $video-circle-offline;
-                    }
-                }
-            }
+        svg {
+            fill: $white;
         }
     }
 }
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 352401142..29f4ea64e 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -373,6 +373,7 @@ export const Constants = {
     COMMENT_ICON: "<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='15px' height='15px' viewBox='1 1.5 15 15' enable-background='new 1 1.5 15 15' xml:space='preserve'> <g> <g> <path fill='#211B1B' d='M14,1.5H3c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2h1.628l1.884,3l1.866-3H14c1.104,0,2-0.896,2-2v-8 C16,2.396,15.104,1.5,14,1.5z M15,11.5c0,0.553-0.447,1-1,1H8l-1.493,2l-1.504-1.991L5,12.5H3c-0.552,0-1-0.447-1-1v-8 c0-0.552,0.448-1,1-1h11c0.553,0,1,0.448,1,1V11.5z'/> </g> </g> </svg>",
     REPLY_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-158 242 18 18' style='enable-background:new -158 242 18 18;' xml:space='preserve'> <path d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'/> </svg>",
     SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>",
+    VIDEO_ICON: "<svg width='55%'height='100%'viewBox='0 0 13 8'> <g transform='matrix(1,0,0,1,-507,-146)'> <g transform='matrix(0.0133892,0,0,0.014499,500.635,142.838)'> <path d='M1158,547.286L1158,644.276C1158,684.245 1125.55,716.694 1085.58,716.694L579.341,716.694C539.372,716.694 506.922,684.245 506.922,644.276L506.922,306.322C506.922,266.353 539.371,233.904 579.341,233.903L1085.58,233.903C1125.55,233.904 1158,266.353 1158,306.322L1158,402.939L1359.75,253.14C1365.83,248.362 1373.43,245.973 1382.56,245.973C1386.61,245.973 1390.83,246.602 1395.22,247.859C1408.4,252.134 1414.99,259.552 1414.99,270.113L1414.99,680.485C1414.99,691.046 1408.4,698.464 1395.22,702.739C1390.83,703.996 1386.61,704.624 1382.56,704.624C1373.43,704.624 1365.83,702.236 1359.75,697.458L1158,547.286Z'/> </g> </g> </svg>",
     UPDATE_TYPING_MS: 5000,
     THEMES: {
         default: {