Merge main into v0.1.x

README.md

@@ -94,7 +94,7 @@ follow these steps:
 
 ```bash
 cd $HOME/src/bigbluebutton-html-plugin-sdk/samples/sample-action-button-dropdown-plugin
-npm install
+npm ci
 npm run build-bundle
 ```
 
@@ -142,7 +142,7 @@ Here is as complete `manifet.json` example with all possible configurations:
     {
       "name": "allUsers",
       "url": "${meta_pluginSettingsUserInformation}",
-      "fetchMode": "onMeetingCreate",
+      "fetchMode": "onMeetingCreate", // Possible values: "onMeetingCreate", "onDemand" 
       "permissions": ["moderator", "viewer"]
     }
   ]
@@ -188,10 +188,11 @@ That being said, here are the extensible areas we have so far:
 
 Mind that no plugin will interfere into another's extensible area. So feel free to set whatever you need into a certain plugin with no worries.
 
-### Getters available through the API:
+### Auxiliar functions:
 
 - `getSessionToken`: returns the user session token located on the user's URL.
 - `getJoinUrl`: returns the join url associated with the parameters passed as an argument. Since it fetches the BigBlueButton API, this getter method is asynchronous.
+- `useLocaleMessages`: returns the messages to be used in internationalization functions (recommend to use `react-intl`, as example, refer to official plugins)
 
 ### Realtime data consumption
 
