bigbluebutton/bigbluebutton-html-plugin-sdk

Extensible areas: floating window

Closed this issue · 0 comments

We would like to add a new extensible area to BBB plugin architecture: a floating window.

The idea is that a plugin can add a floating window on BBB.

The practical usage if it will be related with other already existing ui areas, so let's say when a user clicks on a menu it can have an onClick that defines the floating window.

Another example could be a plugin that offers a "floating window" depending on what is the partial content filled on the chat message input.

image

The api for this extensible area would be pluginApi.setFloatingWindows([]).

Properties for a floating window:

  • title: String?
  • movable: Boolean
  • top: Number
  • left: Number
  • width: Number
  • height: Number
  • contentFunction: Function(Element)

Example pseudo-implementation:

Static HTML:

pluginApi.setFloatingWindows([
{
    top:0, left:0, width:100, height:100, 
    movable:false, 
    contentFunction: (el) => {
        el.innerHTML = "Hello!!";
    }
}
])

More robust implementation:

pluginApi.setFloatingWindows([
{
    top:0, left:0, width:100, height:100, 
    movable:false, 
    contentFunction: (el) => {
        React.createApp(el, reactComponent);
    }
}
])