Clean up video calls ui a bit.

css/base.css

@@ -2591,32 +2591,48 @@ ul.tabbar li.active > a {
   }
 }
 
-.h-100 {
+#video-container {
-	height: 100%!important;
-}
-
-#video_container {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+	height: 100%!important;
   width: 85%;
   margin: auto;
-  height: 80%
+  height: 80%;
 }
 
 video {
   width:100%;
 }
 
-.align-items-center {
+#video-container-panel {
   -ms-flex-align: center!important;
   align-items: center!important;
+  margin-top: 10%;
 }
 
-.local_div {
+.local-video {
   width:50%;
-  float:left
+  float:left;
 }
 
-.remote_div {
+.remote-video {
   width:50%;
-  float:left
+  float:left;
+}
+
+#video-container-controls {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+
+#video-call-hangup {
+  border-radius: 10px;
+  background-color: red;
+}
+
+.video-call-toggle-media {
+  border-radius: 10px;
+  background-color: gray;
 }

src/views/messages-view.jsx

@@ -984,6 +984,11 @@ class MessagesView extends React.Component {
             topic={topic}
             seq={this.props.callSeq}
             callState={this.props.callState}
+            displayMobile={this.props.displayMobile}
+            tinode={this.props.tinode}
+            title={this.state.title}
+            avatar={this.state.avatar || true}
+
             onError={this.props.onError}
             onHangup={this.handleTeleHangup}
             onInvite={this.props.onTeleInvite}

src/widgets/rtc-panel.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import LetterTile from '../widgets/letter-tile.jsx';
+
 export default class RtcPanel extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -342,24 +344,48 @@ export default class RtcPanel extends React.PureComponent {
     }
 
     return (
-      <div className="h-100" id="video_display">
+      <>
-      	<div id ="video_container" className="align-items-center" style={{marginTop: "10%"}}>
+        <div id="topic-caption-panel" className="caption-panel">
-      		<div className="local_div" id="div1">
+          {this.props.displayMobile ?
-			      <video id="localVideo" className="" ref={this.localRef} autoPlay muted playsInline></video>
+            <a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
-		      </div>
+              <i className="material-icons">arrow_back</i>
-		      <div className="remote_div" id="div2">
+            </a>
-			      <video id="remoteVideo" className="" ref={this.remoteRef} autoPlay playsInline></video>
+            :
-		      </div>
+            null}
-    	  </div>
+          <div className="avatar-box">
-        <div id="close" style={{padding: "20px", textAlign: "center"}}>
+            <LetterTile
-          <button onClick={this.handleCloseClick} style={{borderRadius: "10px", backgroundColor: "red"}}>
+              tinode={this.props.tinode}
-            <i className="material-icons">call_end</i>
+              avatar={this.props.avatar}
-          </button>
+              topic={this.props.topic}
-          <button onClick={this.handleToggleCameraClick} style={{borderRadius: "10px", backgroundColor: "gray"}}><i className="material-icons">video_camera_front</i></button>
+              title={this.props.title} />
-          <button onClick={this.handleToggleMicClick} style={{borderRadius: "10px", backgroundColor: "gray"}}><i className="material-icons">mic</i></button>
+          </div>
+          <div id="topic-title-group">
+            <div id="topic-title" className="panel-title">{
+              this.props.title ||
+              <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
+                description="Title shown when the topic has no name" /></i>
+            }</div>
+          </div>
         </div>
-        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+        <div id="video-container">
-      </div>
+          <div id="video-container-panel">
+            <div className="local-video">
+              <video id="localVideo" ref={this.localRef} autoPlay muted playsInline></video>
+            </div>
+            <div className="remote-video">
+              <video id="remoteVideo" ref={this.remoteRef} autoPlay playsInline></video>
+            </div>
+          </div>
+          <div id="video-container-controls">
+            <button id="video-call-hangup" onClick={this.handleCloseClick}>
+              <i className="material-icons">call_end</i>
+            </button>
+            <button className="video-call-toggle-media" onClick={this.handleToggleCameraClick}><i className="material-icons">video_camera_front</i></button>
+            <button className="video-call-toggle-media" onClick={this.handleToggleMicClick}><i className="material-icons">mic</i></button>
+          </div>
+          <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+        </div>
+      </>
     );
   }
 };