@@ -397,21 +398,32 @@ This is possible by simply configuring the dataResource name in the manifest and
       {
           "name": "allUsers",
           "url": "${meta_pluginSettingsUserInformation}",
-          "fetchMode": "onMeetingCreate",
-          "permissions": ["moderator", "viewer"]
+          "fetchMode": "onMeetingCreate", // Possible values: "onMeetingCreate", "onDemand" 
+          "permissions": ["moderator", "viewer"] // Possible values: "moderator", "viewer", "presenter"
       }
   ]
 }
 ```
 
-Then when creating the meeting send the following parameters along, adjusting to your needs and resources:
+Going through each parameter to better understand it's structure:
+
+- `name`: It is the name of the remote data source, that is the name you'll use later on in the plugin when developing it;
+- `url`: The Url to which the data will be fetched (it can be hard-coded in the `manifest.json`, but we recommend passing it as a `meta_` parameter);
+- `fetchMode`: It tells the plugin-server if it should fetch the data only when creating the meeting, or everytime the function is called in the plugin portion;
+  - If one chooses `onMeetingCreate`, the data will be fetched when the create endpoint of the meeting is called, then it's cached in the plugin-server so that everytime the plugin wants that data, the plugin-server will respond with the cached data;
+  - On the other hand, if `onDemand` is selected, everytime the plugin calls this method, the plugin-server will fetch the data and then proxy it to the plugin;
+- `permissions`: This tells the back-end which role of the meeting can access this remote data;
+
+Here is the `/create` parameters you would have to pass to make this remote-data-source api work:
 
 ```
 meta_pluginSettingsUserInformation=https://<your-external-source-with-your-authentication>/api/users
 pluginManifests=[{"url": "http://<domain-of-your-manifest>/your-plugin/manifest.json"}]
 ```
 
-In the plugin, just use the function like:
+See that we send the `meta_` parameter, for more information, refer to the [meta parameters section](#meta_-parameters)
+
+Lastly, in the plugin, just use the function like:
 
 ```typescript
 pluginApi.getRemoteData('allUsers').then((response: Response) => {
@@ -427,6 +439,12 @@ pluginApi.getRemoteData('allUsers').then((response: Response) => {
 });
 ```
 
+### Meta_ parameters
+
+This is not part of the API, but it's a way of passing information to the manifest. Any value can be passed like this, one just needs to put something like `${meta_nameOfParameter}` in a specific config of the manifest, and in the `/create` call, set this meta-parameter to whatever is preferred, like `meta_nameOfParameter="Sample message"`
+
+This feature is mainly used for security purposes, see [external data section](#external-data-resources). But can be used for customization reasons as well.
+
 ### Event persistence
 
 This feature will allow the developer to save an information (which is basically an event) in the `event.xml` file of the meeting if it's being recorded.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigbluebutton-html-plugin-sdk",
-  "version": "0.0.70",
+  "version": "0.0.73",
   "homepage": "https://github.com/bigbluebutton/bigbluebutton-html-plugin-sdk",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

samples/sample-action-button-dropdown-plugin/manifest.json

@@ -3,9 +3,5 @@
   "name": "SampleActionButtonDropdownPlugin",
   "javascriptEntrypointUrl": "SampleActionButtonDropdownPlugin.js",
   "localesBaseUrl": "https://cdn.dominio.com/pluginabc/",
-  "assetPersistence": {
-    "enabled": true,
-    "maxFileSize": 10000000,
-    "maxUploadSizePerUser": 100000000
-  }
+  "enabledForBreakoutRooms": true
 }

samples/sample-action-button-dropdown-plugin/package.json

@@ -10,7 +10,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.70",
+    "bigbluebutton-html-plugin-sdk": "0.0.73",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import { AssetType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/asset-persistence/enums';
 import * as ReactModal from 'react-modal';
 import './style.css';
 
@@ -45,26 +44,18 @@ function SampleActionButtonDropdownPlugin(
 
   const [isCamerasOnly, setIsCamerasOnly] = useState(false);
 
+  const [isSelfViewDisabled, setIsSelfViewDisabled] = useState(false);
   const { data: isMeetingBreakoutFromGraphql } = pluginApi.useCustomSubscription<
   IsMeetingBreakoutGraphqlResponse>(IS_MEETING_BREAKOUT);
 
   useEffect(() => {
-    // This line is commented once it will upload a
-    // PDF everytime you enter a meeting
-    // (if you have presenter role).
-    // Uncomment them to test this feature!
-    pluginApi.persistAsset(
-      'https://pdfobject.com/pdf/sample.pdf',
-      AssetType.PRESENTATION,
-      'my-presentation.pdf',
-    );
     pluginApi.uiCommands.notification.send({
       message: 'Notification message',
       icon: 'presentation',
       type: NotificationTypeUiCommand.INFO,
       options: {
-        // helpLabel: 'test help label', // this is not necessary
-        // helpLink: 'test help link',
+        // helpLabel: 'teste help label', // this is not necessary
+        // helpLink: 'teste help link',
         autoClose: 20000,
       },
       content: 'Content of my notification',
@@ -165,6 +156,15 @@ function SampleActionButtonDropdownPlugin(
             }, 5000);
           },
         }),
+        new ActionButtonDropdownOption({
+          label: 'Stop notifications',
+          icon: 'copy',
+          tooltip: 'this is a button injected by plugin',
+          allowed: true,
+          onClick: () => {
+            pluginApi.uiCommands.notification.setEnabledDisplayNotifications(false);
+          },
+        }),
         new ActionButtonDropdownOption({
           label: showingGenericContentInPresentationArea ? 'Return previous presentation content' : 'Set different content in presentation area',
           icon: 'copy',
@@ -189,9 +189,27 @@ function SampleActionButtonDropdownPlugin(
             setIsCamerasOnly(false);
           },
         }),
+        new ActionButtonDropdownOption({
+          label: !(isSelfViewDisabled) ? 'Disable camera self view' : 'Enable self view',
+          icon: 'desktop',
+          tooltip: 'this is a button injected by plugin',
+          allowed: true,
+          onClick: !(isSelfViewDisabled) ? () => {
+            setIsSelfViewDisabled(true);
+            pluginApi.uiCommands.camera.setSelfViewDisableAllDevices({
+              isSelfViewDisabledAllDevices: true,
+            });
+          } : () => {
+            setIsSelfViewDisabled(false);
+            pluginApi.uiCommands.camera.setSelfViewDisableAllDevices({
+              isSelfViewDisabledAllDevices: false,
+            });
+          },
+        }),
       ]);
     }
-  }, [currentPresentation, currentUser, showingGenericContentInPresentationArea, isCamerasOnly]);
+  }, [currentPresentation, currentUser, isSelfViewDisabled,
+    showingGenericContentInPresentationArea]);
 
   return (
     <ReactModal

samples/sample-actions-bar-plugin/package.json

@@ -10,7 +10,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.70",
+    "bigbluebutton-html-plugin-sdk": "0.0.73",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

samples/sample-audio-settings-dropdown-plugin/package.json

@@ -10,7 +10,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.70",
+    "bigbluebutton-html-plugin-sdk": "0.0.73",
     "browser-bunyan": "^1.8.0",
     "path": "^0.12.7",
     "react": "^18.2.0",

samples/sample-camera-settings-dropdown-plugin/package.json

@@ -10,7 +10,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.70",
+    "bigbluebutton-html-plugin-sdk": "0.0.73",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",