test1.txt
120.56 KB
- Click to open
@@ -243,7 +243,6 @@ exports[`the messageList component should render correctly 1`] = `
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
- role="presentation"
viewBox="0 0 24 24"
>
() => ({ room: { sid: 'mockRoomSid' } }));
jest.mock('../../../hooks/useIsRecording/useIsRecording');
jest.mock('../../../hooks/useChatContext/useChatContext');
+jest.mock('../../../hooks/useLocalVideoToggle/useLocalVideoToggle');
const mockUseFlipCameraToggle = useFlipCameraToggle as jest.Mock;
const mockUseMediaQuery = useMediaQuery as jest.Mock;
const mockUseAppState = useAppState as jest.Mock;
const mockUseIsRecording = useIsRecording as jest.Mock;
const mockUseChatContext = useChatContext as jest.Mock;
+const mockUseLocalVideoToggle = useLocalVideoToggle as jest.Mock;
const mockToggleChatWindow = jest.fn();
mockUseChatContext.mockImplementation(() => ({ setIsChatWindowOpen: mockToggleChatWindow }));
+mockUseLocalVideoToggle.mockImplementation(() => [true, () => {}]);
describe('the Menu component', () => {
let mockUpdateRecordingRules: jest.Mock;
diff --git a/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap b/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
index 78de46560..e1b13f5ef 100644
--- a/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`the Snackbar component should render correctly with "error" variant 1`]
onClick={[Function]}
size="small"
>
-
@@ -103,7 +103,7 @@ exports[`the Snackbar component should render correctly with "info" variant 1`]
onClick={[Function]}
size="small"
>
-
@@ -159,7 +159,7 @@ exports[`the Snackbar component should render correctly with "warning" variant 1
onClick={[Function]}
size="small"
>
-
diff --git a/src/components/VideoProvider/index.test.tsx b/src/components/VideoProvider/index.test.tsx
index 8b02df0c6..fa224b30b 100644
--- a/src/components/VideoProvider/index.test.tsx
+++ b/src/components/VideoProvider/index.test.tsx
@@ -25,6 +25,15 @@ jest.mock('./useLocalTracks/useLocalTracks', () =>
jest.mock('./useHandleRoomDisconnection/useHandleRoomDisconnection');
jest.mock('./useHandleTrackPublicationFailed/useHandleTrackPublicationFailed');
jest.mock('./useRestartAudioTrackOnDeviceChange/useRestartAudioTrackOnDeviceChange');
+jest.mock('@twilio/video-processors', () => {
+ return {
+ GaussianBlurBackgroundProcessor: jest.fn().mockImplementation(() => {
+ return {
+ loadModel: jest.fn(),
+ };
+ }),
+ };
+});
describe('the VideoProvider component', () => {
it('should correctly return the Video Context object', () => {
@@ -34,6 +43,10 @@ describe('the VideoProvider component', () => {
);
const { result } = renderHook(useVideoContext, { wrapper });
+ const expectedSettings = {
+ type: 'none',
+ index: 0,
+ };
expect(result.current).toMatchObject({
isConnecting: false,
localTracks: [{ name: 'mockTrack' }],
@@ -47,6 +60,8 @@ describe('the VideoProvider component', () => {
toggleScreenShare: expect.any(Function),
isBackgroundSelectionOpen: false,
setIsBackgroundSelectionOpen: expect.any(Function),
+ backgroundSettings: expectedSettings,
+ setBackgroundSettings: expect.any(Function),
});
expect(useRoom).toHaveBeenCalledWith([{ name: 'mockTrack' }], expect.any(Function), {
dominantSpeaker: true,
diff --git a/src/components/VideoProvider/index.tsx b/src/components/VideoProvider/index.tsx
index 3d6d3f8ad..99d8a7218 100644
--- a/src/components/VideoProvider/index.tsx
+++ b/src/components/VideoProvider/index.tsx
@@ -81,7 +81,8 @@ export function VideoProvider({ options, children, onError = () => {} }: VideoPr
useRestartAudioTrackOnDeviceChange(localTracks);
const [isBackgroundSelectionOpen, setIsBackgroundSelectionOpen] = useState(false);
- const [backgroundSettings, setBackgroundSettings] = useBackgroundSettings();
+ const videoTrack = localTracks.find(track => track.name.includes('camera')) as LocalVideoTrack | undefined;
+ const [backgroundSettings, setBackgroundSettings] = useBackgroundSettings(videoTrack, room);
return (
{
+ return {
+ GaussianBlurBackgroundProcessor: jest.fn().mockImplementation(() => {
+ return {
+ loadModel: mockLoadModel,
+ // added name attribute for testing purposes
+ name: 'GaussianBlurBackgroundProcessor',
+ };
+ }),
+ };
+});
+
+const defaultSettings = {
+ type: 'none',
+ index: 0,
+};
+
+const blurSettings = {
+ type: 'blur',
+ index: 0,
+};
+
+let mockVideoTrack: any;
+let mockRoom: any;
+let backgroundSettings: any;
+let setBackgroundSettings: any;
+let renderResult: any;
+
+beforeEach(async () => {
+ mockVideoTrack = {
+ kind: 'video',
+ processor: '',
+ addProcessor: jest.fn(),
+ removeProcessor: jest.fn(),
+ };
+ mockRoom = {
+ localParticipant: 'participant',
+ };
+ const { result } = renderHook(() => useBackgroundSettings(mockVideoTrack as any, mockRoom));
+ renderResult = result;
+ [backgroundSettings, setBackgroundSettings] = renderResult.current;
+ await act(async () => {
+ setBackgroundSettings(defaultSettings);
+ });
+});
+
+describe('The useBackgroundSettings hook ', () => {
+ it('should return the backgroundsettings and update function.', () => {
+ expect(renderResult.current).toEqual([defaultSettings, expect.any(Function)]);
+ });
+
+ it('should set the background settings correctly and set the video processor when "blur" is selected', async () => {
+ await act(async () => {
+ setBackgroundSettings(blurSettings as BackgroundSettings);
+ });
+ backgroundSettings = renderResult.current[0];
+ expect(backgroundSettings.type).toEqual('blur');
+ expect(mockVideoTrack.addProcessor).toHaveBeenCalled();
+ });
+
+ it('should set the background settings correctly and remove the video processor when "none" is selected', async () => {
+ await act(async () => {
+ setBackgroundSettings(blurSettings as BackgroundSettings);
+ });
+ // set video processor to none
+ await act(async () => {
+ setBackgroundSettings(defaultSettings as BackgroundSettings);
+ });
+ backgroundSettings = renderResult.current[0];
+ expect(backgroundSettings.type).toEqual('none');
+ });
+
+ it('should set the background settings correctly and set the video processor when "image" is selected', () => {
+ // TODO add test after implementing virtual background feature/logic
+ });
+
+ describe('The setBackgroundSettings function ', () => {
+ it('should call videoTrack.removeProcessor if videoTrack and videoTrack.processor exists', async () => {
+ mockVideoTrack = {
+ kind: 'video',
+ processor: 'processor',
+ addProcessor: jest.fn(),
+ removeProcessor: jest.fn(),
+ };
+ const { result } = renderHook(() => useBackgroundSettings(mockVideoTrack as any, mockRoom));
+ renderResult = result;
+ setBackgroundSettings = renderResult.current[1];
+ await act(async () => {
+ setBackgroundSettings(defaultSettings);
+ });
+ expect(mockVideoTrack.removeProcessor).toHaveBeenCalled();
+ expect(window.localStorage.getItem(SELECTED_BACKGROUND_SETTINGS_KEY)).toEqual(JSON.stringify(defaultSettings));
+ });
+
+ it('should not call videoTrack.removeProcessor if videoTrack.processor does not exist', async () => {
+ await act(async () => {
+ setBackgroundSettings(blurSettings);
+ });
+ expect(mockVideoTrack.removeProcessor).not.toHaveBeenCalled();
+ expect(window.localStorage.getItem(SELECTED_BACKGROUND_SETTINGS_KEY)).toEqual(JSON.stringify(blurSettings));
+ });
+
+ it("should not call videoTrack.addProcessor with a param of blurProcessor if backgroundSettings.type is not equal to 'blur'", async () => {
+ mockVideoTrack.addProcessor.mockReset();
+ const imgSettings = {
+ type: 'image',
+ index: 2,
+ } as BackgroundSettings;
+ await act(async () => {
+ setBackgroundSettings(imgSettings);
+ });
+ expect(mockVideoTrack.addProcessor).not.toHaveBeenCalledWith({
+ loadModel: mockLoadModel,
+ name: 'GaussianBlurBackgroundProcessor',
+ });
+ expect(window.localStorage.getItem(SELECTED_BACKGROUND_SETTINGS_KEY)).toEqual(JSON.stringify(imgSettings));
+ });
+
+ it('should not error when videoTrack does not exist and sets the local storage item', async () => {
+ const { result } = renderHook(() => useBackgroundSettings({} as any, mockRoom));
+ renderResult = result;
+ setBackgroundSettings = renderResult.current[1];
+ await act(async () => {
+ setBackgroundSettings(defaultSettings);
+ });
+ expect(window.localStorage.getItem(SELECTED_BACKGROUND_SETTINGS_KEY)).toEqual(JSON.stringify(defaultSettings));
+ });
+ });
+});
diff --git a/src/components/VideoProvider/useBackgroundSettings/useBackgroundSettings.ts b/src/components/VideoProvider/useBackgroundSettings/useBackgroundSettings.ts
index b5caf14ac..e9fa45036 100644
--- a/src/components/VideoProvider/useBackgroundSettings/useBackgroundSettings.ts
+++ b/src/components/VideoProvider/useBackgroundSettings/useBackgroundSettings.ts
@@ -1,4 +1,7 @@
-import { useState } from 'react';
+import { LocalVideoTrack, Room } from 'twilio-video';
+import { useState, useEffect } from 'react';
+import { SELECTED_BACKGROUND_SETTINGS_KEY } from '../../../constants';
+import { GaussianBlurBackgroundProcessor } from '@twilio/video-processors';
import AbstractThumb from '../../../images/thumb/Abstract.jpg';
import BohoHomeThumb from '../../../images/thumb/BohoHome.jpg';
import BookshelfThumb from '../../../images/thumb/Bookshelf.jpg';
@@ -65,13 +68,39 @@ export const backgroundConfig = {
images,
};
-// TODO : Add video processing logic after backgroundSettings change
-// useEffect hooks, etc ...
+const virtualBackgroundAssets = '/virtualbackground';
+let blurProcessor: GaussianBlurBackgroundProcessor;
+
+export default function useBackgroundSettings(videoTrack: LocalVideoTrack | undefined, room?: Room | null) {
+ const [backgroundSettings, setBackgroundSettings] = useState(() => {
+ const localStorageSettings = window.localStorage.getItem(SELECTED_BACKGROUND_SETTINGS_KEY);
+ return localStorageSettings ? JSON.parse(localStorageSettings) : { type: 'none', index: 0 };
+ });
+
+ useEffect(() => {
+ if (!blurProcessor) {
+ blurProcessor = new GaussianBlurBackgroundProcessor({
+ assetsPath: virtualBackgroundAssets,
+ });
+ blurProcessor.loadModel();
+ }
+ }, []);
+
+ useEffect(() => {
+ // make sure localParticipant has joined room before applying video processors
+ // this ensures that the video processors are not applied on the LocalVideoPreview
+ if (videoTrack && room?.localParticipant) {
+ if (videoTrack.processor) {
+ videoTrack.removeProcessor(videoTrack.processor);
+ }
+ if (backgroundSettings.type === 'blur') {
+ videoTrack.addProcessor(blurProcessor);
+ } else if (backgroundSettings.type === 'image') {
+ // TODO implement image background replacement logic
+ }
+ }
+ window.localStorage.setItem(SELECTED_BACKGROUND_SETTINGS_KEY, JSON.stringify(backgroundSettings));
+ }, [backgroundSettings, videoTrack, room]);
-export default function useBackgroundSettings() {
- const [backgroundSettings, setBackgroundSettings] = useState({
- type: 'none',
- index: 0,
- } as BackgroundSettings);
return [backgroundSettings, setBackgroundSettings] as const;
}
diff --git a/src/constants.ts b/src/constants.ts
index 6aa0199f5..3214cd263 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -8,3 +8,6 @@ export const DEFAULT_VIDEO_CONSTRAINTS: MediaStreamConstraints['video'] = {
export const SELECTED_AUDIO_INPUT_KEY = 'TwilioVideoApp-selectedAudioInput';
export const SELECTED_AUDIO_OUTPUT_KEY = 'TwilioVideoApp-selectedAudioOutput';
export const SELECTED_VIDEO_INPUT_KEY = 'TwilioVideoApp-selectedVideoInput';
+
+// This is used to store the current background settings in localStorage
+export const SELECTED_BACKGROUND_SETTINGS_KEY = 'TwilioVideoApp-selectedBackgroundSettings';
diff --git a/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx b/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx
index 155a5de2c..e9b4b53c8 100644
--- a/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx
+++ b/src/hooks/useLocalVideoToggle/useLocalVideoToggle.tsx
@@ -20,7 +20,9 @@ export default function useLocalVideoToggle() {
getLocalVideoTrack()
.then((track: LocalVideoTrack) => localParticipant?.publishTrack(track, { priority: 'low' }))
.catch(onError)
- .finally(() => setIspublishing(false));
+ .finally(() => {
+ setIspublishing(false);
+ });
}
}
}, [videoTrack, localParticipant, getLocalVideoTrack, isPublishing, onError, removeLocalVideoTrack]);