From 8129333dcc35d4ea8cec32521489e1819cc52f5b Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 16 Sep 2020 22:38:12 -0600
Subject: [PATCH 1/2] Make the PIP Jitsi look and feel like the 1:1 PIP
* Similar sizing
* Fix pointers so the jitsi widget doesn't feel clickable when it's not
* We might want to introduce click-to-visit-room for the Jitsi widget (like the 1:1 call), however the Jitsi widget has many more controls to worry about
* Remove the menu bar from the widget to avoid accidents
---
res/css/views/rooms/_AppsDrawer.scss | 4 ++--
res/css/views/voip/_CallContainer.scss | 14 ++++++++++++--
src/components/views/elements/PersistentApp.js | 1 +
3 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index fee3d61153..b9249d310a 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-$MiniAppTileHeight: 114px;
+$MiniAppTileHeight: 200px;
.mx_AppsDrawer {
margin: 5px 5px 5px 18px;
@@ -220,7 +220,7 @@ $MiniAppTileHeight: 114px;
}
.mx_AppTileBody_mini {
- height: 112px;
+ height: $MiniAppTileHeight;
width: 100%;
overflow: hidden;
}
diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss
index 4d26d8a312..650302b7e1 100644
--- a/res/css/views/voip/_CallContainer.scss
+++ b/res/css/views/voip/_CallContainer.scss
@@ -23,9 +23,16 @@ limitations under the License.
z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
- cursor: pointer;
+ // Disable pointer events for Jitsi widgets to function. Direct
+ // calls have their own cursor and behaviour, but we need to make
+ // sure the cursor hits the iframe for Jitsi which will be at a
+ // different level.
+ pointer-events: none;
.mx_CallPreview {
+ pointer-events: initial; // restore pointer events so the user can leave/interact
+ cursor: pointer;
+
.mx_VideoView {
width: 350px;
}
@@ -37,7 +44,7 @@ limitations under the License.
}
.mx_AppTile_persistedWrapper div {
- min-width: 300px;
+ min-width: 350px;
}
.mx_IncomingCallBox {
@@ -45,6 +52,9 @@ limitations under the License.
background-color: $primary-bg-color;
padding: 8px;
+ pointer-events: initial; // restore pointer events so the user can accept/decline
+ cursor: pointer;
+
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
diff --git a/src/components/views/elements/PersistentApp.js b/src/components/views/elements/PersistentApp.js
index 686739a9f7..a3e413151a 100644
--- a/src/components/views/elements/PersistentApp.js
+++ b/src/components/views/elements/PersistentApp.js
@@ -82,6 +82,7 @@ export default class PersistentApp extends React.Component {
showDelete={false}
showMinimise={false}
miniMode={true}
+ showMenubar={false}
/>;
}
}
From 849a5e4a3976b7856e0c1efb998ed375c0a5887f Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 17 Sep 2020 14:58:48 -0600
Subject: [PATCH 2/2] Round the jitsi pip corners
---
res/css/views/rooms/_AppsDrawer.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index b9249d310a..244e88ca3e 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -223,6 +223,7 @@ $MiniAppTileHeight: 200px;
height: $MiniAppTileHeight;
width: 100%;
overflow: hidden;
+ border-radius: 8px;
}
.mx_AppTile .mx_AppTileBody,