Merge pull request #132 from GuiLeme/plugin-notification

feat(plugins): Notification API support for plugins

README.md

@@ -287,6 +287,8 @@ One other thing is that the type of the return is precisely the same type requir
   - close: this function will close the presentation area content automatically;
 - conference:
   - setSpeakerLevel: this function will set the speaker volume level(audio output) of the conference to a certain number between 0 and 1;
+- notification:
+  - send: This function will send a notification for the client to render, keep in mind that it's only client-side. Should you want it to be rendered in multiple clients, use this with a data-channel;
 - user-status:
   - setAwayStatus: this function will set the away status of the user to a certain status;
 

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

@@ -13,6 +13,7 @@ import {
   LayoutPresentatioAreaUiDataNames,
   UiLayouts,
   pluginLogger,
+  NotificationTypeUiCommand,
 } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import { IsMeetingBreakoutGraphqlResponse, SampleActionButtonDropdownPluginProps } from './types';
@@ -43,6 +44,21 @@ function SampleActionButtonDropdownPlugin(
   const { data: isMeetingBreakoutFromGraphql } = pluginApi.useCustomSubscription<
   IsMeetingBreakoutGraphqlResponse>(IS_MEETING_BREAKOUT);
 
+  useEffect(() => {
+    pluginApi.uiCommands.notification.send({
+      message: 'Notification message',
+      icon: 'presentation',
+      type: NotificationTypeUiCommand.INFO,
+      options: {
+        // helpLabel: 'teste help label', // this is not necessary
+        // helpLink: 'teste help link',
+        autoClose: 20000,
+      },
+      content: 'Content of my notification',
+      small: false,
+    });
+  }, []);
+
   useEffect(() => {
     pluginLogger.info('isMeetingBreakout data: ', isMeetingBreakoutFromGraphql?.meeting);
   }, [isMeetingBreakoutFromGraphql]);

src/index.ts

@@ -8,6 +8,8 @@ export * from './ui-data-hooks';
 
 export * from './server-commands';
 
+export * from './ui-commands';
+
 export * from './core';
 
 export * from './utils';

src/ui-commands/commands.ts

@@ -4,6 +4,7 @@ import { sidekickOptionsContainer } from './sidekick-options-container/commands'
 import { presentationArea } from './presentation-area/commands';
 import { userStatus } from './user-status/commands';
 import { conference } from './conference/commands';
+import { notification } from './notification/commands';
 
 export const uiCommands = {
   chat,
@@ -12,4 +13,5 @@ export const uiCommands = {
   presentationArea,
   userStatus,
   conference,
+  notification,
 };

src/ui-commands/index.ts

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

src/ui-commands/notification/commands.ts

@@ -0,0 +1,17 @@
+import { NotificationEnum } from './enums';
+import { SendNotificationCommandArguments } from './types';
+
+export const notification = {
+  /**
+   * Sends notification to be rendered in the front-end.
+   */
+  send: (information: SendNotificationCommandArguments) => {
+    window.dispatchEvent(
+      new CustomEvent<
+        SendNotificationCommandArguments
+      >(NotificationEnum.SEND, {
+        detail: information,
+      }),
+    );
+  },
+};

src/ui-commands/notification/enums.ts

@@ -0,0 +1,11 @@
+export enum NotificationEnum {
+  SEND = 'SEND_NOTIFICATION',
+}
+
+export enum NotificationTypeUiCommand {
+  INFO = 'info',
+  DEFAULT = 'default',
+  WARNING = 'warning',
+  SUCCESS = 'success',
+  ERROR = 'error'
+}

src/ui-commands/notification/types.ts

@@ -0,0 +1,20 @@
+import { NotificationTypeUiCommand } from './enums';
+
+export interface SendNotificationCommandArgumentsOptions {
+  helpLabel?: string,
+  helpLink?: string,
+  autoClose?: number, // Time, in milliseconds, to auto-close the notification
+}
+
+export interface SendNotificationCommandArguments {
+  message: string;
+  icon: string;
+  type: NotificationTypeUiCommand;
+  options?: SendNotificationCommandArgumentsOptions;
+  content?: string;
+  small?: boolean;
+}
+
+export interface UiCommandsNotificationObject {
+  send: (information: SendNotificationCommandArguments) => void;
+}

src/ui-commands/types.ts

@@ -4,6 +4,7 @@ import { UiCommandsSidekickOptionsContainerObject } from './sidekick-options-con
 import { UiCommandsPresentationAreaObject } from './presentation-area/types';
 import { UiCommandsUserStatusObject } from './user-status/types';
 import { UiCommandsConferenceObject } from './conference/types';
+import { UiCommandsNotificationObject } from './notification/types';
 
 export interface UiCommands {
   chat: UiCommandsChatObject;
@@ -12,4 +13,5 @@ export interface UiCommands {
   presentationArea: UiCommandsPresentationAreaObject;
   userStatus: UiCommandsUserStatusObject;
   conference: UiCommandsConferenceObject;
+  notification: UiCommandsNotificationObject;
 }