Redesign the picture-in-picture window by robintown · Pull Request #9800 · matrix-org/matrix-react-sdk

robintown · 2022-12-20T02:55:33Z

This updates the look of the picture-in-picture window for widgets/calls to the new, simplified design. 1:1 calls still use the old design, for now.

Element Call	Jitsi

Closes element-hq/element-web#23980

Here's what your changelog entry will look like:

✨ Features

Redesign the picture-in-picture window (#9800). Fixes Modify PIP window designs to cater for EC integration element-hq/element-web#23980.

germain-gg

lgtm!

germain-gg · 2022-12-22T08:42:16Z

res/css/views/messages/_LegacyCallEvent.pcss

            &.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");


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

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.

germain-gg · 2022-12-22T10:09:59Z

src/components/views/pips/WidgetPip.tsx

+/**
+ * A picture-in-picture view for a widget.
+ */
+export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom }) => {


This component looks very tightly coupled with calls. Should its name be a bit more specific? As at first glance it looks rather generic, but can't be re-used.

I've left the name alone since this component really is capable of displaying any persistent widget, even ones that aren't for calls, but I have added a mention of its call-specific behavior in the comment now.

@grimhilt

* Switch threads on for everyone ([\#9879](matrix-org/matrix-react-sdk#9879)). * Make threads use new Unable to Decrypt UI ([\#9876](matrix-org/matrix-react-sdk#9876)). Fixes element-hq/element-web#24060. * Add edit and remove actions to link in RTE ([\#9864](matrix-org/matrix-react-sdk#9864)). * Remove extensible events v1 experimental rendering ([\#9881](matrix-org/matrix-react-sdk#9881)). * Make create poll dialog scale better (PSG-929) ([\#9873](matrix-org/matrix-react-sdk#9873)). Fixes element-hq/element-web#21855. * Change RTE mode icons ([\#9861](matrix-org/matrix-react-sdk#9861)). * Device manager - prune client information events after remote sign out ([\#9874](matrix-org/matrix-react-sdk#9874)). * Check connection before starting broadcast ([\#9857](matrix-org/matrix-react-sdk#9857)). * Enable sent receipt for poll start events (PSG-962) ([\#9870](matrix-org/matrix-react-sdk#9870)). * Change clear notifications to have more readable copy ([\#9867](matrix-org/matrix-react-sdk#9867)). * Combine search results when the query is present in multiple successive messages ([\#9855](matrix-org/matrix-react-sdk#9855)). Fixes element-hq/element-web#3977. Contributed by @grimhilt. * Disable bubbles for broadcasts ([\#9860](matrix-org/matrix-react-sdk#9860)). Fixes element-hq/element-web#24140. * Enable reactions and replies for broadcasts ([\#9856](matrix-org/matrix-react-sdk#9856)). Fixes element-hq/element-web#24042. * Improve switching between rich and plain editing modes ([\#9776](matrix-org/matrix-react-sdk#9776)). * Redesign the picture-in-picture window ([\#9800](matrix-org/matrix-react-sdk#9800)). Fixes element-hq/element-web#23980. * User on-boarding tasks now appear in a static order. ([\#9799](matrix-org/matrix-react-sdk#9799)). Contributed by @GoodGuyMarco. * Device manager - contextual menus ([\#9832](matrix-org/matrix-react-sdk#9832)). * If listening a non-live broadcast and changing the room, the broadcast will be paused ([\#9825](matrix-org/matrix-react-sdk#9825)). Fixes element-hq/element-web#24078. * Consider own broadcasts from other device as a playback ([\#9821](matrix-org/matrix-react-sdk#9821)). Fixes element-hq/element-web#24068. * Add link creation to rich text editor ([\#9775](matrix-org/matrix-react-sdk#9775)). * Add mark as read option in room setting ([\#9798](matrix-org/matrix-react-sdk#9798)). Fixes element-hq/element-web#24053. * Device manager - current device design and copy tweaks ([\#9801](matrix-org/matrix-react-sdk#9801)). * Unify notifications panel event design ([\#9754](matrix-org/matrix-react-sdk#9754)). * Add actions for integration manager to send and read certain events ([\#9740](matrix-org/matrix-react-sdk#9740)). * Device manager - design tweaks ([\#9768](matrix-org/matrix-react-sdk#9768)). * Change room list sorting to activity and unread first by default ([\#9773](matrix-org/matrix-react-sdk#9773)). Fixes element-hq/element-web#24014. * Add a config flag to enable the rust crypto-sdk ([\#9759](matrix-org/matrix-react-sdk#9759)). * Improve decryption error UI by consolidating error messages and providing instructions when possible ([\#9544](matrix-org/matrix-react-sdk#9544)). Contributed by @duxovni. * Honor font settings in Element Call ([\#9751](matrix-org/matrix-react-sdk#9751)). Fixes element-hq/element-web#23661. * Device manager - use deleteAccountData to prune device manager client information events ([\#9734](matrix-org/matrix-react-sdk#9734)). * Display rooms & threads as unread (bold) if threads have unread messages. ([\#9763](matrix-org/matrix-react-sdk#9763)). Fixes element-hq/element-web#23907. * Don't prefer STIXGeneral over the default font ([\#9711](matrix-org/matrix-react-sdk#9711)). Fixes element-hq/element-web#23899. * Use the same avatar colour when creating 1:1 DM rooms ([\#9850](matrix-org/matrix-react-sdk#9850)). Fixes element-hq/element-web#23476. * Fix space lock icon size ([\#9854](matrix-org/matrix-react-sdk#9854)). Fixes element-hq/element-web#24128. * Make calls automatically disconnect if the widget disappears ([\#9862](matrix-org/matrix-react-sdk#9862)). Fixes element-hq/element-web#23664. * Fix emoji in RTE editing ([\#9827](matrix-org/matrix-react-sdk#9827)). * Fix export with attachments on formats txt and json ([\#9851](matrix-org/matrix-react-sdk#9851)). Fixes element-hq/element-web#24130. Contributed by @grimhilt. * Fixed empty `Content-Type` for encrypted uploads ([\#9848](matrix-org/matrix-react-sdk#9848)). Contributed by @K3das. * Fix sign-in instead link on password reset page ([\#9820](matrix-org/matrix-react-sdk#9820)). Fixes element-hq/element-web#24087. * The seekbar now initially shows the current position ([\#9796](matrix-org/matrix-react-sdk#9796)). Fixes element-hq/element-web#24051. * Fix: Editing a poll will silently change it to a closed poll ([\#9809](matrix-org/matrix-react-sdk#9809)). Fixes element-hq/element-web#23176. * Make call tiles look less broken in the right panel ([\#9808](matrix-org/matrix-react-sdk#9808)). Fixes element-hq/element-web#23716. * Prevent unnecessary m.direct updates ([\#9805](matrix-org/matrix-react-sdk#9805)). Fixes element-hq/element-web#24059. * Fix checkForPreJoinUISI for thread roots ([\#9803](matrix-org/matrix-react-sdk#9803)). Fixes element-hq/element-web#24054. * Snap in PiP widget when content changed ([\#9797](matrix-org/matrix-react-sdk#9797)). Fixes element-hq/element-web#24050. * Load RTE components only when RTE labs is enabled ([\#9804](matrix-org/matrix-react-sdk#9804)). * Ensure that events are correctly updated when they are edited. ([\#9789](matrix-org/matrix-react-sdk#9789)). * When stopping a broadcast also stop the playback ([\#9795](matrix-org/matrix-react-sdk#9795)). Fixes element-hq/element-web#24052. * Prevent to start two broadcasts at the same time ([\#9744](matrix-org/matrix-react-sdk#9744)). Fixes element-hq/element-web#23973. * Correctly handle limited sync responses by resetting the thread timeline ([\#3056](matrix-org/matrix-js-sdk#3056)). Fixes element-hq/element-web#23952. * Fix failure to start in firefox private browser ([\#3058](matrix-org/matrix-js-sdk#3058)). Fixes element-hq/element-web#24216.

@andybalaam

Changes in [1.11.20](https://github.com/vector-im/element-web/releases/tag/v1.11.20) (2023-01-20) ================================================================================================= ## 🐛 Bug Fixes * (Part 2) of prevent crash on older browsers (replace .at() with array.length-1) Changes in [1.11.19](https://github.com/vector-im/element-web/releases/tag/v1.11.19) (2023-01-18) ================================================================================================= ## 🐛 Bug Fixes * fix crash on browsers that don't support `Array.at` ([\#9935](matrix-org/matrix-react-sdk#9935)). Contributed by @andybalaam. Changes in [1.11.18](https://github.com/vector-im/element-web/releases/tag/v1.11.18) (2023-01-18) ================================================================================================= ## ✨ Features * Switch threads on for everyone ([\#9879](matrix-org/matrix-react-sdk#9879)). * Make threads use new Unable to Decrypt UI ([\#9876](matrix-org/matrix-react-sdk#9876)). Fixes #24060. * Add edit and remove actions to link in RTE [Labs] ([\#9864](matrix-org/matrix-react-sdk#9864)). * Remove extensible events v1 experimental rendering ([\#9881](matrix-org/matrix-react-sdk#9881)). * Make create poll dialog scale better (PSG-929) ([\#9873](matrix-org/matrix-react-sdk#9873)). Fixes #21855. * Change RTE mode icons ([\#9861](matrix-org/matrix-react-sdk#9861)). * Device manager - prune client information events after remote sign out ([\#9874](matrix-org/matrix-react-sdk#9874)). * Check connection before starting broadcast ([\#9857](matrix-org/matrix-react-sdk#9857)). * Enable sent receipt for poll start events (PSG-962) ([\#9870](matrix-org/matrix-react-sdk#9870)). * Change clear notifications to have more readable copy ([\#9867](matrix-org/matrix-react-sdk#9867)). * combine search results when the query is present in multiple successive messages ([\#9855](matrix-org/matrix-react-sdk#9855)). Fixes #3977. Contributed by @grimhilt. * Disable bubbles for broadcasts ([\#9860](matrix-org/matrix-react-sdk#9860)). Fixes #24140. * Enable reactions and replies for broadcasts ([\#9856](matrix-org/matrix-react-sdk#9856)). Fixes #24042. * Improve switching between rich and plain editing modes ([\#9776](matrix-org/matrix-react-sdk#9776)). * Redesign the picture-in-picture window ([\#9800](matrix-org/matrix-react-sdk#9800)). Fixes #23980. * User on-boarding tasks now appear in a static order. ([\#9799](matrix-org/matrix-react-sdk#9799)). Contributed by @GoodGuyMarco. * Device manager - contextual menus ([\#9832](matrix-org/matrix-react-sdk#9832)). * If listening a non-live broadcast and changing the room, the broadcast will be paused ([\#9825](matrix-org/matrix-react-sdk#9825)). Fixes #24078. * Consider own broadcasts from other device as a playback ([\#9821](matrix-org/matrix-react-sdk#9821)). Fixes #24068. * Add link creation to rich text editor ([\#9775](matrix-org/matrix-react-sdk#9775)). * Add mark as read option in room setting ([\#9798](matrix-org/matrix-react-sdk#9798)). Fixes #24053. * Device manager - current device design and copy tweaks ([\#9801](matrix-org/matrix-react-sdk#9801)). * Unify notifications panel event design ([\#9754](matrix-org/matrix-react-sdk#9754)). * Add actions for integration manager to send and read certain events ([\#9740](matrix-org/matrix-react-sdk#9740)). * Device manager - design tweaks ([\#9768](matrix-org/matrix-react-sdk#9768)). * Change room list sorting to activity and unread first by default ([\#9773](matrix-org/matrix-react-sdk#9773)). Fixes #24014. * Add a config flag to enable the rust crypto-sdk ([\#9759](matrix-org/matrix-react-sdk#9759)). * Improve decryption error UI by consolidating error messages and providing instructions when possible ([\#9544](matrix-org/matrix-react-sdk#9544)). Contributed by @duxovni. * Honor font settings in Element Call ([\#9751](matrix-org/matrix-react-sdk#9751)). Fixes #23661. * Device manager - use deleteAccountData to prune device manager client information events ([\#9734](matrix-org/matrix-react-sdk#9734)). ## 🐛 Bug Fixes * Display rooms & threads as unread (bold) if threads have unread messages. ([\#9763](matrix-org/matrix-react-sdk#9763)). Fixes #23907. * Don't prefer STIXGeneral over the default font ([\#9711](matrix-org/matrix-react-sdk#9711)). Fixes #23899. * Use the same avatar colour when creating 1:1 DM rooms ([\#9850](matrix-org/matrix-react-sdk#9850)). Fixes #23476. * Fix space lock icon size ([\#9854](matrix-org/matrix-react-sdk#9854)). Fixes #24128. * Make calls automatically disconnect if the widget disappears ([\#9862](matrix-org/matrix-react-sdk#9862)). Fixes #23664. * Fix emoji in RTE editing ([\#9827](matrix-org/matrix-react-sdk#9827)). * Fix export with attachments on formats txt and json ([\#9851](matrix-org/matrix-react-sdk#9851)). Fixes #24130. Contributed by @grimhilt. * Fixed empty `Content-Type` for encrypted uploads ([\#9848](matrix-org/matrix-react-sdk#9848)). Contributed by @K3das. * Fix sign-in instead link on password reset page ([\#9820](matrix-org/matrix-react-sdk#9820)). Fixes #24087. * The seekbar now initially shows the current position ([\#9796](matrix-org/matrix-react-sdk#9796)). Fixes #24051. * Fix: Editing a poll will silently change it to a closed poll ([\#9809](matrix-org/matrix-react-sdk#9809)). Fixes #23176. * Make call tiles look less broken in the right panel ([\#9808](matrix-org/matrix-react-sdk#9808)). Fixes #23716. * Prevent unnecessary m.direct updates ([\#9805](matrix-org/matrix-react-sdk#9805)). Fixes #24059. * Fix checkForPreJoinUISI for thread roots ([\#9803](matrix-org/matrix-react-sdk#9803)). Fixes #24054. * Snap in PiP widget when content changed ([\#9797](matrix-org/matrix-react-sdk#9797)). Fixes #24050. * Load RTE components only when RTE labs is enabled ([\#9804](matrix-org/matrix-react-sdk#9804)). * Ensure that events are correctly updated when they are edited. ([\#9789](matrix-org/matrix-react-sdk#9789)). * When stopping a broadcast also stop the playback ([\#9795](matrix-org/matrix-react-sdk#9795)). Fixes #24052. * Prevent to start two broadcasts at the same time ([\#9744](matrix-org/matrix-react-sdk#9744)). Fixes #23973. * Correctly handle limited sync responses by resetting the thread timeline ([\#3056](matrix-org/matrix-js-sdk#3056)). Fixes element-hq/element-web#23952. * Fix failure to start in firefox private browser ([\#3058](matrix-org/matrix-js-sdk#3058)). Fixes element-hq/element-web#24216.

robintown added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Dec 20, 2022

github-actions bot deployed to Netlify December 20, 2022 03:01 View deployment

robintown force-pushed the pip-redesign branch from e83a1b9 to 44d192c Compare December 20, 2022 03:05

github-actions bot deployed to Netlify December 20, 2022 03:10 View deployment

robintown force-pushed the pip-redesign branch from 44d192c to ba0f262 Compare December 20, 2022 04:55

github-actions bot deployed to Netlify December 20, 2022 05:01 View deployment

robintown force-pushed the pip-redesign branch from ba0f262 to 1a221b2 Compare December 20, 2022 06:12

robintown marked this pull request as ready for review December 20, 2022 06:12

robintown requested a review from a team as a code owner December 20, 2022 06:12

robintown requested review from germain-gg and kerryarchibald December 20, 2022 06:12

github-actions bot deployed to Netlify December 20, 2022 06:16 View deployment

Remove unnecessary PipContainer component

42cc3ca

robintown force-pushed the pip-redesign branch from 1a221b2 to 633c26d Compare December 20, 2022 15:28

github-actions bot deployed to Netlify December 20, 2022 15:32 View deployment

Redesign the picture-in-picture window

871db62

robintown force-pushed the pip-redesign branch from 633c26d to 871db62 Compare December 20, 2022 19:39

github-actions bot deployed to Netlify December 20, 2022 19:44 View deployment

robintown mentioned this pull request Dec 21, 2022

Be able to display 2 PIP widgets: one for a call, another for a voice broadcast element-hq/element-web#24076

Closed

germain-gg approved these changes Dec 22, 2022

View reviewed changes

robintown added 3 commits January 3, 2023 21:27

Merge branch 'develop' into pip-redesign

44f74c9

Add a hover effect to the controls

95edad9

Clarify that WidgetPip has call-specific behavior

571a581

github-actions bot deployed to Netlify January 4, 2023 02:39 View deployment

Fix a strict type error

112cd8f

robintown enabled auto-merge (squash) January 4, 2023 02:42

github-actions bot deployed to Netlify January 4, 2023 02:47 View deployment

Fix tests

5718f66

github-actions bot deployed to Netlify January 4, 2023 03:57 View deployment

robintown merged commit cb1af0d into matrix-org:develop Jan 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Redesign the picture-in-picture window#9800

Redesign the picture-in-picture window#9800
robintown merged 7 commits intomatrix-org:developfrom
robintown:pip-redesign

robintown commented Dec 20, 2022 •

edited by github-actions bot

Loading

Uh oh!

germain-gg left a comment

Uh oh!

germain-gg Dec 22, 2022

Uh oh!

robintown Jan 4, 2023 •

edited

Loading

Uh oh!

germain-gg Dec 22, 2022

Uh oh!

robintown Jan 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

robintown commented Dec 20, 2022 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ Features

Uh oh!

germain-gg left a comment

Choose a reason for hiding this comment

Uh oh!

germain-gg Dec 22, 2022

Choose a reason for hiding this comment

Uh oh!

robintown Jan 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

germain-gg Dec 22, 2022

Choose a reason for hiding this comment

Uh oh!

robintown Jan 4, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

robintown commented Dec 20, 2022 •

edited by github-actions bot

Loading

robintown Jan 4, 2023 •

edited

Loading