From 1d3cfbb5692e6d97ee60e9ff04f9fab663f930e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <s@saghul.net>
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<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 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
+ }
</style>
</head>
<body>
--
GitLab