Hardmute - Integrate new change from web sdk - Part 3

change-beta/@azure-communication-react-dc5bcef5-37fa-4bec-a2e7-745dd9895f4a.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "feature",
+  "workstream": "Hard mute",
+  "comment": "Merge branch 'main' into fuyan/hard_mute_part3_integrate_web_sdk",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-dc5bcef5-37fa-4bec-a2e7-745dd9895f4a.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "feature",
+  "workstream": "Hard mute",
+  "comment": "Merge branch 'main' into fuyan/hard_mute_part3_integrate_web_sdk",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/src/baseSelectors.ts

@@ -26,6 +26,8 @@ import { _SupportedCaptionLanguage, _SupportedSpokenLanguage } from '@internal/r
 import { ConferencePhoneInfo } from '@internal/calling-stateful-client';
 /* @conditional-compile-remove(breakout-rooms) */
 import { CallNotifications } from '@internal/calling-stateful-client';
+/* @conditional-compile-remove(media-access) */
+import { CapabilitiesChangeInfo } from '@azure/communication-calling';
 
 /**
  * Common props used to reference calling declarative client state.
@@ -63,6 +65,17 @@ export const getCapabilities = (
   props: CallingBaseSelectorProps
 ): ParticipantCapabilities | undefined => state.calls[props.callId]?.capabilitiesFeature?.capabilities;
 
+/* @conditional-compile-remove(media-access) */
+/**
+ * @private
+ */
+export const getLatestCapabilitiesChangedInfo = (
+  state: CallClientState,
+  props: CallingBaseSelectorProps
+): CapabilitiesChangeInfo | undefined => {
+  return state.calls[props.callId]?.capabilitiesFeature?.latestCapabilitiesChangeInfo;
+};
+
 /**
  * @private
  */

packages/calling-component-bindings/src/handlers/createCommonHandlers.ts

@@ -134,22 +134,62 @@ export interface CommonCallingHandlers {
    */
   onDisposeTogetherModeStreamViews: () => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onForbidParticipantAudio?: (userIds: string[]) => Promise<void>;
+  /**
+   * Forbid remote participants from sending audio
+   *
+   * @beta
+   */
+  onForbidAudio?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onPermitParticipantAudio?: (userIds: string[]) => Promise<void>;
+  /**
+   * Permit remote participants to send audio
+   *
+   * @beta
+   */
+  onPermitAudio?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onForbidRemoteParticipantsAudio?: () => Promise<void>;
+  /**
+   * Change meeting option forbid remote participants from sending audio
+   *
+   * @beta
+   */
+  onForbidOthersAudio?: () => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onPermitRemoteParticipantsAudio?: () => Promise<void>;
+  /**
+   * Change meeting option permit remote participants to send audio
+   *
+   * @beta
+   */
+  onPermitOthersAudio?: () => Promise<void>;
 
   /* @conditional-compile-remove(media-access) */
-  onForbidParticipantVideo?: (userIds: string[]) => Promise<void>;
+  /**
+   * Forbid remote participants from sending video
+   *
+   * @beta
+   */
+  onForbidVideo?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onPermitParticipantVideo?: (userIds: string[]) => Promise<void>;
+  /**
+   * Permit remote participants to send video
+   *
+   * @beta
+   */
+  onPermitVideo?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onForbidRemoteParticipantsVideo?: () => Promise<void>;
+  /**
+   * Change meeting option forbid remote participants from sending video
+   *
+   * @beta
+   */
+  onForbidOthersVideo?: () => Promise<void>;
   /* @conditional-compile-remove(media-access) */
-  onPermitRemoteParticipantsVideo?: () => Promise<void>;
+  /**
+   * Change meeting option permit remote participants to send video
+   *
+   * @beta
+   */
+  onPermitOthersVideo?: () => Promise<void>;
 }
 
 /**
@@ -811,41 +851,41 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
       }
     };
     /* @conditional-compile-remove(media-access) */
