@azure/communication-react 1.23.0 → 1.24.0-alpha-202501282341

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js

@@ -11,7 +11,25 @@ import { Prompt } from '../Prompt';
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 export const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, setParticipantActioned, spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onStopAllSpotlight, maxParticipantsToSpotlight, onMuteParticipant, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, onMuteAllRemoteParticipants, onForbidAudio, onPermitAudio, onForbidOthersAudio, onPermitOthersAudio, onForbidVideo, onPermitVideo, onForbidOthersVideo, onPermitOthersVideo, meetingMediaAccess, sidePaneDismissButtonRef, chatButtonPresent } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, setParticipantActioned, spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onStopAllSpotlight, maxParticipantsToSpotlight, onMuteParticipant, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, onMuteAllRemoteParticipants, 
+    /* @conditional-compile-remove(media-access) */
+    onForbidAudio, 
+    /* @conditional-compile-remove(media-access) */
+    onPermitAudio, 
+    /* @conditional-compile-remove(media-access) */
+    onForbidOthersAudio, 
+    /* @conditional-compile-remove(media-access) */
+    onPermitOthersAudio, 
+    /* @conditional-compile-remove(media-access) */
+    onForbidVideo, 
+    /* @conditional-compile-remove(media-access) */
+    onPermitVideo, 
+    /* @conditional-compile-remove(media-access) */
+    onForbidOthersVideo, 
+    /* @conditional-compile-remove(media-access) */
+    onPermitOthersVideo, 
+    /* @conditional-compile-remove(media-access) */
+    meetingMediaAccess, sidePaneDismissButtonRef, chatButtonPresent } = props;
     const closePane = useCallback(() => {
         var _a;
         updateSidePaneRenderer(undefined);
@@ -25,27 +43,40 @@ export const usePeoplePane = (props) => {
         heading: localeStrings.muteAllDialogTitle,
         text: localeStrings.muteAllDialogContent,
         cancelButtonLabel: localeStrings.muteAllCancelButtonLabel
-    }), [localeStrings.muteAllConfirmButtonLabel, localeStrings.muteAllDialogTitle, localeStrings.muteAllDialogContent, localeStrings.muteAllCancelButtonLabel]);
+    }), [
+        localeStrings.muteAllConfirmButtonLabel,
+        localeStrings.muteAllDialogTitle,
+        localeStrings.muteAllDialogContent,
+        localeStrings.muteAllCancelButtonLabel
+    ]);
     const onMuteAllPromptConfirm = useCallback(() => {
         onMuteAllRemoteParticipants && onMuteAllRemoteParticipants();
         setShowMuteAllPrompt(false);
     }, [onMuteAllRemoteParticipants, setShowMuteAllPrompt]);
+    /* @conditional-compile-remove(media-access) */
     const [showForbidOthersAudioPrompt, setShowForbidOthersAudioPrompt] = useState(false);
+    /* @conditional-compile-remove(media-access) */
     const [showPermitOthersAudioPrompt, setShowPermitOthersAudioPrompt] = useState(false);
+    /* @conditional-compile-remove(media-access) */
     const [showForbidOthersVideoPrompt, setShowForbidOthersVideoPrompt] = useState(false);
+    /* @conditional-compile-remove(media-access) */
     const [showPermitOthersVideoPrompt, setShowPermitOthersVideoPrompt] = useState(false);
+    /* @conditional-compile-remove(media-access) */
     const onForbidAllAttendeesPromptConfirm = useCallback(() => {
         onForbidOthersAudio && onForbidOthersAudio();
         setShowForbidOthersAudioPrompt(false);
     }, [onForbidOthersAudio, setShowForbidOthersAudioPrompt]);
+    /* @conditional-compile-remove(media-access) */
     const onPermitAllAttendeesPromptConfirm = useCallback(() => {
         onPermitOthersAudio && onPermitOthersAudio();
         setShowPermitOthersAudioPrompt(false);
     }, [onPermitOthersAudio, setShowPermitOthersAudioPrompt]);
