Choose room layout from plugin

[tibroc]

Motivation

A room can have various layouts. A Layout is the mapping of the room's media devices to the BBB UI components, like e.g. "chat on screen X, presentation on screen Y, no participant cameras". These layouts are configured in the room appliance and passed to BBB in an object. We want the user to be able to choose these layouts from a client that has the moderator rights.

Proposed Solution

The plugin should check if the client is moderator. Then it needs to list the layouts that are available for that particular room. This should be found behind the plus-menu button in a similar way to "Manage layouts":

Here we need an additional entry titled "Room Layout" (with some nice icon). After clicking on this a new modal opens that lists the layout available for this room. Since we can not easily provide icons for the rooms, a list that highlights the currently selected layout should be enough:

In this image the "Chat left, video right" is chosen. The list is generated from the label key of the layout object (see below for an example).

Alternatives Considered

The layout settings should also be choosable from the room appliance. However, the plugin should still be able to control it, to make the control of the room more flexible.

Related Issues

As mentioned by @SamuelWei below, the layout selection can be part of the pairing process. So what is proposed ere should be considered as an additional screen after successful pairing in #26 .

Additional Context

In the html-plugin the layout is currently hard-coded here:
https://github.com/bigbluebutton/bigbluebutton-room-media-connector/blob/main/html-plugin/src/room-media-plugin/component.tsx#L63

An example object the room appliance sends looks currenlty like this:

{
  "status": 200,
  "msg": "ok",
  "config": {
    "name": "HU Erwin Schrödinger Zentrum 0101",
    "bbb_username": "MediaSystem0101",
    "layouts": {
      "CHAT_LEFT_VIDEO_RIGHT": {
        "index": 0,
        "label": "Chat left, video right",
        "screens": {
          "left": {
            "bbb-join-parameters": {
              "enforceLayout": "participantsChatOnly",
              "userdata-bbb_display_notifications": false,
              "userdata-bbb_hide_nav_bar": true
            }
          },
          "right": {
            "bbb-join-parameters": {
              "userdata-bbb_hide_actions_bar": true,
              "enforceLayout": "camerasOnly",
              "userdata-bbb_display_notifications": false,
              "userdata-bbb_auto_share_webcam": true,
              "userdata-bbb_listen_only_mode": false,
              "userdata-bbb_skip_check_audio": true,
              "userdata-bbb_skip_video_preview": true,
              "userdata-bbb_preferred_camera_profile": "high",
              "userdata-bbb_hide_nav_bar": true
            }
          }
        }
      },
      "VIDEO_LEFT_PRESENTATION_RIGHT": {
        "index": 1,
        "label": "Video left, presentation right",
        "screens": {
          "left": {
            "bbb-join-parameters": {
              "userdata-bbb_hide_actions_bar": true,
              "enforceLayout": "camerasOnly",
              "userdata-bbb_display_notifications": false,
              "userdata-bbb_auto_share_webcam": true,
              "userdata-bbb_listen_only_mode": false,
              "userdata-bbb_skip_check_audio": true,
              "userdata-bbb_skip_video_preview": true,
              "userdata-bbb_preferred_camera_profile": "high",
              "userdata-bbb_hide_nav_bar": true
            }
          },
          "right": {
            "bbb-join-parameters": {
              "userdata-bbb_self_view_disable": true,
              "enforceLayout": "presentationOnly",
              "userdata-bbb_display_notifications": false,
              "userdata-bbb_auto_share_webcam": true,
              "userdata-bbb_listen_only_mode": false,
              "userdata-bbb_skip_check_audio": true,
              "userdata-bbb_skip_video_preview": true,
              "userdata-bbb_hide_nav_bar": true,
              "userdata-bbb_hide_actions_bar": true
            }
          }
        }
      }
    }
  }
}

[SamuelWei]

The appliance currently does not support layout changes.
The layout is part of the join url, so changing the layout would current result in the room having to disconnect and reconnect.

However choosing the layout can and should be part of the pairing process.

[tibroc]

I was not aware that the appliance can not currently do this. But do you think it would be possible to add the layout-change capability to the appliance?

I do not yet understand why the layout should be chosen during pairing. I would rather argue that the pairing should be quick and easy and you can adjust the default layout (which basically will be defined by the room's hardware admin) later if you want to. But I guess this might depend on the user and this is probably something that warrants some user testing as well. So I will link the two issues and we can start with chosing layout during pairing.

[SamuelWei]

I agree with you. However when we build this in Berlin, the solution BBB gave us were different join url layout parameters.
The appliance therefore provides the layout and the plugin creates the join links with these parameters. If there is a way via the plugin architecture to send commands to clients on each screen with instructions on how to look like that would be posible and awesome. @TiagoJacobs Is this already possible or planed?