fix CallPannel: do not remount between menimized/full screen

css/base.css

@@ -24,6 +24,7 @@
   --clr-primary-accent-transparent-medium: light-dark(rgba(33, 150, 243, 0.3), rgba(20, 70, 120, 0.3)); /* for active call shadow */
   --clr-primary-action: light-dark(#1e89e6, #1571c1); /* blue 600, primary buttons */
   --clr-primary-action-hover: light-dark(#2962ff, #0037b8); /* hover for primary action */
+  --clr-secondary-accent: light-dark(#0097a8, #006570); /* Checkmark icon, unread badge bg */
   --clr-primary-light-blue: light-dark(#bcdefb, #78a0be); /* light-blue 100, side caption panel text/link */
   --clr-light-blue-accent: light-dark(#0398e2, #0379b5); /* light-blue accent, reply quote border, pinned active dot */
 
@@ -74,7 +75,6 @@
   --clr-verified-accent: light-dark(#02a6f2, #027db6); /* Verified color */
   --clr-staff-accent: light-dark(#689f38, #598830); /* Staff color */
   --clr-badge-inv: light-dark(#fffd, #cccd); /* Badge inverted text */
-  --clr-cyan-accent: light-dark(#0097a8, #006570); /* Checkmark icon, unread badge bg */
   --clr-cyan-50: light-dark(#e0f7fa, #2f3e43); /* Dummy view bg */
   --clr-overlay-white-strong: light-dark(rgba(255, 255, 255, 0.9), rgba(0,0,0,0.90)); /* Image preview bg, video container bg */
   --clr-gray-medium-bg: light-dark(#777, #444); /* Image preview container bg (darker gray) */
@@ -1324,6 +1324,7 @@ i.search {
   background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
 }
 .contact-box > li.tpinned {
+  border-right: 1px solid var(--clr-secondary-accent);
   background-color: var(--clr-background-blue-gray-75); /* blue-gray 75 highlight */
 }
 .contact-box > li.action {
@@ -1485,7 +1486,7 @@ img.channel {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.5rem;
-  color: var(--clr-cyan-accent);
+  color: var(--clr-secondary-accent);
   position: absolute;
   right: 0;
   bottom: 0;
@@ -2747,7 +2748,7 @@ ul.tabbar li.active > a {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: bolder;
-  background-color: var(--clr-cyan-accent);
+  background-color: var(--clr-secondary-accent);
   color: var(--clr-bright);
   border-radius: 50%;
   width: 1.35rem;

src/views/messages-view.jsx

@@ -1486,19 +1486,9 @@ class MessagesView extends React.Component {
   render() {
     const {formatMessage} = this.props.intl;
 
-    let component;
+    // P2P call is an overlay, not a separate component because it cannot be
-    if (!this.state.topic) {
+    // re-mounted between full screen/minimized.
-      component = (
+    const overlay = this.state.rtcPanel ? (
-        <LogoView
-          serverVersion={this.props.serverVersion}
-          serverAddress={this.props.serverAddress} />
-      );
-    } else {
-
-      let callPanel = null;
-      if (this.state.rtcPanel) {
-        // P2P call.
-        callPanel = (
         <CallPanel
           topic={this.state.topic}
           seq={this.props.callSeq}
@@ -1516,11 +1506,17 @@ class MessagesView extends React.Component {
           onSendOffer={this.props.onCallSendOffer}
           onIceCandidate={this.props.onCallIceCandidate}
           onSendAnswer={this.props.onCallSendAnswer} />
-        );
+      ) : null;
-      }
 
+    let component;
+    if (!this.state.topic) {
+      component = (
+        <LogoView
+          serverVersion={this.props.serverVersion}
+          serverAddress={this.props.serverAddress} />
+      );
+    } else {
       let component2;
-      let overlay = null;
       if (this.state.imagePreview) {
         // Preview image before sending.
         component2 = (
@@ -1571,12 +1567,7 @@ class MessagesView extends React.Component {
             onClose={this.handleClosePreview}
             onSendMessage={this.sendFileAttachment} />
         );
-      } else if (callPanel && !this.state.minimizedCallPanel) {
-        component2 = callPanel;
       } else {
-        if (callPanel) {
-          overlay = callPanel;
-        }
         const topic = this.props.tinode.getTopic(this.state.topic);
         const isChannel = topic.isChannelType() || topic.chan;
         const groupTopic = topic.isGroupType() && !isChannel;

umd/index.dev.js

@@ -10910,16 +10910,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     const {
       formatMessage
     } = this.props.intl;
-    let component;
+    const overlay = this.state.rtcPanel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_call_panel_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
-    if (!this.state.topic) {
-      component = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_logo_view_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
-        serverVersion: this.props.serverVersion,
-        serverAddress: this.props.serverAddress
-      });
-    } else {
-      let callPanel = null;
-      if (this.state.rtcPanel) {
-        callPanel = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_call_panel_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
       topic: this.state.topic,
       seq: this.props.callSeq,
       callState: this.props.callState,
@@ -10935,10 +10926,15 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       onSendOffer: this.props.onCallSendOffer,
       onIceCandidate: this.props.onCallIceCandidate,
       onSendAnswer: this.props.onCallSendAnswer
+    }) : null;
+    let component;
+    if (!this.state.topic) {
+      component = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_logo_view_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
+        serverVersion: this.props.serverVersion,
+        serverAddress: this.props.serverAddress
       });
-      }
+    } else {
       let component2;
-      let overlay = null;
       if (this.state.imagePreview) {
         component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_image_preview_jsx__WEBPACK_IMPORTED_MODULE_9__["default"], {
           content: this.state.imagePreview,
@@ -10979,12 +10975,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           onClose: this.handleClosePreview,
           onSendMessage: this.sendFileAttachment
         });
-      } else if (callPanel && !this.state.minimizedCallPanel) {
-        component2 = callPanel;
       } else {
-        if (callPanel) {
-          overlay = callPanel;
-        }
         const topic = this.props.tinode.getTopic(this.state.topic);
         const isChannel = topic.isChannelType() || topic.chan;
         const groupTopic = topic.isGroupType() && !isChannel;