[set-display-nav-bar]

README.md

@@ -35,7 +35,7 @@ you do the following:
 2. Add reference to it on BigBlueButton's `/create` call or add it on `/usr/share/bbb-web/WEB-INF/classes/bigbluebutton.properties`:
 
 ```
-pluginsManifests=[{"url": "http://localhost:4701/manifest.json"}]
+pluginManifests=[{"url": "http://localhost:4701/manifest.json"}]
 ```
 
 *Running from souce code with a remote BBB-server*
@@ -78,7 +78,7 @@ or
 5. Add this create parameter into the API-mate of the server you are testing it on:
 
 ```
-pluginsManifests=[{"url": "https://<uuid>.ngrok-free.app/manifest.json"}]
+pluginManifests=[{"url": "https://<uuid>.ngrok-free.app/manifest.json"}]
 ```
 
 And there you go, you can test it freely.
@@ -195,34 +195,34 @@ const {
   deleteEntry: deleteEntryFunction, // Function to delete specific item or wipe all
   replaceEntry: replaceEntryFunction, // Function replace a specifi item
 } = useDataChannel<CustomType>(
-  channelName, // Defined according to what is on settings.yml from bbb-htlm5
+  channelName, // Defined according to what is on manifest.json
   DataChannelTypes.All_ITEMS, // | LATEST_ITEM | NEW_ITEMS -> ALL_ITEMS is default
   subChannelName = 'default', // If no subchannelName is specified, it will be 'default'
 );
 ```
 
 Wiping all data off will delete every item from the specific data-channel within the specific subchannel-name.
 
-The data-channel name must be written in the settings.yml.
-
-All the permission for writing and deleting must be in the yaml too just like the example ahead:
-
-```yaml
-public:
-  plugins:
-    - name: PluginName
-      url: http://<your-hosted-plugin>/PluginName.js
-      dataChannels:
-        - name: channel-name
-          # pushPermission options: moderator, presenter, all
-          pushPermission: ['moderator','presenter']
-          # replaceOrDeletePermission options: moderator, presenter, creator, all
-          replaceOrdeletePermission:
-            - moderator
-            - sender
-```
+**Data-channel configuration:**
+
+The data-channel name must be in the `manifest.json` along with all the permissions for writting, reading and deleting, see example below:
+
+```json
+{
+  "requiredSdkVersion": "~0.0.59",
+  "name": "PluginName",
+  "javascriptEntrypointUrl": "PluginName.js",
+  "dataChannels":[
+    {
+      "name": "channel-name",
+      "pushPermission": ["moderator","presenter"],
+      "replaceOrDeletePermission": ["moderator", "sender"]
+    }
+  ]
+}
+``` 
 
-If no permission is mentioned in the yaml (writing or deleting), no one will be able proceed with that specific action:
+If no permission is mentioned in that file (writing or deleting), no one will be able proceed with that specific action:
 
 The `pushEntryFunction` has a minor detail to pay attention to, it is possible to specify the users who you want to send the item to, if none is specified, all will receive the item, such as done ahead:
 
@@ -367,7 +367,7 @@ Then when creating the meeting send the following parameters along, adjusting to
 
 ```
 meta_pluginSettingsUserInformation=https://<your-external-source-with-your-authentication>/api/users
-pluginsManifests=[{"url": "http://<domain-of-your-manifest>/your-plugin/manifest.json"}]
+pluginManifests=[{"url": "http://<domain-of-your-manifest>/your-plugin/manifest.json"}]
 ```
 
 In the plugin, just use the function like:
@@ -440,12 +440,12 @@ No, feel free to host it anywhere you want, just make sure to point the URL from
 **I am making my plugin based on a sample inside the SDK, but somehow, the sample is not working properly, what do I do to run it in dev mode and make it work?**
 Well there are several motives to why the sample is not working properly, so I will go through each one of them briefly:
 
-- The config has not been set properly inside `bbb-html5.yml`, see [this section to configure your plugin](#running-the-plugin-from-source);
+- The config has not been set properly in `manifest.json`, see [this section to configure your plugin](#running-the-plugin-from-source);
 - The plugin is not even running in dev mode, it could be the port already in use, or typescript and/or javascript errors (Make sure to initialize the `pluginApi` as any of the samples inside a react function component);
 - It could be an error with that sample indeed, or that feature the plugin uses broke (it is not usual, but can happen since BBB is constantly changing and enhancing its features with its wonderful community). If that happens, just open an issue in the [SDK&#39;s github](https://github.com/bigbluebutton/bigbluebutton-html-plugin-sdk) detailing the error you are facing. And thank you in advance for reporting it back to us so we can improve each time.
 
 **How to troubleshoot the plugins? See if it has loaded in the BBB, for instance.**
-Well, each time a set of plugins are listed in the `bbb-html5.yml`, it will fire some logs based on the amount of plugins that it need to load inside the client. So open the console in the browser by pressing F12 key in your keyboard and search for the following log:
+Well, each time a set of plugins listed to be run into a specific meeting start, it will fire some logs based on the amount of plugins that it need to load inside the client. So open the console in the browser by pressing F12 key in your keyboard and search for the following log:
 
 ```log
 <ratio of loaded plugins> plugins loaded

