bigbluebutton-html-plugin-sdk 0.0.42 → 0.0.46

package/README.md

@@ -1,11 +1,82 @@
-# BigBlueButton SDK for HTML plugins
+# BigBlueButton SDK for HTML5 Client Plugins
 
-## Information
+This repository contains the SDK for developing BigBlueButton plugins.
+Plugins are React components that can be loaded from external sources
+by the BigBlueButton HTML5 client to extend its functionalities.
 
-SDK for developing BigBlueButton plugins, examples of implementations can be found in `./samples/sample-presentation-toolbar-plugin` (Refer to `./samples/sample-presentation-toolbar-plugin/README.md`) or `./samples/sample-user-list-dropdown-plugin`.
+## Examples
+
+A variety of example implementations to manipulate different parts of the
+BBB client can be found in the [`samples`](samples) folder.
+
+## Usage
+
+This is a general instruction on how to use a plugin.
+For a detailed configuration example of each use case,
+have a look at the READMEs in the respective [samples](samples)-folders.
+
+### Running the Plugin from Source
+
+For development purposes you can run a plugin locally from source.
+
+For example if you take the [`sample-action-button-dropdown-plugin`](samples/sample-action-button-dropdown-plugin),
+you do the following:
+
+1. Start the development server:
+    ```bash
+    cd $HOME/src/bigbluebutton-html-plugin-sdk/samples/sample-action-button-dropdown-plugin
+    npm install
+    npm start
+    ```
+
+2. Add reference to it on BigBlueButton's `settings.yml`:
+    ```yaml
+    public:
+      plugins:
+        - name: SampleActionButtonDropdownPlugin
+          url: http://127.0.0.1:4701/static/SampleActionButtonDropdownPlugin.js
+    ```
+
+_N.B.:_ Be aware that in this case the url is interpreted from the plugin in the browser,
+so the localhost is actually your local development machine.
+
+### Building the Plugin
+
+To build a plugin for production use
+(again, using the example of [`sample-action-button-dropdown-plugin`](samples/sample-action-button-dropdown-plugin)),
+follow these steps:
+
+```bash
+cd $HOME/src/bigbluebutton-html-plugin-sdk/samples/sample-action-button-dropdown-plugin
+npm install
+npm run build-bundle
+```
+
+The above command will generate the `dist` folder, containing the bundled JavaScript file named `SampleActionButtonDropdownPlugin.js`.
+This file can be hosted on any HTTPS server.
+
+To use the plugin with BigBlueButton, add the plugin's URL to `settings.yml` as shown below:
+
+```yaml
+public:
+  app:
+    ... // All app configurations
+  plugins:
+    - name: SampleActionButtonDropdownPlugin
+      url: <<PLUGIN_URL>>
+  ... // All other configurations
+```
+
+#### Hosting the Plugin on a BBB Server
+
+While the plugin can be hosted on any Server, it is also possible to host the bundled file directly on
+a BigBlueButton server. For that you copy the `dist/SampleActionButtonDropdownPlugin.js` to the folder `/var/www/bigbluebutton-default/assets/plugins`.
+In this case, the `<<PLUGIN_URL>>` will be `https://<your-host>/plugins/SampleActionButtonDropdownPlugin.js`.
 
 ## API
+
 ### Extensible UI areas
+
 - Action bar items (button, separator)
 
 - Action Button Dropdown Items (option, separator)
@@ -16,7 +87,7 @@ SDK for developing BigBlueButton plugins, examples of implementations can be fou
 
 - Nav bar items (button, info)
 
-- Presentation dropdown items (option, separator) 
+- Presentation dropdown items (option, separator)
 
 - Presentation toolbar items (button, separator, spinner)
 
@@ -31,11 +102,13 @@ SDK for developing BigBlueButton plugins, examples of implementations can be fou
 - Generic component (genericComponent)
 
 ### Getters available through the API:
+
 - `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.
 
 ### Realtime data consumption
+
 - `useCurrentPresentation` hook: provides information regarding the current presentation;
 
 - `useLoadedUserList` hook: provides information regarding the loaded user list (displayed in the screen);
@@ -53,6 +126,7 @@ SDK for developing BigBlueButton plugins, examples of implementations can be fou
 - `useTalkingIndicator` hook: it gives you invormation on the user-voice data, that is, who is talking or muted.
 
 ### Real time data exchange
+
 - `useDataChannel` hook: this will allow you to exchange information (Send and receive) amongst different users through the same plugin;
 
 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:
@@ -70,7 +144,7 @@ const [
   deleteEntryFunction, // Function to delete specific item or wipe all
 ] = useDataChannel(
   channelName, // Defined according to what is on settings.yml from bbb-htlm5
-  DataChannelTypes.All_ITEMS, // | LATEST_ITEM | NEW_ITEMS -> ALL_ITEMS is default 
+  DataChannelTypes.All_ITEMS, // | LATEST_ITEM | NEW_ITEMS -> ALL_ITEMS is default
   subChannelName = 'default', // If no subchannelName is specified, it will be 'default'
 );
 ```
