Adds Element Call support, call UI elements, and rudimentary widget support

[GigiaJ]

Description

Adds Element Call support for both the npm embedded package as well as a hosted instance. Adds a level of rudimentary widget support (not entirely sure of the extent even needed). Adds calling interface elements such as a nav bar status section with a mute/unmute button, video enable/disable button, and hang up button. Icons are somewhat of a placeholder, but are relatively fitting. Added a segmentation between Text rooms and Call rooms and provided an icon for call rooms (need to add the visibility icon support such as public/private/etc) Added a --disabled for now-- icon for calling in DMs in the room header Added dual iframe state juggling to provide lobby support akin to Discord where a user might wish to view another call's lobby or text channel Added a text channel toggle to show or hide the room text channel Added user icons and usernames to appear in the room nav to provide call activity visibility akin to Discord's previous interface implementation Added mobile support for calling and text channel swapping and made the default behavior on mobile simply place you in the lobby and never in a call (does currently pop on your camera and mic, but is not joined to a call.) Adjusted Room Header to account for a call room vs text room and behave accordingly

** Added a call or text room creation option in the room creation menu Probably some other bits I'm forgetting, apologies. I feel like this is at a good enough stage to open a dialogue and move forward with, so I'm opening a PR.

Fixes # #528

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] This change requires a documentation update

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas (I did, but comments didn't match the code style of the project. Happy to retroactively add them though.)
• [ ] I have made corresponding changes to the documentation (I'd happily add docs pertaining to calling or simply hosting the standalone element call and SFU)
• [ ] My changes generate no new warnings (The iframes probably will always generate some level as widgets are created and destroyed)

[github-actions[bot]]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[GigiaJ]

I have read the CLA Document and I hereby sign the CLA

[github-actions[bot]]

Preview: https://2335--pr-cinny.netlify.app ⚠️ Exercise caution. Use test accounts. ⚠️

[GigiaJ]

Just noticed on that preview the embedded npm package is causing it to appear with "Element call is open in another tab" Haha. Give me a moment. I was almost exclusively tested with standalone and swapped to the npm package at the end.

(The expected behavior can still be reasonably seen after hitting the chat icon beside a call room name. Just that first join behavior is behaving odd.)

[GigiaJ]

Should be good to work with the embedded call npm package as well as w/ standalone now.

[GigiaJ]

Should now be in a very stable state for review now. @ajbura

No rush at all, just letting you know this is in a decent enough state --I feel-- to bother taking a peek at.

[Spaenny]

I tested this a bit today, and noticed there is currently no way to leave a voice chat room from within Cinny? Maybe I missed something if that's the case I'm sorry!

[GigiaJ]

I tested this a bit today, and noticed there is currently no way to leave a voice chat room from within Cinny? Maybe I missed something if that's the case I'm sorry!

Absolutely no need to apologize. So the goal was to mimic Discord UX as close as possible. The UI could've been tad bit cleaner for sure, but there are two ways to disconnect from a call (three if you close the page).

As well as if you tap on the room you're in again it'll show you the call room view (or if you hit the chat button there too)

I think some colorization of those icons might make them provide better visual clarity; the VLC icon could probably be a film projector icon instead too.

[GimleLarpes]

FYI the VideoCamera and Mic icons, as well as their mute versions were added in folds v2.2.0. No hangup icon yet AFAIK though.

[Spaenny]

Sorry @GigiaJ for the late reply. I was actually not talking about hanging up a call but leaving the room it creates, but I noticed this is not an issue on desktop but it is an issue on mobile.

On desktop you can use the dot menu to leave the room, on mobile you cannot open it up and therefor not leave the call room.

[GigiaJ]

Sorry @GigiaJ for the late reply. I was actually not talking about hanging up a call but leaving the room it creates, but I noticed this is not an issue on desktop but it is an issue on mobile.

On desktop you can use the dot menu to leave the room, on mobile you cannot open it up and therefor not leave the call room.

I see, apologies for misunderstanding. Yeah, that is a bit of an oversight, I'll sort that out. For now, I'll add the dot menu back.

Appreciate the feedback.

[GigiaJ]

FYI the VideoCamera and Mic icons, as well as their mute versions were added in folds v2.2.0. No hangup icon yet AFAIK though.

Oh sweet. Thanks for noticing and letting me know.

[GigiaJ]

More options are now available in the call window and the status bar uses the new icons c:

[GigiaJ]

Appreciate it @GimleLarpes

[GimleLarpes]

I found a bug: It's possible to desynch the RoomCallNavStatus icons by switching between call room text chats.

Steps to reproduce:

1. Join a call room normally
2. Go to another call room by pressing the "Open Chat" button (doesn't synch the opened room)
3. Mute/unmute using the embedded ElementCall widget
4. Go back to the original room

[GigiaJ]

I found a bug: It's possible to desynch the RoomCallNavStatus icons by switching between call room text chats.

Steps to reproduce:

1. Join a call room normally

2. Go to another call room by pressing the "Open Chat" button (doesn't synch the opened room)

3. Mute/unmute using the embedded ElementCall widget

4. Go back to the original room

There are a couple of these desyncs with being absurdly fast (which for those we should just catch up on as managing the state in those cases with message transports sucks).

Another one I've noted is: Access a call room through Chat Button Hit Join Call Then hit the In-call Leave Button

I believe I was only getting the behavior to occur on WebKit which is amusing.

I'll look into both as the state management on this is a bit of a pain.

I wanted to say you've been super on reviewing. Seriously.

[Henry-Hiles]

I'm very excited for this, is it in a state where it should be tested?

[GigiaJ]

I'm very excited for this, is it in a state where it should be tested?

Absolutely is. It is in a more or less stable state. Feel free to give it a go. :)

[Henry-Hiles]

I'm very excited for this, is it in a state where it should be tested?

Absolutely is. It is in a more or less stable state. Feel free to give it a go. :)

Hmm, where should the button for calling be? I cannot find it. I did set elementCallUrl = "https://call.federated.nexus";.

[Henry-Hiles]

I also tried without setting that, and no luck.

[Spaenny]

This is only for voice chat rooms, there is no 1-2-1 calls implemented in this PR.

[Henry-Hiles]

This is only for voice chat rooms, there is no 1-2-1 calls implemented in this PR.

Oh, I didn't know those existed, I'll try it, thanks! Thoughts on adding it for DMs too?

[Henry-Hiles]

Hmm, I'm getting this error when I use an external element call instance:

Unexpected Application Error!
Permission denied to access property "document" on cross-origin object

QEe@https://app.federated.nexus/assets/index-DL-wsQiZ.js:38:33373
Gw@https://app.federated.nexus/assets/index-DL-wsQiZ.js:7:19552
n6@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:3143
iM@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:44880
tM@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:39824
_se@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:39750
mv@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:39598
p6@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:35960
JP@https://app.federated.nexus/assets/index-DL-wsQiZ.js:9:34907
k@https://app.federated.nexus/assets/index-DL-wsQiZ.js:2:11808
T@https://app.federated.nexus/assets/index-DL-wsQiZ.js:2:12172

[Henry-Hiles]

It seems to me like its because element call is on a separate subdomain.

[Henry-Hiles]

It works fine when I use the inbuilt widgets, so that's fine I guess :)

[Henry-Hiles]

I think this widget could arguably use a bit of work though, it's not fitting with the rest of the UI:

[lavenderdotpet]

is there a planned release window for this?

[kfiven]

Re: Initial thoughts on this: https://github.com/cinnyapp/cinny/issues/528#issuecomment-3344980301

Please stop commenting here unless you are reviewing this PR to implement it in Cinny. Any discussion related to this feature, please do in the linked issue.