samples/sample-action-button-dropdown-plugin/src/components/sample-action-button-dropdown-plugin-item/component.tsx

@@ -14,6 +14,7 @@ import {
   UiLayouts,
   pluginLogger,
   NotificationTypeUiCommand,
+  ChangeEnforcedLayoutTypeEnum,
 } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import { IsMeetingBreakoutGraphqlResponse, SampleActionButtonDropdownPluginProps } from './types';
@@ -41,6 +42,8 @@ function SampleActionButtonDropdownPlugin(
     isOpen: true,
   }]);
 
+  const [isCamerasOnly, setIsCamerasOnly] = useState(false);
+
   const { data: isMeetingBreakoutFromGraphql } = pluginApi.useCustomSubscription<
   IsMeetingBreakoutGraphqlResponse>(IS_MEETING_BREAKOUT);
 
@@ -128,6 +131,18 @@ function SampleActionButtonDropdownPlugin(
             handleFetchPresentationData(currentPresentation);
           },
         }),
+        new ActionButtonDropdownOption({
+          label: 'Close actions bar for 5 seconds',
+          icon: 'copy',
+          tooltip: 'this is a button injected by plugin',
+          allowed: true,
+          onClick: () => {
+            pluginApi.uiCommands.actionsBar.setDisplayActionBar({ displayActionBar: false });
+            setTimeout(() => {
+              pluginApi.uiCommands.actionsBar.setDisplayActionBar({ displayActionBar: true });
+            }, 5000);
+          },
+        }),
         new ActionButtonDropdownOption({
           label: 'Hide nav-bar',
           icon: 'copy',
@@ -147,9 +162,26 @@ function SampleActionButtonDropdownPlugin(
           allowed: true,
           onClick: handleChangePresentationAreaContent,
         }),
+        new ActionButtonDropdownOption({
+          label: (!isCamerasOnly) ? 'Switch to cameras only layout' : 'Switch to custom layout',
+          icon: 'copy',
+          tooltip: 'this is a button injected by plugin',
+          allowed: true,
+          onClick: (!isCamerasOnly) ? () => {
+            pluginApi.uiCommands.layout.changeEnforcedLayout(
+              ChangeEnforcedLayoutTypeEnum.CAMERAS_ONLY,
+            );
+            setIsCamerasOnly(true);
+          } : () => {
+            pluginApi.uiCommands.layout.changeEnforcedLayout(
+              ChangeEnforcedLayoutTypeEnum.CUSTOM_LAYOUT,
+            );
+            setIsCamerasOnly(false);
+          },
+        }),
       ]);
     }
