Display video call labels.

css/base.css

@@ -2605,20 +2605,26 @@ video {
   width:100%;
 }
 
-#video-container-panel {
+.video-container-panel {
   -ms-flex-align: center!important;
   align-items: center!important;
   margin-top: 10%;
+  position:relative;
 }
 
-.local-video {
+.video-elem {
   width:50%;
   float:left;
+  position:relative;
+  z-index:0;
 }
 
-.remote-video {
-  width:50%;
-  float:left;
+.video-title {
+  position:absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  background-color: white;
 }
 
 #video-container-controls {

src/views/tinode-web.jsx

@@ -1736,14 +1736,8 @@ class TinodeWeb extends React.Component {
       this.handleCallClose();
       return;
     }
-    /*
-    if (!extend) {
-      this.handleCallClose();
-      return;
-    }
-    */
 
-    let until = new Date(this.state.callLeaseExpires); //this.state.callLeaseExpires.getSeconds() + 10;
+    let until = new Date(this.state.callLeaseExpires);
     until.setSeconds(until.getSeconds() + 10);
     topic.call('extend-lease', this.state.callSeq, undefined, until)
       .then((ctrl) => {
@@ -1756,20 +1750,12 @@ class TinodeWeb extends React.Component {
       let head = {mime: 'application/tinode-video-call'};
       this.handleSendMessage('started', undefined, undefined, head)
         .then((ctrl) => {
-          //this.handleTeleLeaseReply(ctrl, 0);
           if (ctrl.code < 200 || ctrl.code >= 300 || typeof ctrl.params == 'undefined' || typeof ctrl.params['seq'] == 'undefined') {
             this.handleCallClose();
             return;
           }
           this.setState({callSeq: ctrl.params['seq']});
         });
-      /*
-      topic.call('invite').then((ctrl) => {
-				if (ctrl.params && ctrl.params['sip-code'] == 100) {
-          this.handleTeleLeaseReply(ctrl, 0);
-				}
-      });
-      */
     } else if (callState == 3) {
       const topic = this.tinode.getTopic(callTopic);
       if (!topic) {

src/widgets/rtc-panel.jsx

@@ -218,6 +218,8 @@ export default class RtcPanel extends React.PureComponent {
 
   handleTrackEvent(event) {
     this.remoteRef.current.srcObject = event.streams[0];
+    // Make sure we redraw the UI properly.
+    this.forceUpdate();
   }
 
   handleGetUserMediaError(e) {
@@ -276,7 +278,6 @@ export default class RtcPanel extends React.PureComponent {
   }
 
   stopTracks(el) {
-    //let lr = this.localRef.current;
     if (el == null) { return; }
     let stream = el.srcObject;
     if (stream == null) { return; }
@@ -343,6 +344,8 @@ export default class RtcPanel extends React.PureComponent {
       return null;
     }
 
+    const remoteActive = this.remoteRef.current != null && this.remoteRef.current.srcObject != null;
+
     return (
       <>
         <div id="topic-caption-panel" className="caption-panel">
@@ -368,12 +371,17 @@ export default class RtcPanel extends React.PureComponent {
           </div>
         </div>
         <div id="video-container">
-          <div id="video-container-panel">
-            <div className="local-video">
+          <div className="video-container-panel">
+            <div className="video-elem">
               <video id="localVideo" ref={this.localRef} autoPlay muted playsInline></video>
+              <div className="video-title">You</div>
             </div>
-            <div className="remote-video">
+            <div className="video-elem">
               <video id="remoteVideo" ref={this.remoteRef} autoPlay playsInline></video>
+              {remoteActive ?
+                <div className="video-title">{this.props.title}</div>
+                :
+                null}
             </div>
           </div>
           <div id="video-container-controls">