Merge pull request #20135 from GuiLeme/plugin-sdk-readme-logger-ui-data

feat(plugins): refactor intl code for plugin and general code

bigbluebutton-html5/imports/startup/client/intlAdapter.tsx

@@ -1,14 +1,17 @@
 import React, { useContext, useEffect } from 'react';
 import { useIntl } from 'react-intl';
+import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
 import Settings from '/imports/ui/services/settings';
 import { Session } from 'meteor/session';
 import { formatLocaleCode } from '/imports/utils/string-utils';
 import Intl from '/imports/ui/services/locale';
 import useCurrentLocale from '/imports/ui/core/local-states/useCurrentLocale';
 import { LoadingContext } from '/imports/ui/components/common/loading-screen/loading-screen-HOC/component';
+import { UI_DATA_LISTENER_SUBSCRIBED } from 'bigbluebutton-html-plugin-sdk/dist/cjs/ui-data-hooks/consts';
 
 const RTL_LANGUAGES = ['ar', 'dv', 'fa', 'he'];
 const LARGE_FONT_LANGUAGES = ['te', 'km'];
+const DEFAULT_LANGUAGE = window.meetingClientSettings.public.app.defaultSettings.application.fallbackLocale;
 
 interface IntlAdapterProps {
   children: React.ReactNode;
@@ -20,6 +23,14 @@ const IntlAdapter: React.FC<IntlAdapterProps> = ({
   const [currentLocale] = useCurrentLocale();
   const intl = useIntl();
   const loadingContextInfo = useContext(LoadingContext);
+  const sendUiDataToPlugins = () => {
+    window.dispatchEvent(new CustomEvent(PluginSdk.IntlLocaleUiDataNames.CURRENT_LOCALE, {
+      detail: {
+        locale: currentLocale,
+        fallbackLocale: DEFAULT_LANGUAGE,
+      },
+    }));
+  };
   const setUp = () => {
     if (currentLocale) {
       const { language, formattedLocale } = formatLocaleCode(currentLocale);
@@ -43,9 +54,27 @@ const IntlAdapter: React.FC<IntlAdapterProps> = ({
       Settings.save();
     }
   };
+  const runOnMountAndUnmount = () => {
+    window.addEventListener(
+      `${UI_DATA_LISTENER_SUBSCRIBED}-${PluginSdk.IntlLocaleUiDataNames.CURRENT_LOCALE}`,
+      sendUiDataToPlugins,
+    );
+    setUp();
+    return () => {
+      window.removeEventListener(
+        `${UI_DATA_LISTENER_SUBSCRIBED}-${PluginSdk.IntlLocaleUiDataNames.CURRENT_LOCALE}`,
+        sendUiDataToPlugins,
+      );
+    };
+  };
 
-  useEffect(setUp, []);
-  useEffect(setUp, [currentLocale]);
+  const runOnCurrentLocaleUpdate = () => {
+    setUp();
+    sendUiDataToPlugins();
+  };
+
+  useEffect(runOnMountAndUnmount, []);
+  useEffect(runOnCurrentLocaleUpdate, [currentLocale]);
   return !loadingContextInfo.isLoading ? children : null;
 };
 

bigbluebutton-html5/imports/ui/components/plugins-engine/data-channel/channel-manager/manager.tsx

@@ -8,6 +8,7 @@ import { DataChannelItemManagerReader } from './reader-manager';
 import DataChannelItemManagerWriter from './writer-manager';
 
 export interface DataChannelItemManagerProps {
+  identifier: string;
   pluginName: string;
   channelName: string;
   subChannelName: string;
@@ -19,6 +20,7 @@ export const DataChannelItemManager: React.ElementType<DataChannelItemManagerPro
   props: DataChannelItemManagerProps,
 ) => {
   const {
+    identifier,
     pluginName,
     channelName,
     pluginApi,
@@ -44,6 +46,7 @@ export const DataChannelItemManager: React.ElementType<DataChannelItemManagerPro
         dataChannelTypes.map((type) => (
           <DataChannelItemManagerReader
             {...{
+              key: identifier?.concat('::')?.concat(type),
               pluginName,
               channelName,
               dataChannelType: type,

bigbluebutton-html5/imports/ui/components/plugins-engine/data-channel/manager.tsx

@@ -100,12 +100,14 @@ const PluginDataChannelManager: React.ElementType<PluginDataChannelManagerProps>
         && mapOfDataChannelInformation.get(keyIdentifier)!.totalUses > 0,
         ).map((keyIdentifier: string) => {
           const { subChannelName, channelName } = mapOfDataChannelInformation.get(keyIdentifier)!;
+          const identifier = createChannelIdentifier(
+            channelName, subChannelName, pluginNameInUse,
+          );
           return (
             <DataChannelItemManager
               {...{
-                key: createChannelIdentifier(
-                  channelName, subChannelName, pluginNameInUse,
-                ),
+                key: identifier,
+                identifier,
                 pluginName: pluginNameInUse,
                 channelName,
                 subChannelName,

bigbluebutton-html5/package-lock.json

@@ -3408,11 +3408,13 @@
       "dev": true
     },
     "bigbluebutton-html-plugin-sdk": {
-      "version": "0.0.47",
-      "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.47.tgz",
-      "integrity": "sha512-nnJj5onA6JOO8HND00ojhiJ60feKkYzXmWnx20venoc2Bf44599ZiX0QJtgcxfgGQ587BX5x8F8G2SEOKIz5Lg==",
+      "version": "0.0.48",
+      "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.48.tgz",
+      "integrity": "sha512-t6z8zc5NkXKWXDVRqddxMCVOuIHVfDnPlpehW/JyskSJXED6ET0dVaRi3heiRh8PfsKP729xpnusqpg9/QE2RA==",
       "requires": {
-        "@apollo/client": "^3.8.7"
+        "@apollo/client": "^3.8.7",
+        "@browser-bunyan/console-formatted-stream": "^1.8.0",
+        "browser-bunyan": "^1.8.0"
       }
     },
     "bintrees": {

bigbluebutton-html5/package.json

@@ -47,7 +47,7 @@
     "autoprefixer": "^10.4.4",
     "axios": "^1.6.4",
     "babel-runtime": "~6.26.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.47",
+    "bigbluebutton-html-plugin-sdk": "0.0.48",
     "bowser": "^2.11.0",
     "browser-bunyan": "^1.8.0",
     "classnames": "^2.2.6",