[MM-57964] General UX improvements #779

streamer45 · 2024-06-14T14:09:47Z

Summary

PR makes the following usability improvements:

(popout) Reordered controls to match widget.
(popout) Moved the participant's count next to the icon.
Implemented start/stop recording menu button on widget.
Implemented show call thread functionality on widget (requires desktop changes).
- Still waiting for some clarity on expected behaviour -> https://www.figma.com/design/1Pw8BuAVglnKOlQqmDrOUC?node-id=4213-18396&m=dev#840315254
Screen permissions state should now be synched 2-way across widget and popout.

Designs

https://www.figma.com/design/1Pw8BuAVglnKOlQqmDrOUC/MM-57964-Consistent-controls-in-widget-and-pop-out-window?node-id=1-7&m=dev

Ticket Link

https://mattermost.atlassian.net/browse/MM-57964

streamer45 · 2024-06-14T14:10:20Z

webapp/package.json

@@ -51,7 +51,7 @@
    "@babel/preset-typescript": "7.16.0",
    "@formatjs/cli": "5.0.7",
    "@mattermost/client": "file:mattermost-webapp/webapp/platform/client",
-    "@mattermost/desktop-api": "5.7.0-3",
+    "@mattermost/desktop-api": "https://gitpkg.now.sh/mattermost/desktop/api-types?MM-57964",


Just temporary to get it to pass.

streamer45 · 2024-06-14T15:28:43Z

Mmm, I realized that showing the stop recording modal on Desktop (from widget) will require some more work on both sides.

streamer45 · 2024-06-17T08:30:11Z

Should be good for a first pass now.

cpoile

Nice! Looks great in action too.

cpoile · 2024-06-18T20:32:06Z

webapp/src/actions.ts

+export const selectRHSPost = (postID: string): ActionFuncAsync => {
+    return async (dispatch: DispatchFunc) => {
+        if (window.ProductApi) {
+            dispatch(window.ProductApi.selectRhsPost(postID));


Is this guaranteed to be on ProductApi? If not, we should optionally call it.

I suppose nothing is guaranteed when it comes to webapp :p But it's been there forever if that's what you are asking.

cpoile · 2024-06-18T20:53:06Z

webapp/src/components/call_widget/component.tsx

+                    logDebug('desktopAPI.openStopRecordingModal');
+                    window.desktopAPI.openStopRecordingModal(this.props.channel.id);
+                } else {
+                    this.props.stopCallRecording(this.props.channel.id);


I guess we don't have a confirmation for desktop pre-openStopRecordingModal?

Yeah, I still wanted to give some functionality rather than hide the button. Happy to revisit though.

webapp/src/components/call_widget/component.tsx

cpoile · 2024-06-18T21:17:41Z

webapp/src/index.tsx

@@ -469,6 +476,28 @@ export default class Plugin {
            }));
        }

