[plugin-sdk-issue-32] - support for extensible area

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

@@ -15,6 +15,7 @@ import NavBarPluginStateContainer from './nav-bar/container';
 import OptionsDropdownPluginStateContainer from './options-dropdown/container';
 import CameraSettingsDropdownPluginStateContainer from './camera-settings-dropdown/container';
 import UserCameraDropdownPluginStateContainer from './user-camera-dropdown/container';
+import UserListIconPluginStateContainer from './user-list-icon/container';
 
 const pluginProvidedStateMap: PluginsProvidedStateMap = {};
 
@@ -29,6 +30,7 @@ const pluginProvidedStateContainers: PluginProvidedStateContainerChild[] = [
   OptionsDropdownPluginStateContainer,
   CameraSettingsDropdownPluginStateContainer,
   UserCameraDropdownPluginStateContainer,
+  UserListIconPluginStateContainer,
 ];
 
 function generateItemWithId<T extends PluginSdk.PluginProvidedUiItemDescriptor>(

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

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

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

@@ -37,6 +37,7 @@ export interface PluginProvidedState {
     optionsDropdownItems: PluginSdk.OptionsDropdownItem[];
     cameraSettingsDropdownItems: PluginSdk.CameraSettingsDropdownItem[];
     userCameraDropdownItems: PluginSdk.UserCameraDropdownItem[];
+    userListIconItems: PluginSdk.UserListIconItem[];
 }
 
 /**

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/list-item/component.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React from 'react';
+import React, { useContext } from 'react';
+import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
 import Styled from './styles';
 import browserInfo from '/imports/utils/browserInfo';
 import { defineMessages, useIntl } from 'react-intl';
@@ -12,6 +13,7 @@ import { uniqueId } from '/imports/utils/string-utils';
 import { Emoji } from 'emoji-mart';
 import normalizeEmojiName from './service';
 import { convertRemToPixels } from '/imports/utils/dom-utils';
+import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
 import { isReactionsEnabled } from '/imports/ui/services/features';
 
 const messages = defineMessages({
@@ -121,6 +123,17 @@ const UserListItem: React.FC<UserListItemProps> = ({ user, lockSettings }) => {
     ? user.lastBreakoutRoom?.sequence
     : iconUser;
 
+  const { pluginsProvidedAggregatedState } = useContext(PluginsContext);
+  let iconRight = '';
+  if (pluginsProvidedAggregatedState.userListIconItems) {
+    const userListIconObject = pluginsProvidedAggregatedState.userListIconItems.find((item) => {
+      const userListIcon = item as PluginSdk.UserListIcon;
+      return userListIcon.userId === user.userId;
+    }) as PluginSdk.UserListIcon;
+    if (userListIconObject) {
+      iconRight = userListIconObject.icon;
+    }
+  }
   return (
     <Styled.UserItemContents data-test={(user.userId === Auth.userID) ? 'userListItemCurrent' : 'userListItem'}>
       <Styled.Avatar
@@ -157,6 +170,14 @@ const UserListItem: React.FC<UserListItemProps> = ({ user, lockSettings }) => {
           {subs.length ? subs.reduce((prev, curr) => [prev, ' | ', curr]) : null}
         </Styled.UserNameSub>
       </Styled.UserNameContainer>
+      {
+        iconRight
+          ? (
+            <Styled.IconRightContainer>
+              <Icon iconName={iconRight} />
+            </Styled.IconRightContainer>
+          ) : null
+      }
     </Styled.UserItemContents>
   );
 };

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/list-item/styles.ts

@@ -401,6 +401,12 @@ const UserNameSub = styled.span`
   }
 `;
 
+// ======================== Icon Right Container ========================
+
+const IconRightContainer = styled.div`
+  margin: .25rem;  
+`;
+
 export default {
   Avatar,
   Skeleton,
@@ -408,4 +414,5 @@ export default {
   UserNameContainer,
   UserNameSub,
   UserName,
+  IconRightContainer,
 };