Implement internationalization with react-i18next

Author: arnaud-lebreton-rofim

customWordList.txt

@@ -6,3 +6,4 @@ Videocam
 issuetype
 Autolinker
 NOSONAR
+supportedLngs

frontend/.env.example

@@ -13,3 +13,8 @@ VITE_BYPASS_WAITING_ROOM=false
 # For testing with multiple devices, you can use ngrok to expose your vite server to the internet.
 # Please refer to https://ngrok.com/docs/ for more information.
 VITE_TUNNEL_DOMAIN=''
+
+# Default language for i18next
+VITE_I18N_FALLBACK_LANGUAGE='en'
+# List all supported language, separated by | (example: VITE_I18N_SUPPORTED_LANGUAGES='en|fr|de|it')
+VITE_I18N_SUPPORTED_LANGUAGES='en'

frontend/.eslintrc.cjs

@@ -18,6 +18,6 @@ module.exports = {
     'jsx-a11y/media-has-caption': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
-    'react/require-default-props': 'off'
+    'react/require-default-props': 'off',
   },
 };

frontend/package.json

@@ -36,12 +36,15 @@
     "autoprefixer": "^10.4.19",
     "axios": "^1.12.0",
     "events": "^3.3.0",
+    "i18next": "^25.3.2",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lodash": "^4.17.21",
     "opentok-layout-js": "^5.4.0",
     "opentok-solutions-logging": "^1.1.5",
     "postcss": "^8.4.38",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-i18next": "^15.6.1",
     "react-router-dom": "^6.11.0",
     "resize-observer-polyfill": "^1.5.1",
     "tailwindcss": "^3.4.14",

frontend/src/Context/PublisherProvider/usePublisher/usePublisher.spec.tsx

@@ -12,7 +12,6 @@ import useUserContext from '../../../hooks/useUserContext';
 import { UserContextType } from '../../user';
 import useSessionContext from '../../../hooks/useSessionContext';
 import { SessionContextType } from '../../SessionProvider/session';
-import { PUBLISHING_BLOCKED_CAPTION } from '../../../utils/constants';
 
 vi.mock('@vonage/client-sdk-video');
 vi.mock('../../../hooks/useUserContext.tsx');