@@ -82,6 +156,7 @@ The data-channel name must be written in the settings.yml.
 All the permission for writing and deleting must be in the yaml too just like the example below:
 
 ```yaml
+public:
   plugins:
     - name: PluginName
       url: http://<your-hosted-plugin>/PluginName.js
@@ -112,6 +187,7 @@ export type ObjectTo = ToUserId | ToRole;
 ```
 
 ### Real time ui data consumption
+
 - `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 everytime 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:
   - IntlLocaleUiDataNames.CURRENT_LOCALE;
   - ChatFormUiDataNames.CURRENT_CHAT_INPUT_TEXT;
@@ -128,11 +204,11 @@ const currentLocale = pluginApi.useUiData(IntlLocaleUiDataNames.CURRENT_LOCALE,
   });
 ```
 
-
 ### Ui Commands to automatize tasks in BBB
+
 `uiCommands` object: It basically contains all the possible commands available to the developer to interact with the core BBB UI, see the ones implemented down below:
   - chat:
-    - form: 
+    - form:
       - open: this function will open the sidebar chat panel automatically;
       - fill: this function will fill the form input field of the chat passed in the argument as {text: string}
   - external-video:
@@ -143,4 +219,5 @@ const currentLocale = pluginApi.useUiData(IntlLocaleUiDataNames.CURRENT_LOCALE,
     - unset: This function unset the current layout with its argument (example: LayoutComponentListEnum.GENERIC_COMPONENT)
 
 ### Dom Element Manipulation
+
 - `useChatMessageDomElements` hook: This hook will return the dom element of a chat message reactively, so one can modify whatever is inside, such as text, css, js, etc.;

package/dist/cjs/index.d.ts

@@ -2,5 +2,4 @@ export * from './extensible-areas';
 export * from './data-consumption';
 export * from './data-channel';
 export * from './ui-data-hooks';
-export * from './ui-commands';
 export * from './core';

package/dist/cjs/index.js

@@ -18,6 +18,5 @@ __exportStar(require("./extensible-areas"), exports);
 __exportStar(require("./data-consumption"), exports);
 __exportStar(require("./data-channel"), exports);
 __exportStar(require("./ui-data-hooks"), exports);
-__exportStar(require("./ui-commands"), exports);
 __exportStar(require("./core"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC;AAEnC,qDAAmC;AAEnC,iDAA+B;AAE/B,kDAAgC;AAEhC,gDAA8B;AAE9B,yCAAuB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC;AAEnC,qDAAmC;AAEnC,iDAA+B;AAE/B,kDAAgC;AAEhC,yCAAuB"}

package/dist/cjs/ui-commands/commands.d.ts

@@ -10,8 +10,4 @@ export declare const uiCommands: {
             set: (setExternalVideoVolumeCommandArguments: import("./external-video/volume/types").SetExternalVideoVolumeCommandArguments) => void;
         };
     };
-    layout: {
-        set: (layoutToBeSet: import(".").LayoutComponentListEnum) => void;
-        unset: (layoutToBeSet: import(".").LayoutComponentListEnum) => void;
-    };
 };

package/dist/cjs/ui-commands/commands.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.uiCommands = void 0;
 var commands_1 = require("./chat/commands");
 var commands_2 = require("./external-video/commands");
-var commands_3 = require("./layout/commands");
 exports.uiCommands = {
     chat: commands_1.chat,
     externalVideo: commands_2.externalVideo,
-    layout: commands_3.layout,
 };
 //# sourceMappingURL=commands.js.map

package/dist/cjs/ui-commands/commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../src/ui-commands/commands.ts"],"names":[],"mappings":";;;AAAA,4CAAuC;AACvC,sDAA0D;AAC1D,8CAA2C;AAE9B,QAAA,UAAU,GAAG;IACxB,IAAI,iBAAA;IACJ,aAAa,0BAAA;IACb,MAAM,mBAAA;CACP,CAAC"}
+{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../src/ui-commands/commands.ts"],"names":[],"mappings":";;;AAAA,4CAAuC;AACvC,sDAA0D;AAE7C,QAAA,UAAU,GAAG;IACxB,IAAI,iBAAA;IACJ,aAAa,0BAAA;CACd,CAAC"}

package/dist/cjs/ui-commands/external-video/commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../../src/ui-commands/external-video/commands.ts"],"names":[],"mappings":";;;AAAA,8CAA2C;AAE9B,QAAA,aAAa,GAAG;IACzB,MAAM,mBAAA;CACT,CAAC"}
+{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../../src/ui-commands/external-video/commands.ts"],"names":[],"mappings":";;;AAAA,8CAA2C;AAE9B,QAAA,aAAa,GAAG;IAC3B,MAAM,mBAAA;CACP,CAAC"}

package/dist/cjs/ui-commands/external-video/volume/commands.d.ts

@@ -3,7 +3,8 @@ export declare const volume: {
     /**
      * Sets the volume of the external video to a certain level. Needs to be a value between 0 and 1.
      *
-     * @param setExternalVideoVolumeCommandArguments the volume to which the core will set in the external video.
+     * @param setExternalVideoVolumeCommandArguments the volume to which the core will set in the
+     * external video.
      * Refer to {@link SetExternalVideoVolumeCommandArguments} to understand the argument structure.
      */
     set: (setExternalVideoVolumeCommandArguments: SetExternalVideoVolumeCommandArguments) => void;

package/dist/cjs/ui-commands/external-video/volume/commands.js

@@ -6,7 +6,8 @@ exports.volume = {
     /**
      * Sets the volume of the external video to a certain level. Needs to be a value between 0 and 1.
      *
-     * @param setExternalVideoVolumeCommandArguments the volume to which the core will set in the external video.
+     * @param setExternalVideoVolumeCommandArguments the volume to which the core will set in the
+     * external video.
      * Refer to {@link SetExternalVideoVolumeCommandArguments} to understand the argument structure.
      */
     set: function (setExternalVideoVolumeCommandArguments) {
@@ -17,7 +18,7 @@ exports.volume = {
             }));
         }
         else {
-            console.warn('Not possible to set a volume less than zero or higher than 1.');
+            throw new Error('Not possible to set a volume less than zero or higher than one');
         }
     },
 };

package/dist/cjs/ui-commands/external-video/volume/commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../../../src/ui-commands/external-video/volume/commands.ts"],"names":[],"mappings":";;;AAAA,iCAA0D;AAG7C,QAAA,MAAM,GAAG;IACpB;;;;;OAKG;IACH,GAAG,EAAE,UAAC,sCAA8E;QAClF,IAAM,aAAa,GAAG,sCAAsC,CAAC,MAAM,CAAC;QACpE,IAAI,aAAa,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,EAAE;YAC5C,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAEb,uCAA+B,CAAC,GAAG,EAAE;gBACrC,MAAM,EAAE,sCAAsC;aAC/C,CAAC,CACH,CAAC;SACH;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,+DAA+D,CAAC,CAAC;SAC/E;IAEH,CAAC;CACF,CAAC"}
+{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../../../src/ui-commands/external-video/volume/commands.ts"],"names":[],"mappings":";;;AAAA,iCAA0D;AAG7C,QAAA,MAAM,GAAG;IACpB;;;;;;OAMG;IACH,GAAG,EAAE,UAAC,sCAA8E;QAClF,IAAM,aAAa,GAAG,sCAAsC,CAAC,MAAM,CAAC;QACpE,IAAI,aAAa,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,EAAE;YAC5C,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAEb,uCAA+B,CAAC,GAAG,EAAE;gBACrC,MAAM,EAAE,sCAAsC;aAC/C,CAAC,CACH,CAAC;SACH;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC,CAAC;SACnF;IACH,CAAC;CACF,CAAC"}

package/dist/cjs/ui-commands/types.d.ts

@@ -1,8 +1,6 @@
 import { UiCommandsChatObject } from './chat/types';
 import { UiCommandsExternalVideoObject } from './external-video/types';
-import { UiCommandsLayoutObject } from './layout/types';
 export interface UiCommands {
     chat: UiCommandsChatObject;
     externalVideo: UiCommandsExternalVideoObject;
-    layout: UiCommandsLayoutObject;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigbluebutton-html-plugin-sdk",
-  "version": "0.0.42",
+  "version": "0.0.46",
   "homepage": "https://github.com/bigbluebutton/bigbluebutton-html-plugin-sdk",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "prepublishOnly": "npm run build # runs before publish",
     "build": "rm -rf dist/cjs && tsc --module CommonJS --outDir dist/cjs",
     "build:watch": "rm -rf dist && tsc -w --module CommonJS",
-    "lint": "eslint ./src/*.{ts,tsx}",
+    "lint": "eslint . --ignore-pattern node_modules",
     "lint:fix": "npm run lint -- --fix",
     "lint:watch": "watch 'yarn lint'"
   },

package/dist/cjs/ui-commands/index.d.ts

@@ -1 +0,0 @@
-export * from './layout/enums';

package/dist/cjs/ui-commands/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./layout/enums"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/ui-commands/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui-commands/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B"}

package/dist/cjs/ui-commands/layout/commands.d.ts

@@ -1,5 +0,0 @@
-import { LayoutComponentListEnum } from "./enums";
-export declare const layout: {
-    set: (layoutToBeSet: LayoutComponentListEnum) => void;
-    unset: (layoutToBeSet: LayoutComponentListEnum) => void;
-};

package/dist/cjs/ui-commands/layout/commands.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.layout = void 0;
-var enums_1 = require("./enums");
-exports.layout = {
-    set: function (layoutToBeSet) {
-        window.dispatchEvent(new CustomEvent(enums_1.LayoutCommandsEnum.SET, {
-            detail: layoutToBeSet
-        }));
-    },
-    unset: function (layoutToBeSet) {
-        window.dispatchEvent(new CustomEvent(enums_1.LayoutCommandsEnum.UNSET, {
-            detail: layoutToBeSet
-        }));
-    }
-};
-//# sourceMappingURL=commands.js.map

package/dist/cjs/ui-commands/layout/commands.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"commands.js","sourceRoot":"","sources":["../../../../src/ui-commands/layout/commands.ts"],"names":[],"mappings":";;;AAAA,iCAAsE;AAEzD,QAAA,MAAM,GAAG;IAClB,GAAG,EAAE,UAAC,aAAsC;QACxC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAChC,0BAAkB,CAAC,GAAG,EAAE;YACpB,MAAM,EAAE,aAAa;SACxB,CACJ,CAAC,CAAC;IACP,CAAC;IACD,KAAK,EAAE,UAAC,aAAsC;QAC1C,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAChC,0BAAkB,CAAC,KAAK,EAAE;YACtB,MAAM,EAAE,aAAa;SACxB,CACJ,CAAC,CAAC;IACP,CAAC;CACJ,CAAC"}

