Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Redesign the picture-in-picture window #9800

Merged
merged 7 commits into from
Jan 4, 2023
Merged

Redesign the picture-in-picture window #9800

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
42cc3ca
Remove unnecessary PipContainer component
robintown Dec 16, 2022
871db62
Redesign the picture-in-picture window
robintown Dec 20, 2022
44f74c9
Merge branch 'develop' into pip-redesign
robintown Jan 4, 2023
95edad9
Add a hover effect to the controls
robintown Jan 4, 2023
571a581
Clarify that WidgetPip has call-specific behavior
robintown Jan 4, 2023
112cd8f
Fix a strict type error
robintown Jan 4, 2023
5718f66
Fix tests
robintown Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cypress/e2e/widgets/widget-pip-close.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ describe("Widget PIP", () => {
win.mxActiveWidgetStore.setWidgetPersistence(DEMO_WIDGET_ID, roomId, true);

// checks that pip window is opened
cy.get(".mx_LegacyCallView_pip").should("exist");
cy.get(".mx_WidgetPip").should("exist");

// checks that widget is opened in pip
cy.accessIframe(`iframe[title="${DEMO_WIDGET_NAME}"]`).within({}, () => {
Expand All @@ -164,7 +164,7 @@ describe("Widget PIP", () => {
}

// checks that pip window is closed
cy.get(".mx_LegacyCallView_pip").should("not.exist");
cy.get(".mx_WidgetPip").should("not.exist");
});
});
});
Expand Down
2 changes: 1 addition & 1 deletion res/css/_components.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
@import "./components/views/location/_ZoomButtons.pcss";
@import "./components/views/messages/_MBeaconBody.pcss";
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
@import "./components/views/pips/_WidgetPip.pcss";
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
@import "./components/views/settings/devices/_DeviceDetails.pcss";
@import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
Expand Down Expand Up @@ -372,7 +373,6 @@
@import "./views/voip/_LegacyCallViewForRoom.pcss";
@import "./views/voip/_LegacyCallViewHeader.pcss";
@import "./views/voip/_LegacyCallViewSidebar.pcss";
@import "./views/voip/_PiPContainer.pcss";
@import "./views/voip/_VideoFeed.pcss";
@import "./voice-broadcast/atoms/_LiveBadge.pcss";
@import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
Expand Down
71 changes: 71 additions & 0 deletions res/css/components/views/pips/_WidgetPip.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_WidgetPip {
position: fixed;
left: 0;
top: 0;
/* Display above the widget element */
z-index: 102;
}

.mx_WidgetPip_content {
width: 320px;
height: 220px;
border-radius: 8px;
contain: paint;
color: $call-primary-content;
cursor: pointer;
}

.mx_WidgetPip_header,
.mx_WidgetPip_footer {
position: absolute;
left: 0;
height: 60px;
width: 100%;
box-sizing: border-box;
}

.mx_WidgetPip_header {
top: 0;
padding: $spacing-12;
display: flex;
font-size: $font-12px;
font-weight: $font-semi-bold;
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

.mx_WidgetPip_backButton {
height: $spacing-24;
display: flex;
align-items: center;
gap: $spacing-12;

> .mx_Icon {
color: $call-light-quaternary-content;
padding: 0;
}
}

.mx_WidgetPip_footer {
bottom: 0;
padding: $spacing-12 $spacing-8;
display: flex;
justify-content: flex-end;
align-items: flex-end;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}
2 changes: 1 addition & 1 deletion res/css/views/messages/_LegacyCallEvent.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ limitations under the License.
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("$(res)/img/voip/declined-voice.svg");
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non blocking for this PR: Rather than using mask-image could we use inline SVG and currentColor as described in here ? https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/icons.md

Copy link
Member Author

@robintown robintown Jan 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going to ignore this since this particular change is in the code for the legacy 1:1 call system, which we're trying to avoid investing further time on, even though it has plenty of known technical debt. I am, however, making an attempt to use inline SVGs more in new code.

}
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/rooms/_AppsDrawer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

$MiniAppTileHeight: 200px;
$MiniAppTileHeight: 220px;
/* TODO this should be 300px but that's too large */
$MinWidth: 240px;

Expand Down
2 changes: 1 addition & 1 deletion res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ limitations under the License.
background-color: $alert;

&::before {
mask-image: url("$(res)/img/voip/call-view/hangup.svg");
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
background-color: white; /* Same on both themes */
}
}
Expand Down
24 changes: 12 additions & 12 deletions res/css/views/voip/_CallView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ limitations under the License.
height: 100%;
border: none;
border-radius: inherit;
background-color: $call-lobby-background;
background-color: $call-background;
}

/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
Expand All @@ -44,8 +44,8 @@ limitations under the License.
min-height: 0;
flex-grow: 1;
padding: $spacing-12;
color: $call-lobby-primary-content;
background-color: $call-lobby-background;
color: $call-primary-content;
background-color: $call-background;
border-radius: 8px;

display: flex;
Expand All @@ -59,7 +59,7 @@ limitations under the License.
margin: $spacing-8 auto 0;

