ref: enhance code readability

manifest.json

@@ -1,6 +1,7 @@
 {
   "requiredSdkVersion": "~0.0.59",
   "name": "TypedCaptions",
+  "version": "0.0.4",
   "javascriptEntrypointUrl": "TypedCaptions.js",
   "localesBaseUrl": "locales",
   "dataChannels": [

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.93",
+    "bigbluebutton-html-plugin-sdk": "0.0.94",
     "path": "^0.12.7",
     "react-intl": "^6.6.8",
     "react": "^18.2.0",

public/locales/index.json

@@ -0,0 +1,7 @@
+[
+  "en.json",
+  "fr-FR.json",
+  "fr.json",
+  "index.json",
+  "pt-BR.json"
+]

src/common/types.ts

@@ -3,8 +3,9 @@ export interface CaptionMessage {
   locale: string;
 }
 
-export interface CaptionMenu {
+export interface ActiveCaptionMenuInformation {
   captionLocale: string;
+  userId: string;
 }
 
 export interface sidekickMenuLocale {

src/components/modal/component.tsx

@@ -1,26 +1,20 @@
-import * as BbbPluginSdk from 'bigbluebutton-html-plugin-sdk';
 import { defineMessages, IntlShape } from 'react-intl';
 import * as React from 'react';
-import Styled from './styles';
+import * as Styled from './styles';
 import LocalesDropdown from './locales-dropdown/component';
-import './styles.css';
-import { AVAILABLE_LOCALES, CAPTIONS_CONFIG_LANGUAGES } from './constants';
-import { AvailableLocaleObject, CaptionMenu } from '../../common/types';
+import { AvailableLocaleObject } from '../../common/types';
 
-interface TypedCaptionsModalProps {
+interface TypedCaptionsModalComponentProps {
   isOpen: boolean;
   intl: IntlShape;
   onRequestClose: () => void;
-  setIsOpen: (value: boolean) => void;
-  availableCaptionMenus: BbbPluginSdk.DataChannelEntryResponseType<CaptionMenu>[];
-  pushCaptionMenu: BbbPluginSdk.PushEntryFunction<CaptionMenu>;
+  handleStart: React.MouseEventHandler<HTMLButtonElement>;
+  handleChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  availableLocales: AvailableLocaleObject[];
   captionLocale: string;
-  setCaptionLocale: (value: string) => void;
-  pluginApi: BbbPluginSdk.PluginApi;
+  errorMessage: string;
 }
 
-const TIMEOUT_RENDER_ERROR = 3000;
-
 const intlMessages = defineMessages({
   selectorLabel: {
     id: 'plugin.actionButtonDropdown.modal.selectorLabel',
@@ -36,82 +30,33 @@ const intlMessages = defineMessages({
   },
 });
 
-function TypedCaptionsModal(props: TypedCaptionsModalProps) {
+function TypedCaptionsModalComponent(props: TypedCaptionsModalComponentProps) {
   const {
     isOpen,
     onRequestClose,
-    setIsOpen,
-    availableCaptionMenus,
-    pushCaptionMenu,
-    captionLocale: locale,
-    setCaptionLocale: setLocale,
-    pluginApi,
     intl,
+    handleChange,
+    availableLocales,
+    captionLocale,
+    errorMessage,
+    handleStart,
   } = props;
 
-  const [availableLocales, setAvailableLocales] = React.useState<AvailableLocaleObject[]>([]);
-  const [errorMessage, setErrorMessage] = React.useState('');
-
-  React.useEffect(() => {
-    const filteredLocales = AVAILABLE_LOCALES.filter(
-      (l) => CAPTIONS_CONFIG_LANGUAGES.includes(l?.locale),
-    );
-    setAvailableLocales(filteredLocales as AvailableLocaleObject[]);
-
-    return () => {
-      setIsOpen(false);
-      setAvailableLocales([]);
-    };
-  }, []);
-
-  const setError = (message: string) => {
-    setErrorMessage(message);
-    setTimeout(() => {
-      setErrorMessage('');
-    }, TIMEOUT_RENDER_ERROR);
-  };
-
-  const handleStart: React.MouseEventHandler<HTMLButtonElement> = () => {
-    const alreadyUsedEntryId = availableCaptionMenus?.filter(
-      (item) => item.payloadJson.captionLocale === locale,
-    )[0]?.entryId;
-    if (locale !== '' && !alreadyUsedEntryId) {
-      pluginApi.serverCommands.caption.addLocale(locale);
-      pushCaptionMenu({ captionLocale: locale });
-      setIsOpen(false);
-    } else if (locale === '') {
-      setError('Please select a language!');
-    } else if (alreadyUsedEntryId) {
-      setError('This language is already in the typed-captions menu');
-    }
-  };
-
-  const handleCloseModal = () => {
-    setIsOpen(false);
-  };
-
-  const handleChange: React.EventHandler<React.ChangeEvent<HTMLSelectElement>> = (event) => {
-    setLocale(event.target.value);
-  };
-
   if (!intl) return null;
   const selectorLabel = intl.formatMessage(intlMessages.selectorLabel);
   return isOpen && (
     <Styled.TypedCaptionsModal
       portalClassName="modal-low"
-      parentSelector={() => document.querySelector('#modals-container')}
-      overlayClassName="modal-overlay"
-      {...{
-        isOpen,
-        onRequestClose,
-        setIsOpen,
-      }}
+      parentSelector={() => document.querySelector('#modals-container') as HTMLElement}
+      overlayClassName="modalOverlay"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
     >
       <Styled.CloseButton
         type="button"
         className="clickable-close"
         onClick={() => {
-          handleCloseModal();
+          onRequestClose();
         }}
       >
         <i
@@ -130,7 +75,7 @@ function TypedCaptionsModal(props: TypedCaptionsModalProps) {
           <LocalesDropdown
             allLocales={availableLocales}
             handleChange={handleChange}
-            value={locale}
+            value={captionLocale}
             elementId="captionsLangSelector"
             intl={intl}
             selectMessage={intl.formatMessage(intlMessages.selectPlaceholder)}
@@ -152,4 +97,4 @@ function TypedCaptionsModal(props: TypedCaptionsModalProps) {
   );
 }
 
-export { TypedCaptionsModal };
+export { TypedCaptionsModalComponent };