package/dist/cjs/ui-commands/layout/enums.d.ts

@@ -1,7 +0,0 @@
-export declare enum LayoutCommandsEnum {
-    SET = "SET_LAYOUT_COMMAND",
-    UNSET = "UNSET_LAYOUT_COMMAND"
-}
-export declare enum LayoutComponentListEnum {
-    GENERIC_COMPONENT = "GENERIC_COMPONENT"
-}

package/dist/cjs/ui-commands/layout/enums.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutComponentListEnum = exports.LayoutCommandsEnum = void 0;
-var LayoutCommandsEnum;
-(function (LayoutCommandsEnum) {
-    LayoutCommandsEnum["SET"] = "SET_LAYOUT_COMMAND";
-    LayoutCommandsEnum["UNSET"] = "UNSET_LAYOUT_COMMAND";
-})(LayoutCommandsEnum || (exports.LayoutCommandsEnum = LayoutCommandsEnum = {}));
-var LayoutComponentListEnum;
-(function (LayoutComponentListEnum) {
-    LayoutComponentListEnum["GENERIC_COMPONENT"] = "GENERIC_COMPONENT";
-})(LayoutComponentListEnum || (exports.LayoutComponentListEnum = LayoutComponentListEnum = {}));
-//# sourceMappingURL=enums.js.map

package/dist/cjs/ui-commands/layout/enums.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"enums.js","sourceRoot":"","sources":["../../../../src/ui-commands/layout/enums.ts"],"names":[],"mappings":";;;AAAA,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,gDAA0B,CAAA;IAC1B,oDAA8B,CAAA;AAClC,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,uBAEX;AAFD,WAAY,uBAAuB;IAC/B,kEAAuC,CAAA;AAC3C,CAAC,EAFW,uBAAuB,uCAAvB,uBAAuB,QAElC"}

package/dist/cjs/ui-commands/layout/types.d.ts

@@ -1,5 +0,0 @@
-import { LayoutComponentListEnum } from "./enums";
-export interface UiCommandsLayoutObject {
-    set: (layoutToSet: LayoutComponentListEnum) => void;
-    unset: (layoutToUnset: LayoutComponentListEnum) => void;
-}

package/dist/cjs/ui-commands/layout/types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

package/dist/cjs/ui-commands/layout/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui-commands/layout/types.ts"],"names":[],"mappings":""}