diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js
index 71a644b14d1039d81c669570ec0531ab31d37326..60519369f8d215bb4cbf01c2487896522b2035be 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);
@@ -311,6 +311,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.
*
diff --git a/app/index.html b/app/index.html
index 45a05430db8a21c226f9a3767043a21d5bad53c0..1df451e95aa56df592044f1dad8812d4f8edb96a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -8,6 +8,9 @@
body {
-webkit-app-region: drag
}
+ button, input {
+ -webkit-app-region: no-drag
+ }
</style>
</head>
<body>