[plugin-sdk-issue-5] - Added action bar item plugin and refactor plugin

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import CaptionsButtonContainer from '/imports/ui/components/captions/button/container';
 import deviceInfo from '/imports/utils/deviceInfo';
+import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
 import Styled from './styles';
 import ActionsDropdown from './actions-dropdown/container';
 import AudioCaptionsButtonContainer from '/imports/ui/components/audio/captions/button/container';
@@ -12,6 +13,7 @@ import JoinVideoOptionsContainer from '../video-provider/video-button/container'
 import PresentationOptionsContainer from './presentation-options/component';
 import RaiseHandDropdownContainer from './raise-hand/container';
 import { isPresentationEnabled } from '/imports/ui/services/features';
+import Button from '/imports/ui/components/common/button/component';
 
 class ActionsBar extends PureComponent {
   constructor(props) {
@@ -24,12 +26,50 @@ class ActionsBar extends PureComponent {
     this.setCaptionsReaderMenuModalIsOpen = this.setCaptionsReaderMenuModalIsOpen.bind(this);
     this.setRenderRaiseHand = this.renderRaiseHand.bind(this);
     this.actionsBarRef = React.createRef();
+    this.renderPluginsActionBarItems = this.renderPluginsActionBarItems.bind(this);
   }
 
   setCaptionsReaderMenuModalIsOpen(value) {
     this.setState({ isCaptionsReaderMenuModalOpen: value })
   }
 
+  renderPluginsActionBarItems(position) {
+    const { actionBarItems } = this.props;
+    return (
+      <>
+        {
+          actionBarItems.filter((plugin) => plugin.position === position).map((plugin) => {
+            let actionBarItemToReturn;
+            switch (plugin.type) {
+              case PluginSdk.ActionBarItemType.BUTTON:
+                actionBarItemToReturn = (
+                  <Button
+                    onClick={plugin.onClick}
+                    hideLabel
+                    color="primary"
+                    icon={plugin.icon}
+                    size="lg"
+                    circle
+                    tooltip={plugin.tooltip}
+                  />
+                );
+                break;
+              case PluginSdk.ActionBarItemType.SEPARATOR:
+                actionBarItemToReturn = (
+                  <Styled.Separator />
+                );
+                break;
+              default:
+                actionBarItemToReturn = null;
+                break;
+            }
+            return actionBarItemToReturn;
+          })
+        }
+      </>
+    );
+  }
+
   renderRaiseHand() {
     const {
       isReactionsButtonEnabled, isRaiseHandButtonEnabled, setEmojiStatus, currentUser, intl,
@@ -138,6 +178,7 @@ class ActionsBar extends PureComponent {
             : null }
         </Styled.Left>
         <Styled.Center>
+          {this.renderPluginsActionBarItems(PluginSdk.ActionBarPosition.LEFT)}
           <AudioControlsContainer />
           {enableVideo
             ? (
@@ -149,7 +190,8 @@ class ActionsBar extends PureComponent {
             isMeteorConnected,
           }}
           />
-        {isRaiseHandButtonCentered && this.renderRaiseHand()}
+          {isRaiseHandButtonCentered && this.renderRaiseHand()}
+          {this.renderPluginsActionBarItems(PluginSdk.ActionBarPosition.RIGHT)}
         </Styled.Center>
         <Styled.Right>
           { shouldShowOptionsButton ?

bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx

@@ -16,6 +16,7 @@ import TimerService from '/imports/ui/components/timer/service';
 import { layoutSelectOutput, layoutDispatch } from '../layout/context';
 import { isExternalVideoEnabled, isPollingEnabled, isPresentationEnabled } from '/imports/ui/services/features';
 import { isScreenBroadcasting, isCameraAsContentBroadcasting } from '/imports/ui/components/screenshare/service';
+import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
 
 import MediaService from '../media/service';
 
@@ -24,6 +25,16 @@ const ActionsBarContainer = (props) => {
   const layoutContextDispatch = layoutDispatch();
 
   const usingUsersContext = useContext(UsersContext);
+  const {
+    pluginsProvidedAggregatedState,
+  } = useContext(PluginsContext);
+  let actionBarItems = [];
+  if (pluginsProvidedAggregatedState.actionBarItems) {
+    actionBarItems = [
+      ...pluginsProvidedAggregatedState.actionBarItems,
+    ];
+  }
+
   const { users } = usingUsersContext;
 
   const currentUser = { userId: Auth.userID, emoji: users[Auth.meetingID][Auth.userID].emoji };
@@ -40,6 +51,7 @@ const ActionsBarContainer = (props) => {
         layoutContextDispatch,
         actionsBarStyle,
         amIPresenter,
+        actionBarItems,
       }
     }
     />

bigbluebutton-html5/imports/ui/components/plugins-engine/plugin-loader/container.tsx

@@ -27,7 +27,7 @@ const PluginLoaderContainer = (props: PluginLoaderContainerProps) => {
       logger.info(`Loaded plugin ${plugin.name}`);
     };
     script.onerror = (err) => {
-      logger.info(`Error when loading plugin ${plugin.name}, error: ${err}`);
+      logger.error(`Error when loading plugin ${plugin.name}, error: `, err);
     };
     script.src = plugin.url;
     script.setAttribute('uuid', div.id);

bigbluebutton-html5/imports/ui/components/plugins-engine/plugin-provided-state/action-bar/container.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState, useContext } from 'react';
+import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
+
+import { PluginProvidedStateChildrenProps, PluginProvidedState } from '../../types';
+import { PluginsContext } from '../../../components-data/plugin-context/context';
+
+const ActionBarPluginStateContainer = (
+  props: PluginProvidedStateChildrenProps,
+) => {
+  const {
+    uuid,
+    generateItemWithId,
+    pluginProvidedStateMap,
+    pluginApi,
+  } = props;
+  const [
+    actionBarItems,
+    setActionBarItems,
+  ] = useState<PluginSdk.ActionBarItem[]>([]);
+
+  const {
+    pluginsProvidedAggregatedState,
+    setPluginsProvidedAggregatedState,
+  } = useContext(PluginsContext);
+
+  useEffect(() => {
+    // Change this plugin provided toolbar items
+    pluginProvidedStateMap[uuid].actionBarItems = actionBarItems;
+
+    // Update context with computed aggregated list of all plugin provided toolbar items
+    const aggregatedActionBarItems = (
+      [] as PluginSdk.ActionBarItem[]).concat(
+      ...Object.values(pluginProvidedStateMap)
+        .map((pps: PluginProvidedState) => pps.actionBarItems),
+    );
+    setPluginsProvidedAggregatedState(
+      {
+        ...pluginsProvidedAggregatedState,
+        actionBarItems: aggregatedActionBarItems,
+      },
+    );
+  }, [actionBarItems]);
+
+  pluginApi.setActionBarItems = (items: PluginSdk.ActionBarItem[]) => {
+    const itemsWithId = items.map(generateItemWithId) as PluginSdk.ActionBarItem[];
+    return setActionBarItems(itemsWithId);
+  };
+  return null;
+};
+
+export default ActionBarPluginStateContainer;

bigbluebutton-html5/imports/ui/components/plugins-engine/plugin-provided-state/container.tsx

@@ -4,6 +4,7 @@ import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
 import { PluginProvidedStateContainerProps, PluginsProvidedStateMap, PluginProvidedState } from '../types';
 import PresentationToolbarPluginStateContainer from './presentation-toolbar/container';
 import UserListDropdownPluginStateContainer from './user-list-dropdown/container';
+import ActionBarPluginStateContainer from './action-bar/container';
 
 const pluginProvidedStateMap: PluginsProvidedStateMap = {};
 
@@ -36,6 +37,9 @@ const PluginProvidedStateContainer = (props: PluginProvidedStateContainerProps)
       <UserListDropdownPluginStateContainer
         { ...pluginProvidedStateChildrenProps}
       />
+      <ActionBarPluginStateContainer
+        { ...pluginProvidedStateChildrenProps}
+      />
     </>
   );
 };

bigbluebutton-html5/imports/ui/components/plugins-engine/types.ts

@@ -29,6 +29,7 @@ export interface EffectivePluginConfig extends PluginConfig {
 export interface PluginProvidedState {
     presentationToolbarItems: PluginSdk.PresentationToolbarItem[];
     userListDropdownItems: PluginSdk.UserListDropdownItem[];
+    actionBarItems: PluginSdk.ActionBarItem[];
 }
 
 /**