@@ -240,7 +239,8 @@ describe('usePublisher', () => {
 
       const publishingBlockedError = {
         header: 'Difficulties joining room',
-        caption: PUBLISHING_BLOCKED_CAPTION,
+        caption:
+          "We're having trouble connecting you with others in the meeting room. Please check your network and try again.",
       };
       expect(result.current.publishingError).toEqual(publishingBlockedError);
       expect(mockedSessionPublish).toHaveBeenCalledTimes(2);

frontend/src/Context/PublisherProvider/usePublisher/usePublisher.tsx

@@ -7,13 +7,10 @@ import OT, {
   ExceptionEvent,
   PublisherProperties,
 } from '@vonage/client-sdk-video';
+import { useTranslation } from 'react-i18next';
 import usePublisherQuality, { NetworkQuality } from '../usePublisherQuality/usePublisherQuality';
 import usePublisherOptions from '../usePublisherOptions';
 import useSessionContext from '../../../hooks/useSessionContext';
-import { PUBLISHING_BLOCKED_CAPTION } from '../../../utils/constants';
-import getAccessDeniedError, {
-  PublishingErrorType,
-} from '../../../utils/getAccessDeniedError/getAccessDeniedError';
 import applyBackgroundFilter from '../../../utils/backgroundFilter/applyBackgroundFilter/applyBackgroundFilter';
 
 type PublisherStreamCreatedEvent = Event<'streamCreated', Publisher> & {
@@ -29,6 +26,11 @@ type DeviceAccessStatus = {
   camera: boolean | undefined;
 };
 
+type PublishingErrorType = {
+  header: string;
+  caption: string;
+} | null;
+
 export type AccessDeniedEvent = Event<'accessDenied', Publisher> & {
   message?: string;
 };
@@ -72,6 +74,7 @@ export type PublisherContextType = {
  * @returns {PublisherContextType} the publisher context
  */
 const usePublisher = (): PublisherContextType => {
+  const { t } = useTranslation();
   const [publisherVideoElement, setPublisherVideoElement] = useState<
     HTMLVideoElement | HTMLObjectElement
   >();
@@ -96,10 +99,13 @@ const usePublisher = (): PublisherContextType => {
   useEffect(() => {
     if (deviceAccess?.microphone === false || deviceAccess?.camera === false) {
       const device = deviceAccess.camera ? 'Microphone' : 'Camera';
-      const accessDeniedError = getAccessDeniedError(device);
+      const accessDeniedError = {
+        header: t('publishingErrors.accessDenied.title', { device }),
+        caption: t('publishingErrors.accessDenied.message', { device: device.toLowerCase() }),
+      };
       setPublishingError(accessDeniedError);
     }
-  }, [deviceAccess]);
+  }, [deviceAccess, t]);
 
   useEffect(() => {
     if (!publisherOptions) {
@@ -232,8 +238,8 @@ const usePublisher = (): PublisherContextType => {
 
     if (publishAttempt === 3) {
       const publishingBlocked: PublishingErrorType = {
-        header: 'Difficulties joining room',
-        caption: PUBLISHING_BLOCKED_CAPTION,
+        header: t('publishingErrors.blocked.title'),
+        caption: t('publishingErrors.blocked.message'),
       };
       setPublishingError(publishingBlocked);
       setIsPublishingToSession(false);

frontend/src/api/archiving/index.ts

@@ -8,15 +8,16 @@ export type ArchiveResponse = {
 
 /**
  * Returns a list of archives and the status of the archives for a given meeting room.
+ * @param {string} locale - current locale
  * @param {string} roomName - The roomName we check for archives
  * @returns {Promise<ArchiveResponse>} The archives from the meeting room (if any) and whether any archives are pending.
  */
-const getArchives = async (roomName: string): Promise<ArchiveResponse> => {
+const getArchives = async (locale: string, roomName: string): Promise<ArchiveResponse> => {
   const response = await listArchives(roomName);
   const archivesFromServer = response?.data?.archives;
   if (archivesFromServer instanceof Array) {
     const archives = archivesFromServer.map((archiveFromServer) =>
-      createArchiveFromServer(archiveFromServer)
+      createArchiveFromServer(locale, archiveFromServer)
     );
     return {
       archives,

frontend/src/api/archiving/model.ts

@@ -27,8 +27,8 @@ export type Archive = {
   createdAtFormatted: string;
 };
 
-const getDateString = (timestamp: number) => {
-  return `${getFormattedDate(timestamp)} ${getFormattedTime(timestamp)}`;
+const getDateString = (locale: string, timestamp: number) => {
+  return `${getFormattedDate(locale, timestamp)} ${getFormattedTime(locale, timestamp)}`;
 };
 
 const getArchiveStatus = (status: ServerArchiveStatus): ArchiveStatus => {
@@ -47,16 +47,17 @@ const getArchiveStatus = (status: ServerArchiveStatus): ArchiveStatus => {
 
 /**
  * Modifies an archive retrieved from the server to be easily consumable.
+ * @param {string} locale - current locale
  * @param {ServerArchive} serverArchive - The archive to be modified.
  * @returns {Archive} The modified archive.
  */
-export const createArchiveFromServer = (serverArchive: ServerArchive): Archive => {
+export const createArchiveFromServer = (locale: string, serverArchive: ServerArchive): Archive => {
   return {
     id: serverArchive.id,
     url: serverArchive.url,
     status: getArchiveStatus(serverArchive.status),
     createdAt: serverArchive.createdAt,
-    createdAtFormatted: getDateString(serverArchive.createdAt),
+    createdAtFormatted: getDateString(locale, serverArchive.createdAt),
   };
 };
 

frontend/src/api/archiving/tests/index.spec.ts

@@ -10,7 +10,7 @@ const mockListArchives = listArchives as Mock<[], ReturnType<typeof listArchives
 describe('getArchives', () => {
   it('it returns an object with array of Archives and hasPending flag', async () => {
     mockListArchives.mockResolvedValue(mockResponse);
-    const archives = await getArchives('roomName');
+    const archives = await getArchives('en', 'roomName');
     expect(archives).toEqual({
       archives: [
         {
@@ -52,7 +52,7 @@ describe('getArchives', () => {
       },
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as unknown as AxiosResponse<any, any>);
-    const archives = await getArchives('roomName');
+    const archives = await getArchives('en', 'roomName');
     expect(archives).toEqual({
       archives: [],
       hasPending: false,
@@ -61,6 +61,6 @@ describe('getArchives', () => {
 
   it('it throws with error when api call throws', async () => {
     mockListArchives.mockRejectedValue(new AxiosError('Network Error', 'ERR_NETWORK'));
-    expect(getArchives('roomName')).rejects.toThrowError();
+    expect(getArchives('en', 'roomName')).rejects.toThrowError();
   });
 });

frontend/src/api/archiving/tests/model.spec.ts

@@ -4,7 +4,7 @@ import { availableServerArchive, failedServerArchive, startedServerArchive } fro
 
 describe('createArchiveFromServer', () => {
   it('should convert fields to model fields', () => {
-    const archive = createArchiveFromServer(availableServerArchive);
+    const archive = createArchiveFromServer('en', availableServerArchive);
     expect(archive).toEqual({
       createdAt: 1725268141000,
       createdAtFormatted: 'Mon, Sep 2 5:09 AM',
@@ -15,27 +15,27 @@ describe('createArchiveFromServer', () => {
   });
 
   it('should return status as failed for failed and expired archives', () => {
-    expect(createArchiveFromServer(failedServerArchive).status).toBe('failed');
-    expect(createArchiveFromServer({ ...failedServerArchive, status: 'expired' }).status).toBe(
-      'failed'
-    );
+    expect(createArchiveFromServer('en', failedServerArchive).status).toBe('failed');
+    expect(
+      createArchiveFromServer('en', { ...failedServerArchive, status: 'expired' }).status
+    ).toBe('failed');
   });
 
   it('should return available as failed for status available archives', () => {
-    expect(createArchiveFromServer(availableServerArchive).status).toBe('available');
+    expect(createArchiveFromServer('en', availableServerArchive).status).toBe('available');
   });
 
   it('should return status as pending for started, stopped, uploaded, and paused archives', () => {
-    expect(createArchiveFromServer(startedServerArchive).status).toBe('pending');
-    expect(createArchiveFromServer({ ...startedServerArchive, status: 'stopped' }).status).toBe(
-      'pending'
-    );
-    expect(createArchiveFromServer({ ...startedServerArchive, status: 'uploaded' }).status).toBe(
-      'pending'
-    );
-    expect(createArchiveFromServer({ ...startedServerArchive, status: 'paused' }).status).toBe(
-      'pending'
-    );
+    expect(createArchiveFromServer('en', startedServerArchive).status).toBe('pending');
+    expect(
+      createArchiveFromServer('en', { ...startedServerArchive, status: 'stopped' }).status
+    ).toBe('pending');
+    expect(
+      createArchiveFromServer('en', { ...startedServerArchive, status: 'uploaded' }).status
+    ).toBe('pending');
+    expect(
+      createArchiveFromServer('en', { ...startedServerArchive, status: 'paused' }).status
+    ).toBe('pending');
   });
 });