-    const onForbidParticipantAudio = async (userIds: string[]): Promise<void> => {
+    const onForbidAudio = async (userIds: string[]): Promise<void> => {
       const participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
       await call?.feature(Features.MediaAccess).forbidAudio(participants);
     };
     /* @conditional-compile-remove(media-access) */
-    const onPermitParticipantAudio = async (userIds: string[]): Promise<void> => {
+    const onPermitAudio = async (userIds: string[]): Promise<void> => {
       const participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
       await call?.feature(Features.MediaAccess).permitAudio(participants);
     };
     /* @conditional-compile-remove(media-access) */
-    const onForbidRemoteParticipantsAudio = async (): Promise<void> => {
+    const onForbidOthersAudio = async (): Promise<void> => {
       await call?.feature(Features.MediaAccess).forbidOthersAudio();
     };
     /* @conditional-compile-remove(media-access) */
-    const onPermitRemoteParticipantsAudio = async (): Promise<void> => {
+    const onPermitOthersAudio = async (): Promise<void> => {
       await call?.feature(Features.MediaAccess).permitOthersAudio();
     };
 
     /* @conditional-compile-remove(media-access) */
-    const onForbidParticipantVideo = async (userIds: string[]): Promise<void> => {
+    const onForbidVideo = async (userIds: string[]): Promise<void> => {
       const participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
       await call?.feature(Features.MediaAccess).forbidVideo(participants);
     };
     /* @conditional-compile-remove(media-access) */
-    const onPermitParticipantVideo = async (userIds: string[]): Promise<void> => {
+    const onPermitVideo = async (userIds: string[]): Promise<void> => {
       const participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
       await call?.feature(Features.MediaAccess).permitVideo(participants);
     };
     /* @conditional-compile-remove(media-access) */
-    const onForbidRemoteParticipantsVideo = async (): Promise<void> => {
+    const onForbidOthersVideo = async (): Promise<void> => {
       await call?.feature(Features.MediaAccess).forbidOthersVideo();
     };
     /* @conditional-compile-remove(media-access) */
-    const onPermitRemoteParticipantsVideo = async (): Promise<void> => {
-      await call?.feature(Features.MediaAccess).forbidOthersAudio();
+    const onPermitOthersVideo = async (): Promise<void> => {
+      await call?.feature(Features.MediaAccess).permitOthersVideo();
     };
     return {
       onHangUp,
@@ -906,21 +946,21 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
       /* @conditional-compile-remove(together-mode) */
       onSetTogetherModeSceneSize,
       /* @conditional-compile-remove(media-access) */
-      onForbidParticipantAudio,
+      onForbidAudio,
       /* @conditional-compile-remove(media-access) */
-      onPermitParticipantAudio,
+      onPermitAudio,
       /* @conditional-compile-remove(media-access) */
-      onForbidRemoteParticipantsAudio,
+      onForbidOthersAudio,
       /* @conditional-compile-remove(media-access) */
-      onPermitRemoteParticipantsAudio,
+      onPermitOthersAudio,
       /* @conditional-compile-remove(media-access) */
-      onForbidParticipantVideo,
+      onForbidVideo,
       /* @conditional-compile-remove(media-access) */
-      onPermitParticipantVideo,
+      onPermitVideo,
       /* @conditional-compile-remove(media-access) */
-      onForbidRemoteParticipantsVideo,
+      onForbidOthersVideo,
       /* @conditional-compile-remove(media-access) */
-      onPermitRemoteParticipantsVideo
+      onPermitOthersVideo
     };
   }
 );

packages/calling-component-bindings/src/notificationStackSelector.ts

@@ -9,7 +9,9 @@ import {
   getEnvironmentInfo
 } from './baseSelectors';
 /* @conditional-compile-remove(breakout-rooms) */
-import { getLatestNotifications, getAssignedBreakoutRoom } from './baseSelectors';
+import { getAssignedBreakoutRoom } from './baseSelectors';
+/* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
+import { getLatestNotifications } from './baseSelectors';
 
 import { getMeetingConferencePhones } from './baseSelectors';
 
@@ -21,6 +23,9 @@ import { CallClientState, CallErrors, CallErrorTarget } from '@internal/calling-
 
 import { DiagnosticQuality } from '@azure/communication-calling';
 
+/* @conditional-compile-remove(media-access) */
+import { CallNotifications } from '@internal/calling-stateful-client';
+
 /**
  * Selector type for {@link Notification} component.
  *
@@ -55,7 +60,7 @@ export const notificationStackSelector: NotificationStackSelector = createSelect
   ],
   (
     latestErrors: CallErrors,
-    /* @conditional-compile-remove(breakout-rooms) */ latestNotifications,
+    /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */ latestNotifications,
     diagnostics,
     deviceManager,
     environmentInfo,
@@ -180,7 +185,11 @@ export const notificationStackSelector: NotificationStackSelector = createSelect
     }
 
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.unmute', 'unmuteGeneric');
-    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.mutedByOthers', 'mutedByRemoteParticipant');
+    appendMuteByOthersNotificationTrampoline(
+      activeErrorMessages,
+      latestErrors,
+      /* @conditional-compile-remove(media-access) */ latestNotifications
+    );
     appendActiveErrorIfDefined(
       activeErrorMessages,
       latestErrors,
@@ -258,6 +267,39 @@ export const notificationStackSelector: NotificationStackSelector = createSelect
         timestamp: latestNotifications['breakoutRoomClosingSoon'].timestamp
       });
     }
+
+    /* @conditional-compile-remove(media-access) */
+    if (latestNotifications['capabilityTurnVideoOnPresent']) {
+      activeNotifications.push({
+        type: 'capabilityTurnVideoOnPresent',
+        timestamp: latestNotifications['capabilityTurnVideoOnPresent'].timestamp
+      });
+    }
+
+    /* @conditional-compile-remove(media-access) */
+    if (latestNotifications['capabilityTurnVideoOnAbsent']) {
+      activeNotifications.push({
+        type: 'capabilityTurnVideoOnAbsent',
+        timestamp: latestNotifications['capabilityTurnVideoOnAbsent'].timestamp
+      });
+    }
+
+    /* @conditional-compile-remove(media-access) */
+    if (latestNotifications['capabilityUnmuteMicPresent']) {
+      activeNotifications.push({
+        type: 'capabilityUnmuteMicPresent',
+        timestamp: latestNotifications['capabilityUnmuteMicPresent'].timestamp
+      });
+    }
+
+    /* @conditional-compile-remove(media-access) */
+    if (latestNotifications['capabilityUnmuteMicAbsent']) {
+      activeNotifications.push({
+        type: 'capabilityUnmuteMicAbsent',
+        timestamp: latestNotifications['capabilityUnmuteMicAbsent'].timestamp
+      });
+    }
+
     return { activeErrorMessages: activeErrorMessages, activeNotifications: activeNotifications };
   }
 );
@@ -276,3 +318,22 @@ const appendActiveErrorIfDefined = (
     timestamp: latestErrors[target].timestamp
   });
 };
