Improve dragging experience

The entire page is draggable, except:

- buttons
- any input type
- the filmstrip
- the chat panel

1 files changed, 20 insertions, 1 deletions

diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js
index 71a644b..6051936 100644
--- a/app/features/conference/components/Conference.js
+++ b/app/features/conference/components/Conference.js
@@ -213,7 +213,6 @@ class Conference extends Component<Props, State> {
         setupWiFiStats(iframe);
 
         this._api.on('readyToClose', () => this._navigateToHome());
-
         this._api.on('videoConferenceJoined',
             (conferenceInfo: Object) =>
                 this._onVideoConferenceJoined(conferenceInfo));
@@ -266,6 +265,7 @@ class Conference extends Component<Props, State> {
      * @returns {void}
      */
     _onVideoConferenceJoined(conferenceInfo: Object) {
+        setupDragAreas(this._api.getIFrame());
 
         this._setAvatarURL(this.props._avatarURL);
         this._setEmail(this.props._email);
@@ -312,6 +312,25 @@ class Conference extends Component<Props, State> {
 }
 
 /**
+ * Inject some style into the iframe so everything except the filmstrip, chat,
+ * buttons or any input is draggable.
+ *
+ * @param {Object} iframe - reference to the iframe where the drag areas will
+ * be set.
+ * @returns {void}
+ */
+function setupDragAreas(iframe) {
+    const injectStyle = document.createElement('style');
+
+    injectStyle.type = 'text/css';
+    injectStyle.textContent
+        = 'body { -webkit-app-region: drag; }'
+        + 'button, input { -webkit-app-region: no-drag }'
+        + '#chatconversation, .filmstrip { -webkit-app-region: no-drag; }';
+    iframe.contentDocument.head.appendChild(injectStyle);
+}
+
+/**
  * Maps (parts of) the redux state to the React props.
  *
  * @param {Object} state - The redux state.