allow messaging while call is in progress (same topic only for now)

css/base.css

@@ -4,6 +4,9 @@
   /* Size of text in message bubbles */
   --message-text-size: 10pt;
 
+  /* Height of caption panel */
+  --caption-panel-height: 4rem;
+
   /* Core Palette */
   --clr-bright: light-dark(#fff, #181818);
   --clr-dark: light-dark(#000, #fff);
@@ -48,7 +51,7 @@
   /* Semantic Colors: Danger, Warning, Success, Info */
   --clr-danger-text: light-dark(#d33131, #931f1f); /* Danger text, invalid label */
   --clr-danger-text-hover: light-dark(#f44034, #cc1100); /* Hover for danger text */
-  --clr-error-text-muted: light-dark(hsl(0, 50%, 60%), hsl(0, 50%, 40%)); /* For less critical errors like invalid in-place edit icon/text */
+  --clr-error-text-muted: light-dark(#cc6666, #993333); /* For less critical errors like invalid in-place edit icon/text */
   --clr-error-bg-light: light-dark(#ffccd1, #ff6675); /* Info box error bg */
   --clr-error-border-light: light-dark(#ffbdc6, #ff334e); /* Info box error border */
   --clr-error-text-dark: light-dark(#b51c1c, #de2323); /* Info box error text, icon */
@@ -1092,7 +1095,7 @@ table.permission-editor td.checkbox {
   align-items: center;
   flex: none;
   padding: 0.5rem;
-  height: 4rem;
+  height: var(--caption-panel-height);
   white-space: nowrap;
   box-shadow: 0 1px 2px var(--clr-shadow-gray-strong);
   overflow-x: hidden;
@@ -1934,7 +1937,7 @@ img.channel {
   line-height: 2rem;
   flex-shrink: 0;
   flex-grow: 0;
-  height: 4rem;
+  height: var(--caption-panel-height);
   padding: 1rem 0.75rem 0 0.75rem;
   z-index: 3;
 }
@@ -1997,22 +2000,44 @@ img.channel {
   background-color: var(--clr-overlay-white-strong);
 }
 
-.controls {
+#video-container.minimized {
+  left: auto;
+  top: 1rem;
+  right: 1rem;
+  width: 18rem;
+  height: 18rem;
+  background-color: unset;
+  user-select: none;
+  cursor: grab;
+  box-shadow: 0.15rem 0.15rem 1.5rem var(--clr-shadow-dialog);
+  border-radius: 0.5rem;
+}
+
+#controls {
   position: absolute;
   display: flex;
   column-gap: 1rem;
   align-items: center;
+  align-self: center;
   justify-content: center;
-  width: 100%;
   bottom: 2.5rem;
   z-index: 1;
 }
 
-.incoming-call .controls {
+#controls.minimized {
+  column-gap: 0.5rem;
+  bottom: 1.75rem;
+}
+
+.incoming-call #controls {
   bottom: 1rem;
 }
 
-.controls button {
+#controls button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
   width: 4rem;
   height: 4rem;
@@ -2020,6 +2045,53 @@ img.channel {
   box-shadow: 0 3px 6px 0 var(--clr-shadow-button);
 }
 
+#controls.minimized button {
+  width: 2.75rem;
+  height: 2.75rem;
+  box-shadow: 0 2px 4px 0 var(--clr-shadow-button);
+}
+
+#controls button .material-icons {
+  font-size: 1.8rem;
+}
+
+#controls.minimized button .material-icons {
+  font-size: 1.4rem;
+}
+
+button.full-screen {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  z-index: 1;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  padding: 0;
+  box-shadow: none;
+  background-color: transparent;
+  min-width: unset;
+}
+
+.minimized button.full-screen {
+  top: 1rem;
+  left: 1rem;
+  width: 2rem;
+  height: 2rem;
+}
+
+button.full-screen:hover:not([disabled]), button:active:not([disabled]) {
+  color: var(--clr-text-secondary);
+}
+
+button.full-screen .material-icons {
+  font-size: x-large;
+}
+
+.minimized button.full-screen .material-icons {
+  font-size: large;
+}
+
 #video-container-panel {
   position: relative;
   height: 100%;
@@ -2034,7 +2106,11 @@ img.channel {
 }
 
 .call-party:hover {
-  border: 2px solid var(--clr-primary-accent);
+  border-color: var(--clr-primary-accent);
+}
+
+.minimized .call-party {
+  border-width: 1px;
 }
 
 .call-party.peer {
@@ -2046,6 +2122,13 @@ img.channel {
   z-index: 1;
 }
 
+.minimized .call-party.peer {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 .call-party.self {
   position: absolute;
   right: 0.5rem;
@@ -2101,6 +2184,12 @@ video {
   line-height: 1.6;
 }
 
+.minimized .caller-card .avatar-box {
+  width: 6rem;
+  height: 6rem;
+  font-size: 3.6rem;
+}
+
 /* Badge with "You" for current user or peer's name. */
 .call-party .caller-name {
   max-width: 12rem;
@@ -2108,7 +2197,7 @@ video {
   border-radius: 0.35rem;
   z-index: 1;
   text-shadow: 0 0 1px var(--clr-bright);
-  background-color: rgba(255, 255, 255, 0.7); /* Specific rgba, could be a variable if reused */
+  background-color: var(--clr-background-off-white);
   text-overflow: ellipsis;
   overflow-x: hidden;
   white-space: nowrap;
@@ -2137,6 +2226,12 @@ video {
   margin: 0 auto;
 }
 
+.minimized .caller-name {
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.25rem;
+  font-weight: lighter;
+}
+
 .incoming-call {
   position: relative;
   background-color: var(--clr-bright);
@@ -2305,6 +2400,7 @@ video {
   padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   background-color: var(--clr-bubble-meta-date-bg);
   text-transform: uppercase;
+  user-select: none;
 }
 
 /* Left triangle placed bottom left flush. */
@@ -2822,6 +2918,7 @@ ul.tabbar li.active > a {
   line-height: 1;
   vertical-align: middle;
   text-align: center;
+  user-select: none;
 }
 .material-icons.small {
   font-size: 1rem;
@@ -3580,7 +3677,31 @@ div.toast.show {
     width: unset;
   }
 
+  #video-container.minimized {
+    flex-direction: row;
+    left: 0;
+    top: var(--caption-panel-height);
+    width: 100%;
+    height: 11rem;
+    border-radius: unset;
+    box-shadow: 0 0 0.5rem var(--clr-shadow-gray-strong);
+  }
+
+  #controls.minimized {
+    flex-direction: column;
+    row-gap: 0.5rem;
+    bottom: auto;
+    column-gap: unset;
+    right: 1rem;
+  }
+
+  .minimized .call-party {
+    border-radius: unset;
+    box-shadow: unset;
+  }
+
   .call-party.self {
     bottom: 8.5rem;
+    border-radius: unset;
   }
 }

src/views/messages-view.jsx

@@ -157,6 +157,7 @@ class MessagesView extends React.Component {
     this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
     this.handleExpandMedia = this.handleExpandMedia.bind(this);
     this.handleClosePreview = this.handleClosePreview.bind(this);
+    this.handleCallPanelToggle = this.handleCallPanelToggle.bind(this);
     this.handleFormResponse = this.handleFormResponse.bind(this);
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleShowMessageContextMenu = this.handleShowMessageContextMenu.bind(this);
@@ -344,6 +345,7 @@ class MessagesView extends React.Component {
         videoPreview: null,
         videoPostview: null,
         rtcPanel: null,
+        minimizedCallPanel: false,
         typingIndicator: false,
         scrollPosition: 0,
         fetchingMessages: false,
@@ -370,6 +372,7 @@ class MessagesView extends React.Component {
         videoPreview: null,
         videoPostview: null,
         rtcPanel: null,
+        minimizedCallPanel: false,
         typingIndicator: false,
         scrollPosition: 0,
         fetchingMessages: false,
@@ -1106,6 +1109,10 @@ class MessagesView extends React.Component {
     this.props.onCallHangup(topic, seq);
   }
 
+  handleCallPanelToggle() {
+    this.setState({minimizedCallPanel: !this.state.minimizedCallPanel});
+  }
+
   // sendImageAttachment sends the image bits as Drafty message.
   sendImageAttachment(caption, blob) {
     const mime = this.state.imagePreview.mime;
@@ -1487,7 +1494,33 @@ class MessagesView extends React.Component {
           serverAddress={this.props.serverAddress} />
       );
     } else {
+
+      let callPanel = null;
+      if (this.state.rtcPanel) {
+        // P2P call.
+        callPanel = (
+          <CallPanel
+            topic={this.state.topic}
+            seq={this.props.callSeq}
+            callState={this.props.callState}
+            callAudioOnly={this.props.callAudioOnly}
+            tinode={this.props.tinode}
+            title={this.state.title}
+            avatar={this.state.avatar || true}
+            minimized={this.state.minimizedCallPanel}
+
+            onError={this.props.onError}
+            onHangup={this.handleCallHangup}
+            onToggleMinimize={this.handleCallPanelToggle}
+            onInvite={this.props.onCallInvite}
+            onSendOffer={this.props.onCallSendOffer}
+            onIceCandidate={this.props.onCallIceCandidate}
+            onSendAnswer={this.props.onCallSendAnswer} />
+        );
+      }
+
       let component2;
+      let overlay = null;
       if (this.state.imagePreview) {
         // Preview image before sending.
         component2 = (
@@ -1538,26 +1571,12 @@ class MessagesView extends React.Component {
             onClose={this.handleClosePreview}
             onSendMessage={this.sendFileAttachment} />
         );
-      } else if (this.state.rtcPanel) {
+      } else if (callPanel && !this.state.minimizedCallPanel) {
-        // P2P call.
+        component2 = callPanel;
-        component2 = (
-          <CallPanel
-            topic={this.state.topic}
-            seq={this.props.callSeq}
-            callState={this.props.callState}
-            callAudioOnly={this.props.callAudioOnly}
-            tinode={this.props.tinode}
-            title={this.state.title}
-            avatar={this.state.avatar || true}
-
-            onError={this.props.onError}
-            onHangup={this.handleCallHangup}
-            onInvite={this.props.onCallInvite}
-            onSendOffer={this.props.onCallSendOffer}
-            onIceCandidate={this.props.onCallIceCandidate}
-            onSendAnswer={this.props.onCallSendAnswer} />
-        );
       } 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;
@@ -1829,7 +1848,7 @@ class MessagesView extends React.Component {
           </>
         );
       }
-      component = <div id="topic-view"  ref={this.mountDnDEvents}>{component2}</div>
+      component = <div id="topic-view"  ref={this.mountDnDEvents}>{component2}{overlay}</div>
     }
     return component;
   }

src/widgets/call-incoming.jsx

@@ -130,7 +130,7 @@ export default class CallIncoming extends React.Component {
             <div className="caller-name">{truncateString(this.state.fullName, MAX_PEER_TITLE_LENGTH)}
               <BadgeList short={true} trustedBadges={this.state.trustedBadges} /></div>
           </div>
-          <div className="controls">
+          <div id="controls">
             {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
               <>
                 <button className="danger" onClick={this.handleRejectCall}>

src/widgets/call-panel.jsx

@@ -52,8 +52,10 @@ class CallPanel extends React.PureComponent {
     };
     this.isOutgoingCall = props.callState == CALL_STATE_OUTGOING_INITATED;
 
+    this.containerRef = React.createRef();
     this.localRef = React.createRef();
     this.remoteRef = React.createRef();
+
     // Cache for remote ice candidates until initial setup gets completed.
     this.remoteIceCandidatesCache = [];
 
@@ -100,6 +102,53 @@ class CallPanel extends React.PureComponent {
     this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this);
     this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this);
     this.handleDataChannelClose = this.handleDataChannelClose.bind(this);
+
+    this.bounds = {};
+
+    this.dragStart = (event) => {
+      if (!event.target.classList.contains('draggable')) {
+        // Prevent dragging when clicking on buttons or other non-draggable elements.
+        return;
+      }
+      if (window.matchMedia('(width<=640px)')) {
+        // No dragging on small screens.
+        return;
+      }
+      if (this.props.minimized && this.containerRef) {
+        event.stopPropagation();
+        this.containerRef.current.setPointerCapture(event.pointerId);
+        this.containerRef.current.style.cursor = 'grabbing';
+        this.bounds.left = this.containerRef.current.offsetLeft;
+        this.bounds.top = this.containerRef.current.offsetTop;
+        this.bounds.width = this.containerRef.current.offsetWidth;
+        this.bounds.height = this.containerRef.current.offsetHeight;
+
+        const parent = this.containerRef.current.offsetParent;
+        this.bounds.maxX = parent.offsetWidth;
+        this.bounds.maxY = parent.offsetHeight;
+      }
+    };
+    this.drag = (event) => {
+      event.stopPropagation();
+      const el = this.containerRef.current;
+      if (this.props.minimized && this.containerRef && el.hasPointerCapture(event.pointerId)) {
+        // Calculate new position. Restrict to the visible area of the parent element.
+        this.bounds.left = Math.min(Math.max(this.bounds.left + event.movementX, 0),
+          this.bounds.maxX - this.bounds.width);
+        this.bounds.top = Math.min(Math.max(this.bounds.top + event.movementY, 0),
+          this.bounds.maxY - this.bounds.height);
+
+        el.style.left = `${this.bounds.left}px`;
+        el.style.top = `${this.bounds.top}px`;
+      }
+    };
+    this.dragEnd = (event) => {
+      event.stopPropagation();
+      if (this.props.minimized && this.containerRef) {
+        this.containerRef.current.releasePointerCapture(event.pointerId);
+        this.containerRef.current.style.cursor = 'grab';
+      }
+    };
   }
 
   componentDidMount() {
@@ -110,12 +159,24 @@ class CallPanel extends React.PureComponent {
          this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
       this.start();
     }
+
+    if (this.containerRef) {
+      this.containerRef.current.addEventListener('pointerdown', this.dragStart);
+      this.containerRef.current.addEventListener('pointermove', this.drag);
+      this.containerRef.current.addEventListener('pointerup', this.dragEnd);
+    }
   }
 
   componentWillUnmount() {
     const topic = this.props.tinode.getTopic(this.props.topic);
     topic.onInfo = this.previousOnInfo;
     this.stop();
+
+    if (this.containerRef) {
+      this.containerRef.current.removeEventListener('pointerdown', this.dragStart);
+      this.containerRef.current.removeEventListener('pointermove', this.drag);
+      this.containerRef.current.removeEventListener('pointerup', this.dragEnd);
+    }
   }
 
   handleVideoCallAccepted(info) {
@@ -595,11 +656,13 @@ class CallPanel extends React.PureComponent {
       }
     }
 
+    const minimizedClass = this.props.minimized ? 'minimized' : null;
+    const fullScreen = this.props.minimized ? 'fullscreen' : 'fullscreen_exit';
+
     return (
-      <>
+      <div id="video-container" className={minimizedClass} ref={this.containerRef}>
-        <div id="video-container">
         <div id="video-container-panel">
-            <div className="call-party self" disabled={this.state.audioOnly}>
+          <div className="call-party self" disabled={this.state.audioOnly || this.props.minimized}>
             <video ref={this.localRef} autoPlay muted playsInline />
             <div className="caller-name inactive">
               <FormattedMessage id="calls_you_label"
@@ -614,7 +677,7 @@ class CallPanel extends React.PureComponent {
               </> :
               <>
                 <audio ref={this.remoteRef} autoPlay />
-                  <div className={`caller-card${pulseAnimation}`}>
+                <div className={`caller-card${pulseAnimation} draggable`}>
                   <div className="avatar-box">
                     <LetterTile
                       tinode={this.props.tinode}
@@ -628,7 +691,10 @@ class CallPanel extends React.PureComponent {
             }
           </div>
         </div>
-          <div className="controls">
+        <button className="full-screen" onClick={this.props.onToggleMinimize}>
+          <i className="material-icons">{fullScreen}</i>
+        </button>
+        <div id="controls" className={minimizedClass}>
           <button className="danger" onClick={this.handleCloseClick}>
             <i className="material-icons">call_end</i>
           </button>
@@ -640,7 +706,6 @@ class CallPanel extends React.PureComponent {
           </button>
         </div>
       </div>
-      </>
     );
   }
 };

umd/index.dev.js

@@ -9753,6 +9753,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
     this.handleExpandMedia = this.handleExpandMedia.bind(this);
     this.handleClosePreview = this.handleClosePreview.bind(this);
+    this.handleCallPanelToggle = this.handleCallPanelToggle.bind(this);
     this.handleFormResponse = this.handleFormResponse.bind(this);
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleShowMessageContextMenu = this.handleShowMessageContextMenu.bind(this);
@@ -9910,6 +9911,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         videoPreview: null,
         videoPostview: null,
         rtcPanel: null,
+        minimizedCallPanel: false,
         typingIndicator: false,
         scrollPosition: 0,
         fetchingMessages: false,
@@ -9935,6 +9937,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         videoPreview: null,
         videoPostview: null,
         rtcPanel: null,
+        minimizedCallPanel: false,
         typingIndicator: false,
         scrollPosition: 0,
         fetchingMessages: false,
@@ -10589,6 +10592,11 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     });
     this.props.onCallHangup(topic, seq);
   }
+  handleCallPanelToggle() {
+    this.setState({
+      minimizedCallPanel: !this.state.minimizedCallPanel
+    });
+  }
   sendImageAttachment(caption, blob) {
     const mime = this.state.imagePreview.mime;
     const width = this.state.imagePreview.width;
@@ -10909,7 +10917,28 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         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,
+          callAudioOnly: this.props.callAudioOnly,
+          tinode: this.props.tinode,
+          title: this.state.title,
+          avatar: this.state.avatar || true,
+          minimized: this.state.minimizedCallPanel,
+          onError: this.props.onError,
+          onHangup: this.handleCallHangup,
+          onToggleMinimize: this.handleCallPanelToggle,
+          onInvite: this.props.onCallInvite,
+          onSendOffer: this.props.onCallSendOffer,
+          onIceCandidate: this.props.onCallIceCandidate,
+          onSendAnswer: this.props.onCallSendAnswer
+        });
+      }
       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,
@@ -10950,23 +10979,12 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           onClose: this.handleClosePreview,
           onSendMessage: this.sendFileAttachment
         });
-      } else if (this.state.rtcPanel) {
+      } else if (callPanel && !this.state.minimizedCallPanel) {
-        component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_call_panel_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
+        component2 = callPanel;
-          topic: this.state.topic,
-          seq: this.props.callSeq,
-          callState: this.props.callState,
-          callAudioOnly: this.props.callAudioOnly,
-          tinode: this.props.tinode,
-          title: this.state.title,
-          avatar: this.state.avatar || true,
-          onError: this.props.onError,
-          onHangup: this.handleCallHangup,
-          onInvite: this.props.onCallInvite,
-          onSendOffer: this.props.onCallSendOffer,
-          onIceCandidate: this.props.onCallIceCandidate,
-          onSendAnswer: this.props.onCallSendAnswer
-        });
       } 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;
@@ -11253,7 +11271,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       component = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         id: "topic-view",
         ref: this.mountDnDEvents
-      }, component2);
+      }, component2, overlay);
     }
     return component;
   }
