[update-generic-content] - Added logic to update plugin's generic con…

…tent without updating the ID of the extensible area. (#125)
bigbluebutton · Oct 21, 2024 · af8b1be · af8b1be
1 parent ec08e4f
commit af8b1be
Show file tree

Hide file tree

Showing 30 changed files with 102 additions and 21 deletions.
diff --git a/src/extensible-areas/action-button-dropdown-item/component.ts b/src/extensible-areas/action-button-dropdown-item/component.ts
@@ -32,8 +32,11 @@ export class ActionButtonDropdownOption implements ActionButtonDropdownInterface
    * @returns the option to be displayed in the action button dropdown
    */
   constructor({
-    label = '', icon = '', tooltip = '', allowed = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', allowed = true, onClick = () => {},
   }: ActionButtonDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;

diff --git a/src/extensible-areas/action-button-dropdown-item/types.ts b/src/extensible-areas/action-button-dropdown-item/types.ts
@@ -7,6 +7,7 @@ export interface ActionButtonDropdownInterface extends PluginProvidedUiItemDescr
 }
 
 export interface ActionButtonDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   tooltip: string;

diff --git a/src/extensible-areas/actions-bar-item/component.ts b/src/extensible-areas/actions-bar-item/component.ts
@@ -30,8 +30,11 @@ export class ActionsBarButton implements ActionsBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT,
+    id, icon = '', tooltip = '', onClick = () => {}, position = ActionsBarPosition.RIGHT,
   }: ActionsBarButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.icon = icon;
     this.tooltip = tooltip;
     this.onClick = onClick;

diff --git a/src/extensible-areas/actions-bar-item/types.ts b/src/extensible-areas/actions-bar-item/types.ts
@@ -9,6 +9,7 @@ export interface ActionsBarInterface extends PluginProvidedUiItemDescriptor{
 }
 
 export interface ActionsBarButtonProps {
+  id?: string;
   icon: string;
   tooltip: string;
   position: ActionsBarPosition;

diff --git a/src/extensible-areas/audio-settings-dropdown-item/component.ts b/src/extensible-areas/audio-settings-dropdown-item/component.ts
@@ -27,8 +27,11 @@ export class AudioSettingsDropdownOption implements AudioSettingsDropdownInterfa
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: AudioSettingsDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;

diff --git a/src/extensible-areas/audio-settings-dropdown-item/types.ts b/src/extensible-areas/audio-settings-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface AudioSettingsDropdownInterface extends PluginProvidedUiItemDesc
 }
 
 export interface AudioSettingsDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;

diff --git a/src/extensible-areas/camera-settings-dropdown-item/component.ts b/src/extensible-areas/camera-settings-dropdown-item/component.ts
@@ -27,8 +27,11 @@ export class CameraSettingsDropdownOption implements CameraSettingsDropdownInter
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: CameraSettingsDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;

diff --git a/src/extensible-areas/camera-settings-dropdown-item/types.ts b/src/extensible-areas/camera-settings-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface CameraSettingsDropdownInterface extends PluginProvidedUiItemDes
 }
 
 export interface CameraSettingsDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;

diff --git a/src/extensible-areas/floating-window/component.ts b/src/extensible-areas/floating-window/component.ts
@@ -38,13 +38,17 @@ export class FloatingWindow implements FloatingWindowInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
+    id,
     top,
     left,
     movable,
     backgroundColor,
     boxShadow,
     contentFunction,
   }: FloatingWindowProps) {
+    if (id) {
+      this.id = id;
+    }
     this.top = top;
     this.left = left;
     this.movable = movable;

diff --git a/src/extensible-areas/floating-window/types.ts b/src/extensible-areas/floating-window/types.ts
@@ -5,6 +5,7 @@ export interface FloatingWindowInterface extends PluginProvidedUiItemDescriptor
 }
 
 export interface FloatingWindowProps {
+  id?: string;
   top: number;
   left: number;
   movable: boolean;

diff --git a/src/extensible-areas/generic-content-item/component.ts b/src/extensible-areas/generic-content-item/component.ts
@@ -21,8 +21,11 @@ export class GenericContentMainArea implements GenericContentInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    contentFunction,
+    id, contentFunction,
   }: GenericContentMainAreaProps) {
+    if (id) {
+      this.id = id;
+    }
     this.contentFunction = contentFunction;
     this.type = GenericContentType.MAIN_AREA;
   }
