From 1d3cfbb5692e6d97ee60e9ff04f9fab663f930e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Thu, 21 Jun 2018 09:55:45 +0200 Subject: [PATCH] Improve dragging experience The entire page is draggable, except: - buttons - any input type - the filmstrip - the chat panel --- .../conference/components/Conference.js | 21 ++++++++++++++++++- app/index.html | 3 +++ 2 files changed, 23 insertions(+), 1 deletion(-) 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 { 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 { * @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 { } +/** + * 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 45a0543..1df451e 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 + }