.mx_FacePile_faces .mx_BaseAvatar_image {
border-color: $call-lobby-background;
border-color: $call-background;
}
}

Expand All @@ -68,7 +68,7 @@ limitations under the License.
width: 100%;
max-width: 800px;
aspect-ratio: 1.5;
background-color: $call-lobby-system;
background-color: $call-system;

border-radius: 20px;
overflow: hidden;
Expand Down Expand Up @@ -106,7 +106,7 @@ limitations under the License.
left: 0;
right: 0;

background-color: rgba($call-lobby-background, 0.9);
background-color: rgba($call-background, 0.9);

display: flex;
justify-content: center;
Expand All @@ -122,7 +122,7 @@ limitations under the License.
width: $size;
height: $size;

background-color: $call-lobby-system;
background-color: $call-system;
border-radius: calc($size / 2);

&::before {
Expand All @@ -131,7 +131,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $call-lobby-primary-content;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
Expand All @@ -154,7 +154,7 @@ limitations under the License.
width: $size;
height: $size;

background-color: $call-lobby-system;
background-color: $call-system;
border-radius: calc($size / 2);

&::before {
Expand All @@ -163,7 +163,7 @@ limitations under the License.
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-size: $size;
mask-position: center;
background-color: $call-lobby-primary-content;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
Expand All @@ -172,10 +172,10 @@ limitations under the License.
&.mx_CallView_deviceButtonWrapper_muted {
.mx_CallView_deviceButton,
.mx_CallView_deviceListButton {
background-color: $call-lobby-primary-content;
background-color: $call-primary-content;

&::before {
background-color: $call-lobby-system;
background-color: $call-system;
}
}

Expand Down
2 changes: 0 additions & 2 deletions res/css/views/voip/_LegacyCallPreview.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ limitations under the License.
left: 0;
top: 0;

pointer-events: initial; /* restore pointer events so the user can leave/interact */

.mx_VideoFeed_remote.mx_VideoFeed_voice {
min-height: 150px;
}
Expand Down
28 changes: 0 additions & 28 deletions res/css/views/voip/_PiPContainer.pcss
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion res/img/element-icons/call/hangup.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions res/img/voip/call-view/hangup.svg
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions res/img/voip/declined-voice.svg
View file
Open in desktop

This file was deleted.

7 changes: 4 additions & 3 deletions res/themes/dark/css/_dark.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,10 @@ $call-view-content-background: $quinary-content;

$video-feed-secondary-background: $system;

$call-lobby-system: $system;
$call-lobby-background: $background;
$call-lobby-primary-content: $primary-content;
$call-system: $system;
$call-background: $background;
$call-primary-content: $primary-content;
$call-light-quaternary-content: #c1c6cd;
/* ******************** */

/* Location sharing */
Expand Down
7 changes: 4 additions & 3 deletions res/themes/legacy-dark/css/_legacy-dark.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,10 @@ $call-view-content-background: $quinary-content;

$video-feed-secondary-background: $system;

$call-lobby-system: $system;
$call-lobby-background: $background;
$call-lobby-primary-content: $primary-content;
$call-system: $system;
$call-background: $background;
$call-primary-content: $primary-content;
$call-light-quaternary-content: #c1c6cd;

$roomlist-filter-active-bg-color: $panel-actions;
$roomlist-bg-color: $header-panel-bg-color;
Expand Down
7 changes: 4 additions & 3 deletions res/themes/legacy-light/css/_legacy-light.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,10 @@ $call-view-content-background: #21262c;
$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */

/* All of these are from dark theme */
$call-lobby-system: #21262c;
$call-lobby-background: #15191e;
$call-lobby-primary-content: #ffffff;
$call-system: #21262c;
$call-background: #15191e;
$call-primary-content: #ffffff;
$call-light-quaternary-content: #c1c6cd;

$username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8;
Expand Down
8 changes: 5 additions & 3 deletions res/themes/light/css/_light.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,9 +273,11 @@ $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
$voipcall-plinth-color: $system;

/* All of these are from dark theme */
$call-lobby-system: #21262c;
$call-lobby-background: #15191e;
$call-lobby-primary-content: #ffffff;
$call-system: #21262c;
$call-background: #15191e;
$call-primary-content: #ffffff;
/* This one is from light theme */
$call-light-quaternary-content: #c1c6cd;
/* ******************** */

/* One-off colors */
Expand Down
2 changes: 1 addition & 1 deletion src/components/structures/LoggedInView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import { DefaultTagID } from "../../stores/room-list/models";
import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
import { Action } from "../../dispatcher/actions";
import LeftPanel from "./LeftPanel";
import PipContainer from "../views/voip/PipContainer";
import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
import RoomListStore from "../../stores/room-list/RoomListStore";
import NonUrgentToastContainer from "./NonUrgentToastContainer";
Expand Down Expand Up @@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload
import { IConfigOptions } from "../../IConfigOptions";
import LeftPanelLiveShareWarning from "../views/beacon/LeftPanelLiveShareWarning";
import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
import { PipContainer } from "./PipContainer";

// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
Expand Down
Loading