fix: add security layer to pluginApi

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import {
   BbbPluginSdk,
-  PluginApi,
   ActionButtonDropdownSeparator,
   ActionButtonDropdownOption,
   pluginLogger,
@@ -16,10 +15,9 @@ export interface DataExampleType {
 }
 
 function SampleActionButtonDropdownPlugin(
-  { pluginUuid: uuid }: SampleActionButtonDropdownPluginProps,
+  { pluginApi, pluginUuid: uuid }: SampleActionButtonDropdownPluginProps,
 ): React.ReactElement<SampleActionButtonDropdownPluginProps> {
-  BbbPluginSdk.initialize(uuid);
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
+  BbbPluginSdk.initialize(pluginApi, uuid);
   const { data: currentUser } = pluginApi.useCurrentUser();
 
   React.useEffect(() => {

samples/sample-action-button-dropdown-plugin/src/components/sample-action-button-dropdown-plugin/types.ts

@@ -1,6 +1,10 @@
+import {
+  PluginApi,
+} from 'bigbluebutton-html-plugin-sdk';
+
 interface SampleActionButtonDropdownPluginProps {
-    pluginName: string,
-    pluginUuid: string,
+    pluginApi: PluginApi;
+    pluginUuid: string;
 }
 
 interface IsMeetingBreakoutGraphqlResponse {

samples/sample-action-button-dropdown-plugin/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleActionButtonDropdownPlugin from './components/sample-action-button-dropdown-plugin/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid));
-root.render(
-  <SampleActionButtonDropdownPlugin {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleActionButtonDropdownPlugin {...{
+      pluginUuid: uuid,
+      pluginApi,
+    }}
+    />,
+  );
+});

samples/sample-actions-bar-plugin/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleActionsBarPlugin from './sample-actions-bar-plugin/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid));
-root.render(
-  <SampleActionsBarPlugin {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid: string) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleActionsBarPlugin {...{
+      pluginUuid: uuid,
+      pluginApi,
+    }}
+    />,
+  );
+});

samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/component.tsx

@@ -4,16 +4,15 @@ import { useEffect } from 'react';
 import {
   ActionsBarButton, ActionsBarInterface, ActionsBarPosition, ActionsBarSelector,
   ActionsBarSeparator, ActionsBarToggleGroup, BbbPluginSdk, GraphqlResponseWrapper,
-  PluginApi, UsersBasicInfoResponseFromGraphqlWrapper,
+  UsersBasicInfoResponseFromGraphqlWrapper,
   pluginLogger,
 } from 'bigbluebutton-html-plugin-sdk';
 import { SampleActionsBarPluginProps } from './types';
 
 function SampleActionsBarPlugin({
-  pluginUuid: uuid,
+  pluginUuid: uuid, pluginApi,
 }: SampleActionsBarPluginProps): React.ReactNode {
-  BbbPluginSdk.initialize(uuid);
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
+  BbbPluginSdk.initialize(pluginApi, uuid);
   const options = [
     { value: 1, label: 'one' },
     { value: 2, label: 'two' },

samples/sample-actions-bar-plugin/src/sample-actions-bar-plugin/types.ts

@@ -1,5 +1,7 @@
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
 interface SampleActionsBarPluginProps {
-    pluginName: string,
+    pluginApi: PluginApi,
     pluginUuid: string,
 }
 

samples/sample-audio-settings-dropdown-plugin/src/index.tsx

@@ -1,16 +1,14 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleAudioSettingsDropdownPlugin from './sample-audio-settings-dropdown-plugin/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid)!);
-root.render(
-  <SampleAudioSettingsDropdownPlugin {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid: string) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleAudioSettingsDropdownPlugin {...{
+      pluginApi,
+    }}
+    />,
+  );
+});

samples/sample-audio-settings-dropdown-plugin/src/sample-audio-settings-dropdown-plugin/component.tsx

@@ -4,17 +4,14 @@ import {
   AudioSettingsDropdownInterface,
   AudioSettingsDropdownOption,
   AudioSettingsDropdownSeparator,
-  BbbPluginSdk, PluginApi,
   pluginLogger,
 } from 'bigbluebutton-html-plugin-sdk';
 
 import { SampleAudioSettingsDropdownPluginProps } from './types';
 
 function SampleAudioSettingsDropdownPlugin(
-  { pluginUuid: uuid }: SampleAudioSettingsDropdownPluginProps,
+  { pluginApi }: SampleAudioSettingsDropdownPluginProps,
 ): React.ReactElement<SampleAudioSettingsDropdownPluginProps> {
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
-
   useEffect(() => {
     const buttonToAudioSettingsDropdown:
       AudioSettingsDropdownInterface = new AudioSettingsDropdownOption({

samples/sample-audio-settings-dropdown-plugin/src/sample-audio-settings-dropdown-plugin/types.ts

@@ -1,6 +1,7 @@
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
 interface SampleAudioSettingsDropdownPluginProps {
-    pluginName: string,
-    pluginUuid: string,
+    pluginApi: PluginApi,
 }
 
 export { SampleAudioSettingsDropdownPluginProps };

samples/sample-camera-settings-dropdown-plugin/src/components/sample-camera-settings-dropdown-plugin-item/component.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { useEffect } from 'react';
 
 import {
-  BbbPluginSdk, CameraSettingsDropdownOption, CameraSettingsDropdownSeparator, PluginApi,
+  CameraSettingsDropdownOption, CameraSettingsDropdownSeparator,
   pluginLogger,
 } from 'bigbluebutton-html-plugin-sdk';
 import { SampleCameraSettingsDropdownPluginProps } from './types';
 
 function SampleCameraSettingsDropdownPlugin(
-  { pluginUuid: uuid }: SampleCameraSettingsDropdownPluginProps,
+  { pluginApi }: SampleCameraSettingsDropdownPluginProps,
 ): React.ReactElement<SampleCameraSettingsDropdownPluginProps> {
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
-
   useEffect(() => {
     pluginApi.setCameraSettingsDropdownItems([
       new CameraSettingsDropdownSeparator(),

samples/sample-camera-settings-dropdown-plugin/src/components/sample-camera-settings-dropdown-plugin-item/types.ts

@@ -1,6 +1,7 @@
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
 interface SampleCameraSettingsDropdownPluginProps {
-    pluginName: string,
-    pluginUuid: string,
+    pluginApi: PluginApi
 }
 
 export { SampleCameraSettingsDropdownPluginProps };

samples/sample-camera-settings-dropdown-plugin/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleCameraSettingsDropdownPlugin from './components/sample-camera-settings-dropdown-plugin-item/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid));
-root.render(
-  <SampleCameraSettingsDropdownPlugin {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid: string) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleCameraSettingsDropdownPlugin {...{
+      pluginUuid: uuid,
+      pluginApi,
+    }}
+    />,
+  );
+});

samples/sample-custom-subscription-hook/src/components/sample-custom-presentation-subscription-plugin-item/component.tsx

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 
 import {
   BbbPluginSdk,
-  PluginApi,
   PresentationToolbarButton,
   PresentationToolbarInterface,
   CustomSubscriptionHookOptions,
@@ -12,11 +11,10 @@ import {
 import { PresentationFromGraphqlWrapper, SampleCustomSubscriptionPluginProps } from './types';
 
 function SampleCustomPresentationSubscriptionPlugin(
-  { pluginUuid: uuid }: SampleCustomSubscriptionPluginProps,
+  { pluginUuid: uuid, pluginApi }: SampleCustomSubscriptionPluginProps,
 ):
  React.ReactElement {
-  BbbPluginSdk.initialize(uuid);
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
+  BbbPluginSdk.initialize(pluginApi, uuid);
 
   const { data: currentPresentation } = pluginApi.useCurrentPresentation();
   let nextSlidePage = 1;

samples/sample-custom-subscription-hook/src/components/sample-custom-presentation-subscription-plugin-item/types.ts

@@ -1,3 +1,5 @@
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
 export interface UrlsJson {
   thumb: string;
   text: string;
@@ -21,4 +23,5 @@ export interface PresentationFromGraphqlWrapper {
 
 export interface SampleCustomSubscriptionPluginProps {
   pluginUuid: string;
+  pluginApi: PluginApi;
 }

samples/sample-custom-subscription-hook/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleCustomPresentationSubscriptionPlugin from './components/sample-custom-presentation-subscription-plugin-item/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid));
-root.render(
-  <SampleCustomPresentationSubscriptionPlugin {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid: string) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleCustomPresentationSubscriptionPlugin {...{
+      pluginUuid: uuid,
+      pluginApi,
+    }}
+    />,
+  );
+});

samples/sample-data-channel-plugin/src/components/sample-data-channel-plugin-item/component.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 
 import {
-  BbbPluginSdk, PluginApi, ActionButtonDropdownOption,
+  BbbPluginSdk, ActionButtonDropdownOption,
   RESET_DATA_CHANNEL, DataChannelTypes,
   pluginLogger,
 } from 'bigbluebutton-html-plugin-sdk';
@@ -14,11 +14,10 @@ interface DataExampleType {
 }
 
 function SampleDataChannelPlugin(
-  { pluginUuid: uuid }: SampleDataChannelPluginProps,
+  { pluginUuid: uuid, pluginApi }: SampleDataChannelPluginProps,
 ): React.ReactNode {
-  BbbPluginSdk.initialize(uuid);
+  BbbPluginSdk.initialize(pluginApi, uuid);
   // This Plugin only keeps track of a variable
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
   const { data: dataResponseDefaultAllItems, pushEntry: pushEntryFunctionDefault, deleteEntry: deleteEntryFunctionDefault } = pluginApi.useDataChannel<DataExampleType>('public-channel', DataChannelTypes.All_ITEMS);
   const { data: dataResponseDefaultLastItem } = pluginApi.useDataChannel<DataExampleType>('public-channel', DataChannelTypes.LATEST_ITEM);
   const { data: dataResponseNewSubChannel, pushEntry: pushToNewSubChannel, deleteEntry: deleteEntryFunctionNewSubChannel } = pluginApi.useDataChannel<DataExampleType>('public-channel', DataChannelTypes.All_ITEMS, 'newSubChannel');

samples/sample-data-channel-plugin/src/components/sample-data-channel-plugin-item/types.ts

@@ -1,5 +1,7 @@
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
 interface SampleDataChannelPluginProps {
-    pluginName: string,
+    pluginApi: PluginApi,
     pluginUuid: string,
 }
 

samples/sample-data-channel-plugin/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleDataChannelPlugin from './components/sample-data-channel-plugin-item/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid));
-root.render(
-  <SampleDataChannelPlugin {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid: string) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleDataChannelPlugin {...{
+      pluginUuid: uuid,
+      pluginApi,
+    }}
+    />,
+  );
+});

samples/sample-dom-element-manipulation/src/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
+import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import * as ReactDOM from 'react-dom/client';
 import SampleDomElementManipulation from './sample-dom-element-manipulation/component';
 
-const uuid = document.currentScript?.getAttribute('uuid') || 'root';
-
-const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin';
-
-const root = ReactDOM.createRoot(document.getElementById(uuid));
-root.render(
-  <SampleDomElementManipulation {...{
-    pluginUuid: uuid,
-    pluginName,
-  }}
-  />,
-);
+BbbPluginSdk.setupPlugin((pluginApi: PluginApi, uuid: string) => {
+  const root = ReactDOM.createRoot(document.getElementById(uuid));
+  root.render(
+    <SampleDomElementManipulation {...{
+      pluginUuid: uuid,
+      pluginApi,
+    }}
+    />,
+  );
+});