Remove hard mute conditional compile - part 3

change-beta/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "Remove hard mute conditional compile - part 3",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "Remove hard mute conditional compile - part 3",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -3220,7 +3220,13 @@ export const DEFAULT_COMPOSITE_ICONS: {
     CaptionsSettingsIcon: React_2.JSX.Element;
     ChangeSpokenLanguageIcon: React_2.JSX.Element;
     ChangeCaptionLanguageIcon: React_2.JSX.Element;
-    ContextMenuCameraIcon: React_2.JSX.Element;
+    ContextMenuCameraIcon: React_2.JSX.Element; /**
+    * Icons that can be overridden in one of the composites exported by this library.
+    *
+    * See {@link ChatCompositeIcons}, {@link CallCompositeIcons} and {@link CallWithChatCompositeIcons} for more targeted types.
+    *
+    * @public
+    */
     ContextMenuMicIcon: React_2.JSX.Element;
     ContextMenuSpeakerIcon: React_2.JSX.Element;
     ContextMenuRemoveParticipant: React_2.JSX.Element;

packages/react-components/src/components/LocalVideoTile.tsx

@@ -71,7 +71,6 @@ export const _LocalVideoTile = React.memo(
     reactionResources?: ReactionResources;
     participantsCount?: number;
     isScreenSharingOn?: boolean;
-    /* @conditional-compile-remove(media-access) */
     mediaAccess?: MediaAccess;
   }) => {
     const {
@@ -104,7 +103,6 @@ export const _LocalVideoTile = React.memo(
       strings,
       reactionResources,
       isScreenSharingOn,
-      /* @conditional-compile-remove(media-access) */
       mediaAccess
     } = props;
 
@@ -118,7 +116,6 @@ export const _LocalVideoTile = React.memo(
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions?.scalingMode,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted: mediaAccess ? mediaAccess.isVideoPermitted : true
       }),
       [
@@ -128,7 +125,6 @@ export const _LocalVideoTile = React.memo(
         onCreateLocalStreamView,
         onDisposeLocalStreamView,
         renderElement,
-        /* @conditional-compile-remove(media-access) */
         mediaAccess
       ]
     );
@@ -278,7 +274,7 @@ export const _LocalVideoTile = React.memo(
             )
           }
           overlay={videoTileOverlay}