@@ -64,8 +67,11 @@ export class GenericContentSidekickArea implements GenericContentInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    contentFunction, name, section, buttonIcon, open,
+    id, contentFunction, name, section, buttonIcon, open,
   }: GenericContentSidekickAreaProps) {
+    if (id) {
+      this.id = id;
+    }
     this.contentFunction = contentFunction;
     this.name = name;
     this.section = section;

diff --git a/src/extensible-areas/generic-content-item/types.ts b/src/extensible-areas/generic-content-item/types.ts
@@ -5,10 +5,12 @@ export interface GenericContentInterface extends PluginProvidedUiItemDescriptor
 }
 
 export interface GenericContentMainAreaProps {
+  id?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 }
 
 export interface GenericContentSidekickAreaProps {
+  id?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
   name: string;
   section: string;

diff --git a/src/extensible-areas/nav-bar-item/component.ts b/src/extensible-areas/nav-bar-item/component.ts
@@ -42,9 +42,12 @@ export class NavBarButton implements NavBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
   }: NavBarButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;
@@ -84,9 +87,12 @@ export class NavBarInfo implements NavBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', position = NavBarItemPosition.RIGHT,
+    id, label = '', position = NavBarItemPosition.RIGHT,
     hasSeparator = true,
   }: NavBarInfoProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.type = NavBarItemType.INFO;
     this.position = position;

diff --git a/src/extensible-areas/nav-bar-item/types.ts b/src/extensible-areas/nav-bar-item/types.ts
@@ -7,6 +7,7 @@ export interface NavBarInterface extends PluginProvidedUiItemDescriptor{
 }
 
 export interface NavBarButtonProps {
+  id?: string;
   label: string;
   icon: string;
   tooltip: string;
@@ -17,6 +18,7 @@ export interface NavBarButtonProps {
 }
 
 export interface NavBarInfoProps {
+  id?: string;
   label: string;
   hasSeparator: boolean;
   position: NavBarItemPosition;

diff --git a/src/extensible-areas/options-dropdown-item/component.ts b/src/extensible-areas/options-dropdown-item/component.ts
@@ -27,8 +27,11 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: OptionsDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;

diff --git a/src/extensible-areas/options-dropdown-item/types.ts b/src/extensible-areas/options-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface OptionsDropdownInterface extends PluginProvidedUiItemDescriptor
 }
 
 export interface OptionsDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;

diff --git a/src/extensible-areas/presentation-dropdown-item/component.ts b/src/extensible-areas/presentation-dropdown-item/component.ts
@@ -28,8 +28,11 @@ export class PresentationDropdownOption implements PresentationDropdownInterface
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
   }: PresentationDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.onClick = onClick;

diff --git a/src/extensible-areas/presentation-dropdown-item/types.ts b/src/extensible-areas/presentation-dropdown-item/types.ts
@@ -11,6 +11,7 @@ export interface PresentationDropdownInterface extends PluginProvidedUiItemDescr
 }
 
 export interface PresentationDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: () => void;

diff --git a/src/extensible-areas/presentation-toolbar-item/component.ts b/src/extensible-areas/presentation-toolbar-item/component.ts
@@ -30,8 +30,11 @@ export class PresentationToolbarButton implements PresentationToolbarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    label = '', tooltip = '', onClick = () => {}, style = {},
+    id, label = '', tooltip = '', onClick = () => {}, style = {},
   }: PresentationToolbarButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.tooltip = tooltip;
     this.onClick = onClick;
@@ -60,7 +63,7 @@ export class PresentationToolbarSpinner implements PresentationToolbarInterface
   }
 
   setItemId: (id: string) => void = (id: string) => {
-    this.id = `PresentationToolbarButton_${id}`;
+    this.id = `PresentationToolbarSpinner_${id}`;
   };
 }
 
@@ -80,6 +83,6 @@ export class PresentationToolbarSeparator implements PresentationToolbarInterfac
   }
 
   setItemId: (id: string) => void = (id: string) => {
-    this.id = `PresentationToolbarButton_${id}`;
+    this.id = `PresentationToolbarSeparator_${id}`;
   };
 }