+    /* @conditional-compile-remove(media-access) */
     const onForbidOthersVideoPromptConfirm = useCallback(() => {
         onForbidOthersVideo && onForbidOthersVideo();
         setShowForbidOthersVideoPrompt(false);
     }, [onForbidOthersVideo, setShowForbidOthersVideoPrompt]);
+    /* @conditional-compile-remove(media-access) */
     const onPermitOthersVideoPromptConfirm = useCallback(() => {
         onPermitOthersVideo && onPermitOthersVideo();
         setShowPermitOthersVideoPrompt(false);
@@ -68,11 +99,7 @@ export const usePeoplePane = (props) => {
                 text: localeStrings.muteAllMenuLabel,
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 onClick: () => {
                     setShowMuteAllPrompt(true);
@@ -81,7 +108,9 @@ export const usePeoplePane = (props) => {
                 disabled: isAllMuted
             });
         }
+        /* @conditional-compile-remove(media-access) */
         let hasAttendee = false;
+        /* @conditional-compile-remove(media-access) */
         if (remoteParticipants) {
             for (const participant of Object.values(remoteParticipants)) {
                 if (participant.role && participant.role === 'Attendee') {
@@ -90,100 +119,91 @@ export const usePeoplePane = (props) => {
                 }
             }
         }
+        /* @conditional-compile-remove(media-access) */
         const isMeetingAudioPermitted = meetingMediaAccess ? meetingMediaAccess.isAudioPermitted : true;
+        /* @conditional-compile-remove(media-access) */
         const isMeetingVideoPermitted = meetingMediaAccess ? meetingMediaAccess.isVideoPermitted : true;
+        /* @conditional-compile-remove(media-access) */
         if (onForbidOthersAudio && remoteParticipants) {
-            hasAttendee && isMeetingAudioPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-forbid-all-attendees-audio',
-                key: 'forbidOthersAudio',
-                text: localeStrings.forbidOthersAudioMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonMicProhibited',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowForbidOthersAudioPrompt(true);
-                },
-                ariaLabel: localeStrings.forbidOthersAudioMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                isMeetingAudioPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-forbid-all-attendees-audio',
+                    key: 'forbidOthersAudio',
+                    text: localeStrings.forbidOthersAudioMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonMicProhibited',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowForbidOthersAudioPrompt(true);
+                    },
+                    ariaLabel: localeStrings.forbidOthersAudioMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
+        /* @conditional-compile-remove(media-access) */
         if (onPermitOthersAudio && remoteParticipants) {
-            hasAttendee && !isMeetingAudioPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-permit-all-attendees-audio',
-                key: 'permitOthersAudio',
-                text: localeStrings.permitOthersAudioMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonMicOn',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowPermitOthersAudioPrompt(true);
-                },
-                ariaLabel: localeStrings.permitOthersAudioMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                !isMeetingAudioPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-permit-all-attendees-audio',
+                    key: 'permitOthersAudio',
+                    text: localeStrings.permitOthersAudioMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonMicOn',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowPermitOthersAudioPrompt(true);
+                    },
+                    ariaLabel: localeStrings.permitOthersAudioMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
+        /* @conditional-compile-remove(media-access) */
         if (onForbidOthersVideo && remoteParticipants) {
-            hasAttendee && isMeetingVideoPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-forbid-all-attendees-video',
-                key: 'forbidOthersVideo',
-                text: localeStrings.forbidOthersVideoMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonCameraProhibitedSmall',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowForbidOthersVideoPrompt(true);
-                },
-                ariaLabel: localeStrings.forbidOthersVideoMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                isMeetingVideoPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-forbid-all-attendees-video',
+                    key: 'forbidOthersVideo',
+                    text: localeStrings.forbidOthersVideoMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonCameraProhibitedSmall',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowForbidOthersVideoPrompt(true);
+                    },
+                    ariaLabel: localeStrings.forbidOthersVideoMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
+        /* @conditional-compile-remove(media-access) */
         if (onPermitOthersVideo && remoteParticipants) {
-            hasAttendee && !isMeetingVideoPermitted && menuItems.push({
-                ['data-ui-id']: 'people-pane-permit-all-attendees-video',
-                key: 'permitOthersVideo',
-                text: localeStrings.permitOthersVideoMenuLabel,
-                iconProps: {
-                    iconName: 'ControlButtonCameraOn',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
-                onClick: () => {
-                    setShowPermitOthersVideoPrompt(true);
-                },
-                ariaLabel: localeStrings.permitOthersVideoMenuLabel,
-                disabled: !hasAttendee
-            });
+            hasAttendee &&
+                !isMeetingVideoPermitted &&
+                menuItems.push({
+                    ['data-ui-id']: 'people-pane-permit-all-attendees-video',
+                    key: 'permitOthersVideo',
+                    text: localeStrings.permitOthersVideoMenuLabel,
+                    iconProps: {
+                        iconName: 'ControlButtonCameraOn',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => {
+                        setShowPermitOthersVideoPrompt(true);
+                    },
+                    ariaLabel: localeStrings.permitOthersVideoMenuLabel,
+                    disabled: !hasAttendee
+                });
         }
         if (onStopAllSpotlight && spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0) {
             menuItems.push({
                 key: 'stopAllSpotlightKey',
                 text: localeStrings.stopAllSpotlightMenuLabel,
-                iconProps: {
-                    iconName: 'StopAllSpotlightMenuButton',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
-                },
+                iconProps: { iconName: 'StopAllSpotlightMenuButton', styles: { root: { lineHeight: 0 } } },
                 onClick: () => {
                     onStopAllSpotlight();
                 },
@@ -193,8 +213,41 @@ export const usePeoplePane = (props) => {
         return {
             items: menuItems
         };
-    }, [onMuteAllRemoteParticipants, remoteParticipants, meetingMediaAccess, onForbidOthersAudio, onPermitOthersAudio, onForbidOthersVideo, onPermitOthersVideo, onStopAllSpotlight, spotlightedParticipantUserIds, localeStrings.muteAllMenuLabel, localeStrings.forbidOthersAudioMenuLabel, localeStrings.permitOthersAudioMenuLabel, localeStrings.forbidOthersVideoMenuLabel, localeStrings.permitOthersVideoMenuLabel, localeStrings.stopAllSpotlightMenuLabel]);
-    const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, paneOpenerButton: peopleButtonRef, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false, dismissButtonComponentRef: sidePaneDismissButtonRef, chatButtonPresent: chatButtonPresent }), [closePane, peopleButtonRef, localeStrings.peoplePaneTitle, localeStrings.dismissSidePaneButtonLabel, mobileView, sidePaneDismissButtonRef, chatButtonPresent]);
+    }, [
+        onMuteAllRemoteParticipants,
+        remoteParticipants,
+        /* @conditional-compile-remove(media-access) */
+        meetingMediaAccess,
+        /* @conditional-compile-remove(media-access) */
+        onForbidOthersAudio,
+        /* @conditional-compile-remove(media-access) */
+        onPermitOthersAudio,
+        /* @conditional-compile-remove(media-access) */
+        onForbidOthersVideo,
+        /* @conditional-compile-remove(media-access) */
+        onPermitOthersVideo,
+        onStopAllSpotlight,
+        spotlightedParticipantUserIds,
+        localeStrings.muteAllMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersAudioMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersAudioMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersVideoMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersVideoMenuLabel,
+        localeStrings.stopAllSpotlightMenuLabel
+    ]);
+    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, paneOpenerButton: peopleButtonRef, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false, dismissButtonComponentRef: sidePaneDismissButtonRef, chatButtonPresent: chatButtonPresent })), [
+        closePane,
+        peopleButtonRef,
+        localeStrings.peoplePaneTitle,
+        localeStrings.dismissSidePaneButtonLabel,
+        mobileView,
+        sidePaneDismissButtonRef,
+        chatButtonPresent
+    ]);
     const onFetchParticipantMenuItemsForCallComposite = useCallback((participantId, myUserId, defaultMenuItems) => {
         var _a, _b;
         let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participantId);
@@ -210,11 +263,7 @@ export const usePeoplePane = (props) => {
                 text: 'Mute',
                 iconProps: {
                     iconName: 'ContextualMenuMicMutedIcon',
-                    styles: {
-                        root: {
-                            lineHeight: 0
-                        }
-                    }
+                    styles: { root: { lineHeight: 0 } }
                 },
                 onClick: () => {
                     onMuteParticipant(participantId);
@@ -224,19 +273,19 @@ export const usePeoplePane = (props) => {
                 disabled: isMuted
             });
         }
+        /* @conditional-compile-remove(media-access) */
         const remoteParticipant = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants[participantId];
-        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) && !remoteParticipant.mediaAccess.isAudioPermitted && (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' && onPermitAudio) {
+        /* @conditional-compile-remove(media-access) */
+        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) &&
+            !remoteParticipant.mediaAccess.isAudioPermitted &&
+            (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' &&
+            onPermitAudio) {
             _defaultMenuItems.push({
                 key: 'permit-audio',
                 text: localeStrings.permitAudioMenuLabel,
                 iconProps: {
                     iconName: 'ControlButtonMicOn',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onPermitAudio([participantId]);
@@ -245,18 +294,14 @@ export const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.permitAudioMenuLabel
             });
         }
+        /* @conditional-compile-remove(media-access) */
         if (((_a = remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) === null || _a === void 0 ? void 0 : _a.isAudioPermitted) && (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' && onForbidAudio) {
             _defaultMenuItems.push({
                 key: 'forbid-audio',
                 text: localeStrings.forbidAudioMenuLabel,
                 iconProps: {
                     iconName: 'ControlButtonMicProhibited',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onForbidAudio([participantId]);
@@ -265,18 +310,17 @@ export const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.forbidAudioMenuLabel
             });
         }
-        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) && !remoteParticipant.mediaAccess.isVideoPermitted && (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' && onPermitVideo) {
+        /* @conditional-compile-remove(media-access) */
+        if ((remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) &&
+            !remoteParticipant.mediaAccess.isVideoPermitted &&
+            (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' &&
+            onPermitVideo) {
             _defaultMenuItems.push({
                 key: 'permit-video',
                 text: localeStrings.permitVideoMenuLabel,
                 iconProps: {
                     iconName: 'ControlButtonCameraOn',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onPermitVideo([participantId]);
@@ -285,18 +329,14 @@ export const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.permitVideoMenuLabel
             });
         }
+        /* @conditional-compile-remove(media-access) */
         if (((_b = remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.mediaAccess) === null || _b === void 0 ? void 0 : _b.isVideoPermitted) && (remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.role) === 'Attendee' && onForbidVideo) {
             _defaultMenuItems.push({
                 key: 'forbid-video',
                 text: localeStrings.forbidVideoMenuLabel,
                 iconProps: {
                     iconName: 'ControlButtonCameraProhibitedSmall',
-                    styles: {
-                        root: {
-                            lineHeight: '1rem',
-                            textAlign: 'center'
-                        }
-                    }
+                    styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                 },
                 onClick: () => {
                     onForbidVideo([participantId]);
@@ -306,10 +346,16 @@ export const usePeoplePane = (props) => {
             });
         }
         if (isSpotlighted) {
-            const stopSpotlightMenuText = isMe ? localeStrings.stopSpotlightOnSelfMenuLabel : localeStrings.stopSpotlightMenuLabel;
-            const onStopSpotlight = isMe ? onStopLocalSpotlight : onStopRemoteSpotlight ? () => {
-                onStopRemoteSpotlight([participantId]);
-            } : undefined;
+            const stopSpotlightMenuText = isMe
+                ? localeStrings.stopSpotlightOnSelfMenuLabel
+                : localeStrings.stopSpotlightMenuLabel;
+            const onStopSpotlight = isMe
+                ? onStopLocalSpotlight
+                : onStopRemoteSpotlight
+                    ? () => {
+                        onStopRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
             if (onStopSpotlight && stopSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'stop-spotlight',
@@ -317,22 +363,28 @@ export const usePeoplePane = (props) => {
                     onClick: onStopSpotlight,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
-                        styles: {
-                            root: {
-                                lineHeight: 0
-                            }
-                        }
+                        styles: { root: { lineHeight: 0 } }
                     },
                     ariaLabel: stopSpotlightMenuText
                 });
             }
         }
         else {
-            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? localeStrings.addSpotlightMenuLabel : localeStrings.startSpotlightMenuLabel;
-            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false : false;
-            const onStartSpotlight = isMe ? onStartLocalSpotlight : onStartRemoteSpotlight ? () => {
-                onStartRemoteSpotlight([participantId]);
-            } : undefined;
+            const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
+                ? localeStrings.addSpotlightMenuLabel
+                : localeStrings.startSpotlightMenuLabel;
+            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
+                ? spotlightedParticipantUserIds
+                    ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
+                    : false
+                : false;
+            const onStartSpotlight = isMe
+                ? onStartLocalSpotlight
+                : onStartRemoteSpotlight
+                    ? () => {
+                        onStartRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
             if (onStartSpotlight && startSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'start-spotlight',
@@ -340,11 +392,7 @@ export const usePeoplePane = (props) => {
                     onClick: onStartSpotlight,
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
-                        styles: {
-                            root: {
-                                lineHeight: 0
-                            }
-                        }
+                        styles: { root: { lineHeight: 0 } }
                     },
                     ariaLabel: startSpotlightMenuText,
                     disabled: maxSpotlightedParticipantsReached,
@@ -359,12 +407,7 @@ export const usePeoplePane = (props) => {
                     text: localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel,
                     iconProps: {
                         iconName: 'UnpinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUnpinParticipant === null || onUnpinParticipant === void 0 ? void 0 : onUnpinParticipant(participantId);
@@ -376,15 +419,12 @@ export const usePeoplePane = (props) => {
             if (!isPinned && onPinParticipant && (localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.pinParticipantMenuLabel)) {
                 _defaultMenuItems.push({
                     key: 'pin',
-                    text: disablePinMenuItem ? localeStrings.pinParticipantLimitReachedMenuLabel : localeStrings.pinParticipantMenuLabel,
+                    text: disablePinMenuItem
+                        ? localeStrings.pinParticipantLimitReachedMenuLabel
+                        : localeStrings.pinParticipantMenuLabel,
                     iconProps: {
                         iconName: 'PinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onPinParticipant(participantId);
@@ -398,44 +438,127 @@ export const usePeoplePane = (props) => {
         if (defaultMenuItems) {
             _defaultMenuItems.push(...defaultMenuItems);
         }
-        return onFetchParticipantMenuItems ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems) : _defaultMenuItems;
-    }, [pinnedParticipants, spotlightedParticipantUserIds, onMuteParticipant, remoteParticipants, onPermitAudio, onForbidAudio, onPermitVideo, onForbidVideo, onFetchParticipantMenuItems, localeStrings.permitAudioMenuLabel, localeStrings.forbidAudioMenuLabel, localeStrings.permitVideoMenuLabel, localeStrings.forbidVideoMenuLabel, localeStrings.stopSpotlightOnSelfMenuLabel, localeStrings.stopSpotlightMenuLabel, localeStrings.addSpotlightMenuLabel, localeStrings.startSpotlightMenuLabel, localeStrings.spotlightLimitReachedMenuTitle, localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel, localeStrings.pinParticipantMenuLabel, localeStrings.unpinParticipantMenuItemAriaLabel, localeStrings.pinParticipantLimitReachedMenuLabel, localeStrings.pinParticipantMenuItemAriaLabel, onStopLocalSpotlight, onStopRemoteSpotlight, maxParticipantsToSpotlight, onStartLocalSpotlight, onStartRemoteSpotlight, onUnpinParticipant, onPinParticipant, disablePinMenuItem]);
+        return onFetchParticipantMenuItems
+            ? onFetchParticipantMenuItems(participantId, myUserId, _defaultMenuItems)
+            : _defaultMenuItems;
+    }, [
+        pinnedParticipants,
+        spotlightedParticipantUserIds,
+        onMuteParticipant,
+        remoteParticipants,
+        /* @conditional-compile-remove(media-access) */
+        onPermitAudio,
+        /* @conditional-compile-remove(media-access) */
+        onForbidAudio,
+        /* @conditional-compile-remove(media-access) */
+        onPermitVideo,
+        /* @conditional-compile-remove(media-access) */
+        onForbidVideo,
+        onFetchParticipantMenuItems,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitAudioMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidAudioMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitVideoMenuLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidVideoMenuLabel,
+        localeStrings.stopSpotlightOnSelfMenuLabel,
+        localeStrings.stopSpotlightMenuLabel,
+        localeStrings.addSpotlightMenuLabel,
+        localeStrings.startSpotlightMenuLabel,
+        localeStrings.spotlightLimitReachedMenuTitle,
+        localeStrings === null || localeStrings === void 0 ? void 0 : localeStrings.unpinParticipantMenuLabel,
+        localeStrings.pinParticipantMenuLabel,
+        localeStrings.unpinParticipantMenuItemAriaLabel,
+        localeStrings.pinParticipantLimitReachedMenuLabel,
+        localeStrings.pinParticipantMenuItemAriaLabel,
+        onStopLocalSpotlight,
+        onStopRemoteSpotlight,
+        maxParticipantsToSpotlight,
+        onStartLocalSpotlight,
+        onStartRemoteSpotlight,
+        onUnpinParticipant,
+        onPinParticipant,
+        disablePinMenuItem
+    ]);
     const role = useSelector(getRole);
     const alternateCallerId = useSelector(getAlternateCallerId);
     const onRenderContent = useCallback(() => {
-        return React.createElement(React.Fragment, null,
-            React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
-            React.createElement(Prompt, { heading: localeStrings.forbidOthersAudioDialogTitle, text: localeStrings.forbidOthersAudioDialogContent, confirmButtonLabel: localeStrings.forbidOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersAudioCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onForbidAllAttendeesPromptConfirm(), isOpen: showForbidOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
-            React.createElement(Prompt, { heading: localeStrings.permitOthersAudioDialogTitle, text: localeStrings.permitOthersAudioDialogContent, confirmButtonLabel: localeStrings.permitOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersAudioCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onPermitAllAttendeesPromptConfirm(), isOpen: showPermitOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
-            React.createElement(Prompt, { heading: localeStrings.forbidOthersVideoDialogTitle, text: localeStrings.forbidOthersVideoDialogContent, confirmButtonLabel: localeStrings.forbidOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersVideoCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onForbidOthersVideoPromptConfirm(), isOpen: showForbidOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
-            React.createElement(Prompt, { heading: localeStrings.permitOthersVideoDialogTitle, text: localeStrings.permitOthersVideoDialogContent, confirmButtonLabel: localeStrings.permitOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersVideoCancelButtonLabel, styles: {
-                    main: {
-                        minWidth: '22.5rem',
-                        padding: '1.5rem'
-                    }
-                }, onConfirm: () => onPermitOthersVideoPromptConfirm(), isOpen: showPermitOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
-            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants, role: role, alternateCallerId: alternateCallerId }));
-    }, [muteAllPromptLabels, showMuteAllPrompt, localeStrings.forbidOthersAudioDialogTitle, localeStrings.forbidOthersAudioDialogContent, localeStrings.forbidOthersAudioConfirmButtonLabel, localeStrings.forbidOthersAudioCancelButtonLabel, localeStrings.permitOthersAudioDialogTitle, localeStrings.permitOthersAudioDialogContent, localeStrings.permitOthersAudioConfirmButtonLabel, localeStrings.permitOthersAudioCancelButtonLabel, localeStrings.forbidOthersVideoDialogTitle, localeStrings.forbidOthersVideoDialogContent, localeStrings.forbidOthersVideoConfirmButtonLabel, localeStrings.forbidOthersVideoCancelButtonLabel, localeStrings.permitOthersVideoDialogTitle, localeStrings.permitOthersVideoDialogContent, localeStrings.permitOthersVideoConfirmButtonLabel, localeStrings.permitOthersVideoCancelButtonLabel, showForbidOthersAudioPrompt, showPermitOthersAudioPrompt, showForbidOthersVideoPrompt, showPermitOthersVideoPrompt, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems, mobileView, setParticipantActioned, sidePaneHeaderMenuProps, pinnedParticipants, role, alternateCallerId, onMuteAllPromptConfirm, onForbidAllAttendeesPromptConfirm, onPermitAllAttendeesPromptConfirm, onForbidOthersVideoPromptConfirm, onPermitOthersVideoPromptConfirm]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
+            /* @conditional-compile-remove(media-access) */
+            React.createElement(Prompt, { heading: localeStrings.forbidOthersAudioDialogTitle, text: localeStrings.forbidOthersAudioDialogContent, confirmButtonLabel: localeStrings.forbidOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersAudioCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onForbidAllAttendeesPromptConfirm(), isOpen: showForbidOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
+            /* @conditional-compile-remove(media-access) */
+            React.createElement(Prompt, { heading: localeStrings.permitOthersAudioDialogTitle, text: localeStrings.permitOthersAudioDialogContent, confirmButtonLabel: localeStrings.permitOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersAudioCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onPermitAllAttendeesPromptConfirm(), isOpen: showPermitOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
+            /* @conditional-compile-remove(media-access) */
+            React.createElement(Prompt, { heading: localeStrings.forbidOthersVideoDialogTitle, text: localeStrings.forbidOthersVideoDialogContent, confirmButtonLabel: localeStrings.forbidOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersVideoCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onForbidOthersVideoPromptConfirm(), isOpen: showForbidOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
+            /* @conditional-compile-remove(media-access) */
+            React.createElement(Prompt, { heading: localeStrings.permitOthersVideoDialogTitle, text: localeStrings.permitOthersVideoDialogContent, confirmButtonLabel: localeStrings.permitOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersVideoCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onPermitOthersVideoPromptConfirm(), isOpen: showPermitOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
+            React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants, role: role, alternateCallerId: alternateCallerId })));
+    }, [
+        muteAllPromptLabels,
+        showMuteAllPrompt,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersAudioDialogTitle,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersAudioDialogContent,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersAudioConfirmButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersAudioCancelButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersAudioDialogTitle,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersAudioDialogContent,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersAudioConfirmButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersAudioCancelButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersVideoDialogTitle,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersVideoDialogContent,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersVideoConfirmButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.forbidOthersVideoCancelButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersVideoDialogTitle,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersVideoDialogContent,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersVideoConfirmButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        localeStrings.permitOthersVideoCancelButtonLabel,
+        /* @conditional-compile-remove(media-access) */
+        showForbidOthersAudioPrompt,
+        /* @conditional-compile-remove(media-access) */
+        showPermitOthersAudioPrompt,
+        /* @conditional-compile-remove(media-access) */
+        showForbidOthersVideoPrompt,
+        /* @conditional-compile-remove(media-access) */
+        showPermitOthersVideoPrompt,
+        inviteLink,
+        onFetchAvatarPersonaData,
+        onFetchParticipantMenuItemsForCallComposite,
+        setDrawerMenuItems,
+        mobileView,
+        setParticipantActioned,
+        sidePaneHeaderMenuProps,
+        pinnedParticipants,
+        role,
+        alternateCallerId,
+        onMuteAllPromptConfirm,
+        /* @conditional-compile-remove(media-access) */
+        onForbidAllAttendeesPromptConfirm,
+        /* @conditional-compile-remove(media-access) */
+        onPermitAllAttendeesPromptConfirm,
+        /* @conditional-compile-remove(media-access) */
+        onForbidOthersVideoPromptConfirm,
+        /* @conditional-compile-remove(media-access) */
+        onPermitOthersVideoPromptConfirm
+    ]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,
@@ -451,10 +574,6 @@ export const usePeoplePane = (props) => {
             openPane();
         }
     }, [isOpen, openPane]);
-    return {
-        openPeoplePane: openPane,
-        closePeoplePane: closePane,
-        isPeoplePaneOpen: isOpen
-    };
+    return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };
 };
 //# sourceMappingURL=usePeoplePane.js.map