Add Video Effects Pane to Call Composite (#2883)

* Add Video Effects Pane to Call Composite * Change files * Duplicate change files for beta release
Azure · Apr 3, 2023 · 53d6e76 · 53d6e76
1 parent d7f7aff
commit 53d6e76
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/change-beta/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json b/change-beta/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Video Effects Pane to Call Composite",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json b/change/@azure-communication-react-b5c59c38-b83a-466c-ac6e-ca06b99ae9b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Video Effects Pane to Call Composite",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx b/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx
@@ -52,6 +52,8 @@ import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hoo
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { getPage } from '../selectors/baseSelectors';
 import { drawerContainerStyles } from '../styles/CallComposite.styles';
+/* @conditional-compile-remove(video-background-effects) */
+import { VideoEffectsPane } from '../../common/VideoEffectsPane';
 
 /**
  * @private
@@ -130,6 +132,17 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
     [callWithChatStrings]
   );
 
+  /* @conditional-compile-remove(video-background-effects) */
+  const [showVideoEffectsPane, setVideoEffectsPane] = useState(false);
+
+  /* @conditional-compile-remove(video-background-effects) */
+  const setShowVideoEffectsPane = useCallback(
+    (showVideoEffectsOptions: boolean): void => {
+      setVideoEffectsPane(showVideoEffectsOptions);
+    },
+    [setVideoEffectsPane]
+  );
+
   const [showDrawer, setShowDrawer] = useState(false);
   const onMoreButtonClicked = useCallback(() => {
     closePane();
@@ -253,6 +266,8 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                     peopleButtonChecked={activePane === 'people'}
                     onPeopleButtonClicked={togglePeoplePane}
                     onMoreButtonClicked={onMoreButtonClicked}
+                    /* @conditional-compile-remove(video-background-effects) */
+                    onShowVideoEffectsPicker={setShowVideoEffectsPane}
                   />
                 )}
               </Stack.Item>
@@ -311,6 +326,14 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
               callPaneContent()
             }
           </Stack>
+          {
+            /* @conditional-compile-remove(video-background-effects) */
+            <VideoEffectsPane
+              showVideoEffectsOptions={showVideoEffectsPane}
+              setshowVideoEffectsOptions={setShowVideoEffectsPane}
+              adapter={adapter}
+            />
+          }
         </Stack>
       </Stack>
     </div>