Merge pull request #15 from JoVictorNunes/internationalization

Add internationalization support

Author: gustavotrott

manifest.json

@@ -2,5 +2,6 @@
   "requiredSdkVersion": "~0.0.95",
   "name": "PluginPictureInPicture",
   "javascriptEntrypointUrl": "PluginPictureInPicture.js",
-  "version": "0.0.3"
+  "version": "0.0.4",
+  "localesBaseUrl": "locales"
 }

package-lock.json

@@ -15,6 +15,7 @@
     "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",
     "styled-components": "^5.3.3"
   },

package.json

@@ -0,0 +1,35 @@
+{
+  "plugin.pip.activate": "Activate PiP Window",
+  "plugin.pip.deactivate": "Deactivate PiP Window",
+  "plugin.warning.title": "Click anywhere in the document to reactivate focus.",
+  "plugin.warning.message": "This ensures that Picture-in-Picture will be automatically reactivated when you leave this tab again.",
+  "plugin.chat.unknownUser": "Unknown User",
+  "plugin.users.tooltip.singular": "{count} user in the session",
+  "plugin.users.tooltip.plural": "{count} users in the session",
+  "plugin.raisedHands.tooltip.none": "No raised hand",
+  "plugin.raisedHands.tooltip.count.singular": "{count} raise hand",
+  "plugin.raisedHands.tooltip.count.plural": "{count} raised hands",
+  "plugin.raisedHands.status": "raised hand",
+  "plugin.raisedHands.lowerHand": "Lower User's Hand",
+  "plugin.raisedHands.modal.title": "Lower Hand",
+  "plugin.raisedHands.modal.confirm": "Are you sure you want to lower {name}'s hand?",
+  "plugin.raisedHands.modal.confirmCurrent": "Are you sure you want to lower your hand?",
+  "plugin.raisedHands.dropdown.title": "Raised Hands ({count})",
+  "plugin.raisedHands.dropdown.you": "you",
+  "plugin.raisedHands.dropdown.lower": "Lower",
+  "plugin.layout.button.swap": "Swap layout",
+  "plugin.unreadChat.tooltip.none": "No unread messages",
+  "plugin.unreadChat.tooltip.count": "{count} unread messages",
+  "plugin.webcam.tooltip.sharing": "Stop sharing webcams",
+  "plugin.webcam.tooltip.notSharing": "You're not sharing webcam",
+  "plugin.webcam.srOnly": "Stop webcams",
+  "plugin.audio.tooltip.noAudio": "No audio",
+  "plugin.audio.tooltip.unmute": "Unmute",
+  "plugin.audio.tooltip.mute": "Mute",
+  "plugin.audio.srOnly.unmute": "Unmute Me",
+  "plugin.audio.srOnly.mute": "Mute Me",
+  "plugin.modal.close": "Close modal",
+  "plugin.toast.close": "Close notification",
+  "plugin.common.cancel": "Cancel",
+  "plugin.common.confirm": "Confirm"
+}

public/locales/en.json

@@ -0,0 +1,35 @@
+{
+  "plugin.pip.activate": "Ativar Janela PiP",
+  "plugin.pip.deactivate": "Desativar Janela PiP",
+  "plugin.warning.title": "Clique em qualquer lugar no documento para reativar o foco.",
+  "plugin.warning.message": "Isso garante que o Picture-in-Picture será reativado automaticamente quando você sair desta aba novamente.",
+  "plugin.chat.unknownUser": "Usuário Desconhecido",
+  "plugin.users.tooltip.singular": "{count} usuário na sessão",
+  "plugin.users.tooltip.plural": "{count} usuários na sessão",
+  "plugin.raisedHands.tooltip.none": "Nenhuma mão levantada",
+  "plugin.raisedHands.tooltip.count.singular": "{count} mão levantada",
+  "plugin.raisedHands.tooltip.count.plural": "{count} mãos levantadas",
+  "plugin.raisedHands.status": "levantou a mão",
+  "plugin.raisedHands.lowerHand": "Abaixar Mão do Usuário",
+  "plugin.raisedHands.modal.title": "Abaixar Mão",
+  "plugin.raisedHands.modal.confirm": "Tem certeza que deseja abaixar a mão de {name}?",
+  "plugin.raisedHands.modal.confirmCurrent": "Tem certeza que deseja abaixar sua mão?",
+  "plugin.raisedHands.dropdown.title": "Mãos Levantadas ({count})",
+  "plugin.raisedHands.dropdown.you": "você",
+  "plugin.raisedHands.dropdown.lower": "Abaixar",
+  "plugin.layout.button.swap": "Trocar layout",
+  "plugin.unreadChat.tooltip.none": "Nenhuma mensagem não lida",
+  "plugin.unreadChat.tooltip.count": "{count} mensagens não lidas",
+  "plugin.webcam.tooltip.sharing": "Parar de compartilhar webcams",
+  "plugin.webcam.tooltip.notSharing": "Você não está compartilhando webcam",
+  "plugin.webcam.srOnly": "Parar webcams",
+  "plugin.audio.tooltip.noAudio": "Sem áudio",
+  "plugin.audio.tooltip.unmute": "Desmutar",
+  "plugin.audio.tooltip.mute": "Mutar",
+  "plugin.audio.srOnly.unmute": "Ativar meu microfone",
+  "plugin.audio.srOnly.mute": "Desativar meu microfone",
+  "plugin.modal.close": "Fechar modal",
+  "plugin.toast.close": "Fechar notificação",
+  "plugin.common.cancel": "Cancelar",
+  "plugin.common.confirm": "Confirmar"
+}