-  }, [currentPresentation, currentUser, showingGenericContentInPresentationArea]);
+  }, [currentPresentation, currentUser, showingGenericContentInPresentationArea, isCamerasOnly]);
 
   return (
     <ReactModal

src/ui-commands/actions-bar/commands.ts

@@ -0,0 +1,22 @@
+import { ActionsBarEnum } from './enums';
+import { SetDisplayActionBarCommandArguments } from './types';
+
+export const actionsBar = {
+  /**
+   * Decides whether to display the actions bar
+   *
+   * @param setSpeakerLevelCommandArgumentsthe volume to which the core will set the speaker
+   * level.
+   * Refer to {@link SetDisplayActionBarCommandArguments} to understand the argument structure.
+   */
+  setDisplayActionBar: (arg: SetDisplayActionBarCommandArguments) => {
+    const { displayActionBar } = arg;
+    window.dispatchEvent(new CustomEvent<
+      SetDisplayActionBarCommandArguments
+    >(ActionsBarEnum.SET_DISPLAY_ACTIONS_BAR, {
+      detail: {
+        displayActionBar,
+      },
+    }));
+  },
+};

src/ui-commands/actions-bar/enums.ts

@@ -0,0 +1,3 @@
+export enum ActionsBarEnum {
+  SET_DISPLAY_ACTIONS_BAR = 'SET_DISPLAY_ACTIONS_BAR_COMMAND',
+}

src/ui-commands/actions-bar/types.ts

@@ -0,0 +1,9 @@
+export interface SetDisplayActionBarCommandArguments {
+  displayActionBar: boolean;
+}
+
+export interface UiCommandsActionsBarObject {
+  setDisplayActionBar: (
+    arg: SetDisplayActionBarCommandArguments
+  ) => void;
+}

src/ui-commands/commands.ts

@@ -5,9 +5,12 @@ import { presentationArea } from './presentation-area/commands';
 import { userStatus } from './user-status/commands';
 import { conference } from './conference/commands';
 import { notification } from './notification/commands';
+import { actionsBar } from './actions-bar/commands';
+import { layout } from './layout/commands';
 import { navBar } from './nav-bar/commands';
 
 export const uiCommands = {
+  actionsBar,
   chat,
   externalVideo,
   sidekickOptionsContainer,
@@ -16,4 +19,5 @@ export const uiCommands = {
   userStatus,
   conference,
   notification,
+  layout,
 };

src/ui-commands/index.ts

@@ -1 +1,2 @@
 export { NotificationTypeUiCommand } from './notification/enums';
+export { ChangeEnforcedLayoutTypeEnum } from './layout/enums';

src/ui-commands/layout/commands.ts

@@ -0,0 +1,21 @@
+import { ChangeEnforcedLayoutTypeEnum, LayoutEnum } from './enums';
+import { ChangeEnforcedLayout, ChangeEnforcedLayoutCommandArguments } from './types';
+
+export const layout = {
+  /**
+   * <description>
+   *
+   * @param
+   */
+  changeEnforcedLayout: ((layoutType: ChangeEnforcedLayoutTypeEnum) => {
+    window.dispatchEvent(
+      new CustomEvent<
+        ChangeEnforcedLayoutCommandArguments
+      >(LayoutEnum.CHANGE_ENFORCED_LAYOUT, {
+        detail: {
+          layoutType,
+        },
+      }),
+    );
+  }) as ChangeEnforcedLayout,
+};

src/ui-commands/layout/enums.ts

@@ -0,0 +1,14 @@
+export enum LayoutEnum {
+  CHANGE_ENFORCED_LAYOUT = 'CHANGE_ENFORCED_LAYOUT',
+}
+
+export enum ChangeEnforcedLayoutTypeEnum {
+  CUSTOM_LAYOUT = 'CUSTOM_LAYOUT',
+  SMART_LAYOUT = 'SMART_LAYOUT',
+  PRESENTATION_FOCUS = 'PRESENTATION_FOCUS',
+  VIDEO_FOCUS = 'VIDEO_FOCUS',
+  CAMERAS_ONLY = 'CAMERAS_ONLY',
+  PRESENTATION_ONLY = 'PRESENTATION_ONLY',
+  PARTICIPANTS_AND_CHAT_ONLY = 'PARTICIPANTS_AND_CHAT_ONLY',
+  MEDIA_ONLY = 'MEDIA_ONLY',
+}

src/ui-commands/layout/types.ts

@@ -0,0 +1,11 @@
+import { ChangeEnforcedLayoutTypeEnum } from './enums';
+
+export interface ChangeEnforcedLayoutCommandArguments {
+  layoutType: ChangeEnforcedLayoutTypeEnum;
+}
+
+export type ChangeEnforcedLayout = (layoutType: ChangeEnforcedLayoutTypeEnum) => void;
+
+export interface UiCommandsLayoutObject {
+  changeEnforcedLayout: ChangeEnforcedLayout;
+}

src/ui-commands/types.ts

@@ -5,9 +5,13 @@ import { UiCommandsPresentationAreaObject } from './presentation-area/types';
 import { UiCommandsUserStatusObject } from './user-status/types';
 import { UiCommandsConferenceObject } from './conference/types';
 import { UiCommandsNotificationObject } from './notification/types';
+import { UiCommandsActionsBarObject } from './actions-bar/types';
+import { UiCommandsLayoutObject } from './layout/types';
 import { UiCommandsNavBarObject } from './nav-bar/types';
 
 export interface UiCommands {
+  layout: UiCommandsLayoutObject;
+  actionsBar: UiCommandsActionsBarObject;
   chat: UiCommandsChatObject;
   externalVideo: UiCommandsExternalVideoObject;
   sidekickOptionsContainer: UiCommandsSidekickOptionsContainerObject;