diff --git a/README.md b/README.md index 827c7fa48..5da0f503e 100644 --- a/README.md +++ b/README.md @@ -66,12 +66,12 @@ This application provides features for common conferencing use cases, such as: -
- 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. + Background settings 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 settings 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. - Screenshot of background effects + Screenshot of background settings
-
@@ -119,7 +119,7 @@ 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:* Some browsers such as Firefox or Safari do not support media processors like video and audio filters (e.g background settings): 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`. diff --git a/frontend/src/components/AvatarInitials/AvatarInitials.tsx b/frontend/src/components/AvatarInitials/AvatarInitials.tsx index 9c823951f..f2697e336 100644 --- a/frontend/src/components/AvatarInitials/AvatarInitials.tsx +++ b/frontend/src/components/AvatarInitials/AvatarInitials.tsx @@ -1,5 +1,6 @@ -import { Avatar, SxProps } from '@mui/material'; import { ReactElement } from 'react'; +import Avatar from '@ui/Avatar'; +import { SxProps } from '@ui/SxProps'; import getParticipantColor from '../../utils/getParticipantColor'; export type InitialsProps = { diff --git a/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.spec.tsx b/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.spec.tsx index cd589c1a0..7e87a9070 100644 --- a/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.spec.tsx +++ b/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.spec.tsx @@ -9,9 +9,8 @@ vi.mock('react-i18next', () => ({ const translations: Record = { 'backgroundEffects.invalidFileType': enTranslations['backgroundEffects.invalidFileType'], 'backgroundEffects.fileTooLarge': enTranslations['backgroundEffects.fileTooLarge'], - 'backgroundEffects.linkPlaceholder': enTranslations['backgroundEffects.linkPlaceholder'], - 'backgroundEffects.dragDropText': enTranslations['backgroundEffects.dragDropText'], 'backgroundEffects.maxSize': enTranslations['backgroundEffects.maxSize'], + 'backgroundEffects.addBackground': enTranslations['backgroundEffects.addBackground'], }; let translation = translations[key] || key; @@ -48,15 +47,18 @@ describe('AddBackgroundEffectLayout', () => { }); it('should render', () => { - render(); - expect(screen.getByText(/Drag and drop, or click here to upload image/i)).toBeInTheDocument(); - expect(screen.getByPlaceholderText(/Link from the web/i)).toBeInTheDocument(); - expect(screen.getByTestId('background-effect-link-submit-button')).toBeInTheDocument(); + render( + + ); + expect(screen.getByTestId('background-add-background')).toBeInTheDocument(); + expect(screen.getByTestId('vivid-icon-gallery-line')).toBeInTheDocument(); }); it('shows error for invalid file type', async () => { - render(); - const input = screen.getByLabelText(/upload/i); + render( + + ); + const input = document.querySelector('input[type="file"]') as HTMLInputElement; const file = new File(['dummy'], 'test.txt', { type: 'text/plain' }); fireEvent.change(input, { target: { files: [file] } }); expect( @@ -65,8 +67,10 @@ describe('AddBackgroundEffectLayout', () => { }); it('shows error for file size too large', async () => { - render(); - const input = screen.getByLabelText(/upload/i); + render( + + ); + const input = document.querySelector('input[type="file"]') as HTMLInputElement; const file = new File(['x'.repeat(3 * 1024 * 1024)], 'big.png', { type: 'image/png' }); Object.defineProperty(file, 'size', { value: 3 * 1024 * 1024 }); fireEvent.change(input, { target: { files: [file] } }); @@ -74,19 +78,10 @@ describe('AddBackgroundEffectLayout', () => { }); it('handles valid image file upload', async () => { - render(); - const input = screen.getByLabelText(/upload/i); + render(); + const input = document.querySelector('input[type="file"]') as HTMLInputElement; const file = new File(['dummy'], 'test.png', { type: 'image/png' }); fireEvent.change(input, { target: { files: [file] } }); await waitFor(() => expect(cb).toHaveBeenCalledWith('data:image/png;base64,MOCKED')); }); - - it('handles valid link submit', async () => { - render(); - const input = screen.getByPlaceholderText(/Link from the web/i); - fireEvent.change(input, { target: { value: 'https://example.com/image.png' } }); - const button = screen.getByTestId('background-effect-link-submit-button'); - fireEvent.click(button); - await waitFor(() => expect(cb).toHaveBeenCalledWith('data:image/png;base64,MOCKED_LINK')); - }); }); diff --git a/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.tsx b/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.tsx index 2472cb899..16832c1f6 100644 --- a/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.tsx +++ b/frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout.tsx @@ -1,43 +1,38 @@ -import { - Box, - Button, - CircularProgress, - InputAdornment, - TextField, - Typography, -} from '@mui/material'; -import { ChangeEvent, ReactElement, useState } from 'react'; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import LinkIcon from '@mui/icons-material/Link'; +import { ChangeEvent, ReactElement, useState, useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import FileUploader from '../../FileUploader/FileUploader'; +import Box from '@ui/Box'; +import Snackbar from '@ui/Snackbar'; +import Alert from '@ui/Alert'; +import VividIcon from '@components/VividIcon'; import { ALLOWED_TYPES, MAX_SIZE_MB } from '../../../../utils/constants'; import useImageStorage from '@utils/useImageStorage/useImageStorage'; +import SelectableOption from '@components/BackgroundEffects/SelectableOption'; export type AddBackgroundEffectLayoutProps = { customBackgroundImageChange: (dataUrl: string) => void; + backgroundSelected: string; }; /** * AddBackgroundEffectLayout Component * - * This component manages the UI for adding background effects. + * This component manages the UI for adding background effects via file upload. * @param {AddBackgroundEffectLayoutProps} props - The props for the component. * @property {Function} customBackgroundImageChange - Callback function to handle background image change. + * @property {string} backgroundSelected - The currently selected background effect key. * @returns {ReactElement} The add background effect layout component. */ const AddBackgroundEffectLayout = ({ customBackgroundImageChange, + backgroundSelected, }: AddBackgroundEffectLayoutProps): ReactElement => { const [fileError, setFileError] = useState(''); - const [imageLink, setImageLink] = useState(''); - const [linkLoading, setLinkLoading] = useState(false); - const { storageError, handleImageFromFile, handleImageFromLink } = useImageStorage(); + const [showError, setShowError] = useState(false); + const { storageError, handleImageFromFile } = useImageStorage(); const { t } = useTranslation(); + const fileInputRef = useRef(null); - type HandleFileChangeType = ChangeEvent | { target: { files: FileList } }; - - const handleFileChange = async (e: HandleFileChangeType) => { + const handleFileChange = async (e: ChangeEvent) => { const { files } = e.target; if (!files || files.length === 0) { return; @@ -50,11 +45,13 @@ const AddBackgroundEffectLayout = ({ if (!ALLOWED_TYPES.includes(file.type)) { setFileError(t('backgroundEffects.invalidFileType')); + setShowError(true); return; } if (file.size > MAX_SIZE_MB * 1024 * 1024) { setFileError(t('backgroundEffects.fileTooLarge', { maxSize: MAX_SIZE_MB })); + setShowError(true); return; } @@ -62,77 +59,54 @@ const AddBackgroundEffectLayout = ({ const newImage = await handleImageFromFile(file); if (newImage) { setFileError(''); + setShowError(false); customBackgroundImageChange(newImage.dataUrl); } } catch { setFileError(t('backgroundEffects.processingError')); + setShowError(true); } }; - const handleLinkSubmit = async () => { + const handleClick = () => { + fileInputRef.current?.click(); + }; + + const handleCloseError = () => { setFileError(''); - setLinkLoading(true); - try { - const newImage = await handleImageFromLink(imageLink); - if (newImage) { - setFileError(''); - customBackgroundImageChange(newImage.dataUrl); - } else { - setFileError(t('backgroundEffects.storageError')); - } - } catch { - // error handled in hook - } finally { - setLinkLoading(false); - } + setShowError(false); }; - return ( - - + const errorMessage = fileError || storageError; - {(fileError || storageError) && ( - - {fileError || storageError} - - )} + return ( + + - - setImageLink(e.target.value)} - InputProps={{ - startAdornment: ( - - {linkLoading ? : } - - ), - }} - /> + } + /> - - + + + {errorMessage} + + ); }; diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/BackgroundEffectOptions.spec.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/BackgroundEffectOptions.spec.tsx new file mode 100644 index 000000000..e275c74cf --- /dev/null +++ b/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/BackgroundEffectOptions.spec.tsx @@ -0,0 +1,27 @@ +import { render, screen } from '@testing-library/react'; +import { vi, describe, it, expect } from 'vitest'; +import BackgroundEffectOptions from './BackgroundEffectOptions'; + +describe('BackgroundEffectOptions', () => { + const setBackgroundSelected = vi.fn(); + const clearBgWhenSelectedDeleted = vi.fn(); + const customBackgroundImageChange = vi.fn(); + + it('renders background options grid with effects and gallery', () => { + render( + + ); + + expect(screen.getByTestId('vivid-icon-remove-line')).toBeInTheDocument(); + expect(screen.getByTestId('vivid-icon-blur-line')).toBeInTheDocument(); + + expect(screen.getByAltText('Bookshelf Room')).toBeInTheDocument(); + expect(screen.getByAltText('Busy Room')).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/BackgroundEffectOptions.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/BackgroundEffectOptions.tsx new file mode 100644 index 000000000..fb3463c98 --- /dev/null +++ b/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/BackgroundEffectOptions.tsx @@ -0,0 +1,118 @@ +import { Publisher } from '@vonage/client-sdk-video'; +import { ReactElement, useState } from 'react'; +import Box from '@ui/Box'; +import useTheme from '@ui/theme'; +import EffectOptionButtons from '../EffectOptionButtons/EffectOptionButtons'; +import BackgroundGallery from '../BackgroundGallery/BackgroundGallery'; +import { DEFAULT_SELECTABLE_OPTION_WIDTH } from '@utils/constants'; +import getInitialBackgroundFilter from '@utils/backgroundFilter/getInitialBackgroundFilter/getInitialBackgroundFilter'; +import useImageStorage, { StoredImage } from '@utils/useImageStorage/useImageStorage'; + +type BackgroundEffectOptionsProps = { + mode: 'meeting' | 'waiting'; + backgroundSelected: string; + setBackgroundSelected: (value: string) => void; + cleanupSelectedBackgroundReplacement: (dataUrl: string) => void; + customBackgroundImageChange: (dataUrl: string) => void; +}; + +export const clearBgWhenSelectedDeleted = ( + publisher: Publisher | null | undefined, + changeBackground: (bg: string) => void, + backgroundSelected: string, + dataUrl: string +) => { + const selectedBackgroundOption = getInitialBackgroundFilter(publisher); + if (dataUrl === selectedBackgroundOption) { + changeBackground(backgroundSelected); + } +}; + +/** + * BackgroundEffectOptions Component + * + * This component manages the tabs for background effects, including selecting existing backgrounds + * and adding new ones. + * @param {BackgroundEffectOptionsProps} props - The props for the component. + * @property {string} mode - The mode of the background effect ('meeting' or 'waiting'). + * @property {string} backgroundSelected - The currently selected background option. + * @property {Function} setBackgroundSelected - Function to set the selected background option. + * @property {Function} cleanupSelectedBackgroundReplacement - Function to clean up background replacement if deleted. + * @property {Function} customBackgroundImageChange - Callback function to handle background image change. + * @returns {ReactElement} The background effect tabs component. + */ +const BackgroundEffectOptions = ({ + mode, + backgroundSelected, + setBackgroundSelected, + cleanupSelectedBackgroundReplacement, + customBackgroundImageChange, +}: BackgroundEffectOptionsProps): ReactElement => { + const { getImagesFromStorage, deleteImageFromStorage } = useImageStorage(); + const [customImages, setCustomImages] = useState(getImagesFromStorage()); + + const handleBackgroundSelect = (value: string) => { + setBackgroundSelected(value); + }; + + const handleCustomBackgroundImageChange = (dataUrl: string) => { + customBackgroundImageChange(dataUrl); + setCustomImages(getImagesFromStorage()); + }; + + const theme = useTheme(); + + return ( + + + + + + + + + ); +}; + +export default BackgroundEffectOptions; diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/Index.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/Index.tsx new file mode 100644 index 000000000..771e7aedd --- /dev/null +++ b/frontend/src/components/BackgroundEffects/BackgroundEffectOptions/Index.tsx @@ -0,0 +1,3 @@ +import BackgroundEffectOptions from './BackgroundEffectOptions'; + +export default BackgroundEffectOptions; diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/BackgroundEffectTabs.spec.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/BackgroundEffectTabs.spec.tsx deleted file mode 100644 index 8bd2d32d8..000000000 --- a/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/BackgroundEffectTabs.spec.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { vi, describe, it, expect } from 'vitest'; -import BackgroundEffectTabs from './BackgroundEffectTabs'; - -describe('BackgroundEffectTabs', () => { - const setTabSelected = vi.fn(); - const setBackgroundSelected = vi.fn(); - const clearBgWhenSelectedDeleted = vi.fn(); - const customBackgroundImageChange = vi.fn(); - - it('renders tabs and defaults to Backgrounds tab', () => { - render( - - ); - expect(screen.getByRole('tab', { name: /Backgrounds/i })).toBeInTheDocument(); - expect(screen.getByRole('tab', { name: /Add Background/i })).toBeInTheDocument(); - expect(screen.getByRole('tab', { name: /Backgrounds/i })).toHaveAttribute( - 'aria-selected', - 'true' - ); - }); - - it('switches to Add Background tab when clicked', async () => { - render( - - ); - const addTab = screen.getByRole('tab', { name: /Add Background/i }); - await userEvent.click(addTab); - expect(setTabSelected).toHaveBeenCalledWith(1); - }); - - it('renders AddBackgroundEffectLayout when Add Background tab is selected', () => { - render( - - ); - expect(screen.getByText(/upload/i)).toBeInTheDocument(); - }); -}); diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/BackgroundEffectTabs.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/BackgroundEffectTabs.tsx deleted file mode 100644 index 60b421bf3..000000000 --- a/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/BackgroundEffectTabs.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { Box, Tabs, Tab } from '@mui/material'; -import { Publisher } from '@vonage/client-sdk-video'; -import { ReactElement } from 'react'; -import { useTranslation } from 'react-i18next'; -import EffectOptionButtons from '../EffectOptionButtons/EffectOptionButtons'; -import BackgroundGallery from '../BackgroundGallery/BackgroundGallery'; -import AddBackgroundEffectLayout from '../AddBackgroundEffect/AddBackgroundEffectLayout/AddBackgroundEffectLayout'; -import { DEFAULT_SELECTABLE_OPTION_WIDTH } from '../../../utils/constants'; -import getInitialBackgroundFilter from '../../../utils/backgroundFilter/getInitialBackgroundFilter/getInitialBackgroundFilter'; -import useIsTabletViewport from '../../../hooks/useIsTabletViewport'; - -type BackgroundEffectTabsProps = { - tabSelected: number; - setTabSelected: (value: number) => void; - mode: 'meeting' | 'waiting'; - backgroundSelected: string; - setBackgroundSelected: (value: string) => void; - cleanupSelectedBackgroundReplacement: (dataUrl: string) => void; - customBackgroundImageChange: (dataUrl: string) => void; -}; - -export const clearBgWhenSelectedDeleted = ( - publisher: Publisher | null | undefined, - changeBackground: (bg: string) => void, - backgroundSelected: string, - dataUrl: string -) => { - const selectedBackgroundOption = getInitialBackgroundFilter(publisher); - if (dataUrl === selectedBackgroundOption) { - changeBackground(backgroundSelected); - } -}; - -/** - * BackgroundEffectTabs Component - * - * This component manages the tabs for background effects, including selecting existing backgrounds - * and adding new ones. - * @param {BackgroundEffectTabsProps} props - The props for the component. - * @property {number} tabSelected - The currently selected tab index. - * @property {Function} setTabSelected - Function to set the selected tab index. - * @property {string} mode - The mode of the background effect ('meeting' or 'waiting'). - * @property {string} backgroundSelected - The currently selected background option. - * @property {Function} setBackgroundSelected - Function to set the selected background option. - * @property {Function} cleanupSelectedBackgroundReplacement - Function to clean up background replacement if deleted. - * @property {Function} customBackgroundImageChange - Callback function to handle background image change. - * @returns {ReactElement} The background effect tabs component. - */ -const BackgroundEffectTabs = ({ - tabSelected, - setTabSelected, - mode, - backgroundSelected, - setBackgroundSelected, - cleanupSelectedBackgroundReplacement, - customBackgroundImageChange, -}: BackgroundEffectTabsProps): ReactElement => { - const handleBackgroundSelect = (value: string) => { - setBackgroundSelected(value); - }; - const isTabletViewport = useIsTabletViewport(); - const { t } = useTranslation(); - - return ( - - setTabSelected(newValue)} - aria-label={t('backgroundEffects.title.tabs')} - > - - - - - - {tabSelected === 0 && ( - - - - - )} - {tabSelected === 1 && ( - - )} - - - ); -}; - -export default BackgroundEffectTabs; diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/Index.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/Index.tsx deleted file mode 100644 index 2bad5f928..000000000 --- a/frontend/src/components/BackgroundEffects/BackgroundEffectTabs/Index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import BackgroundEffectTabs from './BackgroundEffectTabs'; - -export default BackgroundEffectTabs; diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.spec.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.spec.tsx index 23d10a3a7..fec7c2946 100644 --- a/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.spec.tsx +++ b/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.spec.tsx @@ -12,9 +12,6 @@ vi.mock('react-i18next', () => ({ const translations: Record = { 'backgroundEffects.title': enTranslations['backgroundEffects.title'], 'backgroundEffects.choice': enTranslations['backgroundEffects.choice'], - 'backgroundEffects.tabs.backgrounds': enTranslations['backgroundEffects.tabs.backgrounds'], - 'backgroundEffects.tabs.addBackground': - enTranslations['backgroundEffects.tabs.addBackground'], 'button.cancel': enTranslations['button.cancel'], 'button.apply': enTranslations['button.apply'], }; @@ -62,15 +59,12 @@ describe('BackgroundEffectsLayout (Meeting room)', () => { it('renders when open', () => { renderLayout(); - expect(screen.getByTestId('right-panel-title')).toHaveTextContent('Background Effects'); + expect(screen.getByTestId('right-panel-title')).toHaveTextContent('Background settings'); expect(screen.getByTestId('background-video-container')).toBeInTheDocument(); expect(screen.getByTestId('background-none')).toBeInTheDocument(); expect(screen.getByTestId('background-bg1')).toBeInTheDocument(); expect(screen.getByTestId('background-effect-cancel-button')).toBeInTheDocument(); expect(screen.getByTestId('background-effect-apply-button')).toBeInTheDocument(); - - expect(screen.getAllByText(/Backgrounds/i)[0]).toBeInTheDocument(); - expect(screen.getAllByText(/Add background/i)[0]).toBeInTheDocument(); }); it('does not render when closed', () => { @@ -103,8 +97,6 @@ describe('BackgroundEffectsLayout (Meeting room)', () => { it('displays correct English title, subtitle, cancel, and apply actions', () => { renderLayout(); - expect(screen.getByText('Backgrounds')).toBeInTheDocument(); - expect(screen.getByText('Add Background')).toBeInTheDocument(); expect(screen.getByText('Cancel')).toBeInTheDocument(); expect(screen.getByText('Apply')).toBeInTheDocument(); }); @@ -126,10 +118,6 @@ describe('BackgroundEffects (Waiting Room)', () => { expect(screen.getByTestId('background-bg1')).toBeInTheDocument(); expect(screen.getByRole('button', { name: /Cancel/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /Apply/i })).toBeInTheDocument(); - - // Checking that BackgroundEffectTabs (Backgrounds and Add Background tabs) are rendered - expect(screen.getAllByText(/Backgrounds/i)[0]).toBeInTheDocument(); - expect(screen.getAllByText(/Add background/i)[0]).toBeInTheDocument(); }); it('does not render when closed', () => { @@ -162,8 +150,6 @@ describe('BackgroundEffects (Waiting Room)', () => { it('displays correct English title, subtitle, cancel, and apply actions', () => { renderLayout(); - expect(screen.getByText('Backgrounds')).toBeInTheDocument(); - expect(screen.getByText('Add Background')).toBeInTheDocument(); expect(screen.getByText('Cancel')).toBeInTheDocument(); expect(screen.getByText('Apply')).toBeInTheDocument(); }); diff --git a/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx b/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx index 6c9fed493..6620b6dd1 100644 --- a/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx +++ b/frontend/src/components/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx @@ -1,16 +1,18 @@ import { ReactElement, useCallback, useEffect, useState } from 'react'; -import { Box, Button, useMediaQuery } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import useMediaQuery from '@ui/useMediaQuery'; +import Box from '@ui/Box'; +import Button from '@ui/Button'; +import useTheme from '@ui/theme'; import usePublisherContext from '../../../hooks/usePublisherContext'; import BackgroundVideoContainer from '../BackgroundVideoContainer'; -import BackgroundEffectTabs, { +import BackgroundEffectOptions, { clearBgWhenSelectedDeleted, -} from '../BackgroundEffectTabs/BackgroundEffectTabs'; +} from '../BackgroundEffectOptions/BackgroundEffectOptions'; import getInitialBackgroundFilter from '../../../utils/backgroundFilter/getInitialBackgroundFilter/getInitialBackgroundFilter'; import useBackgroundPublisherContext from '../../../hooks/useBackgroundPublisherContext'; import RightPanelTitle from '../../MeetingRoom/RightPanel/RightPanelTitle'; import usePreviewPublisherContext from '../../../hooks/usePreviewPublisherContext'; -import useIsTabletViewport from '../../../hooks/useIsTabletViewport'; export type BackgroundEffectsLayoutProps = { isOpen: boolean; @@ -34,13 +36,11 @@ const BackgroundEffectsLayout = ({ handleClose, mode, }: BackgroundEffectsLayoutProps): ReactElement | false => { - const [tabSelected, setTabSelected] = useState(0); const [backgroundSelected, setBackgroundSelected] = useState('none'); const { t } = useTranslation(); + const theme = useTheme(); const isShortScreen = useMediaQuery('(max-height:825px)'); - const isTabletViewport = useIsTabletViewport(); - const publisherContext = usePublisherContext(); const previewPublisherContext = usePreviewPublisherContext(); @@ -61,7 +61,6 @@ const BackgroundEffectsLayout = ({ }; const customBackgroundImageChange = (dataUrl: string) => { - setTabSelected(0); handleBackgroundSelect(dataUrl); }; @@ -82,17 +81,15 @@ const BackgroundEffectsLayout = ({ const buttonGroup = (