`GenericContentMainArea`: optional close button rendered by the core

Open
  • Is something wrong?
#307 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start from the reference implementation in external-video-player-graphql/component.tsx (the Styled.ExternalVideoCloseButton block) and compare it with the current GenericContentMainArea component and its GenericContentMainAreaProps. Read how the presenter flag reaches that content and how RTL and primary styling are handled, since the new closeButton option must reuse the same button and layering. Done means the prop is added, core renders the button only for the presenter (or behind an allowed flag) above plugin content, and no item re-creation is needed on presenter change.

Written by the indexing model from the issue text.

Description

The external video player shows a close button in the top right corner of the content, for the presenter only:

// external-video-player-graphql/component.tsx
isPresenter ? (
  <Styled.ExternalVideoCloseButton
    color="primary" icon="close" size="sm" hideLabel
    onClick={stopExternalVideoShare}
    label={intl.formatMessage(intlMessages.closeExternalVideoLabel)}
  />
) : null

GenericContentMainArea only takes contentFunction, so a plugin has to draw its own button inside its content, copying the core styles (position: absolute; top: 0; right: 0, RTL handling, primary colors). It also has to re-render that content when the presenter changes, without recreating the item, which would put it back on top of the presentation area for everyone. The result can drift from the core look, and every plugin does it a little differently.

Proposal

Add an optional close button to GenericContentMainAreaProps, rendered by the core with the same component as the external video:

new GenericContentMainArea({
  contentFunction: (element) => { ... },
  closeButton: {
    label: 'Stop sharing website',   // aria-label / tooltip
    onClick: () => { /* remove the content */ },
  },
});

The core would show it only to the presenter, as for the external video, or the plugin could choose with an allowed flag. It should follow RTL and stay above the plugin content.

Dominant language
No language data
Stars
17
Forks
18
No merged PRs in 30d

Getting set up

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from bigbluebutton/bigbluebutton-html-plugin-sdk

All issues in bigbluebutton/bigbluebutton-html-plugin-sdk

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.