From d9f22aaab01ef7cccd5ae88c1e301a1703665858 Mon Sep 17 00:00:00 2001 From: fuyan Date: Thu, 30 Jan 2025 22:47:22 -0800 Subject: [PATCH] Remove hard mute conditional compile - part 3 (#5594) * Remove hard mute conditional compile - part 3 * Change files * update * update * address comment --- ...-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json | 9 +++ ...-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json | 9 +++ .../review/beta/communication-react.api.md | 8 ++- .../src/components/LocalVideoTile.tsx | 6 +- .../src/components/NotificationStack.tsx | 8 --- .../src/components/ParticipantItem.tsx | 2 - .../src/components/ParticipantList.tsx | 63 ++++++------------- .../src/components/RemoteVideoTile.tsx | 19 ++---- .../src/components/VideoGallery.tsx | 17 ----- .../VideoGallery/LocalScreenShare.tsx | 1 - .../useVideoStreamLifecycleMaintainer.ts | 35 ++--------- .../useVideoTileContextualMenuProps.ts | 25 +------- .../src/components/VideoTile.tsx | 49 +++------------ .../react-components/src/components/utils.ts | 10 --- .../react-components/src/theming/icons.tsx | 6 -- .../src/types/ParticipantListParticipant.ts | 1 - .../src/types/VideoGalleryParticipant.ts | 10 +-- 17 files changed, 64 insertions(+), 214 deletions(-) create mode 100644 change-beta/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json create mode 100644 change/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json diff --git a/change-beta/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json b/change-beta/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json new file mode 100644 index 00000000000..88596ec9660 --- /dev/null +++ b/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": "fuyan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json b/change/@azure-communication-react-b6480f7d-32ed-4b4e-a3dd-d73a0d0bd12c.json new file mode 100644 index 00000000000..88596ec9660 --- /dev/null +++ b/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": "fuyan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md index 96d74ced60e..365c1ffbc24 100644 --- a/packages/communication-react/review/beta/communication-react.api.md +++ b/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; diff --git a/packages/react-components/src/components/LocalVideoTile.tsx b/packages/react-components/src/components/LocalVideoTile.tsx index 9c888ea0a88..185b3d41549 100644 --- a/packages/react-components/src/components/LocalVideoTile.tsx +++ b/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 && ( diff --git a/packages/react-components/src/components/NotificationStack.tsx b/packages/react-components/src/components/NotificationStack.tsx index da4d82b1ff4..9b8f9850894 100644 --- a/packages/react-components/src/components/NotificationStack.tsx +++ b/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 */ diff --git a/packages/react-components/src/components/ParticipantItem.tsx b/packages/react-components/src/components/ParticipantItem.tsx index 8c234baa931..dcc41b59b2b 100644 --- a/packages/react-components/src/components/ParticipantItem.tsx +++ b/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; } diff --git a/packages/react-components/src/components/ParticipantList.tsx b/packages/react-components/src/components/ParticipantList.tsx index 6a240cedb0b..ecd14895a3c 100644 --- a/packages/react-components/src/components/ParticipantList.tsx +++ b/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 ? () => ( {callingParticipant.raisedHand && ( @@ -206,29 +194,16 @@ const onRenderParticipantDefault = ( )} {callingParticipant.spotlight && } {isPinned && } - { - /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess && - !callingParticipant.mediaAccess.isVideoPermitted ? ( - - ) : undefined - } - { - /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess && - !callingParticipant.mediaAccess?.isAudioPermitted ? ( - - ) : undefined - } - { - /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess - ? callingParticipant.mediaAccess.isAudioPermitted - : true) && callingParticipant.isMuted ? ( - - ) : undefined - } + {callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? ( + + ) : undefined} + {callingParticipant.mediaAccess && !callingParticipant.mediaAccess?.isAudioPermitted ? ( + + ) : undefined} + {(callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) && + callingParticipant.isMuted ? ( + + ) : undefined} ) : () => 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) ?? '', diff --git a/packages/react-components/src/components/RemoteVideoTile.tsx b/packages/react-components/src/components/RemoteVideoTile.tsx index 9af1c37b70f..266a1ff93b9 100644 --- a/packages/react-components/src/components/RemoteVideoTile.tsx +++ b/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; - /* @conditional-compile-remove(media-access) */ onPermitAudio?: (userIds: string[]) => Promise; - /* @conditional-compile-remove(media-access) */ onForbidVideo?: (userIds: string[]) => Promise; - /* @conditional-compile-remove(media-access) */ onPermitVideo?: (userIds: string[]) => Promise; }) => { 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 && ( diff --git a/packages/react-components/src/components/VideoGallery.tsx b/packages/react-components/src/components/VideoGallery.tsx index 82fef7a1f90..951538f2837 100644 --- a/packages/react-components/src/components/VideoGallery.tsx +++ b/packages/react-components/src/components/VideoGallery.tsx @@ -345,22 +345,18 @@ export interface VideoGalleryProps { togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition; /* @conditional-compile-remove(together-mode) */ onDisposeTogetherModeStreamView?: () => Promise; - /* @conditional-compile-remove(media-access) */ /** * This callback is to forbid audio for remote participant(s) */ onForbidAudio?: (userIds: string[]) => Promise; - /* @conditional-compile-remove(media-access) */ /** * This callback is to permit audio for remote participant(s) */ onPermitAudio?: (userIds: string[]) => Promise; - /* @conditional-compile-remove(media-access) */ /** * This callback is to forbid video for remote participant(s) */ onForbidVideo?: (userIds: string[]) => Promise; - /* @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} /> @@ -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 ] diff --git a/packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx b/packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx index 09731642444..d87d7853330 100644 --- a/packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx +++ b/packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx @@ -61,7 +61,6 @@ export const LocalScreenShare = React.memo( ) : undefined } onRenderPlaceholder={() => } - /* @conditional-compile-remove(media-access) */ mediaAccess={localParticipant.mediaAccess} /> ); diff --git a/packages/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts b/packages/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts index b90cc48b941..85a3dc57aa3 100644 --- a/packages/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts +++ b/packages/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts @@ -1,7 +1,7 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types'; import { callingComponentLogger } from '../utils/Logger'; @@ -51,38 +51,17 @@ const useVideoStreamLifecycleMaintainer = ( renderElementExists, scalingMode, streamId, - /* @conditional-compile-remove(media-access) */ isVideoPermitted } = props; const [videoStreamViewResult, setVideoStreamViewResult] = useState(); - const createStreamViewTrampoline = useCallback( - ( - isStreamAvailable?: boolean, - renderElementExists?: boolean, - /* @conditional-compile-remove(media-access) */ isVideoPermitted?: boolean - ) => { - /* @conditional-compile-remove(media-access) */ - if (isVideoPermitted === false) { - return; - } - - if (isStreamAvailable && !renderElementExists) { - onCreateStreamView?.({ isMirrored, scalingMode })?.then((result) => { - result && setVideoStreamViewResult(result); - }); - } - }, - [isMirrored, onCreateStreamView, scalingMode] - ); - useEffect(() => { - createStreamViewTrampoline( - isStreamAvailable, - renderElementExists, - /* @conditional-compile-remove(media-access) */ isVideoPermitted - ); + if (isVideoPermitted !== false && isStreamAvailable && !renderElementExists) { + onCreateStreamView?.({ isMirrored, scalingMode })?.then((result) => { + result && setVideoStreamViewResult(result); + }); + } // Always clean up element to make tile up to date and be able to dispose correctly return () => { @@ -104,8 +83,6 @@ const useVideoStreamLifecycleMaintainer = ( renderElementExists, scalingMode, streamId, - createStreamViewTrampoline, - /* @conditional-compile-remove(media-access) */ isVideoPermitted ]); diff --git a/packages/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts b/packages/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts index 669e406df56..3521d3b46fa 100644 --- a/packages/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts +++ b/packages/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts @@ -28,13 +28,9 @@ export const useVideoTileContextualMenuProps = (props: { stopSpotlightOnSelfVideoTileMenuLabel?: string; spotlightLimitReachedMenuTitle?: string; muteParticipantMenuItemLabel?: string; - /* @conditional-compile-remove(media-access) */ forbidAudioTileMenuLabel?: string; - /* @conditional-compile-remove(media-access) */ permitAudioTileMenuLabel?: string; - /* @conditional-compile-remove(media-access) */ forbidVideoTileMenuLabel?: string; - /* @conditional-compile-remove(media-access) */ permitVideoTileMenuLabel?: string; }; view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise }; @@ -51,13 +47,9 @@ export const useVideoTileContextualMenuProps = (props: { maxParticipantsToSpotlight?: number; myUserId?: string; onMuteParticipant?: (userId: string) => void; - /* @conditional-compile-remove(media-access) */ onForbidAudio?: (userIds: string[]) => void; - /* @conditional-compile-remove(media-access) */ onPermitAudio?: (userIds: string[]) => void; - /* @conditional-compile-remove(media-access) */ onForbidVideo?: (userIds: string[]) => void; - /* @conditional-compile-remove(media-access) */ onPermitVideo?: (userIds: string[]) => void; }): IContextualMenuProps | undefined => { const { @@ -77,13 +69,9 @@ export const useVideoTileContextualMenuProps = (props: { maxParticipantsToSpotlight, myUserId, 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 } = props; const scalingMode = useMemo(() => { @@ -107,7 +95,6 @@ export const useVideoTileContextualMenuProps = (props: { }); } - /* @conditional-compile-remove(media-access) */ if ( participant.canAudioBeForbidden && participant.mediaAccess && @@ -126,7 +113,7 @@ export const useVideoTileContextualMenuProps = (props: { ariaLabel: strings?.permitAudioTileMenuLabel }); } - /* @conditional-compile-remove(media-access) */ + if (participant.canAudioBeForbidden && participant.mediaAccess?.isAudioPermitted && onForbidAudio) { items.push({ key: 'forbidAudio', @@ -141,7 +128,6 @@ export const useVideoTileContextualMenuProps = (props: { }); } - /* @conditional-compile-remove(media-access) */ if ( participant.canVideoBeForbidden && participant.mediaAccess && @@ -160,7 +146,7 @@ export const useVideoTileContextualMenuProps = (props: { ariaLabel: strings?.permitVideoTileMenuLabel }); } - /* @conditional-compile-remove(media-access) */ + if (participant.canVideoBeForbidden && participant.mediaAccess?.isVideoPermitted && onForbidVideo) { items.push({ key: 'forbidVideo', @@ -321,19 +307,12 @@ export const useVideoTileContextualMenuProps = (props: { onStartSpotlight, onUpdateScalingMode, view, - /* @conditional-compile-remove(media-access) */ participant.canAudioBeForbidden, - /* @conditional-compile-remove(media-access) */ participant.canVideoBeForbidden, - /* @conditional-compile-remove(media-access) */ participant.mediaAccess, - /* @conditional-compile-remove(media-access) */ onPermitAudio, - /* @conditional-compile-remove(media-access) */ onForbidAudio, - /* @conditional-compile-remove(media-access) */ onPermitVideo, - /* @conditional-compile-remove(media-access) */ onForbidVideo ]); diff --git a/packages/react-components/src/components/VideoTile.tsx b/packages/react-components/src/components/VideoTile.tsx index 96461db183f..07bdc91ec4c 100644 --- a/packages/react-components/src/components/VideoTile.tsx +++ b/packages/react-components/src/components/VideoTile.tsx @@ -65,10 +65,8 @@ 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; } @@ -197,7 +195,6 @@ export interface VideoTileProps { * Reactions resources' url and metadata. */ reactionResources?: ReactionResources; - /* @conditional-compile-remove(media-access) */ /** * Media access state of the participant. */ @@ -246,9 +243,7 @@ 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; @@ -262,9 +257,7 @@ const VideoTileMoreOptionsButton = (props: { participantIsSpeaking, participantState, participantIsMuted, - /* @conditional-compile-remove(media-access) */ isMicDisabled, - /* @conditional-compile-remove(media-access) */ isCameraDisabled } = props; const [moreButtonAiraDescription, setMoreButtonAriaDescription] = useState(''); @@ -278,9 +271,7 @@ const VideoTileMoreOptionsButton = (props: { participantState, participantIsSpeaking, locale, - /* @conditional-compile-remove(media-access) */ isMicDisabled, - /* @conditional-compile-remove(media-access) */ isCameraDisabled ) ); @@ -291,9 +282,7 @@ const VideoTileMoreOptionsButton = (props: { participantIsSpeaking, participantState, locale, - /* @conditional-compile-remove(media-access) */ isMicDisabled, - /* @conditional-compile-remove(media-access) */ isCameraDisabled ]); @@ -343,7 +332,6 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => { personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu, - /* @conditional-compile-remove(media-access) */ mediaAccess } = props; @@ -463,21 +451,8 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => { raisedHandBackgroundColor = callingPalette.raiseHandGold; const participantMediaAccessIcons = useMemo( () => - canShowLabel || participantStateString - ? getMediaAccessIconsTrampoline( - showMuteIndicator, - isMuted, - /* @conditional-compile-remove(media-access) */ - mediaAccess - ) - : undefined, - [ - canShowLabel, - isMuted, - /* @conditional-compile-remove(media-access) */ mediaAccess, - participantStateString, - showMuteIndicator - ] + canShowLabel || participantStateString ? getMediaAccessIcons(showMuteIndicator, isMuted, mediaAccess) : undefined, + [canShowLabel, isMuted, mediaAccess, participantStateString, showMuteIndicator] ); const canShowParticipantIcons = participantMediaAccessIcons || isSpotlighted || isPinned; @@ -574,9 +549,7 @@ 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} /> @@ -605,38 +578,36 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => { ); }; -const getMediaAccessIconsTrampoline = ( +const getMediaAccessIcons = ( showMuteIndicator: boolean, isMuted?: boolean, - mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess + mediaAccess?: MediaAccess ): JSX.Element | undefined => { - /* @conditional-compile-remove(media-access) */ const cameraForbidIcon = mediaAccess && !mediaAccess?.isVideoPermitted ? ( ) : undefined; - /* @conditional-compile-remove(media-access) */ + const micOffIcon = (mediaAccess ? mediaAccess.isAudioPermitted : true) && showMuteIndicator && isMuted ? ( ) : undefined; - /* @conditional-compile-remove(media-access) */ + const micForbidIcon = mediaAccess && !mediaAccess?.isAudioPermitted && showMuteIndicator ? ( ) : undefined; - /* @conditional-compile-remove(media-access) */ + if (!(cameraForbidIcon || micOffIcon || micForbidIcon)) { return undefined; } - /* @conditional-compile-remove(media-access) */ return ( <> {cameraForbidIcon} @@ -644,12 +615,6 @@ const getMediaAccessIconsTrampoline = ( {micForbidIcon} ); - - return showMuteIndicator && isMuted ? ( - - - - ) : undefined; }; const getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => { diff --git a/packages/react-components/src/components/utils.ts b/packages/react-components/src/components/utils.ts index 4ac164269ce..e8342d74575 100644 --- a/packages/react-components/src/components/utils.ts +++ b/packages/react-components/src/components/utils.ts @@ -360,13 +360,9 @@ export const customNotificationIconName: Partial<{ [key in NotificationType]: st breakoutRoomJoined: 'NotificationBarBreakoutRoomJoined', /* @conditional-compile-remove(breakout-rooms) */ breakoutRoomClosingSoon: 'NotificationBarBreakoutRoomClosingSoon', - /* @conditional-compile-remove(media-access) */ capabilityTurnVideoOnPresent: 'ControlButtonCameraOff', - /* @conditional-compile-remove(media-access) */ capabilityTurnVideoOnAbsent: 'ControlButtonCameraProhibited', - /* @conditional-compile-remove(media-access) */ capabilityUnmuteMicPresent: 'ControlButtonMicOff', - /* @conditional-compile-remove(media-access) */ capabilityUnmuteMicAbsent: 'ControlButtonMicProhibited', /* @conditional-compile-remove(together-mode) */ togetherModeStarted: 'NotificationBarTogetherModeIcon', @@ -437,9 +433,7 @@ export const formatMoreButtonAriaDescription = ( state?: string, isSpeaking?: boolean, strings?: VideoTileStrings, - /* @conditional-compile-remove(media-access) */ isMicDisabled?: boolean, - /* @conditional-compile-remove(media-access) */ isCameraDisabled?: boolean ): string => { const mutedState = isMuted @@ -447,9 +441,7 @@ export const formatMoreButtonAriaDescription = ( : 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, { @@ -458,9 +450,7 @@ export const formatMoreButtonAriaDescription = ( isHandRaised: handRaisedState ?? ' ', state: state ?? ' ', isSpeaking: isSpeakingState ?? ' ', - /* @conditional-compile-remove(media-access) */ micDisabledState: micDisabledState ?? ' ', - /* @conditional-compile-remove(media-access) */ cameraDisabledState: cameraDisabledState ?? ' ' }) : ''; diff --git a/packages/react-components/src/theming/icons.tsx b/packages/react-components/src/theming/icons.tsx index 220e7f790a7..b3859ad6352 100644 --- a/packages/react-components/src/theming/icons.tsx +++ b/packages/react-components/src/theming/icons.tsx @@ -95,7 +95,6 @@ import { } from '@fluentui/react-icons'; /* @conditional-compile-remove(call-readiness) */ import { Important20Filled, Sparkle20Filled } from '@fluentui/react-icons'; -/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(media-access) */ import { VideoProhibited20Filled, MicProhibited20Filled } from '@fluentui/react-icons'; /* @conditional-compile-remove(breakout-rooms) */ import { ConferenceRoom16Regular, DoorArrowLeft16Regular, DoorArrowRight16Regular } from '@fluentui/react-icons'; @@ -267,13 +266,9 @@ export const DEFAULT_COMPONENT_ICONS = { ControlButtonScreenShareStop: , ControlButtonRaiseHand: , ControlButtonLowerHand: , - /* @conditional-compile-remove(media-access) */ ControlButtonMicProhibited: , - /* @conditional-compile-remove(media-access) */ ControlButtonMicProhibitedSmall: , - /* @conditional-compile-remove(media-access) */ ControlButtonCameraProhibited: , - /* @conditional-compile-remove(media-access) */ ControlButtonCameraProhibitedSmall: , RaiseHandContextualMenuItem: , LowerHandContextualMenuItem: , @@ -338,7 +333,6 @@ export const DEFAULT_COMPONENT_ICONS = { SendBoxSend: , SendBoxSendHovered: , VideoTileMicOff: , - /* @conditional-compile-remove(media-access) */ VideoTileCameraOff: , DialpadBackspace: , /* @conditional-compile-remove(call-readiness) */ diff --git a/packages/react-components/src/types/ParticipantListParticipant.ts b/packages/react-components/src/types/ParticipantListParticipant.ts index 982fdadc00a..4b32c75c613 100644 --- a/packages/react-components/src/types/ParticipantListParticipant.ts +++ b/packages/react-components/src/types/ParticipantListParticipant.ts @@ -27,7 +27,6 @@ export type CallParticipantListParticipant = ParticipantListParticipant & { reaction?: Reaction; /** Whether calling participant is spotlighted **/ spotlight?: Spotlight; - /* @conditional-compile-remove(media-access) */ /** Whether calling participant has audio/video media access blocked **/ mediaAccess?: MediaAccess; }; diff --git a/packages/react-components/src/types/VideoGalleryParticipant.ts b/packages/react-components/src/types/VideoGalleryParticipant.ts index 48838587f0b..465da824e2a 100644 --- a/packages/react-components/src/types/VideoGalleryParticipant.ts +++ b/packages/react-components/src/types/VideoGalleryParticipant.ts @@ -1,11 +1,7 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { - ParticipantState, - /* @conditional-compile-remove(media-access) */ - MediaAccess -} from './ParticipantListParticipant'; +import { ParticipantState, MediaAccess } from './ParticipantListParticipant'; import { RaisedHand } from './ParticipantListParticipant'; import { Reaction } from './ParticipantListParticipant'; @@ -50,13 +46,10 @@ export type VideoGalleryParticipant = { /* @conditional-compile-remove(remote-ufd) */ /** Signal strength of the participant, range from 1 to 3, lower means better connection **/ signalStrength?: number; - /* @conditional-compile-remove(media-access) */ /** Media audio video access states **/ mediaAccess?: MediaAccess; - /* @conditional-compile-remove(media-access) */ /** Attendee can have audio be forbidden **/ canAudioBeForbidden?: boolean; - /* @conditional-compile-remove(media-access) */ /** Attendee can have video be forbidden **/ canVideoBeForbidden?: boolean; }; @@ -142,7 +135,6 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant { * @public * */ reaction?: Reaction; - /* @conditional-compile-remove(media-access) */ /** Media audio video access states **/ mediaAccess?: MediaAccess; }