browser-sdk: Add toggleBreakout(), and togglePeople() to embed element

nrolls commented 3 months ago

Description

Summary: Add support for new commands: openBreakout, closeBreakout, and togglePeople. Syntax fix in toggleChat command definition

Related Issue: Reliant on this PR https://github.com/whereby/pwa/pull/4100

Testing

In sdk repo, apps/embed-element-app example

Imported WherebyEmbedElement
Point roomUrl to local stack/room
adjust const elmRef = useRef(null);
Adjust attributes in to disable minimal, and include people tab and breakout
Add buttons testing new functions. Example: <button onClick={ () => elmRef.current?.openBreakout()}>breakout

Then in terminal: yarn dev:embed-element-app

Screenshots/GIFs (if applicable)

Checklist

[ ] My code follows the project's coding standards.
[ ] Prefixed the PR title and commit messages with the service or package name
[ ] I have written unit tests (if applicable).
[ ] I have updated the documentation (if applicable).
[ ] By submitting this pull request, I confirm that my contribution is made under the terms of the MIT license.

Additional Information

Gotcha: The openBreakout() command will still work for non-host participants. However, the user can't actually edit or initiate any breakout settings.

The above note will be clarified in our documentation and expected that customers development teams manage this from their side. i.e., if (host = true){show/enable button} else {don't show}