Merge pull request #138 from GuiLeme/set-display-navbar

feat(plugin): Add new ui-command to display nav-bar

Author: GuiLeme

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

@@ -143,6 +143,18 @@ function SampleActionButtonDropdownPlugin(
             }, 5000);
           },
         }),
+        new ActionButtonDropdownOption({
+          label: 'Hide nav-bar',
+          icon: 'copy',
+          tooltip: 'this is a button injected by plugin',
+          allowed: true,
+          onClick: () => {
+            pluginApi.uiCommands.navBar.setDisplayNavBar({ displayNavBar: false });
+            setTimeout(() => {
+              pluginApi.uiCommands.navBar.setDisplayNavBar({ displayNavBar: true });
+            }, 5000);
+          },
+        }),
         new ActionButtonDropdownOption({
           label: showingGenericContentInPresentationArea ? 'Return previous presentation content' : 'Set different content in presentation area',
           icon: 'copy',

src/ui-commands/commands.ts

@@ -7,12 +7,14 @@ 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,
+  navBar,
   presentationArea,
   userStatus,
   conference,

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

@@ -0,0 +1,23 @@
+import { NavBarEnum } from './enums';
+import { SetDisplayNavBarCommandArguments } from './types';
+
+export const navBar = {
+  /**
+   * Sets the displayNavBar to true (show it) or false (hide it).
+   *
+   * @param setDisplayNavBarCommandArguments: object with a boolean that tells whether to display
+   * the navbar
+   */
+  setDisplayNavBar: (setDisplayNavBarCommandArguments: SetDisplayNavBarCommandArguments) => {
+    const { displayNavBar } = setDisplayNavBarCommandArguments;
+    window.dispatchEvent(
+      new CustomEvent<
+        SetDisplayNavBarCommandArguments
+      >(NavBarEnum.SET_DISPLAY_NAV_BAR, {
+        detail: {
+          displayNavBar,
+        },
+      }),
+    );
+  },
+};

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

@@ -0,0 +1,3 @@
+export enum NavBarEnum {
+  SET_DISPLAY_NAV_BAR = 'SET_DISPLAY_NAV_BAR_COMMAND',
+}

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

@@ -0,0 +1,7 @@
+export interface SetDisplayNavBarCommandArguments {
+  displayNavBar: boolean;
+}
+
+export interface UiCommandsNavBarObject {
+  setDisplayNavBar: (setDisplayNavBarCommandArguments: SetDisplayNavBarCommandArguments) => void;
+}

src/ui-commands/types.ts

@@ -7,13 +7,15 @@ 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;
+  navBar: UiCommandsNavBarObject;
   presentationArea: UiCommandsPresentationAreaObject;
   userStatus: UiCommandsUserStatusObject;
   conference: UiCommandsConferenceObject;