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

Commit cb1af0d

Browse files
robintownrobintown
authored
Redesign the picture-in-picture window (#9800)
* Remove unnecessary PipContainer component * Redesign the picture-in-picture window * Add a hover effect to the controls * Clarify that WidgetPip has call-specific behavior
1 parent 6b15562 commit cb1af0d

File tree

28 files changed

+493
-330
lines changed

28 files changed

+493
-330
lines changed

‎cypress/e2e/widgets/widget-pip-close.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ describe("Widget PIP", () => {
145145
win.mxActiveWidgetStore.setWidgetPersistence(DEMO_WIDGET_ID, roomId, true);
146146

147147
// checks that pip window is opened
148-
cy.get(".mx_LegacyCallView_pip").should("exist");
148+
cy.get(".mx_WidgetPip").should("exist");
149149

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

166166
// checks that pip window is closed
167-
cy.get(".mx_LegacyCallView_pip").should("not.exist");
167+
cy.get(".mx_WidgetPip").should("not.exist");
168168
});
169169
});
170170
});

‎res/css/_components.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@import "./components/views/location/_ZoomButtons.pcss";
3131
@import "./components/views/messages/_MBeaconBody.pcss";
3232
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
33+
@import "./components/views/pips/_WidgetPip.pcss";
3334
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
3435
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
3536
@import "./components/views/settings/devices/_DeviceDetails.pcss";
@@ -373,7 +374,6 @@
373374
@import "./views/voip/_LegacyCallViewForRoom.pcss";
374375
@import "./views/voip/_LegacyCallViewHeader.pcss";
375376
@import "./views/voip/_LegacyCallViewSidebar.pcss";
376-
@import "./views/voip/_PiPContainer.pcss";
377377
@import "./views/voip/_VideoFeed.pcss";
378378
@import "./voice-broadcast/atoms/_LiveBadge.pcss";
379379
@import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";

‎res/css/components/views/pips/_WidgetPip.pcss

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_WidgetPip {
18+
width: 320px;
19+
height: 220px;
20+
border-radius: 8px;
21+
contain: paint;
22+
color: $call-primary-content;
23+
cursor: pointer;
24+
}
25+
26+
.mx_WidgetPip_header,
27+
.mx_WidgetPip_footer {
28+
position: absolute;
29+
left: 0;
30+
height: 60px;
31+
width: 100%;
32+
box-sizing: border-box;
33+
transition: opacity ease 0.15s;
34+
35+
.mx_WidgetPip:not(:hover) > & {
36+
opacity: 0;
37+
}
38+
}
39+
40+
.mx_WidgetPip_header {
41+
top: 0;
42+
padding: $spacing-12;
43+
display: flex;
44+
font-size: $font-12px;
45+
font-weight: $font-semi-bold;
46+
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
47+
}
48+
49+
.mx_WidgetPip_backButton {
50+
height: $spacing-24;
51+
display: flex;
52+
align-items: center;
53+
gap: $spacing-12;
54+
55+
> .mx_Icon {
56+
color: $call-light-quaternary-content;
57+
padding: 0;
58+
}
59+
}
60+
61+
.mx_WidgetPip_footer {
62+
bottom: 0;
63+
padding: $spacing-12 $spacing-8;
64+
display: flex;
65+
justify-content: flex-end;
66+
align-items: flex-end;
67+
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
68+
}

‎res/css/views/messages/_LegacyCallEvent.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ limitations under the License.
6868
&.mx_LegacyCallEvent_rejected,
6969
&.mx_LegacyCallEvent_noAnswer {
7070
.mx_LegacyCallEvent_type_icon::before {
71-
mask-image: url("$(res)/img/voip/declined-voice.svg");
71+
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
7272
}
7373
}
7474
}

‎res/css/views/rooms/_AppsDrawer.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
1515
limitations under the License.
1616
*/
1717

18-
$MiniAppTileHeight: 200px;
18+
$MiniAppTileHeight: 220px;
1919
/* TODO this should be 300px but that's too large */
2020
$MinWidth: 240px;
2121

‎res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ limitations under the License.
163163
background-color: $alert;
164164

165165
&::before {
166-
mask-image: url("$(res)/img/voip/call-view/hangup.svg");
166+
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
167167
background-color: white; /* Same on both themes */
168168
}
169169
}

‎res/css/views/voip/_CallView.pcss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ limitations under the License.
3232
height: 100%;
3333
border: none;
3434
border-radius: inherit;
35-
background-color: $call-lobby-background;
35+
background-color: $call-background;
3636
}
3737

3838
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
@@ -44,10 +44,10 @@ limitations under the License.
4444
min-height: 0;
4545
flex-grow: 1;
4646
padding: $spacing-12;
47-
color: $call-lobby-primary-content;
48-
background-color: $call-lobby-background;
47+
color: $call-primary-content;
48+
background-color: $call-background;
4949

50-
--facepile-background: $call-lobby-background;
50+
--facepile-background: $call-background;
5151
border-radius: 8px;
5252

