[TEL-282] Test my setup stage & waiting area UI update (Web)

css/_base.scss

@@ -123,12 +123,33 @@ form {
 }
 
 .watermark {
-    position: relative;
-    top: 32px;
-    left: 32px;
+    position: absolute;
+    top: 0;
+    left: 0;
     min-width: 120px;
-    height: 74px;
+    padding-left: 20px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    width: 100%;
     z-index: 2;
+
+    &-with-background{
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .close {
+        position: absolute;
+        top: 20px;
+        right: 40px;
+        cursor: pointer;
+
+        svg:focus,
+        svg:hover,
+        svg:active {
+            fill: #cccccc
+        }
+    }
+
 }
 
 .leftwatermark {
@@ -146,10 +167,10 @@ form {
     padding-left: 120px;
     padding-top: 5px;
     text-align: left;
-    color: $defaultDarkColor !important;
+    color: $defaultColor !important;
 
     p {
-        font-family: "ProximaNovaLtLight";
+        font-family: "ProximaNovaLtSbold";
 
         &:first-child {
             font-size: 24px;
@@ -163,6 +184,7 @@ form {
     @media all and (max-width: 800px) {
         padding-left: 0;
         padding-top: 85px;
+        padding-right: 50px;
         p {
             &:first-child {
                 font-size: 16px;

css/_toolbars.scss

@@ -78,6 +78,32 @@
                 min-width: 200px;
             }
             .toolbox-button {
+                &.test-hangup-btn {
+                    .jitsi-icon {
+                        svg {
+                            fill: #fff !important;
+                        }
+                    }
+
+                    & > div > div:nth-child(2) > div {
+                        top: -5!important;
+
+                        & > div:nth-child(1) {
+                            padding: 5px 20px 5px 10px;
+                            line-height: 20px;
+
+                            span:after {
+                                content: "";
+                                position: absolute;
+                                bottom: -5px;
+                                right: 90px;
+                                border-width: 5px 5px 0;
+                                border-style: solid;
+                                border-color: #283447 transparent;
+                            }
+                        }
+                    }
+                }
 
                 .toolbox-icon {
                     @media all and (max-width: 420px) {
@@ -90,31 +116,31 @@
                     margin: 0px 4px;
                     width: 38px;
                     height: 38px;
-        
+
                     &:hover {
                         background-color: #daebfa;
                         border: 1px solid #daebfa;
                     }
-        
+
                     &.toggled {
                         background: #2a3a4b;
                         border: 1px solid #5e6d7a;
-    
+
                         svg {
                             fill: #fff;
                         }
-        
+
                         &:hover {
                             background-color: #5e6d7a;
                         }
                     }
-        
+
                     &.disabled, .disabled & {
                         cursor: initial;
                         color: #fff;
                         background-color: #a4b8d1;
                     }
-    
+
                     svg {
                         fill: #5e6d7a;
                     }
@@ -130,7 +156,7 @@
                         border: 1px solid $hangupColor;
                         width: 40px;
                         height: 40px;
-                
+
                         &:hover {
                             background-color: $hangupColor;
                         }
@@ -268,7 +294,7 @@
             &:hover, &.toggled {
                 background: $newToolbarButtonHoverColor;
             }
-    
+
             &.disabled {
                 cursor: initial !important;
                 background-color: #a4b8d1 !important;

css/_video-preview.css

@@ -1,6 +1,5 @@
 .video-preview {
     max-height: 290px;
-    overflow: auto;
 
     &-entry {
         cursor: pointer;

react/features/base/conference/functions.js

@@ -22,6 +22,7 @@ import {
 } from './constants';
 import logger from './logger';
 
+import jwtDecode from 'jwt-decode';
 /**
  * Attach a set of local tracks to a conference.
  *
@@ -370,3 +371,15 @@ function safeStartCase(s = '') {
         (result, word, index) => result + (index ? ' ' : '') + _.upperFirst(word)
         , '');
 }
+
+export function isJaneTestMode(state: Object) {
+    const { jwt } = state['features/base/jwt'];
+    const jwtPayload = jwt && jwtDecode(jwt) || null;
+    const context = jwtPayload && jwtPayload.context || null;
+    const user = context && context.user || null;
+    const participantId = user && user.participant_id;
+    const videoChatSessionId = context && context.video_chat_session_id;
+    const participantEmail = user && user.email;
+
+    return participantId === 0 && videoChatSessionId === 0 && participantEmail === '[email protected]';
+}

react/features/base/react/components/web/WaitingMessage.js

@@ -7,12 +7,19 @@ import { connect } from '../../../redux';
 import { getParticipantCount } from '../../../participants';
 import { getRemoteTracks } from '../../../tracks';
 import jwtDecode from 'jwt-decode';
+import {
+    IconClose
+} from '../../../../base/icons';
+import { Icon } from '../../../icons/components';
+import { isJaneTestMode } from '../../../conference';
 
 type Props = {
     _isGuest: boolean,
     jwt: Object,
     conferenceHasStarted: boolean,
-    isWelcomePage: boolean
+    waitingMessageHeader: string,
+    onClose: Function,
+    isJaneTestMode: boolean
 };
 
 type State = {
@@ -80,7 +87,7 @@ class WaitingMessage extends Component<Props, State> {
     }
 
     render() {
-        const { conferenceHasStarted } = this.props;
+        const { conferenceHasStarted, isJaneTestMode } = this.props;
 
         if (conferenceHasStarted) {
             return null;
@@ -91,25 +98,46 @@ class WaitingMessage extends Component<Props, State> {
                 {
                     this._renderWaitingMessage()
                 }
+                {!isJaneTestMode && <div className='close'>
+                    <Icon src={IconClose} onClick={() => {
+                        this.props.onClose();
+                    }}/>
+                </div>}
             </div>
         );
     }
 
     _renderWaitingMessage() {
         const { beforeAppointmentStart, appointmentStartAt } = this.state;
+        const { waitingMessageHeader, isJaneTestMode } = this.props;
 
         let header = <p>Waiting for the other participant to join...</p>;
+        let text = <p>Sit back, relax and take a moment for yourself.</p>;
 
         if (beforeAppointmentStart && appointmentStartAt) {
             header = (<p>Your appointment will begin
                 at {getLocalizedDateFormatter(appointmentStartAt).format('hh:mm A')}</p>);
         }
 
-        return (<div className = 'waitingMessage'>
+        if (waitingMessageHeader) {
+            header = <p>{waitingMessageHeader}</p>;
+        }
+
+        if (isJaneTestMode) {
+            header = <p>Testing your audio and video...</p>;
+            text = <p>
+                This is just a test area. Begin your online appointment from
+                your Upcoming Appointments page.
+            </p>;
+        }
+
+        return (<div className='waitingMessage'>
             {
                 header
             }
-            <p>Sit back, relax and take a moment for yourself.</p>
+            {
+                text
+            }
         </div>);
     }
 }
@@ -119,10 +147,10 @@ function _mapStateToProps(state) {
     const participantCount = getParticipantCount(state);
     const remoteTracks = getRemoteTracks(state['features/base/tracks']);
 
-
     return {
         jwt,
-        conferenceHasStarted: participantCount > 1 && remoteTracks.length > 0
+        conferenceHasStarted: participantCount > 1 && remoteTracks.length > 0,
+        isJaneTestMode: isJaneTestMode(state)
     };
 }
 

react/features/base/react/components/web/Watermarks.js

@@ -10,15 +10,6 @@ import WaitingMessage from './WaitingMessage';
 
 declare var interfaceConfig: Object;
 
-/**
- * The CSS style of the element with CSS class {@code rightwatermark}.
- *
- * @private
- */
-const _RIGHT_WATERMARK_STYLE = {
-    backgroundImage: 'url(images/rightwatermark.png)'
-};
-
 /**
  * The type of the React {@code Component} props of {@link Watermarks}.
  */
@@ -29,7 +20,8 @@ type Props = {
      */
     _isGuest: boolean,
     conferenceHasStarted: boolean,
-    isWelcomePage: boolean,
+    hideWaitingMessage: boolean,
+    waitingMessageHeader: string,
 
     /**
      * Invoked to obtain translated strings.
@@ -71,7 +63,8 @@ type State = {
     /**
      * Whether or not the show the "powered by Jitsi.org" link.
      */
-    showPoweredBy: boolean
+    showPoweredBy: boolean,
+    hideWaitingMessage: boolean
 };
 
 /**
@@ -112,10 +105,25 @@ class Watermarks extends Component<Props, State> {
             showBrandWatermark,
             showJitsiWatermark,
             showJitsiWatermarkForGuests,
-            showPoweredBy: interfaceConfig.SHOW_POWERED_BY
+            showPoweredBy: interfaceConfig.SHOW_POWERED_BY,
+            hideWaitingMessage: props.hideWaitingMessage || false
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.hideWaitingMessage !== this.props.hideWaitingMessage) {
+            this.setState({
+                hideWaitingMessage: prevProps.hideWaitingMessage
+            });
+        }
+    }
+
+    hideWaitingMessageAction() {
+        this.setState({
+            hideWaitingMessage: true
+        });
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -139,14 +147,16 @@ class Watermarks extends Component<Props, State> {
      * @returns {ReactElement|null}
      */
     _renderWatermark() {
-        const { conferenceHasStarted, isWelcomePage } = this.props;
-
-
-        return (<div className = 'watermark '>
+        const { conferenceHasStarted, waitingMessageHeader } = this.props;
+        const { hideWaitingMessage } = this.state;
+        return (<div
+            className={`watermark ${(conferenceHasStarted || hideWaitingMessage) ? '' : 'watermark-with-background'}`}>
             <div
-                className = { `leftwatermark ${conferenceHasStarted || isWelcomePage ? '' : 'animate-flicker'}` } />
+                className={`leftwatermark ${conferenceHasStarted || hideWaitingMessage ? '' : 'animate-flicker'}`}/>
             {
-                !isWelcomePage && <WaitingMessage />
+                !hideWaitingMessage &&
+                <WaitingMessage waitingMessageHeader={waitingMessageHeader}
+                                onClose={this.hideWaitingMessageAction.bind(this)}/>
             }
         </div>);
     }
@@ -165,7 +175,6 @@ function _mapStateToProps(state) {
     const participantCount = getParticipantCount(state);
     const remoteTracks = getRemoteTracks(state['features/base/tracks']);
 
-
     return {
         _isGuest: isGuest,
         conferenceHasStarted: participantCount > 1 && remoteTracks.length > 0