From 00e2542c137bf2815cbd306209940223c3f2810e Mon Sep 17 00:00:00 2001
From: Guilherme Leme <leme.guilherme.p@gmail.com>
Date: Thu, 5 Dec 2024 10:27:39 -0300
Subject: [PATCH] [change-enforced-layout] - Added a new feature to the
 ui-commands: change the enforced layout, now one should be able to properly
 change from one layout to another seamlessly

---
 .../component.tsx                             | 22 ++++++++++++++++++-
 src/ui-commands/commands.ts                   |  2 ++
 src/ui-commands/index.ts                      |  1 +
 src/ui-commands/layout/commands.ts            | 21 ++++++++++++++++++
 src/ui-commands/layout/enums.ts               | 14 ++++++++++++
 src/ui-commands/layout/types.ts               | 11 ++++++++++
 src/ui-commands/types.ts                      |  2 ++
 7 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/ui-commands/layout/commands.ts
 create mode 100644 src/ui-commands/layout/enums.ts
 create mode 100644 src/ui-commands/layout/types.ts

diff --git a/samples/sample-action-button-dropdown-plugin/src/components/sample-action-button-dropdown-plugin-item/component.tsx b/samples/sample-action-button-dropdown-plugin/src/components/sample-action-button-dropdown-plugin-item/component.tsx
index 26f3ca1..1da010d 100644
--- a/samples/sample-action-button-dropdown-plugin/src/components/sample-action-button-dropdown-plugin-item/component.tsx
+++ b/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);
 
@@ -135,9 +138,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
diff --git a/src/ui-commands/commands.ts b/src/ui-commands/commands.ts
index 4c493ec..4973c40 100644
--- a/src/ui-commands/commands.ts
+++ b/src/ui-commands/commands.ts
@@ -5,6 +5,7 @@ import { presentationArea } from './presentation-area/commands';
 import { userStatus } from './user-status/commands';
 import { conference } from './conference/commands';
 import { notification } from './notification/commands';
+import { layout } from './layout/commands';
 
 export const uiCommands = {
   chat,
@@ -14,4 +15,5 @@ export const uiCommands = {
   userStatus,
   conference,
   notification,
+  layout,
 };
diff --git a/src/ui-commands/index.ts b/src/ui-commands/index.ts
index 86977f4..ab95005 100644
--- a/src/ui-commands/index.ts
+++ b/src/ui-commands/index.ts
@@ -1 +1,2 @@
 export { NotificationTypeUiCommand } from './notification/enums';
+export { ChangeEnforcedLayoutTypeEnum } from './layout/enums';
diff --git a/src/ui-commands/layout/commands.ts b/src/ui-commands/layout/commands.ts
new file mode 100644
index 0000000..786f6a1
--- /dev/null
+++ b/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,
+};
diff --git a/src/ui-commands/layout/enums.ts b/src/ui-commands/layout/enums.ts
new file mode 100644
index 0000000..74f2c70
--- /dev/null
+++ b/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',
+}
diff --git a/src/ui-commands/layout/types.ts b/src/ui-commands/layout/types.ts
new file mode 100644
index 0000000..0ad3f8a
--- /dev/null
+++ b/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;
+}
diff --git a/src/ui-commands/types.ts b/src/ui-commands/types.ts
index e2ea18a..114e994 100644
--- a/src/ui-commands/types.ts
+++ b/src/ui-commands/types.ts
@@ -5,8 +5,10 @@ import { UiCommandsPresentationAreaObject } from './presentation-area/types';
 import { UiCommandsUserStatusObject } from './user-status/types';
 import { UiCommandsConferenceObject } from './conference/types';
 import { UiCommandsNotificationObject } from './notification/types';
+import { UiCommandsLayoutObject } from './layout/types';
 
 export interface UiCommands {
+  layout: UiCommandsLayoutObject;
   chat: UiCommandsChatObject;
   externalVideo: UiCommandsExternalVideoObject;
   sidekickOptionsContainer: UiCommandsSidekickOptionsContainerObject;