+        if (window.desktopAPI?.onOpenThread) {
+            logDebug('registering desktopAPI.onOpenThread');
+            this.unsubscribers.push(window.desktopAPI.onOpenThread((threadID: string) => {


This desktopAPI.on... is slick, nice work.

abhijit-singh

Thanks @streamer45! Just a couple of small requests:

When you click on Record call from the widget, while it takes a few seconds for the recording to actually begin, the menu item stays as Record call and clicking on it again triggers an error (even though the recording starts after that). Ideally, it should immediately change to Stop recording even if the recording has not really started. This is how the record button in the pop out window works.

Widget.mov

In the widget, for the Stop recording menu item, can we also change the color of the text to the same red as the icon? They shouldn't have different colors.

Also, I didn't see the Show chat thread menu item on the widget in the desktop app, but I'm assuming that'll be done separately. Do let me know if you need me to review this again. Thanks!

streamer45 · 2024-06-21T07:13:20Z

Thanks @streamer45! Just a couple of small requests:

When you click on Record call from the widget, while it takes a few seconds for the recording to actually begin, the menu item stays as Record call and clicking on it again triggers an error (even though the recording starts after that). Ideally, it should immediately change to Stop recording even if the recording has not really started. This is how the record button in the pop out window works.

Widget.mov
2. In the widget, for the Stop recording menu item, can we also change the color of the text to the same red as the icon? They shouldn't have different colors.

Updated to match the rest of UI.

Also, I didn't see the Show chat thread menu item on the widget in the desktop app, but I'm assuming that'll be done separately. Do let me know if you need me to review this again. Thanks!

@abhijit-singh It's implemented, but since it required Desktop changes you'd need to run the app from master branch. We don't render the menu item if the new functionality to open a thread is not detected since it wouldn't work.

streamer45 · 2024-06-25T08:12:49Z

@abhijit-singh Let me know if this is good to go from a UX perspective.

abhijit-singh · 2024-06-25T12:41:53Z

Yep, good to go from my side @streamer45

streamer45 added 8 commits June 14, 2024 09:16

Move participants number to button

fc96415

Reordering

0d9bd4c

Implement open call thread from widget functionality

8637b66

Implement starting/stopping recording from widget

fe5efd5

Fix types

e0f5d78

Tests

23315dc

Synchronize screen permissions across widget and popout

ade3c00

Fix divider

27505e2

streamer45 added 1: UX Review Requires review by ux 2: Dev Review Requires review by a core committer labels Jun 14, 2024

streamer45 added this to the v0.29.0 / MM 9.11 milestone Jun 14, 2024

streamer45 requested review from cpoile and abhijit-singh June 14, 2024 14:09

streamer45 self-assigned this Jun 14, 2024

streamer45 commented Jun 14, 2024

View reviewed changes

streamer45 added the Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) label Jun 14, 2024

streamer45 removed request for cpoile and abhijit-singh June 14, 2024 16:17

streamer45 added the Work In Progress Not yet ready for review label Jun 14, 2024

Implement stop recording modal on desktop

7561de9

streamer45 requested review from cpoile and abhijit-singh June 17, 2024 08:29

streamer45 removed the Work In Progress Not yet ready for review label Jun 17, 2024

cpoile approved these changes Jun 18, 2024

View reviewed changes

streamer45 mentioned this pull request Jun 19, 2024

[MM-57964] Implement openThread and openStopRecordingModal mattermost/desktop#3073

Merged

streamer45 added 3 commits June 19, 2024 11:26

Simplify

2090548

Merge remote-tracking branch 'origin/main' into MM-57964

9c49a92

Update signatures

010478e

streamer45 removed the 2: Dev Review Requires review by a core committer label Jun 19, 2024

streamer45 added 2 commits June 20, 2024 18:48

Merge remote-tracking branch 'origin/main' into MM-57964

511a51e

Update Desktop API

84ba0b4

abhijit-singh approved these changes Jun 21, 2024

View reviewed changes

streamer45 added 2 commits June 21, 2024 09:08

Update recording state

7481aae

Merge remote-tracking branch 'origin/main' into MM-57964

7978730

streamer45 added 3: Reviews Complete All reviewers have approved the pull request and removed 1: UX Review Requires review by ux Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) labels Jun 25, 2024

Merge remote-tracking branch 'origin/main' into MM-57964

58dcdff

streamer45 merged commit ea93eb2 into main Jun 27, 2024
18 checks passed

streamer45 deleted the MM-57964 branch June 27, 2024 07:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MM-57964] General UX improvements #779

[MM-57964] General UX improvements #779

streamer45 commented Jun 14, 2024

streamer45 Jun 14, 2024

streamer45 commented Jun 14, 2024

streamer45 commented Jun 17, 2024

cpoile left a comment

cpoile Jun 18, 2024

streamer45 Jun 19, 2024

cpoile Jun 18, 2024

streamer45 Jun 19, 2024

cpoile Jun 18, 2024

abhijit-singh left a comment •

edited

Loading

streamer45 commented Jun 21, 2024

streamer45 commented Jun 25, 2024

abhijit-singh commented Jun 25, 2024

[MM-57964] General UX improvements #779

[MM-57964] General UX improvements #779

Conversation

streamer45 commented Jun 14, 2024

Summary

Designs

Ticket Link

streamer45 Jun 14, 2024

Choose a reason for hiding this comment

streamer45 commented Jun 14, 2024

streamer45 commented Jun 17, 2024

cpoile left a comment

Choose a reason for hiding this comment

cpoile Jun 18, 2024

Choose a reason for hiding this comment

streamer45 Jun 19, 2024

Choose a reason for hiding this comment

cpoile Jun 18, 2024

Choose a reason for hiding this comment

streamer45 Jun 19, 2024

Choose a reason for hiding this comment

cpoile Jun 18, 2024

Choose a reason for hiding this comment

abhijit-singh left a comment • edited Loading

Choose a reason for hiding this comment

streamer45 commented Jun 21, 2024

streamer45 commented Jun 25, 2024

abhijit-singh commented Jun 25, 2024

abhijit-singh left a comment •

edited

Loading