diff --git a/src/extensible-areas/presentation-toolbar-item/types.ts b/src/extensible-areas/presentation-toolbar-item/types.ts
@@ -6,6 +6,7 @@ import { PluginProvidedUiItemDescriptor } from '../base';
 export interface PresentationToolbarInterface extends PluginProvidedUiItemDescriptor {}
 
 export interface PresentationToolbarButtonProps {
+  id?: string;
   label: string;
   tooltip: string;
   style: React.CSSProperties;

diff --git a/src/extensible-areas/screenshare-helper-item/component.ts b/src/extensible-areas/screenshare-helper-item/component.ts
@@ -41,9 +41,12 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
     position = ScreenshareHelperItemPosition.TOP_RIGHT,
   }: ScreenshareHelperButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;

diff --git a/src/extensible-areas/screenshare-helper-item/types.ts b/src/extensible-areas/screenshare-helper-item/types.ts
@@ -24,6 +24,7 @@ export interface ScreenshareHelperButtonInterface extends ScreenshareHelperInter
 }
 
 export interface ScreenshareHelperButtonProps {
+  id?: string;
   label?: string;
   icon: string;
   tooltip: string;

diff --git a/src/extensible-areas/user-camera-dropdown-item/component.ts b/src/extensible-areas/user-camera-dropdown-item/component.ts
@@ -32,9 +32,12 @@ export class UserCameraDropdownOption implements UserCameraDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', onClick = () => {},
     displayFunction = () => true,
   }: UserCameraDropdownOptionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.displayFunction = displayFunction;
     this.label = label;
     this.icon = icon;

diff --git a/src/extensible-areas/user-camera-dropdown-item/types.ts b/src/extensible-areas/user-camera-dropdown-item/types.ts
@@ -25,6 +25,7 @@ export interface UserCameraDropdownSeparatorProps {
 }
 
 export interface UserCameraDropdownOptionProps {
+  id?: string;
   label: string;
   icon: string;
   onClick: (args: OnclickFunctionCallbackArguments) => void;

diff --git a/src/extensible-areas/user-camera-helper-item/component.ts b/src/extensible-areas/user-camera-helper-item/component.ts
@@ -44,9 +44,12 @@ export class UserCameraHelperButton implements UserCameraHelperButtonInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
     position = UserCameraHelperItemPosition.TOP_RIGHT, displayFunction,
   }: UserCameraHelperButtonProps) {
+    if (id) {
+      this.id = id;
+    }
     this.label = label;
     this.icon = icon;
     this.tooltip = tooltip;

diff --git a/src/extensible-areas/user-camera-helper-item/types.ts b/src/extensible-areas/user-camera-helper-item/types.ts
@@ -33,6 +33,7 @@ export interface UserCameraHelperButtonInterface extends UserCameraHelperInterfa
 }
 
 export interface UserCameraHelperButtonProps {
+  id?: string;
   label?: string;
   icon: string;
   tooltip: string;

diff --git a/src/extensible-areas/user-list-dropdown-item/component.ts b/src/extensible-areas/user-list-dropdown-item/component.ts
@@ -122,9 +122,12 @@ export class UserListDropdownFixedContentInformation implements UserListDropdown
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', iconRight = '', allowed = true,
+    id, label = '', icon = '', iconRight = '', allowed = true,
     userId = '', textColor = '',
   }: UserListDropdownFixedContentInformationProps) {
+    if (id) {
+      this.id = id;
+    }
     this.userId = userId;
     this.label = label;
     this.icon = icon;
@@ -168,9 +171,12 @@ implements UserListDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    contentFunction, allowed = true,
+    id, contentFunction, allowed = true,
     userId = '',
   }: UserListDropdownGenericContentInformationProps) {
+    if (id) {
+      this.id = id;
+    }
     this.userId = userId;
     this.allowed = allowed;
     this.contentFunction = contentFunction;
@@ -209,8 +215,11 @@ export class UserListDropdownTitleAction implements UserListDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    icon = '', userId = '', onClick, tooltip,
+    id, icon = '', userId = '', onClick, tooltip,
   }: UserListDropdownTitleActionProps) {
+    if (id) {
+      this.id = id;
+    }
     this.userId = userId;
     this.icon = icon;
     this.tooltip = tooltip;