diff --git a/css/base.css b/css/base.css index ecfc7fbe..707145e8 100644 --- a/css/base.css +++ b/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 { diff --git a/src/views/tinode-web.jsx b/src/views/tinode-web.jsx index b49071a9..6490fc11 100644 --- a/src/views/tinode-web.jsx +++ b/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) { diff --git a/src/widgets/rtc-panel.jsx b/src/widgets/rtc-panel.jsx index b4ca9d32..44e9dd21 100644 --- a/src/widgets/rtc-panel.jsx +++ b/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 ( <>