VIDSOL-105: Background Replacement Support for Web VERA - Custom Images (#201)

Author: OscarFava

README.md

@@ -60,7 +60,14 @@ This application provides features for common conferencing use cases, such as:
     <summary>Input and output device selectors.</summary>
     <img src="docs/assets/DeviceSelector.png" alt="Screenshot of audio devices selector">
   </details>
-- Background blur and noise suppression toggles.
+- <details>
+    <summary>Noise suppression toggles in meeting room</summary>
+    <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.</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">

docs/assets/BGEffects.png

@@ -0,0 +1,67 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, describe, it, expect, beforeAll } from 'vitest';
+import AddBackgroundEffectLayout from './AddBackgroundEffectLayout';
+
+vi.mock('../../../../utils/useImageStorage/useImageStorage', () => ({
+  __esModule: true,
+  default: () => ({
+    storageError: '',
+    handleImageFromFile: vi.fn(async () => ({
+      dataUrl: 'data:image/png;base64,MOCKED',
+    })),
+    handleImageFromLink: vi.fn(async () => ({
+      dataUrl: 'data:image/png;base64,MOCKED_LINK',
+    })),
+  }),
+}));
+
+describe('AddBackgroundEffectLayout', () => {
+  const cb = vi.fn();
+
+  beforeAll(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render', () => {
+    render(<AddBackgroundEffectLayout customBackgroundImageChange={vi.fn()} />);
+    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();
+  });
+
+  it('shows error for invalid file type', async () => {
+    render(<AddBackgroundEffectLayout customBackgroundImageChange={vi.fn()} />);
+    const input = screen.getByLabelText(/upload/i);
+    const file = new File(['dummy'], 'test.txt', { type: 'text/plain' });
+    fireEvent.change(input, { target: { files: [file] } });
+    expect(
+      await screen.findByText(/Only JPG, PNG, GIF, or BMP images are allowed/i)
+    ).toBeInTheDocument();
+  });
+
+  it('shows error for file size too large', async () => {
+    render(<AddBackgroundEffectLayout customBackgroundImageChange={vi.fn()} />);
+    const input = screen.getByLabelText(/upload/i);
+    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] } });
+    expect(await screen.findByText(/Image must be less than 2MB/i)).toBeInTheDocument();
+  });
+
+  it('handles valid image file upload', async () => {
+    render(<AddBackgroundEffectLayout customBackgroundImageChange={cb} />);
+    const input = screen.getByLabelText(/upload/i);
+    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(<AddBackgroundEffectLayout customBackgroundImageChange={cb} />);
+    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'));
+  });
+});

docs/assets/NoiseSupression.png

