`MediaAreaOption`: support an active state like the built-in options

Open Beginner friendly
  • Is something wrong?
#305 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start in media-sharing/component.tsx, where MediaButton is rendered with a hard-coded color="default", and find the MediaAreaOptionProps definition used by the plugin API. Add an optional active boolean to that type and pass it through as color={active ? "primary" : "default"}. Done when a plugin option created with active: true shows the same primary color as the built-in sharing options and omitting it keeps the current default look.

Written by the indexing model from the issue text.

Description

Built-in Media Area options show when their content is being shared. "Slides" uses color="active" (light blue tile, blue icon), and "Video link" and "Camera as content" use color="primary" while they are shared. Plugin options are always rendered with color="default":

// media-sharing/component.tsx
<MediaButton
  key={item.id}
  dataTest={item.dataTest}
  color="default"
  ...

and MediaAreaOptionProps has no field for it. A plugin that shares something into the presentation area cannot show the presenter that its content is live. The only workaround is to change the label, or to pass an svgContent icon with a hard-coded fill.

Proposal

Add an optional field to MediaAreaOptionProps, passed through to MediaButton:

new MediaAreaOption({
  label: 'Website',
  icon,
  tooltip: 'Change or stop sharing the website',
  allowed: true,
  active: true, // or: color: 'default' | 'active' | 'primary'
  onClick: () => {},
});

A boolean active that maps to the same color the built-in sharing options use (primary) keeps the look consistent, and plugins cannot pick arbitrary styles.

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.