public/locales/pt-BR.json

@@ -0,0 +1,29 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import { PluginApi } from 'bigbluebutton-html-plugin-sdk';
+
+const LOCALE_REQUEST_OBJECT = (!process.env.NODE_ENV || process.env.NODE_ENV === 'development')
+  ? {
+    headers: {
+      'ngrok-skip-browser-warning': 'any',
+    },
+  } : undefined;
+
+export const useI18n = (pluginApi: PluginApi) => {
+  const {
+    messages: localeMessages,
+    currentLocale,
+    loading: localeMessagesLoading,
+  } = pluginApi.useLocaleMessages!(LOCALE_REQUEST_OBJECT);
+
+  const cache = createIntlCache();
+  const intl = (!localeMessagesLoading && localeMessages) ? createIntl({
+    locale: currentLocale,
+    messages: localeMessages,
+    fallbackOnEmptyString: true,
+  }, cache) : null;
+
+  return {
+    intl,
+    localeMessagesLoading,
+  };
+};

src/common/hooks.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { ActionButtonDropdownOption, BbbPluginSdk, FloatingWindow } from 'bigbluebutton-html-plugin-sdk';
+import { defineMessages } from 'react-intl';
+import { useI18n } from '../common/hooks';
 import Pip from '../plugin-pip/component';
 import { useVideoStreams } from '../plugin-pip/components/cameras/hooks';
 import { useScreenshare } from '../plugin-pip/components/screenshare/hooks';
@@ -10,13 +12,25 @@ import styles from './stylesheet';
 
 const isPipSupported = 'documentPictureInPicture' in window;
 
+const intlMessages = defineMessages({
+  activate: {
+    id: 'plugin.pip.activate',
+    defaultMessage: 'Activate PiP Window',
+  },
+  deactivate: {
+    id: 'plugin.pip.deactivate',
+    defaultMessage: 'Deactivate PiP Window',
+  },
+});
+
 interface MainComponentProps {
   pluginUuid: string;
 }
 
 function MainComponent({ pluginUuid }: MainComponentProps): React.ReactNode {
   BbbPluginSdk.initialize(pluginUuid);
   const pluginApi = BbbPluginSdk.getPluginApi(pluginUuid);
+  const { intl } = useI18n(pluginApi);
   const pipActiveRef = React.useRef(JSON.parse(localStorage.getItem('pip-plugin-active')));
   const pipWindowRef = React.useRef<Window | null>(null);
   const hasMediaRef = React.useRef(false);
@@ -33,17 +47,19 @@ function MainComponent({ pluginUuid }: MainComponentProps): React.ReactNode {
   const amISharingWebcam = Boolean(currentUser?.cameras?.length);
 
   if (isPipSupported) {
+    const activateLabel = intl?.formatMessage(intlMessages.activate) || 'Activate PiP Window';
+    const deactivateLabel = intl?.formatMessage(intlMessages.deactivate) || 'Deactivate PiP Window';
     pluginApi.setActionButtonDropdownItems([
       new ActionButtonDropdownOption({
         allowed: true,
         icon: pipActive ? 'desktop_off' : 'desktop',
-        label: pipActive ? 'Deactivate PiP Window' : 'Activate PiP Window',
+        label: pipActive ? deactivateLabel : activateLabel,
         onClick: () => {
           pipActiveRef.current = !pipActiveRef.current;
           localStorage.setItem('pip-plugin-active', JSON.stringify(pipActiveRef.current));
           setPipActive(pipActiveRef.current);
         },
-        tooltip: pipActive ? 'Deactivate PiP Window' : 'Activate PiP Window',
+        tooltip: pipActive ? deactivateLabel : activateLabel,
       }),
     ]);
   }
@@ -101,6 +117,7 @@ function MainComponent({ pluginUuid }: MainComponentProps): React.ReactNode {
           <Pip
             pluginApi={pluginApi}
             pipWindow={pipWindow}
+            intl={intl}
           />,
         );
 
@@ -135,7 +152,7 @@ function MainComponent({ pluginUuid }: MainComponentProps): React.ReactNode {
       // @ts-expect-error This media action may not be supported by all major browsers.
       navigator.mediaSession.setActionHandler('enterpictureinpicture', null);
     };
-  }, []);
+  }, [intl, pluginApi]);
 
   React.useEffect(() => {
     if (!isPipSupported || !pipActive) return undefined;
@@ -165,15 +182,15 @@ function MainComponent({ pluginUuid }: MainComponentProps): React.ReactNode {
       const rect = actionsButton.getBoundingClientRect();
       pluginApi.setFloatingWindows([
         new FloatingWindow({
-          id: 'focus-warning',
+          id: 'plugin-pip-focus-warning',
           top: rect.top - 90,
           left: rect.left + (rect.width / 2) - 181,
           movable: true,
           backgroundColor: 'transparent',
           boxShadow: 'none',
           contentFunction: (element: HTMLElement) => {
             const root = ReactDOM.createRoot(element);
-            root.render(<FocusWarning />);
+            root.render(<FocusWarning intl={intl} />);
             return root;
           },
         }),