-          /* @conditional-compile-remove(media-access) */ mediaAccess={mediaAccess}
+          mediaAccess={mediaAccess}
         >
           {drawerMenuItemProps.length > 0 && (
             <Layer hostId={props.drawerMenuHostId}>

packages/react-components/src/components/NotificationStack.tsx

@@ -268,26 +268,18 @@ export interface NotificationStackStrings {
    * Message shown in notification when breakout room is closing soon
    */
   breakoutRoomClosingSoon?: NotificationStrings;
-
-  /* @conditional-compile-remove(media-access) */
   /**
    * Message shown in notification when capability turnVideoOn is present
    */
   capabilityTurnVideoOnPresent?: NotificationStrings;
-
-  /* @conditional-compile-remove(media-access) */
   /**
    * Message shown in notification when capability turnVideoOn is absent
    */
   capabilityTurnVideoOnAbsent?: NotificationStrings;
-
-  /* @conditional-compile-remove(media-access) */
   /**
    * Message shown in notification when capability unMuteMic is present
    */
   capabilityUnmuteMicPresent?: NotificationStrings;
-
-  /* @conditional-compile-remove(media-access) */
   /**
    * Message shown in notification when capability unMuteMic is absent
    */

packages/react-components/src/components/ParticipantItem.tsx

@@ -78,10 +78,8 @@ export interface ParticipantItemStrings {
   participantItemWithMoreOptionsAriaLabel?: string;
   /** String for the attendee role */
   attendeeRole: string;
-  /* @conditional-compile-remove(media-access) */
   /** Label for the disabled microphone icon in participant state stack  */
   micDisabledIconLabel: string;
-  /* @conditional-compile-remove(media-access) */
   /** Label for the disabled camera icon in participant state stack  */
   cameraDisabledIconLabel: string;
 }

packages/react-components/src/components/ParticipantList.tsx

@@ -151,29 +151,17 @@ const onRenderParticipantDefault = (
   const displayName = formatDisplayName(participant.displayName);
 
   const callingPalette = (theme as unknown as CallingTheme).callingPalette;
-
   const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);
+  const isScreenSharing = callingParticipant?.isScreenSharing;
+  const isMuted = callingParticipant?.isMuted;
+  const hasRaisedHand = callingParticipant?.raisedHand;
+  const isAudioPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true;
+  const isVideoPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true;
 
-  const showRenderIconTrampoline = (): boolean => {
-    /* @conditional-compile-remove(media-access) */
-    return !!(
-      callingParticipant?.isScreenSharing ||
-      callingParticipant?.isMuted ||
-      callingParticipant?.raisedHand ||
-      isPinned ||
-      !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) ||
-      !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true)
-    );
-
-    return !!(
-      callingParticipant?.isScreenSharing ||
-      callingParticipant?.isMuted ||
-      callingParticipant?.raisedHand ||
-      isPinned
-    );
-  };
+  const shouldRenderParticipantIcon =
+    isScreenSharing || isMuted || hasRaisedHand || isPinned || !isAudioPermitted || !isVideoPermitted;
 
-  const onRenderIcon = showRenderIconTrampoline()
+  const onRenderIcon = shouldRenderParticipantIcon
     ? () => (
         <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>
           {callingParticipant.raisedHand && (
@@ -206,29 +194,16 @@ const onRenderParticipantDefault = (
           )}
           {callingParticipant.spotlight && <Icon iconName="ParticipantItemSpotlighted" className={iconStyles} />}
           {isPinned && <Icon iconName="ParticipantItemPinned" className={iconStyles} />}
-          {
-            /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-            !callingParticipant.mediaAccess.isVideoPermitted ? (
-              <Icon
-                iconName="ControlButtonCameraProhibited"
-                className={iconStyles}
-                ariaLabel={strings.mutedIconLabel}
-              />
-            ) : undefined
-          }
-          {
-            /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-            !callingParticipant.mediaAccess?.isAudioPermitted ? (
-              <Icon iconName="ControlButtonMicProhibited" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
-            ) : undefined
-          }
-          {
-            /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess
-              ? callingParticipant.mediaAccess.isAudioPermitted
-              : true) && callingParticipant.isMuted ? (
-              <Icon iconName="ParticipantItemMicOff" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
-            ) : undefined
-          }
+          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? (
+            <Icon iconName="ControlButtonCameraProhibited" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
+          ) : undefined}
+          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess?.isAudioPermitted ? (
+            <Icon iconName="ControlButtonMicProhibited" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
+          ) : undefined}
+          {(callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) &&
+          callingParticipant.isMuted ? (
+            <Icon iconName="ParticipantItemMicOff" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
+          ) : undefined}
         </Stack>
       )
     : () => null;
