bigbluebutton-html-plugin-sdk 0.0.79 → 0.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -16
- package/dist/cjs/core/api/BbbPluginSdk.js +1 -1
- package/dist/cjs/data-channel/enums.d.ts +1 -1
- package/dist/cjs/data-channel/enums.js +1 -1
- package/dist/cjs/ui-data-hooks/layout/index.d.ts +1 -1
- package/dist/cjs/ui-data-hooks/layout/index.js +2 -2
- package/dist/cjs/ui-data-hooks/layout/index.js.map +1 -1
- package/dist/cjs/ui-data-hooks/layout/presentation-area/enums.d.ts +1 -1
- package/dist/cjs/ui-data-hooks/layout/presentation-area/enums.js +5 -5
- package/dist/cjs/ui-data-hooks/layout/presentation-area/enums.js.map +1 -1
- package/dist/cjs/ui-data-hooks/layout/presentation-area/types.d.ts +2 -2
- package/dist/cjs/ui-data-hooks/layout/presentation-area/types.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ you do the following:
|
|
|
41
41
|
pluginManifests=[{"url": "http://localhost:4701/manifest.json"}]
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
*Running from
|
|
44
|
+
*Running from source code with a remote BBB-server*
|
|
45
45
|
|
|
46
46
|
If you are running your BBB-server elsewhere, than you can't simply point the manifest URL to a local address, you'll need to either serve the built version into a CDN or serve the dev version using a service to make it public. And for the second option we'd recommend NGROK. Here are the instructions to do that:
|
|
47
47
|
|
|
@@ -115,7 +115,7 @@ In this case, the your manifest URL will be `https://<your-host>/plugins/sampleA
|
|
|
115
115
|
|
|
116
116
|
### Manifest Json
|
|
117
117
|
|
|
118
|
-
Here is as complete `
|
|
118
|
+
Here is as complete `manifest.json` example with all possible configurations:
|
|
119
119
|
|
|
120
120
|
```json
|
|
121
121
|
{
|
|
@@ -166,7 +166,7 @@ pluginApi.setterFunctionExample([{
|
|
|
166
166
|
}])
|
|
167
167
|
```
|
|
168
168
|
|
|
169
|
-
See, it is
|
|
169
|
+
See, it is basically a function that requires an array as an argument, with which the more items you push to that array, the more of that extensible area you will have.
|
|
170
170
|
|
|
171
171
|
That being said, here are the extensible areas we have so far:
|
|
172
172
|
|
|
@@ -188,7 +188,7 @@ That being said, here are the extensible areas we have so far:
|
|
|
188
188
|
|
|
189
189
|
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.
|
|
190
190
|
|
|
191
|
-
###
|
|
191
|
+
### Auxiliary functions:
|
|
192
192
|
|
|
193
193
|
- `getSessionToken`: returns the user session token located on the user's URL.
|
|
194
194
|
- `getJoinUrl`: returns the join url associated with the parameters passed as an argument. Since it fetches the BigBlueButton API, this getter method is asynchronous.
|
|
@@ -203,7 +203,7 @@ Mind that no plugin will interfere into another's extensible area. So feel free
|
|
|
203
203
|
- `useLoadedChatMessages` hook: provides information regarding the loaded chat messages;
|
|
204
204
|
- `useCustomSubscription` hook: with this hook, the developer can query pretty much anything graphql can provide. Note: Make sure that, on BBB version change, the custom subscriptions you make will work as expected.
|
|
205
205
|
- `usePluginSettings` hook: it provides all the specific settings regarding the current plugin it's been loaded from.
|
|
206
|
-
- `useTalkingIndicator` hook: it gives you
|
|
206
|
+
- `useTalkingIndicator` hook: it gives you information on the user-voice data, that is, who is talking or muted.
|
|
207
207
|
- `useMeeting` hook: it gives you information on the current meeting that the user is on.
|
|
208
208
|
|
|
209
209
|
So for these types of hooks, the return will follow the same structure:
|
|
@@ -224,8 +224,8 @@ So we have the `data`, which is different for each hook, that's why it's a gener
|
|
|
224
224
|
|
|
225
225
|
So for this hook to read the data from the data channel, the developer will be able to choose the format in which they want it.The possible formats are described down below:
|
|
226
226
|
|
|
227
|
-
- ALL_ITEMS: Fetches all items from specific data-channel and specific subchannel-name since the
|
|
228
|
-
- LATEST_ITEM: Fetches only the latest item pushed to the data-channel within a specific subchannel-name since the
|
|
227
|
+
- ALL_ITEMS: Fetches all items from specific data-channel and specific subchannel-name since the beginning of the meeting from the newest to the latest (It can be used as a history);
|
|
228
|
+
- LATEST_ITEM: Fetches only the latest item pushed to the data-channel within a specific subchannel-name since the beginning of the meeting;
|
|
229
229
|
- NEW_ITEMS: Fetches the new items pushed to the data-channel within a specific subchannel-name since the moment that the `useDataChannel` hook has been called (It will not see entries sent previous to that moment);
|
|
230
230
|
|
|
231
231
|
An interesting thing about this hook is that it is generic, so, you can use a custom type, and this will be found not only in the consumer part of the data structure returned, but also in functions in which you need to specify an object to be persisted, meaning it will force the object to be of the type you mentioned previously (that is the case for `pushEntry` and `replaceEntry`). One can find examples of usage of this in the data-channel plugin sample or most of the official ones. The syntax is described below:
|
|
@@ -235,10 +235,10 @@ const {
|
|
|
235
235
|
data: response, // Data that will be returned
|
|
236
236
|
pushEntry: pushEntryFunction, // Function to push another item to the data-channel
|
|
237
237
|
deleteEntry: deleteEntryFunction, // Function to delete specific item or wipe all
|
|
238
|
-
replaceEntry: replaceEntryFunction, // Function replace a
|
|
238
|
+
replaceEntry: replaceEntryFunction, // Function replace a specific item
|
|
239
239
|
} = useDataChannel<CustomType>(
|
|
240
240
|
channelName, // Defined according to what is on manifest.json
|
|
241
|
-
DataChannelTypes.
|
|
241
|
+
DataChannelTypes.ALL_ITEMS, // | LATEST_ITEM | NEW_ITEMS -> ALL_ITEMS is default
|
|
242
242
|
subChannelName = 'default', // If no subchannelName is specified, it will be 'default'
|
|
243
243
|
);
|
|
244
244
|
```
|
|
@@ -284,14 +284,14 @@ export type ObjectTo = ToUserId | ToRole;
|
|
|
284
284
|
|
|
285
285
|
### Real time ui data consumption
|
|
286
286
|
|
|
287
|
-
- `useUiData` hook: This will return certain data from the UI depending on the parameter the developer uses. It works just like the useUiEvent hook, but instead of passing a callback as a parameter to be run
|
|
287
|
+
- `useUiData` hook: This will return certain data from the UI depending on the parameter the developer uses. It works just like the useUiEvent hook, but instead of passing a callback as a parameter to be run every time the event occurs, it will return the data directly, keep in mind that the second parameter is the default value that this function will assume. Possible choices:
|
|
288
288
|
- IntlLocaleUiDataNames.CURRENT_LOCALE;
|
|
289
289
|
- ChatFormUiDataNames.CURRENT_CHAT_INPUT_TEXT;
|
|
290
290
|
- ChatFormUiDataNames.CHAT_INPUT_IS_FOCUSED;
|
|
291
291
|
- ExternalVideoVolumeUiDataNames.CURRENT_VOLUME_VALUE;
|
|
292
292
|
- ExternalVideoVolumeUiDataNames.IS_VOLUME_MUTED;
|
|
293
293
|
- UserListUiDataNames.USER_LIST_IS_OPEN;
|
|
294
|
-
-
|
|
294
|
+
- LayoutPresentationAreaUiDataNames.CURRENT_ELEMENT;
|
|
295
295
|
|
|
296
296
|
Example of usage:
|
|
297
297
|
|
|
@@ -409,9 +409,9 @@ Going through each parameter to better understand it's structure:
|
|
|
409
409
|
|
|
410
410
|
- `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;
|
|
411
411
|
- `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);
|
|
412
|
-
- `fetchMode`: It tells the plugin-server if it should fetch the data only when creating the meeting, or
|
|
413
|
-
- 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
|
|
414
|
-
- On the other hand, if `onDemand` is selected,
|
|
412
|
+
- `fetchMode`: It tells the plugin-server if it should fetch the data only when creating the meeting, or every time the function is called in the plugin portion;
|
|
413
|
+
- 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 every time the plugin wants that data, the plugin-server will respond with the cached data;
|
|
414
|
+
- On the other hand, if `onDemand` is selected, every time the plugin calls this method, the plugin-server will fetch the data and then proxy it to the plugin;
|
|
415
415
|
- `permissions`: This tells the back-end which role of the meeting can access this remote data;
|
|
416
416
|
|
|
417
417
|
Here is the `/create` parameters you would have to pass to make this remote-data-source api work:
|
|
@@ -529,13 +529,13 @@ See example below:
|
|
|
529
529
|
// All set from this plugin will disappear from the UI;
|
|
530
530
|
```
|
|
531
531
|
|
|
532
|
-
**How to
|
|
532
|
+
**How to properly build a plugin?**
|
|
533
533
|
Just go to your plugin folder, install dependencies and run the build command as follows:
|
|
534
534
|
|
|
535
535
|
```bash
|
|
536
536
|
cd my-plugin-folder/
|
|
537
537
|
npm i
|
|
538
|
-
npm run build-
|
|
538
|
+
npm run build-bundle
|
|
539
539
|
```
|
|
540
540
|
|
|
541
541
|
At this point, another folder will be created into the plugin directory called "dist/" inside of that folder you will find the plugin itself `MyPlugin.js`. Remember that the name of this file will be the same as defined in the `webpack.config.js`, such as:
|
|
@@ -71,7 +71,7 @@ var BbbPluginSdk = /** @class */ (function () {
|
|
|
71
71
|
pluginApi.useShouldUnmountPlugin = hook_1.default;
|
|
72
72
|
if (pluginName) {
|
|
73
73
|
pluginApi.useDataChannel = (function (channelName, dataChannelType, subChannelName) {
|
|
74
|
-
if (dataChannelType === void 0) { dataChannelType = enums_1.DataChannelTypes.
|
|
74
|
+
if (dataChannelType === void 0) { dataChannelType = enums_1.DataChannelTypes.ALL_ITEMS; }
|
|
75
75
|
if (subChannelName === void 0) { subChannelName = 'default'; }
|
|
76
76
|
return (0, hooks_1.useDataChannelGeneral)(channelName, subChannelName, pluginName, window.bbb_plugins[uuid], dataChannelType);
|
|
77
77
|
});
|
|
@@ -15,7 +15,7 @@ export declare enum DataChannelHooks {
|
|
|
15
15
|
DATA_CHANNEL_REPLACE = "Hooks::DataChannelReplace"
|
|
16
16
|
}
|
|
17
17
|
export declare enum DataChannelTypes {
|
|
18
|
-
|
|
18
|
+
ALL_ITEMS = "Hooks::DataChannel::AllItems",
|
|
19
19
|
NEW_ITEMS = "Hooks::DataChannel::NewItems",
|
|
20
20
|
LATEST_ITEM = "Hooks::DataChannel::LatestItem"
|
|
21
21
|
}
|
|
@@ -22,7 +22,7 @@ var DataChannelHooks;
|
|
|
22
22
|
})(DataChannelHooks || (exports.DataChannelHooks = DataChannelHooks = {}));
|
|
23
23
|
var DataChannelTypes;
|
|
24
24
|
(function (DataChannelTypes) {
|
|
25
|
-
DataChannelTypes["
|
|
25
|
+
DataChannelTypes["ALL_ITEMS"] = "Hooks::DataChannel::AllItems";
|
|
26
26
|
DataChannelTypes["NEW_ITEMS"] = "Hooks::DataChannel::NewItems";
|
|
27
27
|
DataChannelTypes["LATEST_ITEM"] = "Hooks::DataChannel::LatestItem";
|
|
28
28
|
})(DataChannelTypes || (exports.DataChannelTypes = DataChannelTypes = {}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { LayoutPresentationAreaUiDataNames, UiLayouts } from './presentation-area/enums';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.UiLayouts = exports.
|
|
3
|
+
exports.UiLayouts = exports.LayoutPresentationAreaUiDataNames = void 0;
|
|
4
4
|
var enums_1 = require("./presentation-area/enums");
|
|
5
|
-
Object.defineProperty(exports, "
|
|
5
|
+
Object.defineProperty(exports, "LayoutPresentationAreaUiDataNames", { enumerable: true, get: function () { return enums_1.LayoutPresentationAreaUiDataNames; } });
|
|
6
6
|
Object.defineProperty(exports, "UiLayouts", { enumerable: true, get: function () { return enums_1.UiLayouts; } });
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui-data-hooks/layout/index.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui-data-hooks/layout/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyF;AAAhF,0HAAA,iCAAiC,OAAA;AAAE,kGAAA,SAAS,OAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.UiLayouts = exports.
|
|
4
|
-
var
|
|
5
|
-
(function (
|
|
6
|
-
|
|
7
|
-
})(
|
|
3
|
+
exports.UiLayouts = exports.LayoutPresentationAreaUiDataNames = void 0;
|
|
4
|
+
var LayoutPresentationAreaUiDataNames;
|
|
5
|
+
(function (LayoutPresentationAreaUiDataNames) {
|
|
6
|
+
LayoutPresentationAreaUiDataNames["CURRENT_ELEMENT"] = "CURRENT_ELEMENT";
|
|
7
|
+
})(LayoutPresentationAreaUiDataNames || (exports.LayoutPresentationAreaUiDataNames = LayoutPresentationAreaUiDataNames = {}));
|
|
8
8
|
var UiLayouts;
|
|
9
9
|
(function (UiLayouts) {
|
|
10
10
|
UiLayouts["PINNED_SHARED_NOTES"] = "PINNED_SHARED_NOTES";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"enums.js","sourceRoot":"","sources":["../../../../../src/ui-data-hooks/layout/presentation-area/enums.ts"],"names":[],"mappings":";;;AAAA,IAAY,
|
|
1
|
+
{"version":3,"file":"enums.js","sourceRoot":"","sources":["../../../../../src/ui-data-hooks/layout/presentation-area/enums.ts"],"names":[],"mappings":";;;AAAA,IAAY,iCAEX;AAFD,WAAY,iCAAiC;IAC3C,wEAAmC,CAAA;AACrC,CAAC,EAFW,iCAAiC,iDAAjC,iCAAiC,QAE5C;AAED,IAAY,SAMX;AAND,WAAY,SAAS;IACnB,wDAA2C,CAAA;IAC3C,8CAAiC,CAAA;IACjC,0CAA6B,CAAA;IAC7B,sCAAyB,CAAA;IACzB,gDAAmC,CAAA;AACrC,CAAC,EANW,SAAS,yBAAT,SAAS,QAMpB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { LayoutPresentationAreaUiDataNames, UiLayouts } from './enums';
|
|
2
2
|
export type LayoutPresentationAreaUiDataPayloads = {
|
|
3
|
-
[
|
|
3
|
+
[LayoutPresentationAreaUiDataNames.CURRENT_ELEMENT]: {
|
|
4
4
|
currentElement?: UiLayouts;
|
|
5
5
|
genericContentId?: string;
|
|
6
6
|
isOpen: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui-data-hooks/layout/presentation-area/types.ts"],"names":[],"mappings":";;AAAA,
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui-data-hooks/layout/presentation-area/types.ts"],"names":[],"mappings":";;AAAA,iCAAuE"}
|