feat: ajust plugin to run on bbb 3.1.x

- Updates required sdk version in manifest.json
- Updates SDK version to 0.1.10
- Replaces `ActionButtonDropdownItems` by `MediaAreaItems`
- Adds proper padding in sidekick panel component
- Uses hook to inject intl messages

Author: Arthurk12

manifest.json

@@ -1,5 +1,5 @@
 {
-  "requiredSdkVersion": "~0.0.59",
+  "requiredSdkVersion": "0.1.x",
   "name": "TypedCaptions",
   "javascriptEntrypointUrl": "TypedCaptions.js",
   "localesBaseUrl": "locales",

package-lock.json

@@ -10,12 +10,12 @@
     "@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.84",
+    "bigbluebutton-html-plugin-sdk": "0.1.10",
     "path": "^0.12.7",
-    "react-intl": "^6.6.8",
     "react": "^18.2.0",
     "react-chat-elements": "^12.0.14",
     "react-dom": "^18.2.0",
+    "react-intl": "^6.6.8",
     "react-modal": "^3.16.1",
     "react-select": "^5.7.3",
     "react-textarea-autosize": "^8.5.3",
@@ -50,6 +50,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
+    "@types/webpack-env": "^1.18.8",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "babel-loader": "^9.1.2",

package.json

@@ -1,69 +1,26 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { createIntl, defineMessages } from 'react-intl';
 
 import {
-  ActionButtonDropdownOption,
-  ActionButtonDropdownSeparator,
-  BbbPluginSdk,
+  MediaAreaOption,
+  MediaAreaSeparator,
   DataChannelTypes,
   GenericContentSidekickArea,
-  PluginApi,
 } from 'bigbluebutton-html-plugin-sdk';
 
-import { TypedCaptionsProps } from './types';
 import { TypedCaptionsModal } from '../modal/component';
 import { CaptionMenu } from '../../common/types';
 import { TypedCaptionsSidekickArea } from '../typed-captions-sidekick-content/component';
+import { TypedCaptionsProps } from './types';
+import { intlMessages } from '../../intlMessages';
 
-const intlMessages = defineMessages({
-  writeCC: {
-    id: 'plugin.actionButtonDropdown.write',
-    description: 'action button dropdown label to start writing',
-  },
-  stopCC: {
-    id: 'plugin.actionButtonDropdown.remove',
-    description: 'action button dropdown label to start writing',
-  },
-  sectionName: {
-    id: 'plugin.actionButtonDropdown.sidekickComponent.sectionName',
-    description: 'name of the sidekick component section',
-  },
-  menuTitle: {
-    id: 'plugin.actionButtonDropdown.sidekickComponent.menuTitle',
-    description: 'title of the sidekick component menu (internal part)',
-  },
-});
-
-function TypedCaptions(
-  { pluginUuid: uuid }: TypedCaptionsProps,
-): React.ReactElement {
-  BbbPluginSdk.initialize(uuid);
-
-  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
-
+function TypedCaptions({ intl, pluginApi, uuid }: TypedCaptionsProps): React.ReactElement {
   const {
     data: captionMenusResponseFromDataChannel,
     pushEntry: pushCaptionMenuResponseFromDataChannel,
     deleteEntry: excludeCaptionMenuResponseFromDataChannel,
   } = pluginApi.useDataChannel<CaptionMenu>('typed-captions-data-channel', DataChannelTypes.ALL_ITEMS, 'caption-menus');
 
-  const {
-    messages,
-    currentLocale,
-    loading: localeMessagesLoading,
-  } = pluginApi.useLocaleMessages({
-    headers: {
-      'ngrok-skip-browser-warning': 'any',
-    },
-  });
-
-  const intl = (!localeMessagesLoading && messages) ? createIntl({
-    locale: currentLocale,
-    messages,
-    fallbackOnEmptyString: true,
-  }) : null;
-
   const [captionLocale, setCaptionLocale] = React.useState('');
 
   const currentUserResponse = pluginApi.useCurrentUser();
@@ -76,7 +33,7 @@ function TypedCaptions(
 
   /// contentFunction, name, section, buttonIcon
   React.useEffect(() => {
-    if (!localeMessagesLoading && captionMenusResponseFromDataChannel?.data && currentUserResponse?.data?.role === 'MODERATOR') {
+    if (captionMenusResponseFromDataChannel?.data && currentUserResponse?.data?.role === 'MODERATOR') {
       const sectionName = intl.formatMessage(intlMessages.sectionName);
       const sidekickMenuComponentList = captionMenusResponseFromDataChannel?.data
         .map((menu) => new GenericContentSidekickArea({
@@ -102,7 +59,7 @@ function TypedCaptions(
         }));
       pluginApi.setGenericContentItems(sidekickMenuComponentList);
     }
-  }, [captionMenusResponseFromDataChannel, localeMessagesLoading, messages]);
+  }, [captionMenusResponseFromDataChannel]);
 
   React.useEffect(() => {
     if (currentUserResponse?.data?.role === 'MODERATOR') {
@@ -131,23 +88,21 @@ function TypedCaptions(
           };
         } else actionButtonDropdownLabel = intl.formatMessage(intlMessages.stopCC);
       }
-      if (!localeMessagesLoading) {
-        pluginApi.setActionButtonDropdownItems([
-          new ActionButtonDropdownSeparator(),
-          new ActionButtonDropdownOption({
-            icon: 'closed_caption',
-            label: actionButtonDropdownLabel,
-            tooltip: 'this is a button injected by plugin',
-            allowed: true,
-            onClick: actionButtonDropdownOnClick,
-          }),
-        ]);
-      }
+      pluginApi.setMediaAreaItems([
+        new MediaAreaSeparator({}),
+        new MediaAreaOption({
+          icon: 'closed_caption',
+          label: actionButtonDropdownLabel,
+          tooltip: 'this is a button injected by plugin',
+          allowed: true,
+          onClick: actionButtonDropdownOnClick,
+        }),
+      ]);
     } else {
-      pluginApi.setActionButtonDropdownItems([]);
+      pluginApi.setMediaAreaItems([]);
       pluginApi.setGenericContentItems([]);
     }
-  }, [currentUserResponse, captionMenusResponseFromDataChannel, localeMessagesLoading, messages]);
+  }, [currentUserResponse, captionMenusResponseFromDataChannel]);
 
   return (
     <TypedCaptionsModal

src/components/main/component.tsx

@@ -1,6 +1,10 @@
+import { IntlShape } from 'react-intl';
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
 interface TypedCaptionsProps {
-    pluginName: string,
-    pluginUuid: string,
+    intl: IntlShape;
+    pluginApi: PluginApi;
+    uuid: string;
 }
 
 interface ExternalVideoMeetingSubscription {

src/components/main/types.ts

@@ -1,11 +1,12 @@
 import * as BbbPluginSdk from 'bigbluebutton-html-plugin-sdk';
-import { defineMessages, IntlShape } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import * as React from 'react';
 import 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 { intlMessages } from '../../intlMessages';
 
 interface TypedCaptionsModalProps {
   isOpen: boolean;
@@ -21,21 +22,6 @@ interface TypedCaptionsModalProps {
 
 const TIMEOUT_RENDER_ERROR = 3000;
 
-const intlMessages = defineMessages({
-  selectorLabel: {
-    id: 'plugin.actionButtonDropdown.modal.selectorLabel',
-    description: 'action button dropdown label to start writing',
-  },
-  selectPlaceholder: {
-    id: 'plugin.actionButtonDropdown.modal.selectPlaceHolder',
-    description: 'placeholder of the selector',
-  },
-  startButtonLabel: {
-    id: 'plugin.actionButtonDropdown.modal.start',
-    description: 'start button label',
-  },
-});
-
 function TypedCaptionsModal(props: TypedCaptionsModalProps) {
   const {
     isOpen,

src/components/modal/component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { defineMessages, IntlShape } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import { AvailableLocaleObject, WindowWithSettings } from '../../../common/types';
+import { intlMessages } from '../../../intlMessages';
 
 const DEFAULT_VALUE = 'select';
 const DEFAULT_KEY = -1;
@@ -14,49 +15,6 @@ interface LocalesDropdownProps {
   selectMessage: string;
 }
 
-const intlMessages = defineMessages({
-  'en-US': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.en-US',
-    description: 'English language',
-  },
-  'de-DE': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.de-DE',
-    description: 'English language',
-  },
-  'es-ES': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.es-ES',
-    description: 'English language',
-  },
-  'fr-FR': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.fr-FR',
-    description: 'English language',
-  },
-  'hi-ID': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.hi-ID',
-    description: 'English language',
-  },
-  'it-IT': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.it-IT',
-    description: 'English language',
-  },
-  'ja-JP': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.ja-JP',
-    description: 'English language',
-  },
-  'pt-BR': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.pt-BR',
-    description: 'English language',
-  },
-  'ru-RU': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.ru-RU',
-    description: 'English language',
-  },
-  'zh-CN': {
-    id: 'plugin.actionButtonDropdown.modal.dropdown.zh-CN',
-    description: 'English language',
-  },
-});
-
 declare const window: WindowWithSettings;
 
 function LocalesDropdown(props: LocalesDropdownProps) {

src/components/modal/locales-dropdown/component.tsx

@@ -131,7 +131,7 @@ const Content = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding: .3rem 0 0.5rem 0;
+  gap: 1rem;
 `;
 
 const CloseButton = styled.button`

src/components/modal/styles.ts

@@ -1,25 +1,19 @@
 import { BbbPluginSdk, DataChannelTypes, PluginApi } from 'bigbluebutton-html-plugin-sdk';
-import { defineMessages, IntlShape } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import * as React from 'react';
 
 import Styled from './styles';
 import { TypedCaptionsInput } from './input-captions/component';
 import { CaptionMessage } from '../../common/types';
 import { CaptionMessagesList } from './caption-messages-list/component';
+import { intlMessages } from '../../intlMessages';
 
 interface GenericContentExampleProps {
   uuid: string;
   intl: IntlShape;
   captionLocale: string;
 }
 
-const intlMessages = defineMessages({
-  inputPlaceholder: {
-    id: 'plugin.actionButtonDropdown.sidekickComponent.inputPlaceholder',
-    description: 'Placeholder of the sidekick component input',
-  },
-});
-
 export function TypedCaptionsSidekickArea(props: GenericContentExampleProps) {
   const {
     uuid,

src/components/typed-captions-sidekick-content/component.tsx

@@ -1,13 +1,20 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import styled from 'styled-components';
-import { mdPaddingY } from '../modal/styles';
+import { mdPaddingX, mdPaddingY, smallOnly } from '../modal/styles';
 
 const CaptionsWrapper = styled.div`
-  height: 100%;
-  width: 100%;
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
-  justify-content: space-between;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+  box-sizing: border-box;
+  padding: ${mdPaddingX};
+
+  @media ${smallOnly} {
+    transform: none !important;
+  }
 `;
 
 const HeaderWrapper = styled.div`