+
+const appendMuteByOthersNotificationTrampoline = (
+  activeErrorMessages: ActiveNotification[],
+  latestErrors: CallErrors,
+  latestNotifications?: undefined | /* @conditional-compile-remove(media-access) */ CallNotifications
+): void => {
+  /* @conditional-compile-remove(media-access) */
+  if (
+    latestNotifications &&
+    !latestNotifications['capabilityUnmuteMicAbsent'] &&
+    !latestNotifications['capabilityUnmuteMicPresent']
+  ) {
+    appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.mutedByOthers', 'mutedByRemoteParticipant');
+  }
+  /* @conditional-compile-remove(media-access) */
+  return;
+
+  appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.mutedByOthers', 'mutedByRemoteParticipant');
+};

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

@@ -84,7 +84,9 @@ export const _videoGalleryRemoteParticipantsMemo: _VideoGalleryRemoteParticipant
               (participant.diagnostics?.networkSendQuality?.value ?? 0) as number
             ),
             /* @conditional-compile-remove(media-access) */
-            participant.mediaAccess
+            participant.mediaAccess,
+            /* @conditional-compile-remove(media-access) */
+            participant.role
           );
         })
     );
@@ -105,7 +107,8 @@ const memoizedAllConvertRemoteParticipant = memoizeFnAll(
     spotlight?: Spotlight,
     /* @conditional-compile-remove(remote-ufd) */
     signalStrength?: number,
-    mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess
+    mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess,
+    role?: undefined | /* @conditional-compile-remove(media-access) */ ParticipantRole
   ): VideoGalleryRemoteParticipant => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(
       userId,
@@ -121,7 +124,9 @@ const memoizedAllConvertRemoteParticipant = memoizeFnAll(
       /* @conditional-compile-remove(remote-ufd) */
       signalStrength,
       /* @conditional-compile-remove(media-access) */
-      mediaAccess
+      mediaAccess,
+      /* @conditional-compile-remove(media-access) */
+      role
     );
   }
 );
@@ -140,7 +145,8 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
   spotlight?: Spotlight,
   /* @conditional-compile-remove(remote-ufd) */
   signalStrength?: number,
-  mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess
+  mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess,
+  role?: undefined | /* @conditional-compile-remove(media-access) */ ParticipantRole
 ): VideoGalleryRemoteParticipant => {
   const rawVideoStreamsArray = Object.values(videoStreams);
   let videoStream: VideoGalleryStream | undefined = undefined;
@@ -187,7 +193,9 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
     /* @conditional-compile-remove(remote-ufd) */
     signalStrength,
     /* @conditional-compile-remove(media-access) */
-    mediaAccess
+    mediaAccess,
+    /* @conditional-compile-remove(media-access) */
+    role
   };
 };
 

packages/calling-component-bindings/src/videoGallerySelector.ts

@@ -115,7 +115,13 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
             screenShareRemoteParticipant.raisedHand,
             screenShareRemoteParticipant.contentSharingStream,
             undefined,
-            screenShareRemoteParticipant.spotlight
+            screenShareRemoteParticipant.spotlight,
+            /* @conditional-compile-remove(media-access) */
+            undefined,
+            /* @conditional-compile-remove(media-access) */
+            screenShareRemoteParticipant.mediaAccess,
+            /* @conditional-compile-remove(media-access) */
+            role
           )
         : undefined,
       localParticipant: memoizeLocalParticipant(