5353
display: flex;
@@ -66,7 +66,7 @@ limitations under the License.
6666
width: 100%;
6767
max-width: 800px;
6868
aspect-ratio: 1.5;
69-
background-color: $call-lobby-system;
69+
background-color: $call-system;
7070

7171
border-radius: 20px;
7272
overflow: hidden;
@@ -104,7 +104,7 @@ limitations under the License.
104104
left: 0;
105105
right: 0;
106106

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

109109
display: flex;
110110
justify-content: center;
@@ -120,7 +120,7 @@ limitations under the License.
120120
width: $size;
121121
height: $size;
122122

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

126126
&::before {
@@ -129,7 +129,7 @@ limitations under the License.
129129
mask-repeat: no-repeat;
130130
mask-size: 20px;
131131
mask-position: center;
132-
background-color: $call-lobby-primary-content;
132+
background-color: $call-primary-content;
133133
height: 100%;
134134
width: 100%;
135135
}
@@ -153,7 +153,7 @@ limitations under the License.
153153
width: $size;
154154
height: $size;
155155

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

159159
&::before {
@@ -162,7 +162,7 @@ limitations under the License.
162162
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
163163
mask-size: $size;
164164
mask-position: center;
165-
background-color: $call-lobby-primary-content;
165+
background-color: $call-primary-content;
166166
height: 100%;
167167
width: 100%;
168168
}
@@ -171,10 +171,10 @@ limitations under the License.
171171
&.mx_CallView_deviceButtonWrapper_muted {
172172
.mx_CallView_deviceButton,
173173
.mx_CallView_deviceListButton {
174-
background-color: $call-lobby-primary-content;
174+
background-color: $call-primary-content;
175175

176176
&::before {
177-
background-color: $call-lobby-system;
177+
background-color: $call-system;
178178
}
179179
}
180180

‎res/css/views/voip/_LegacyCallPreview.pcss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ limitations under the License.
2222
left: 0;
2323
position: fixed;
2424
top: 0;
25-
26-
pointer-events: initial; /* restore pointer events so the user can leave/interact */
25+
/* Display above any widget elements */
26+
z-index: 102;
2727

2828
.mx_VideoFeed_remote.mx_VideoFeed_voice {
2929
min-height: 150px;

‎res/css/views/voip/_PiPContainer.pcss

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎res/img/element-icons/call/hangup.svg

Lines changed: 2 additions & 1 deletion
Loading

‎res/img/voip/call-view/hangup.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎res/img/voip/declined-voice.svg

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎res/themes/dark/css/_dark.pcss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,10 @@ $call-view-content-background: $quinary-content;
188188

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

191-
$call-lobby-system: $system;
192-
$call-lobby-background: $background;
193-
$call-lobby-primary-content: $primary-content;
191+
$call-system: $system;
192+
$call-background: $background;
193+
$call-primary-content: $primary-content;
194+
$call-light-quaternary-content: #c1c6cd;
194195
/* ******************** */
195196

196197
/* Location sharing */

‎res/themes/legacy-dark/css/_legacy-dark.pcss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,10 @@ $call-view-content-background: $quinary-content;
119119

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

122-
$call-lobby-system: $system;
123-
$call-lobby-background: $background;
124-
$call-lobby-primary-content: $primary-content;
122+
$call-system: $system;
123+
$call-background: $background;
124+
$call-primary-content: $primary-content;
125+
$call-light-quaternary-content: #c1c6cd;
125126

126127
$roomlist-filter-active-bg-color: $panel-actions;
127128
$roomlist-bg-color: $header-panel-bg-color;

‎res/themes/legacy-light/css/_legacy-light.pcss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,10 @@ $call-view-content-background: #21262c;
182182
$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
183183

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

189190
$username-variant1-color: #368bd6;
190191
$username-variant2-color: #ac3ba8;

‎res/themes/light/css/_light.pcss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,9 +273,11 @@ $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
273273
$voipcall-plinth-color: $system;
274274

275275
/* All of these are from dark theme */
276-
$call-lobby-system: #21262c;
277-
$call-lobby-background: #15191e;
278-
$call-lobby-primary-content: #ffffff;
276+
$call-system: #21262c;
277+
$call-background: #15191e;
278+
$call-primary-content: #ffffff;
279+
/* This one is from light theme */
280+
$call-light-quaternary-content: #c1c6cd;
279281
/* ******************** */
280282

281283
/* One-off colors */

‎src/components/structures/LoggedInView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ import { DefaultTagID } from "../../stores/room-list/models";
4141
import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
4242
import { Action } from "../../dispatcher/actions";
4343
import LeftPanel from "./LeftPanel";
44-
import PipContainer from "../views/voip/PipContainer";
4544
import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
4645
import RoomListStore from "../../stores/room-list/RoomListStore";
4746
import NonUrgentToastContainer from "./NonUrgentToastContainer";
@@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload
7170
import { IConfigOptions } from "../../IConfigOptions";
7271
import LeftPanelLiveShareWarning from "../views/beacon/LeftPanelLiveShareWarning";
7372
import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
73+
import { PipContainer } from "./PipContainer";
7474

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

0 commit comments

Comments
 (0)