@@ -15034,7 +15052,7 @@ class CallIncoming extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       short: true,
       trustedBadges: this.state.trustedBadges
     }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "controls"
+      id: "controls"
     }, this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_INCOMING_RECEIVED ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
       className: "danger",
       onClick: this.handleRejectCall
@@ -15210,6 +15228,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       video: !props.callAudioOnly
     };
     this.isOutgoingCall = props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED;
+    this.containerRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
     this.localRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
     this.remoteRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
     this.remoteIceCandidatesCache = [];
@@ -15247,6 +15266,44 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this);
     this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this);
     this.handleDataChannelClose = this.handleDataChannelClose.bind(this);
+    this.bounds = {};
+    this.dragStart = event => {
+      if (!event.target.classList.contains('draggable')) {
+        return;
+      }
+      if (window.matchMedia('(width<=640px)')) {
+        return;
+      }
+      if (this.props.minimized && this.containerRef) {
+        event.stopPropagation();
+        this.containerRef.current.setPointerCapture(event.pointerId);
+        this.containerRef.current.style.cursor = 'grabbing';
+        this.bounds.left = this.containerRef.current.offsetLeft;
+        this.bounds.top = this.containerRef.current.offsetTop;
+        this.bounds.width = this.containerRef.current.offsetWidth;
+        this.bounds.height = this.containerRef.current.offsetHeight;
+        const parent = this.containerRef.current.offsetParent;
+        this.bounds.maxX = parent.offsetWidth;
+        this.bounds.maxY = parent.offsetHeight;
+      }
+    };
+    this.drag = event => {
+      event.stopPropagation();
+      const el = this.containerRef.current;
+      if (this.props.minimized && this.containerRef && el.hasPointerCapture(event.pointerId)) {
+        this.bounds.left = Math.min(Math.max(this.bounds.left + event.movementX, 0), this.bounds.maxX - this.bounds.width);
+        this.bounds.top = Math.min(Math.max(this.bounds.top + event.movementY, 0), this.bounds.maxY - this.bounds.height);
+        el.style.left = `${this.bounds.left}px`;
+        el.style.top = `${this.bounds.top}px`;
+      }
+    };
+    this.dragEnd = event => {
+      event.stopPropagation();
+      if (this.props.minimized && this.containerRef) {
+        this.containerRef.current.releasePointerCapture(event.pointerId);
+        this.containerRef.current.style.cursor = 'grab';
+      }
+    };
   }
   componentDidMount() {
     const topic = this.props.tinode.getTopic(this.props.topic);
@@ -15255,11 +15312,21 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     if ((this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED || this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) && this.localRef.current) {
       this.start();
     }
+    if (this.containerRef) {
+      this.containerRef.current.addEventListener('pointerdown', this.dragStart);
+      this.containerRef.current.addEventListener('pointermove', this.drag);
+      this.containerRef.current.addEventListener('pointerup', this.dragEnd);
+    }
   }
   componentWillUnmount() {
     const topic = this.props.tinode.getTopic(this.props.topic);
     topic.onInfo = this.previousOnInfo;
     this.stop();
+    if (this.containerRef) {
+      this.containerRef.current.removeEventListener('pointerdown', this.dragStart);
+      this.containerRef.current.removeEventListener('pointermove', this.drag);
+      this.containerRef.current.removeEventListener('pointerup', this.dragEnd);
+    }
   }
   handleVideoCallAccepted(info) {
     RING_SOUND.pause();
@@ -15682,13 +15749,17 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
         remoteActive = t.enabled && t.readyState == 'live';
       }
     }
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    const minimizedClass = this.props.minimized ? 'minimized' : null;
-      id: "video-container"
+    const fullScreen = this.props.minimized ? 'fullscreen' : 'fullscreen_exit';
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      id: "video-container",
+      className: minimizedClass,
+      ref: this.containerRef
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "video-container-panel"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "call-party self",
-      disabled: this.state.audioOnly
+      disabled: this.state.audioOnly || this.props.minimized
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
       ref: this.localRef,
       autoPlay: true,
@@ -15715,7 +15786,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       ref: this.remoteRef,
       autoPlay: true
     }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: `caller-card${pulseAnimation}`
+      className: `caller-card${pulseAnimation} draggable`
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "avatar-box"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
@@ -15725,8 +15796,14 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       title: this.props.title
     })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "caller-name"
-    }, peerTitle))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, peerTitle))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "controls"
+      className: "full-screen",
+      onClick: this.props.onToggleMinimize
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons"
+    }, fullScreen)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      id: "controls",
+      className: minimizedClass
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
       className: "danger",
       onClick: this.handleCloseClick
@@ -15744,7 +15821,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       disabled: disabled
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
-    }, audioIcon)))));
+    }, audioIcon))));
   }
 }
 ;