[28725] Add call button #5715

larkox · 2020-06-12T13:52:28Z

Summary

At the moment we have several plugins for videoconferencing. It would be great if they were all bundled in a single dropdown separated from other plugins, for instances were they have more than one videoconferencing option configured.

There are two options for the location: channel header or post action

In the channel header, the current version shows the plugin icon (as it was being shown before) if there is only one videoconferencing plugin installed. If there is more than one, a dropdown (as the one for other plugins) will show.

In the post action, the current version shows the plugin icon if there is only one videoconferencing plugin installed. If there is more than one, a dropdown will show.

I also created a new registry for these plugins, different from registerChannelHeaderButton. Depending on the final option we take, I will update the name.

I am missing a proper icon to show at the call button. Probably a phone icon or a camera icon. Position is also up to discussion.

Ticket Link

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

Related Pull Requests

None

Screenshots

Inspiration:

Current implementation (Option A):

Current implementation (Option B):

WebApp desktop view
WebApp Mobile view

jespino · 2020-06-12T19:09:25Z

How common is to have multiple videoconference on from our clients perspective? maybe @aaronrothschild have more knowledge about that.

aaronrothschild · 2020-06-15T11:40:57Z

Awesome stuff @larkox Multiple meeting providers sometimes happen, and this would help in that scenario.

But, the better UX prblem this solves is providing a consistent way to train all users "this is how you can easily start a video meeting" Click the "Call button in whatever channel you are in". Even if there is 5 plugins installed, the call button should always be visible as a button individually. If there are multiple call providers (Zoom and Webex say) - then users can choose from there - rather than a cluttered list of plugins.

Many people "expect" MM to have a "calling feature" built in...this is a way to make it more obvious to the end user where they can start a call from.

@esethna and @michaelgamble @andrewbrown00 Thoughts on this sort of functionality for plugins?

aaronrothschild

I would like to see a proper "icon" for a phone or video call.

esethna · 2020-06-15T21:01:29Z

Even if there is 5 plugins installed, the call button should always be visible as a button individually. If there are multiple call providers (Zoom and Webex say) - then users can choose from there - rather than a cluttered list of plugins.

Like the idea, and totally agree with Aaron on this ^. Call button should always be visible. This could be useful if there are multiple call options and they open in a pop-up when the video icon is clicked

plugins/channel_header_call/channel_header_call.jsx

hmhealey · 2020-06-16T14:21:08Z

While I don't think supporting multiple videoconferencing plugins is something we necessarily need to do, I'm sure there's people that are going to have multiple of them enabled because one dude on their server will prefer Skype over Zoom or something. People are stubborn like that. 😛

I do like the idea of having some way to promote some plugins to being more accessible like the video conferencing though, particularly because it does make it easier to say "click the Make A Call button" than to say "click the Zoom button which can either be on the bar or in this menu".

I'm brainstorming a bit much right now, but I could see this being extended past just videoconferencing vs other plugins where you might want to have different groups of plugins or different priorities for what should and shouldn't be grouped, but that's entirely out of scope for this.

hmhealey · 2020-06-16T14:22:11Z

Also, to avoid rambling more, how does this look in mobile web view?

larkox · 2020-06-18T10:31:20Z

@hmhealey Regarding mobile view, it does not change at the moment. It will still be seen in the same place as other plugins. We can add also some button for this, but since, if I am not mistaken, mobile web view may suffer some changes, I preferred to solve this only on normal view.

hmhealey

Thanks for making those changes!

hmhealey · 2020-06-19T21:02:44Z

plugins/channel_header_plug/index.js