@@ -0,0 +1,138 @@
+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 FileUploader from '../../FileUploader/FileUploader';
+import { ALLOWED_TYPES, MAX_SIZE_MB } from '../../../../utils/constants';
+import useImageStorage from '../../../../utils/useImageStorage/useImageStorage';
+
+export type AddBackgroundEffectLayoutProps = {
+  customBackgroundImageChange: (dataUrl: string) => void;
+};
+
+/**
+ * AddBackgroundEffectLayout Component
+ *
+ * This component manages the UI for adding background effects.
+ * @param {AddBackgroundEffectLayoutProps} props - The props for the component.
+ *   @property {Function} customBackgroundImageChange - Callback function to handle background image change.
+ * @returns {ReactElement} The add background effect layout component.
+ */
+const AddBackgroundEffectLayout = ({
+  customBackgroundImageChange,
+}: AddBackgroundEffectLayoutProps): ReactElement => {
+  const [fileError, setFileError] = useState<string>('');
+  const [imageLink, setImageLink] = useState<string>('');
+  const [linkLoading, setLinkLoading] = useState<boolean>(false);
+  const { storageError, handleImageFromFile, handleImageFromLink } = useImageStorage();
+
+  type HandleFileChangeType = ChangeEvent<HTMLInputElement> | { target: { files: FileList } };
+
+  const handleFileChange = async (e: HandleFileChangeType) => {
+    const { files } = e.target;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    const file = files[0];
+    if (!file) {
+      return;
+    }
+
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      setFileError('Only JPG, PNG, GIF, or BMP images are allowed.');
+      return;
+    }
+
+    if (file.size > MAX_SIZE_MB * 1024 * 1024) {
+      setFileError(`Image must be less than ${MAX_SIZE_MB}MB.`);
+      return;
+    }
+
+    try {
+      const newImage = await handleImageFromFile(file);
+      if (newImage) {
+        setFileError('');
+        customBackgroundImageChange(newImage.dataUrl);
+      }
+    } catch {
+      setFileError('Failed to process uploaded image.');
+    }
+  };
+
+  const handleLinkSubmit = async () => {
+    setFileError('');
+    setLinkLoading(true);
+    try {
+      const newImage = await handleImageFromLink(imageLink);
+      if (newImage) {
+        setFileError('');
+        customBackgroundImageChange(newImage.dataUrl);
+      } else {
+        setFileError('Failed to store image.');
+      }
+    } catch {
+      // error handled in hook
+    } finally {
+      setLinkLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        overflow: 'auto',
+      }}
+    >
+      <FileUploader handleFileChange={handleFileChange} />
+
+      {(fileError || storageError) && (
+        <Typography color="error" mt={1} fontSize={14}>
+          {fileError || storageError}
+        </Typography>
+      )}
+
+      <Box mt={2} display="flex" alignItems="center" gap={1}>
+        <TextField
+          fullWidth
+          size="small"
+          placeholder="Link from the web"
+          className="add-background-effect-input"
+          value={imageLink}
+          onChange={(e) => setImageLink(e.target.value)}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                {linkLoading ? <CircularProgress size={24} /> : <LinkIcon sx={{ fontSize: 24 }} />}
+              </InputAdornment>
+            ),
+          }}
+        />
+
+        <Button
+          data-testid="background-effect-link-submit-button"
+          variant="contained"
+          color="primary"
+          onClick={handleLinkSubmit}
+          disabled={linkLoading}
+          style={{ minWidth: 0, padding: '8px 12px' }}
+        >
+          {linkLoading ? (
+            <CircularProgress size={24} color="inherit" />
+          ) : (
+            <ArrowForwardIcon sx={{ fontSize: 24 }} />
+          )}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default AddBackgroundEffectLayout;

frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffect.spec.tsx

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

frontend/src/components/BackgroundEffects/AddBackgroundEffect/AddBackgroundEffect.tsx

@@ -0,0 +1,63 @@
+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(
+      <BackgroundEffectTabs
+        mode="meeting"
+        tabSelected={0}
+        setTabSelected={setTabSelected}
+        backgroundSelected=""
+        setBackgroundSelected={setBackgroundSelected}
+        cleanupSelectedBackgroundReplacement={clearBgWhenSelectedDeleted}
+        customBackgroundImageChange={customBackgroundImageChange}
+      />
+    );
+    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(
+      <BackgroundEffectTabs
+        mode="meeting"
+        tabSelected={0}
+        setTabSelected={setTabSelected}
+        backgroundSelected=""
+        setBackgroundSelected={setBackgroundSelected}
+        cleanupSelectedBackgroundReplacement={clearBgWhenSelectedDeleted}
+        customBackgroundImageChange={customBackgroundImageChange}
+      />
+    );
+    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(
+      <BackgroundEffectTabs
+        mode="waiting"
+        tabSelected={1}
+        setTabSelected={setTabSelected}
+        backgroundSelected=""
+        setBackgroundSelected={setBackgroundSelected}
+        cleanupSelectedBackgroundReplacement={clearBgWhenSelectedDeleted}
+        customBackgroundImageChange={customBackgroundImageChange}
+      />
+    );
+    expect(screen.getByText(/upload/i)).toBeInTheDocument();
+  });
+});