@@ -254,10 +229,8 @@ const onRenderParticipantDefault = (
     displayName: displayName ?? '',
     connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',
     mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',
-    /* @conditional-compile-remove(media-access) */
     micDisabledState:
       (callingParticipant.mediaAccess?.isAudioPermitted === false ? strings?.micDisabledIconLabel : undefined) ?? '',
-    /* @conditional-compile-remove(media-access) */
     cameraDisabledState:
       (callingParticipant.mediaAccess?.isVideoPermitted === false ? strings?.cameraDisabledIconLabel : undefined) ?? '',
     sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',

packages/react-components/src/components/RemoteVideoTile.tsx

@@ -71,13 +71,9 @@ export const _RemoteVideoTile = React.memo(
     toggleAnnouncerString?: (announcerString: string) => void;
     reactionResources?: ReactionResources;
     onLongTouch?: (() => void) | undefined;
-    /* @conditional-compile-remove(media-access) */
     onForbidAudio?: (userIds: string[]) => Promise<void>;
-    /* @conditional-compile-remove(media-access) */
     onPermitAudio?: (userIds: string[]) => Promise<void>;
-    /* @conditional-compile-remove(media-access) */
     onForbidVideo?: (userIds: string[]) => Promise<void>;
-    /* @conditional-compile-remove(media-access) */
     onPermitVideo?: (userIds: string[]) => Promise<void>;
   }) => {
     const {
@@ -109,13 +105,9 @@ export const _RemoteVideoTile = React.memo(
       strings,
       reactionResources,
       streamId,
-      /* @conditional-compile-remove(media-access) */
       onForbidAudio,
-      /* @conditional-compile-remove(media-access) */
       onPermitAudio,
-      /* @conditional-compile-remove(media-access) */
       onForbidVideo,
-      /* @conditional-compile-remove(media-access) */
       onPermitVideo
     } = props;
 
@@ -131,7 +123,6 @@ export const _RemoteVideoTile = React.memo(
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions?.scalingMode,
         streamId,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true
       }),
       [
@@ -145,7 +136,6 @@ export const _RemoteVideoTile = React.memo(
         renderElement,
         userId,
         streamId,
-        /* @conditional-compile-remove(media-access) */
         remoteParticipant.mediaAccess
       ]
     );
@@ -168,10 +158,10 @@ export const _RemoteVideoTile = React.memo(
       onStopSpotlight,
       maxParticipantsToSpotlight,
       onMuteParticipant,
-      /* @conditional-compile-remove(media-access) */ onForbidAudio,
-      /* @conditional-compile-remove(media-access) */ onPermitAudio,
-      /* @conditional-compile-remove(media-access) */ onForbidVideo,
-      /* @conditional-compile-remove(media-access) */ onPermitVideo
+      onForbidAudio,
+      onPermitAudio,
+      onForbidVideo,
+      onPermitVideo
     });
 
     const videoTileContextualMenuProps = useMemo(() => {
@@ -277,7 +267,6 @@ export const _RemoteVideoTile = React.memo(
           }
           isSpotlighted={isSpotlighted}
           overlay={reactionOverlay}
-          /* @conditional-compile-remove(media-access) */
           mediaAccess={remoteParticipant.mediaAccess}
         />
         {drawerMenuItemProps.length > 0 && (

packages/react-components/src/components/VideoGallery.tsx

@@ -345,22 +345,18 @@ export interface VideoGalleryProps {
   togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
   /* @conditional-compile-remove(together-mode) */
   onDisposeTogetherModeStreamView?: () => Promise<void>;
-  /* @conditional-compile-remove(media-access) */
   /**
    * This callback is to forbid audio for remote participant(s)
    */
   onForbidAudio?: (userIds: string[]) => Promise<void>;
-  /* @conditional-compile-remove(media-access) */
   /**
    * This callback is to permit audio for remote participant(s)
    */
   onPermitAudio?: (userIds: string[]) => Promise<void>;
-  /* @conditional-compile-remove(media-access) */
   /**
    * This callback is to forbid video for remote participant(s)
    */
   onForbidVideo?: (userIds: string[]) => Promise<void>;
-  /* @conditional-compile-remove(media-access) */
   /**
    * This callback is to permit video for remote participant(s)
    */
@@ -466,13 +462,9 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     togetherModeSeatingCoordinates,
     /* @conditional-compile-remove(together-mode) */
     onDisposeTogetherModeStreamView,
-    /* @conditional-compile-remove(media-access) */
     onForbidAudio,
-    /* @conditional-compile-remove(media-access) */
     onPermitAudio,
-    /* @conditional-compile-remove(media-access) */
     onForbidVideo,
-    /* @conditional-compile-remove(media-access) */
     onPermitVideo
   } = props;
 
@@ -592,7 +584,6 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
           reactionResources={reactionResources}
           participantsCount={remoteParticipants.length + 1}
           isScreenSharingOn={localParticipant.isScreenSharingOn}
-          /* @conditional-compile-remove(media-access) */
           mediaAccess={localParticipant.mediaAccess}
         />
       </Stack>
@@ -724,13 +715,9 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
           maxParticipantsToSpotlight={maxParticipantsToSpotlight}
           reactionResources={reactionResources}
           onMuteParticipant={onMuteParticipant}
-          /* @conditional-compile-remove(media-access) */
           onForbidAudio={onForbidAudio}
-          /* @conditional-compile-remove(media-access) */
           onPermitAudio={onPermitAudio}
-          /* @conditional-compile-remove(media-access) */
           onForbidVideo={onForbidVideo}
-          /* @conditional-compile-remove(media-access) */
           onPermitVideo={onPermitVideo}
         />
       );
@@ -757,13 +744,9 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       maxParticipantsToSpotlight,
       reactionResources,
       onMuteParticipant,
-      /* @conditional-compile-remove(media-access) */
       onForbidAudio,
-      /* @conditional-compile-remove(media-access) */
       onPermitAudio,
-      /* @conditional-compile-remove(media-access) */
       onForbidVideo,
-      /* @conditional-compile-remove(media-access) */
       onPermitVideo,
       remoteVideoViewOptions
     ]

packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx

@@ -61,7 +61,6 @@ export const LocalScreenShare = React.memo(
           ) : undefined
         }
         onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}
-        /* @conditional-compile-remove(media-access) */
         mediaAccess={localParticipant.mediaAccess}
       />
     );