Merge pull request #135 from GuiLeme/change-enforced-layout

feat(CORE): Change enforced layout

Author: GuiLeme

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);
 
@@ -147,9 +150,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/commands.ts

@@ -6,6 +6,7 @@ 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';
 
 export const uiCommands = {
   actionsBar,
@@ -16,4 +17,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

@@ -6,8 +6,10 @@ 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';
 
 export interface UiCommands {
+  layout: UiCommandsLayoutObject;
   actionsBar: UiCommandsActionsBarObject;
   chat: UiCommandsChatObject;
   externalVideo: UiCommandsExternalVideoObject;