feat: Add internationalization for this plugin

README.md

@@ -29,4 +29,26 @@ Or additionally, you can add this same configuration in the `.properties` file f
 
 ## Development mode
 
+This is an internationalized plugin, meaning that it has translations in it. Therefore, if you want to test in dev mode it with the correct translations, one minor change is necessary to this code to make it work, search for `useLocaleMessages` in `src/components/main/component.tsx` and add the following argument into the function:
+
+```js
+{
+  headers: {
+    'ngrok-skip-browser-warning': 'any',
+  },
+}
+```
+
+It will look like:
+
+```ts
+pluginApi.useLocaleMessages({
+  headers: {
+    'ngrok-skip-browser-warning': 'any',
+  },
+});
+```
+
+This will allow the plugin to fetch the locale files through ngrok.
+
 As for development mode (running this plugin from source), please, refer back to https://github.com/bigbluebutton/bigbluebutton-html-plugin-sdk section `Running the Plugin from Source`

manifest.json

@@ -2,7 +2,7 @@
   "requiredSdkVersion": "~0.0.59",
   "name": "TypedCaptions",
   "javascriptEntrypointUrl": "TypedCaptions.js",
-  "localesBaseUrl": "https://cdn.dominio.com/pluginabc/",
+  "localesBaseUrl": "locales",
   "dataChannels": [
       {
           "name": "typed-captions-data-channel",

package.json

@@ -12,6 +12,7 @@
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "bigbluebutton-html-plugin-sdk": "0.0.66",
     "path": "^0.12.7",
+    "react-intl": "^6.6.8",
     "react": "^18.2.0",
     "react-chat-elements": "^12.0.14",
     "react-dom": "^18.2.0",

public/locales/en.json

@@ -0,0 +1,20 @@
+{
+  "plugin.actionButtonDropdown.write": "Write closed captions",
+  "plugin.actionButtonDropdown.remove": "Remove typed closed captions",
+  "plugin.actionButtonDropdown.modal.selectorLabel": "Please select a language and styles for closed captions within your session.",
+  "plugin.actionButtonDropdown.modal.selectPlaceHolder": "Select",
+  "plugin.actionButtonDropdown.modal.start": "Start",
+  "plugin.actionButtonDropdown.modal.dropdown.de-DE": "German",
+  "plugin.actionButtonDropdown.modal.dropdown.en-US": "English",
+  "plugin.actionButtonDropdown.modal.dropdown.es-ES": "Spanish",
+  "plugin.actionButtonDropdown.modal.dropdown.fr-FR": "French",
+  "plugin.actionButtonDropdown.modal.dropdown.hi-ID": "Hindi",
+  "plugin.actionButtonDropdown.modal.dropdown.it-IT": "Italian",
+  "plugin.actionButtonDropdown.modal.dropdown.ja-JP": "Japonese",
+  "plugin.actionButtonDropdown.modal.dropdown.pt-BR": "Portuguese",
+  "plugin.actionButtonDropdown.modal.dropdown.ru-RU": "Russian",
+  "plugin.actionButtonDropdown.modal.dropdown.zh-CN": "Chinese",
+  "plugin.actionButtonDropdown.sidekickComponent.sectionName": "Captions",
+  "plugin.actionButtonDropdown.sidekickComponent.menuTitle": "Transcription ({0})",
+  "plugin.actionButtonDropdown.sidekickComponent.inputPlaceholder": "Type your captions"
+}

public/locales/pt-BR.json

@@ -0,0 +1,20 @@
+{
+  "plugin.actionButtonDropdown.write": "Escrever legendas",
+  "plugin.actionButtonDropdown.remove": "Remover legendas digitadas",
+  "plugin.actionButtonDropdown.modal.selectorLabel": "Selecione a língua para as legendas digitadas na sua seção, por favor.",
+  "plugin.actionButtonDropdown.modal.selectPlaceHolder": "Selecionar",
+  "plugin.actionButtonDropdown.modal.start": "Começar",
+  "plugin.actionButtonDropdown.modal.dropdown.de-DE": "Alemão",
+  "plugin.actionButtonDropdown.modal.dropdown.en-US": "Inglês",
+  "plugin.actionButtonDropdown.modal.dropdown.es-ES": "Espanhol",
+  "plugin.actionButtonDropdown.modal.dropdown.fr-FR": "Francês",
+  "plugin.actionButtonDropdown.modal.dropdown.hi-ID": "Hindi",
+  "plugin.actionButtonDropdown.modal.dropdown.it-IT": "Italiano",
+  "plugin.actionButtonDropdown.modal.dropdown.ja-JP": "Japonês",
+  "plugin.actionButtonDropdown.modal.dropdown.pt-BR": "Português",
+  "plugin.actionButtonDropdown.modal.dropdown.ru-RU": "Russo",
+  "plugin.actionButtonDropdown.modal.dropdown.zh-CN": "Chinês",
+  "plugin.actionButtonDropdown.sidekickComponent.sectionName": "Legendas",
+  "plugin.actionButtonDropdown.sidekickComponent.menuTitle": "Transcrição ({0})",
+  "plugin.actionButtonDropdown.sidekickComponent.inputPlaceholder": "Digite suas legendas"
+}

src/common/types.ts

@@ -11,6 +11,22 @@ export interface sidekickMenuLocale {
   locale: string;
 }
 
+type Locale = 'de-DE'
+  | 'en-US'
+  | 'es-ES'
+  | 'fr-FR'
+  | 'hi-ID'
+  | 'it-IT'
+  | 'ja-JP'
+  | 'pt-BR'
+  | 'ru-RU'
+  | 'zh-CN';
+
+export interface AvailableLocaleObject {
+  locale: Locale;
+  name: string;
+}
+
 export interface WindowWithSettings extends Window {
   meetingClientSettings: {
     public: {