imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Render Jitsi (and other sticky widgets) in PiP container, so it can be dragged and the "jump to room functionality" is provided (#7450)

Browse source 
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
Timo 2022-01-13 12:10:41 +01:00 • committed by GitHub
parent 8b01b68fa3
commit ef95644e23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 396 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -304,7 +304,6 @@
@import "./views/typography/_Heading.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/CallView/_CallViewButtons.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallPreview.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_CallViewForRoom.scss";
@ -313,4 +312,5 @@
@import "./views/voip/_DialPad.scss";
@import "./views/voip/_DialPadContextMenu.scss";
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";

13
res/css/views/voip/_CallView.scss
View file

@ -20,14 +20,15 @@ limitations under the License.
background-color: $dark-panel-bg-color;
padding-left: 8px;
padding-right: 8px;
// XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
// XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place
pointer-events: initial;
}
.mx_CallView_large {
padding-bottom: 10px;
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2); // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
// The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
margin-right: calc($container-gap-width / 2);
margin-bottom: 10px;
display: flex;
flex-direction: column;
@ -46,7 +47,7 @@ limitations under the License.
width: 320px;
padding-bottom: 8px;
background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
border-radius: 8px;
.mx_CallView_video_hold,
@ -170,7 +171,7 @@ limitations under the License.
background-position: center;
filter: blur(20px);
&::after {
content: '';
content: "";
display: block;
position: absolute;
width: 100%;
@ -194,10 +195,10 @@ limitations under the License.
display: block;
margin-left: auto;
margin-right: auto;
content: '';
content: "";
width: 40px;
height: 40px;
background-image: url('$(res)/img/voip/paused.svg');
background-image: url("$(res)/img/voip/paused.svg");
background-position: center;
background-size: cover;
}

6
res/css/views/voip/_CallContainer.scss → res/css/views/voip/_PiPContainer.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallContainer {
.mx_PiPContainer {
position: absolute;
right: 20px;
bottom: 72px;
@ -25,8 +25,4 @@ limitations under the License.
// sure the cursor hits the iframe for Jitsi which will be at a
// different level.
pointer-events: none;
.mx_AppTile_persistedWrapper div {
min-width: 350px;
}
}