VIDSOL-208: Language selector (#242)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: OscarFava

README.md

@@ -65,15 +65,20 @@ This application provides features for common conferencing use cases, such as:
     <img src="docs/assets/NoiseSupression.png" alt="Screenshot of noise supression toggle">
   </details>
 - <details>
-    <summary>Background effects in meeting and waiting room. You can set predefined images, custom image or slight/strong background blur. Images can be uploaded from local device or URL in these formats: JPG, PNG, GIF or BMP. Background effects are not supported in non-Chromium-based browsers or on iOS. </summary>
+    <summary>
+      Background effects in meeting and waiting room. You can set predefined images, custom image or slight/strong background blur. Images can be uploaded from local device or URL in these formats: JPG, PNG, GIF or BMP. Background effects are not supported in non-Chromium-based browsers or on iOS.
+      
+    Please see [OT.hasMediaProcessorSupport](https://vonage.github.io/video-docs/video-js-reference/latest/OT.html#hasMediaProcessorSupport) for more information.
+    </summary>
+  
     <img src="docs/assets/BGEffects.png" alt="Screenshot of background effects">
   </details>
 - <details>
     <summary>Composed archiving capabilities to record your meetings.</summary>
     <img src="docs/assets/Archiving.png" alt="Screenshot of archiving dialog box">
   </details>
 - <details>
-    <summary>In-call tools such as screen sharing, group chat function, and emoji reactions.</summary>
+    <summary>In-call tools such as screen sharing (subscriber can zoom in/out if hasMediaProcessorSupport), group chat function, and emoji reactions.</summary>
     <img src="docs/assets/Emojis.png" alt="Screenshot of emojis">
   </details>
 - Active speaker detection.
@@ -106,6 +111,8 @@ The Vonage Video API Reference App for React is currently supported on the lates
 - ![Safari icon](/docs/assets/safari.svg) Safari
 - ![Electron icon](/docs/assets/electron.svg) Electron
 
+*Note:* Some browsers such as Firefox or Safari do not support media processors like video and audio filters (e.g background effects): Please see [OT.hasMediaProcessorSupport](https://vonage.github.io/video-docs/video-js-reference/latest/OT.html#hasMediaProcessorSupport) for more information.
+
 *Note:* Mobile web views have limited supported at the moment. The minimum supported device width is `360px`.
 
 ## Requirements

frontend/.env.example

@@ -17,4 +17,4 @@ VITE_TUNNEL_DOMAIN=''
 # Default language for i18next
 VITE_I18N_FALLBACK_LANGUAGE='en'
 # List all supported language, separated by | (example: VITE_I18N_SUPPORTED_LANGUAGES='en|es')
-VITE_I18N_SUPPORTED_LANGUAGES='en|es|es-MX'
+VITE_I18N_SUPPORTED_LANGUAGES='en|en-US|es|es-MX|it'

frontend/package.json

@@ -32,6 +32,7 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vonage/client-sdk-video": "^2.31.0",
     "@vonage/vcr-sdk": "^1.3.0",
+    "@vonage/vivid": "^5.3.0",
     "autolinker": "^4.0.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.12.0",

frontend/src/components/Banner/Banner.tsx

@@ -2,11 +2,12 @@ import { ReactElement } from 'react';
 import BannerDateTime from '../BannerDateTime';
 import BannerLinks from '../BannerLinks';
 import BannerLogo from '../BannerLogo';
+import BannerLanguage from '../BannerLanguage';
 
 /**
  * Banner Component
  *
- * This component returns a banner that includes a logo, current date/time, and some links.
+ * This component returns a banner that includes a logo, current date/time, language selector, and some links.
  * @returns {ReactElement} - the banner component.
  */
 const Banner = (): ReactElement => {
@@ -16,6 +17,7 @@ const Banner = (): ReactElement => {
 
       <div className="flex px-4">
         <BannerDateTime />
+        <BannerLanguage />
         <BannerLinks />
       </div>
     </div>

frontend/src/components/BannerLanguage/BannerLanguage.spec.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import BannerLanguage from './BannerLanguage';
+
+describe('BannerLanguage', () => {
+  it('renders the banner language component', () => {
+    render(
+      <MemoryRouter>
+        <BannerLanguage />
+      </MemoryRouter>
+    );
+
+    const bannerLanguage = screen.getByTestId('banner-language');
+    expect(bannerLanguage).toBeInTheDocument();
+  });
+});

frontend/src/components/BannerLanguage/BannerLanguage.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import LanguageSelector from '../LanguageSelector';
+
+/**
+ * BannerLanguage Component
+ *
+ * This component provides a language selection feature for the banner.
+ * @returns {ReactElement} The BannerLanguage component.
+ */
+const BannerLanguage = (): ReactElement => {
+  return (
+    <div className="flex items-center" data-testid="banner-language">
+      <LanguageSelector />
+    </div>
+  );
+};
+
+export default BannerLanguage;

frontend/src/components/BannerLanguage/index.tsx

@@ -0,0 +1,3 @@
+import BannerLanguage from './BannerLanguage';
+
+export default BannerLanguage;