Fix invitation links and add a movable QR popup for BBB 3.0 and 4.0

[hiroshisuga]

What does this PR do?

This PR fixes invitation-link generation and improves the session-sharing interface.

The 'invite other users' option now uses the meeting-provided GraphQL loginUrl, which is the frontend invitation URL, instead of generating another authenticated session URL with getJoinUrl(). The 'open my session on another device' option continues to use getJoinUrl() because it is intended to share the current user's authenticated session across devices.

This PR also:

• keeps QR codes dark on a white background so that they remain readable when BBB is using dark mode (the popup does not respect the app's dark mode in this version, actually)
• replaces the in-client modal with a movable browser popup rendered through a React portal, allowing the popup to be moved to another display and shown in full-screen mode
• adds URL copying through the Clipboard API, with legacy and manual-copy fallbacks
• makes 'Invite other users' the default option and clearly distinguishes it from sharing the current session
• adds localized UI and error messages, currently including English and Japanese
• supports both BigBlueButton 3.0 and 4.0 from the same plugin bundle
• registers the plugin in the Action-bar on BBB 3.0 and in the Apps-gallery on BBB 4.0

Closes Issue(s)

Closes #24, #16, #12, and #10

Motivation

A likely use case for Inviting other users is a hybrid class in which an in-person lecture is also being streamed online. In this situation, the teacher may want students in the physical classroom to join the online meeting from their smartphones, for example to participate in chat, polls, or other online activities.

Thus, the invitation QR code will typically be shown on a projector. An in-client modal cannot be moved independently from the main BBB browser window, which makes it difficult to keep the meeting controls on the teacher's primary display while showing the QR code on the projector.

To support this workflow, the sharing interface is now rendered through a React portal into a separate browser popup. The popup can be moved to the projector display and optionally switched to full-screen mode.

The invitation flow now uses loginUrl, so invited participants receive the proper frontend (typically Greenlight) invitation flow rather than a URL that reuses the current user's session. At the same time, the original session-sharing behavior remains available for users who intentionally want to open their existing session on another device.

More

The change that this PR requests is so large, and I may have to post it as an independent project. But it at least showcases the demand in my university.

I would prefer the item be placed at Action Menu, instead of Action Bar in BBB 3.0, because showing QR code to share session is not very frequent operation. But due to the incompatibility of SDK, in which Action Menu interface has been removed in the latest version, I stay at Action Bar. Once bigbluebutton/bigbluebutton-html-plugin-sdk#232 is solved, I will address it.

AI helped me to code, especially for generating CSS and debugging.

Screenshots on BBB4.0 follow:

[antobinary]

Thank you, @hiroshisuga !!

[GuiLeme]

Thanks a lot for this contribution! Using loginUrl for invitations fixes a real problem, and the movable popup is a nice fit for the hybrid-class use case. I'd like to merge it after a few small changes:

1. Fix the lint error

npm run lint currently fails with one error:

src/config-modal/modal.tsx
201:7 error Block must not be padded by blank lines padded-blocks

Running npm run lint:fix fixes it.

2. Add CORS headers to the dev server

The plugin now fetches its locale files from the browser. In development, the BBB client and the dev server have different origins, so the request is blocked by CORS. Could you add these headers to devServer in webpack.config.js?

headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
  'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization, ngrok-skip-browser-warning',
},

3. Change the base branch to v0.0.x

For now, this repository keeps a separate branch for each BBB line: v0.0.x for BBB 3.0 and v0.1.x for BBB 4.0. Changes go into v0.0.x first, and then we merge v0.0.x into v0.1.x, so they reach both versions. Could you change the base of this PR from main to v0.0.x? Right now main and v0.0.x point to the same commit, so you only need to edit the base branch on GitHub, without rebasing.

You can keep the support for both BBB 3.0 and 4.0 in a single bundle. We plan to move to a single line for both versions soon, so this is a good step in that direction.

Optional: meetings without a loginUrl

When loginUrl is empty, "Invite other users" is still selected by default and only shows an error after confirming. You could hide or disable it in that case and default to "Open my session on another device", as the BBB client does in its session details panel.

Optional: tidy up the commit history

If you have time, it would be nice to squash some of the commits. For example, the "Add files via upload", "Create dum" and "Delete dum" commits could go into a few commits that each describe a change. This is not required for the merge.

Thanks again!

[hiroshisuga]

Hi @GuiLeme , thanks for the review.
According to your suggestion, I

• fixed the lint error,
• added the requested CORS headers to devServer in webpack.config.js,
• changed the PR base branch to v0.0.x,
• added some codes so that when loginUrl is unavailable, the plugin defaults to “Open my session on another device” and hides the invitation option,
• cleaned up the commit history,
• normalized capitalization in the English UI text (not included in your suggestions).

I also confirmed that this code worked on my local 4.0 server.
However, I could not test it with the loginURL being spontaneously unavailable. I only tested it using APImate.
Would you mind testing for other cases if necessary?