Typed captions plugin (#2)

* [typed-captions] - WIP implemented typed-caption as plugin

* [typed-captions] - added typed-captions

* [typed-captions] - added ui-command and data-channel

* [typed-captions] - changed readme

* [typed-captions] - changed logic

* [typed-captions] - changes in review - added captionType and captionAddLocale

* [typed-captions] - Corrections according to recent changes

* [typed-captions] move typed-caption directory one level up for new repository structure

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc

@@ -0,0 +1,44 @@
+
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+        "airbnb",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react",
+        "jsx-a11y",
+        "import"
+    ],
+    "env": {
+      "es6": true,
+      "node": true,
+      "browser": true
+    },
+    "rules": {
+      "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": "warn",
+      "import/prefer-default-export": "off",
+      "no-underscore-dangle": 0,
+      "import/extensions": [2, "never"],
+      "import/no-absolute-path": 0,
+      "import/no-unresolved": 0,
+      "import/no-extraneous-dependencies": 1,
+      "react/prop-types": 1,
+      "jsx-a11y/no-access-key": 0,
+      "react/jsx-props-no-spreading": "off",
+      "max-classes-per-file": "off",
+      "class-methods-use-this": "off"
+    },
+    "globals": {
+      "browser": "writable"
+    }
+  }

.gitignore

@@ -0,0 +1,2 @@
+node_modules/*
+dist/*

README.md

@@ -1,17 +1,81 @@
-# Repository of a plugin for BigBlueButton
+# Typed Captions
 
-## Description
+## What is it?
 
-A brief description of the plugin including a screenshot or a short video.
+This plugin is one of the official bbb plugins. It implements the previous typed captions feature that was present in the core of BBB, but as a plugin and with some different UI and features within. So the idea is that you can simply type the captions in the sidekick panel that will appear and it will appear just like a normal automatic-captions on the bottom of the presentation area.
 
-## Running the Plugin From Source Code
+See demo below:
+
+![Gif of plugin demo](./public/assets/plugin_demo.gif)
+
+## Running the Plugin from Source
+
+1. Start the development server:
+
+```bash
+cd $HOME/src/plugins/typed-captions
+npm install
+npm start
+```
+
+2. Add reference to it on BigBlueButton's `settings.yml`:
+
+```yaml
+  plugins:
+    - name: TypedCaptions
+      url: http://127.0.0.1:4701/static/TypedCaptions.js
+      dataChannels:
+        - name: typed-captions-data-channel
+          writePermission: ['moderator','presenter']
+          deletePermission:
+              - moderator
+              - sender
+```
 
 ## Building the Plugin
 
+To build the plugin for production use, follow these steps:
+
+```bash
+cd $HOME/src/plugins/typed-captions
+npm install
+npm run build-bundle
+```
+
+The above command will generate the `dist` folder, containing the bundled JavaScript file named `TypedCaptions.js`. This file can be hosted on any HTTPS server.
+
+To use the plugin with BigBlueButton, add the plugin's URL to `settings.yml` (`/etc/bigbluebutton/bbb-html5.yml` is the file you are looking for) as shown below:
+
+```yaml
+public:
+  app:
+    ... // All app configurations
+  plugins:
+    - name: TypedCaptions
+      url: <<PLUGIN_URL>>
+      dataChannels:
+        - name: typed-captions-data-channel
+          writePermission: ['moderator','presenter']
+          deletePermission:
+              - moderator
+              - sender
+  ... // All other configurations
+```
+
+Alternatively, you can host the bundled file on the BigBlueButton server by copying `dist/TypedCaptions.js` to the folder `/var/www/bigbluebutton-default/assets/plugins`. In this case, the `<<PLUGIN_URL>>` will be `https://<your-host>/plugins/TypedCaptions.js`.
+
+## More
+
+### Extra settings:
 
-## Background
+Pay attention that the audio captions must be enabled, to do that, you open `/etc/bigbluebutton/bbb-html5.yml` and add the yaml directive `public.app.audioCaptions.enabled=true`, just like the following:
 
-BigBlueButton added supports for plugins in 2024 with BBB 3.0.
-Check the official [documentation website](https://docs.bigbluebutton.org) for more information.
+```yml
+public:
+  app:
+    # You may have other setting itms here
+    audioCaptions:
+      enabled: true
+```
 
-This plugin repository was created using the plugin [template repository for BigBlueButton](https://github.com/bigbluebutton/plugin-template) hosted on GitHub.
+Make sure you don't change any other setting, save the file, and we're good to go!