[BugFix] Add missing composite options to CallWithChatComposite (#3565)

* Add missing composite options

* build stable

* remove console

* Change files

* Duplicate change files for beta release

* Update @azure-communication-react-5027666e-56a5-4502-a203-3a671c79dfa2.json

Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

* Update @azure-communication-react-5027666e-56a5-4502-a203-3a671c79dfa2.json

Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

---------

Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-5027666e-56a5-4502-a203-3a671c79dfa2.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bugfix",
+  "comment": "Introduces missing composite options to the CallWithChat composite",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-5027666e-56a5-4502-a203-3a671c79dfa2.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bugfix",
+  "comment": "Introduces missing composite options to the CallWithChat composite",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -1166,6 +1166,8 @@ export type CallWithChatCompositeOptions = {
     }) => void;
     onNetworkingTroubleShootingClick?: () => void;
     onEnvironmentInfoTroubleshootingClick?: () => void;
+    remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
+    localVideoTile?: boolean | LocalVideoTileOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
     };

packages/communication-react/review/stable/communication-react.api.md

@@ -898,6 +898,7 @@ export type CallWithChatCompositeIcons = {
 // @public
 export type CallWithChatCompositeOptions = {
     callControls?: boolean | CallWithChatControlOptions;
+    remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
 };
 
 // @public

packages/react-composites/review/beta/react-composites.api.md

@@ -864,6 +864,8 @@ export type CallWithChatCompositeOptions = {
     }) => void;
     onNetworkingTroubleShootingClick?: () => void;
     onEnvironmentInfoTroubleshootingClick?: () => void;
+    remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
+    localVideoTile?: boolean | LocalVideoTileOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
     };

packages/react-composites/review/stable/react-composites.api.md

@@ -697,6 +697,7 @@ export type CallWithChatCompositeIcons = {
 // @public
 export type CallWithChatCompositeOptions = {
     callControls?: boolean | CallWithChatControlOptions;
+    remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
 };
 
 // @public

packages/react-composites/src/composites/CallComposite/CallComposite.tsx

@@ -136,7 +136,6 @@ export interface LocalVideoTileOptions {
    * @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.
    * 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery
    * local video tile rules and be docked in the bottom corner.
-   * 'hidden' - local video tile will not be rendered.
    * This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.
    */
   position?: 'grid' | 'floating';

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx

@@ -27,6 +27,10 @@ import { FileSharingOptions } from '../ChatComposite';
 import { containerDivStyles } from '../common/ContainerRectProps';
 import { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';
 import { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';
+/* @conditional-compile-remove(pinned-participants) */
+import { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';
+/* @conditional-compile-remove(click-to-call) */
+import { LocalVideoTileOptions } from '../CallComposite/CallComposite';
 /* @conditional-compile-remove(call-readiness) */
 import { DeviceCheckOptions } from '../CallComposite/CallComposite';
 import {
@@ -159,6 +163,18 @@ export type CallWithChatCompositeOptions = {
    * if this is not supplied, the composite will not show a unsupported browser page.
    */
   onEnvironmentInfoTroubleshootingClick?: () => void;
+  /* @conditional-compile-remove(pinned-participants) */
+  /**
+   * Remote participant video tile menu options
+   */
+  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
+  /* @conditional-compile-remove(click-to-call) */
+  /**
+   * Options for controlling the local video tile.
+   *
+   * @remarks if 'false' the local video tile will not be rendered.
+   */
+  localVideoTile?: boolean | LocalVideoTileOptions;
   /* @conditional-compile-remove(gallery-layouts) */
   /**
    * Options for controlling the starting layout of the composite's video gallery
@@ -193,6 +209,10 @@ type CallWithChatScreenProps = {
   onNetworkingTroubleShootingClick?: () => void;
   /* @conditional-compile-remove(unsupported-browser) */
   onEnvironmentInfoTroubleshootingClick?: () => void;
+  /* @conditional-compile-remove(pinned-participants) */
+  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
+  /* @conditional-compile-remove(click-to-call) */
+  localVideoTile?: boolean | LocalVideoTileOptions;
   /* @conditional-compile-remove(gallery-layouts) */
   galleryOptions?: {
     layout?: VideoGalleryLayout;
@@ -368,8 +388,12 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
       onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,
       /* @conditional-compile-remove(unsupported-browser) */
       onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,
+      /* @conditional-compile-remove(pinned-participants) */
+      remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,
       /* @conditional-compile-remove(gallery-layouts) */
-      galleryOptions: props.galleryOptions
+      galleryOptions: props.galleryOptions,
+      /* @conditional-compile-remove(click-to-call) */
+      localVideoTile: props.localVideoTile
     }),
     [
       props.callControls,
@@ -386,7 +410,11 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
       /* @conditional-compile-remove(call-readiness) */
       props.onPermissionsTroubleshootingClick,
       /* @conditional-compile-remove(gallery-layouts) */
-      props.galleryOptions
+      props.galleryOptions,
+      /* @conditional-compile-remove(click-to-call) */
+      props.localVideoTile,
+      /* @conditional-compile-remove(pinned-participants) */
+      props.remoteVideoTileMenuOptions
     ]
   );
 
@@ -457,7 +485,6 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
     },
     [closeChat]
   );
-
   return (
     <div ref={containerRef} className={mergeStyles(containerDivStyles)}>
       <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>
@@ -499,8 +526,14 @@ export const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.El
         callControls={options?.callControls}
         joinInvitationURL={joinInvitationURL}
         fluentTheme={fluentTheme}
+        /* @conditional-compile-remove(pinned-participants) */
+        remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}
         /* @conditional-compile-remove(file-sharing) */
         fileSharing={options?.fileSharing}
+        /* @conditional-compile-remove(click-to-call) */
+        localVideoTile={options?.localVideoTile}
+        /* @conditional-compile-remove(gallery-layouts) */
+        galleryOptions={options?.galleryOptions}
       />
     </BaseProvider>
   );