+function mapStateToProps(state, ownProps) {
+ let components = state.plugins.components.ChannelHeaderButton;
+ if (ownProps && ownProps.callPlugins) {
+ components = state.plugins.components.ChannelHeaderCallButton;


Not something to do now, but if the call button version of this ever starts to require more complicated to get its props, we could also consider splitting this up so that the call button has its own mapStateToProps, but it still shares the same underlying ChannelHeaderPlug component. Using a prop to switch between the two components is good enough for now though.

andrewbrown00 · 2020-06-26T15:12:48Z

Thanks @larkox for kicking this off 🎉

@aaronrothschild and @esethna I 5/5 agree that the 'call button' should always be visible.

I also agree with Aaron's comment:

providing a consistent way to train all users "this is how you can easily start a video meeting"

I do want to challenge where we put the call icon, I'm 0/5 if it should live in the channel header vs being near the post control. Most chat products have created the mental model for users that they either want to send/replay to a message or hop on a call/video with someone. If we apply that mental model and the proximity principle, I feel like it we could help users having the call button close to the Post Input at the bottom of the channel.

I definitely want to validate this hypothesis with users and this would quick to mock up the options.

larkox · 2020-06-29T08:00:54Z

@andrewbrown00 I think it would be great to have the call button next to the input text. I am not sure if there is any concern on space, but I can try moving the call button next to the input, next to the attach and emoji buttons. It would have a similar behavior as the attach button:

Do you want me to code it down, or do you prefer to discuss this first?

jespino · 2020-06-29T18:05:01Z

plugins/channel_header_plug/channel_header_plug.jsx

- </span>
- </React.Fragment>
+ <div>
+ <React.Fragment>


You don't need the React.Fragment that is used to represent nodes that have no specific parent, in this case, you have a <div> that acts like the parent of all the children, so, you don't need it.

plugins/registry.js

jespino

Two small comments, otherwise looks good to me.

jgilliam17 · 2020-08-26T20:19:18Z

Hello @larkox - I need some guidance, not seeing the call button. I added Jitsi and Webex on the PR server and can see 2 separate icons in the header, nothing in the textbox.

larkox · 2020-08-27T09:12:48Z

@jgilliam17 The plugin has to be prepared to use this, so a special build of the plugin has to be added. I will add it to this test server.

larkox · 2020-08-27T09:22:47Z

@jgilliam17 I added two different modified "zoom plugins" so you can disable one and see that the other one still shows as expected. Do not hesitate to contact me if you find any other trouble 😄

jgilliam17

Thank you @larkox for setting up zoom for testing
Tested, looks good to merge.

Verified new call button on main channel view textbox.

larkox · 2020-08-28T12:30:25Z

@hmhealey @jgilliam17 Heads up that I have made a small change in the CSS to fix some problems I was having when the plugin put some SVG instead of the base icon. I leave up to you whether it needs a new review or not.

hmhealey · 2020-08-31T20:38:04Z

It still looks good from the dev side at least

jgilliam17 · 2020-09-02T12:27:09Z

Re-tested, call button as expected. Thanks @larkox

mm-cloud-bot · 2020-09-08T15:14:53Z

Test server destroyed

mm-cloud-bot · 2020-09-08T15:24:58Z

Test server creation failed. See the logs for more information.

amyblais · 2020-09-15T14:56:31Z

@larkox @jgilliam17 Does this need a Jira ticket and if yes, can you create one?

jgilliam17 · 2020-09-15T20:29:35Z

@larkox @jgilliam17 Does this need a Jira ticket and if yes, can you create one?

I can create one and link here.

jgilliam17 · 2020-09-15T21:07:32Z

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

* Add Call dropdown for plugins * Update i18n * Remove plugings channel header call and reuse channel header plug * Fix tooltip and i18n error * Add minimum required version and remove unneeded react fragment * Add call button to post * Extract i18n * Change icon by camera icon * Remove header button for calls * Fix tests and remove changes from the header button * Fix lint * Update i18n * Remove unneeded divs, change CameraIcon to functional component, simplify aria label, prevent default on # link and fix typo * Remove channel header references, fix lint and remove unused style * Fix bug * Change callbutton to functional component * Fix CSS

larkox added 1: PM Review Requires review by a product manager 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester 1: UX Review Requires review by a UX Designer labels Jun 12, 2020

larkox requested review from jespino, aaronrothschild, hmhealey and asaadmahmood June 12, 2020 13:52

Add Call dropdown for plugins

10cd5d7

larkox force-pushed the AddCallButton branch from 2bab0da to 10cd5d7 Compare June 12, 2020 14:12

Update i18n

91f6c7a

aaronrothschild approved these changes Jun 15, 2020

View reviewed changes

hmhealey reviewed Jun 16, 2020

View reviewed changes

larkox added 3 commits June 18, 2020 12:32

Merge branch 'master' into AddCallButton

01ea0de

Remove plugings channel header call and reuse channel header plug

4f9dcfa

Fix tooltip and i18n error

25c98a3

larkox requested a review from hmhealey June 18, 2020 18:17

hmhealey approved these changes Jun 19, 2020

View reviewed changes

larkox added this to Submitted in Integrations Team via automation Jun 23, 2020

jespino reviewed Jun 29, 2020

View reviewed changes

plugins/registry.js Show resolved Hide resolved

jespino approved these changes Jun 29, 2020

View reviewed changes

jgilliam17 approved these changes Aug 27, 2020

View reviewed changes

jgilliam17 added 4: Reviews Complete All reviewers have approved the pull request and removed 3: QA Review Requires review by a QA tester Setup Cloud Test Server Setup a test server using Mattermost Cloud labels Aug 27, 2020

Fix CSS

01bc11a

jgilliam17 added the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Aug 31, 2020

Merge branch 'master' into AddCallButton

746f5e3

Merge branch 'master' into AddCallButton

a516b6c

larkox removed the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Sep 8, 2020

larkox merged commit adb578d into mattermost:master Sep 8, 2020

Integrations Team automation moved this from Submitted to Done Sep 8, 2020

hanzei added this to the v5.28 milestone Sep 9, 2020

jgilliam17 changed the title ~~Add call button~~ [28725]Add call button Sep 15, 2020

amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation and removed Changelog/Not Needed Does not require a changelog entry labels Sep 15, 2020

hanzei changed the title ~~[28725]Add call button~~ [28725] Add call button Sep 29, 2020

amyblais added the Changelog/Not Needed Does not require a changelog entry label Sep 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[28725] Add call button #5715

[28725] Add call button #5715

larkox commented Jun 12, 2020 •

edited by jgilliam17

Loading

jespino commented Jun 12, 2020

aaronrothschild commented Jun 15, 2020

aaronrothschild left a comment

esethna commented Jun 15, 2020 •

edited

Loading

hmhealey commented Jun 16, 2020

hmhealey commented Jun 16, 2020

larkox commented Jun 18, 2020

hmhealey left a comment

hmhealey Jun 19, 2020

andrewbrown00 commented Jun 26, 2020 •

edited

Loading

larkox commented Jun 29, 2020

jespino Jun 29, 2020

jespino left a comment

jgilliam17 commented Aug 26, 2020

larkox commented Aug 27, 2020

larkox commented Aug 27, 2020

jgilliam17 left a comment

larkox commented Aug 28, 2020

hmhealey commented Aug 31, 2020

jgilliam17 commented Sep 2, 2020

mm-cloud-bot commented Sep 8, 2020

mm-cloud-bot commented Sep 8, 2020

amyblais commented Sep 15, 2020

jgilliam17 commented Sep 15, 2020

jgilliam17 commented Sep 15, 2020

[28725] Add call button #5715

[28725] Add call button #5715

Conversation

larkox commented Jun 12, 2020 • edited by jgilliam17 Loading

Summary

Ticket Link

Related Pull Requests

Screenshots

jespino commented Jun 12, 2020

aaronrothschild commented Jun 15, 2020

aaronrothschild left a comment

Choose a reason for hiding this comment

esethna commented Jun 15, 2020 • edited Loading

hmhealey commented Jun 16, 2020

hmhealey commented Jun 16, 2020

larkox commented Jun 18, 2020

hmhealey left a comment

Choose a reason for hiding this comment

hmhealey Jun 19, 2020

Choose a reason for hiding this comment

andrewbrown00 commented Jun 26, 2020 • edited Loading

larkox commented Jun 29, 2020

jespino Jun 29, 2020

Choose a reason for hiding this comment

jespino left a comment

Choose a reason for hiding this comment

jgilliam17 commented Aug 26, 2020

larkox commented Aug 27, 2020

larkox commented Aug 27, 2020

jgilliam17 left a comment

Choose a reason for hiding this comment

larkox commented Aug 28, 2020

hmhealey commented Aug 31, 2020

jgilliam17 commented Sep 2, 2020

mm-cloud-bot commented Sep 8, 2020

mm-cloud-bot commented Sep 8, 2020

amyblais commented Sep 15, 2020

jgilliam17 commented Sep 15, 2020

jgilliam17 commented Sep 15, 2020

larkox commented Jun 12, 2020 •

edited by jgilliam17

Loading

esethna commented Jun 15, 2020 •

edited

Loading

andrewbrown00 commented Jun 26, 2020 •

edited

Loading