Add missing cc code for media-access and resolve new ts lint requirement for constant file name (#5542)

Author: edwardlee-msft

packages/calling-component-bindings/src/utils/videoGalleryUtils.ts

@@ -78,7 +78,9 @@ export const _videoGalleryRemoteParticipantsMemo: _VideoGalleryRemoteParticipant
             participant.contentSharingStream,
             remoteParticipantReaction,
             spotlight,
+            /* @conditional-compile-remove(media-access) */
             participant.mediaAccess,
+            /* @conditional-compile-remove(media-access) */
             participant.role,
             /* @conditional-compile-remove(remote-ufd) */
             Math.max(
@@ -183,6 +185,7 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
     raisedHand,
     reaction,
     spotlight,
+    /* @conditional-compile-remove(media-access) */
     mediaAccess,
     /* @conditional-compile-remove(media-access) */
     canAudioBeForbidden: role === 'Attendee',

packages/chat-stateful-client/src/ChatContext.ts

@@ -16,7 +16,7 @@ import { ChatMessageReadReceipt, ChatParticipant } from '@azure/communication-ch
 import { CommunicationIdentifierKind, UnknownIdentifierKind } from '@azure/communication-common';
 import { AzureLogger, createClientLogger, getLogLevel } from '@azure/logger';
 import { _safeJSONStringify, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
-import { Constants } from './Constants';
+import { Constants } from './constants';
 import { TypingIndicatorReceivedEvent } from '@azure/communication-chat';
 import { chatStatefulLogger } from './Logger';
 import type { CommunicationTokenCredential } from '@azure/communication-common';

packages/chat-stateful-client/src/StatefulChatClient.test.ts

@@ -18,7 +18,7 @@ import {
 import { ChatParticipant as SignalingChatParticipant } from '@azure/communication-signaling';
 import { _createStatefulChatClientWithDeps } from './StatefulChatClient';
 import { ChatClientState, ChatError } from './ChatClientState';
-import { Constants } from './Constants';
+import { Constants } from './constants';
 import {
   StateChangeListener,
   StatefulChatClientWithEventTrigger,

packages/chat-stateful-client/src/Constants.ts renamed to packages/chat-stateful-client/src/constants.ts

@@ -78,7 +78,9 @@ 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  */
+  /* @conditional-compile-remove(media-access) */
   micDisabledIconLabel: string;
   /** Label for the disabled camera icon in participant state stack  */
   cameraDisabledIconLabel: string;

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

@@ -254,8 +254,10 @@ 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/ParticipantList.tsx

@@ -65,8 +65,10 @@ export interface VideoTileStrings {
   moreOptionsParticipantHandRaisedAriaLabel: string;
   /** String for the announcement of whether the participant is speaking or not */
   moreOptionsParticipantIsSpeakingAriaLabel: string;
+  /* @conditional-compile-remove(media-access) */
   /** String for the announcement of whether the participant microphone disabled */
   moreOptionsParticipantMicDisabledAriaLabel: string;
+  /* @conditional-compile-remove(media-access) */
   /** String for the announcement of whether the participant camera disabled */
   moreOptionsParticipantCameraDisabledAriaLabel: string;
 }
@@ -244,7 +246,9 @@ const VideoTileMoreOptionsButton = (props: {
   participantIsSpeaking: boolean | undefined;
   participantIsMuted: boolean | undefined;
   canShowContextMenuButton: boolean;
+  /* @conditional-compile-remove(media-access) */
   isMicDisabled?: boolean;
+  /* @conditional-compile-remove(media-access) */
   isCameraDisabled?: boolean;
 }): JSX.Element => {
   const locale = useLocale().strings.videoTile;
@@ -258,7 +262,9 @@ const VideoTileMoreOptionsButton = (props: {
     participantIsSpeaking,
     participantState,
     participantIsMuted,
+    /* @conditional-compile-remove(media-access) */
     isMicDisabled,
+    /* @conditional-compile-remove(media-access) */
     isCameraDisabled
   } = props;
   const [moreButtonAiraDescription, setMoreButtonAriaDescription] = useState<string>('');
@@ -271,9 +277,11 @@ const VideoTileMoreOptionsButton = (props: {
         participantHandRaised,
         participantState,
         participantIsSpeaking,
+        locale,
+        /* @conditional-compile-remove(media-access) */
         isMicDisabled,
-        isCameraDisabled,
-        locale
+        /* @conditional-compile-remove(media-access) */
+        isCameraDisabled
       )
     );
   }, [
@@ -283,7 +291,9 @@ const VideoTileMoreOptionsButton = (props: {
     participantIsSpeaking,
     participantState,
     locale,
+    /* @conditional-compile-remove(media-access) */
     isMicDisabled,
+    /* @conditional-compile-remove(media-access) */
     isCameraDisabled
   ]);
 
@@ -461,7 +471,13 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
             mediaAccess
           )
         : undefined,
-    [canShowLabel, isMuted, mediaAccess, participantStateString, showMuteIndicator]
+    [
+      canShowLabel,
+      isMuted,
+      /* @conditional-compile-remove(media-access) */ mediaAccess,
+      participantStateString,
+      showMuteIndicator
+    ]
   );
   const canShowParticipantIcons = participantMediaAccessIcons || isSpotlighted || isPinned;
 
@@ -558,7 +574,9 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
                 participantState={participantStateString}
                 participantIsSpeaking={isSpeaking}
                 canShowContextMenuButton={canShowContextMenuButton}
+                /* @conditional-compile-remove(media-access) */
                 isMicDisabled={mediaAccess?.isAudioPermitted === false}
+                /* @conditional-compile-remove(media-access) */
                 isCameraDisabled={mediaAccess?.isVideoPermitted === false}
               />
             </Stack>

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

@@ -436,16 +436,20 @@ export const formatMoreButtonAriaDescription = (
   isHandRaised?: boolean,
   state?: string,
   isSpeaking?: boolean,
+  strings?: VideoTileStrings,
+  /* @conditional-compile-remove(media-access) */
   isMicDisabled?: boolean,
-  isCameraDisabled?: boolean,
-  strings?: VideoTileStrings
+  /* @conditional-compile-remove(media-access) */
+  isCameraDisabled?: boolean
 ): string => {
   const mutedState = isMuted
     ? strings?.moreOptionsParticipantMutedStateMutedAriaLabel
     : strings?.moreOptionsParticipantMutedStateUnmutedAriaLabel;
   const handRaisedState = isHandRaised ? strings?.moreOptionsParticipantHandRaisedAriaLabel : undefined;
   const isSpeakingState = isSpeaking ? strings?.moreOptionsParticipantIsSpeakingAriaLabel : undefined;
+  /* @conditional-compile-remove(media-access) */
   const micDisabledState = isMicDisabled ? strings?.moreOptionsParticipantMicDisabledAriaLabel : undefined;
+  /* @conditional-compile-remove(media-access) */
   const cameraDisabledState = isCameraDisabled ? strings?.moreOptionsParticipantCameraDisabledAriaLabel : undefined;
   const description = strings?.moreOptionsButtonAriaLabel
     ? _formatString(strings?.moreOptionsButtonAriaLabel, {
@@ -454,7 +458,9 @@ export const formatMoreButtonAriaDescription = (
         isHandRaised: handRaisedState ?? ' ',
         state: state ?? ' ',
         isSpeaking: isSpeakingState ?? ' ',
+        /* @conditional-compile-remove(media-access) */
         micDisabledState: micDisabledState ?? ' ',
+        /* @conditional-compile-remove(media-access) */
         cameraDisabledState: cameraDisabledState ?? ' '
       })
     : '';

packages/react-components/src/components/utils.ts

@@ -362,8 +362,8 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
   const canForbidOthersAudio = !!capabilities?.forbidOthersAudio?.isPresent;
   /* @conditional-compile-remove(media-access) */
   const canForbidOthersVideo = !!capabilities?.forbidOthersVideo?.isPresent;
-  /* @conditional-compile-remove(media-access) */
   const onToggleParticipantMicPeoplePaneProps = useMemo(() => {
+    /* @conditional-compile-remove(media-access) */
     return {
       onForbidAudio: canForbidOthersAudio ? onForbidAudio : undefined,
       onPermitAudio: canForbidOthersAudio ? onPermitAudio : undefined,
@@ -375,26 +375,27 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
       onPermitOthersVideo: canForbidOthersVideo ? muteAllHandlers.onPermitOthersVideo : undefined,
       meetingMediaAccess
     };
+    return {};
   }, [
-    canForbidOthersAudio,
-    onForbidAudio,
-    onPermitAudio,
-    muteAllHandlers.onForbidOthersAudio,
-    muteAllHandlers.onPermitOthersAudio,
-    muteAllHandlers.onForbidOthersVideo,
-    muteAllHandlers.onPermitOthersVideo,
-    canForbidOthersVideo,
-    onForbidVideo,
-    onPermitVideo,
-    meetingMediaAccess
+    /* @conditional-compile-remove(media-access) */ canForbidOthersAudio,
+    /* @conditional-compile-remove(media-access) */ onForbidAudio,
+    /* @conditional-compile-remove(media-access) */ onPermitAudio,
+    /* @conditional-compile-remove(media-access) */ muteAllHandlers.onForbidOthersAudio,
+    /* @conditional-compile-remove(media-access) */ muteAllHandlers.onPermitOthersAudio,
+    /* @conditional-compile-remove(media-access) */ muteAllHandlers.onForbidOthersVideo,
+    /* @conditional-compile-remove(media-access) */ muteAllHandlers.onPermitOthersVideo,
+    /* @conditional-compile-remove(media-access) */ canForbidOthersVideo,
+    /* @conditional-compile-remove(media-access) */ onForbidVideo,
+    /* @conditional-compile-remove(media-access) */ onPermitVideo,
+    /* @conditional-compile-remove(media-access) */ meetingMediaAccess
   ]);
 
   const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane({
     ...peoplePaneProps,
     ...spotlightPeoplePaneProps,
     ...onMuteParticipantPeoplePaneProps,
     ...pinPeoplePaneProps,
-    /* @conditional-compile-remove(media-access) */ ...onToggleParticipantMicPeoplePaneProps
+    ...onToggleParticipantMicPeoplePaneProps
   });
   const togglePeoplePane = useCallback(() => {
     if (isPeoplePaneOpen) {

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

@@ -318,9 +318,13 @@ export const usePeoplePane = (props: {
     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
   ]);
@@ -553,14 +557,22 @@ export const usePeoplePane = (props: {
       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,
@@ -668,25 +680,45 @@ export const usePeoplePane = (props: {
   }, [
     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,
@@ -699,9 +731,13 @@ export const usePeoplePane = (props: {
     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
   ]);