VIDSOL-105: Background Replacement Support for Web VERA - Custom Images #201
Conversation
…with unified management in preview and meeting rooms. Refactored publisher logic, updated user context, and enhanced UI to support and display background selections.
…dded isParentVideoEnabled prop, standardized option sizing, and improved disabled video container styles.
OscarFava
changed the title
…ground-replacement-custom-images
…nd give functionality to delete, select or add new
…ean background if deleted and applied to publisher
… + fix drag and drop + fix delete custom image button + hide devicesOptions when clicking background effects
|
| expect(await screen.findByText(/Image must be less than 2MB/i)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('calls customBackgroundImageChange on valid file upload', async () => { |
There was a problem hiding this comment.
nit: I think the name of the test is too literal. could we change it to something more generic?
| })); | ||
|
|
||
| describe('AddBackgroundEffectLayout', () => { | ||
| it('should render without crashing', () => { |
There was a problem hiding this comment.
nit: I think we can just say should render
| import FileUploader from '../../FileUploader/FileUploader'; | ||
|
|
||
| export type AddBackgroundEffectLayoutProps = { | ||
| customBackgroundImageChange: (param1: string) => void; |
There was a problem hiding this comment.
nit: can we change the name param1 to something else? something like dataUrl?
| const AddBackgroundEffectLayout = ({ | ||
| customBackgroundImageChange, | ||
| }: AddBackgroundEffectLayoutProps): ReactElement => { | ||
| const MAX_SIZE_MB = 2; |
There was a problem hiding this comment.
could this be moved to the constants file and be imported here instead?
| const [fileError, setFileError] = useState(''); | ||
| const [imageLink, setImageLink] = useState(''); | ||
| const [linkLoading, setLinkLoading] = useState(false); |
There was a problem hiding this comment.
could you specify the types i.e useState<string> and useState<boolean>?
| expect(handleFileChange).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('calls handleFileChange on drop', () => { |
There was a problem hiding this comment.
nit: the name of the test is too literal
| const [backgroundSelected, setBackgroundSelected] = useState<string>('none'); | ||
| const isShortScreen = useMediaQuery('(max-height:825px)'); |
There was a problem hiding this comment.
looks like we use the useMediaQuery in a few places in this PR and otherwise. any chance that useIsSmallViewport can be renamed and changed to be re-used in these cases?
| toggleBackgroundEffects={() => { | ||
| toggleBackgroundEffects(); | ||
| handleToggle(); |
There was a problem hiding this comment.
nit: it could be nice adding a new function, handleToggletBackgroundEffects that has toggleBackgroundEffects() and handleToggle() in it
| * Custom hook for managing image storage in localStorage. | ||
| * @returns {object} - The image storage methods and error state. | ||
| */ | ||
| export const useImageStorage = () => { |
There was a problem hiding this comment.
could you use the const useImageStorage = () => {} and export default useImageStorage approach that we do in other files?
| import { useCallback, useState } from 'react'; | ||
| import { getStorageItem, setStorageItem, STORAGE_KEYS } from '../storage'; | ||
|
|
||
| const MAX_LOCAL_STORAGE_BYTES = 4 * 1024 * 1024; |
There was a problem hiding this comment.
this can go to the constants file
What is this PR doing?
This PR is adding the capability to add custom images that will be used to replace the background of the publisher.
How should this be manually tested?
What are the relevant tickets?
A maintainer will add this ticket number.
Resolves VIDSOL-105
Checklist
[ ] Branch is based on
develop(notmain).[ ] Resolves a
Known Issue.[ ] If yes, did you remove the item from the
docs/KNOWN_ISSUES.md?[ ] Resolves an item reported in
Issues.If yes, which issue? Issue Number?