Retain pinned participants after holding call (#4319)

* Retain pinned participants after holding call in CallComposite and CallWithChatComposite

* Change files

* Duplicate change files for beta release

* remove unused import

* fix cc

Author: mgamis-msft

change-beta/@azure-communication-react-cf18a9f7-2e70-480c-98dc-0c0987c79dcc.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Pinned participants",
+  "comment": "Retain pinned participants after holding call in CallComposite and CallWithChatComposite",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-cf18a9f7-2e70-480c-98dc-0c0987c79dcc.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Pinned participants",
+  "comment": "Retain pinned participants after holding call in CallComposite and CallWithChatComposite",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -430,6 +430,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
   const alternateCallerId = adapter.getState().alternateCallerId;
   const leavePageStyle = useMemo(() => leavingPageStyle(palette), [palette]);
   let pageElement: JSX.Element | undefined;
+  const [pinnedParticipants, setPinnedParticipants] = useState<string[]>([]);
   switch (page) {
     case 'configuration':
       pageElement = (
@@ -590,6 +591,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}
           /* @conditional-compile-remove(capabilities) */
           capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
+          pinnedParticipants={pinnedParticipants}
+          setPinnedParticipants={setPinnedParticipants}
         />
       );
       break;

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

@@ -61,6 +61,8 @@ export interface MediaGalleryProps {
   localVideoTileOptions?: boolean | LocalVideoTileOptions;
   userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';
   userSetGalleryLayout: VideoGalleryLayout;
+  pinnedParticipants?: string[];
+  setPinnedParticipants?: (pinnedParticipants: string[]) => void;
   /* @conditional-compile-remove(spotlight) */
   setIsPromptOpen: (isOpen: boolean) => void;
   /* @conditional-compile-remove(spotlight) */
@@ -73,8 +75,13 @@ export interface MediaGalleryProps {
  * @private
  */
 export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
-  /* @conditional-compile-remove(spotlight) */
-  const { setIsPromptOpen, setPromptProps, hideSpotlightButtons } = props;
+  const {
+    pinnedParticipants = [],
+    setPinnedParticipants,
+    /* @conditional-compile-remove(spotlight) */ setIsPromptOpen,
+    /* @conditional-compile-remove(spotlight) */ setPromptProps,
+    /* @conditional-compile-remove(spotlight) */ hideSpotlightButtons
+  } = props;
 
   const videoGalleryProps = usePropsFor(VideoGallery);
   const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
@@ -159,6 +166,24 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
     setPromptProps
   );
 
+  const onPinParticipant = useMemo(() => {
+    return setPinnedParticipants
+      ? (userId: string) => {
+          if (!pinnedParticipants.includes(userId)) {
+            setPinnedParticipants(pinnedParticipants.concat(userId));
+          }
+        }
+      : undefined;
+  }, [setPinnedParticipants, pinnedParticipants]);
+
+  const onUnpinParticipant = useMemo(() => {
+    return setPinnedParticipants
+      ? (userId: string) => {
+          setPinnedParticipants(pinnedParticipants.filter((participantId) => participantId !== userId));
+        }
+      : undefined;
+  }, [setPinnedParticipants, pinnedParticipants]);
+
   const VideoGalleryMemoized = useMemo(() => {
     const layoutBasedOnUserSelection = (): VideoGalleryLayout => {
       return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
@@ -184,6 +209,9 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
             ? '9:16'
             : '16:9'
         }
+        pinnedParticipants={pinnedParticipants}
+        onPinParticipant={onPinParticipant}
+        onUnpinParticipant={onUnpinParticipant}
         /* @conditional-compile-remove(reaction) */
         reactionResources={reactionResources}
         /* @conditional-compile-remove(spotlight) */
@@ -209,6 +237,9 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
     containerAspectRatio,
 
     props.userSetGalleryLayout,
+    pinnedParticipants,
+    onPinParticipant,
+    onUnpinParticipant,
     layoutBasedOnTilePosition,
     /* @conditional-compile-remove(reaction) */
     reactionResources,

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

@@ -55,6 +55,8 @@ export interface CallPageProps {
   userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';
   onSetUserSetOverflowGalleryPosition?: (position: 'Responsive' | 'horizontalTop') => void;
   onCloseChatPane?: () => void;
+  pinnedParticipants?: string[];
+  setPinnedParticipants?: (pinnedParticipants: string[]) => void;
 }
 
 /**
@@ -71,7 +73,9 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
     onUserSetGalleryLayoutChange,
     userSetOverflowGalleryPosition = 'Responsive',
     onSetUserSetOverflowGalleryPosition,
-    onCloseChatPane
+    onCloseChatPane,
+    pinnedParticipants,
+    setPinnedParticipants
   } = props;
 
   // To use useProps to get these states, we need to create another file wrapping Call,
@@ -129,6 +133,8 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
           localVideoTileOptions={options?.localVideoTile}
           userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}
           userSetGalleryLayout={galleryLayout}
+          pinnedParticipants={pinnedParticipants}
+          setPinnedParticipants={setPinnedParticipants}
           /* @conditional-compile-remove(spotlight) */
           setIsPromptOpen={setIsPromptOpen}
           /* @conditional-compile-remove(spotlight) */