Origin/fuyan/hard mute UI components changes - part 5 (#5452)

* Hard mute part 1 initial commit * address comments * Change files * Integrate Teams meeting hard mute feature part 1 - components bindings * update * Change files * Hard mute feature Part 3 - UI changes * update * update * update icons * update * update * Stop capability notification for turnVideoOn and UnmuteMic * save code, to check again later * update * meeting media access * update * Change condition to render audio or video hard muted icon * update * update * update * update * update * update * update * api rename * add media access event listener * update meeting media access setting * update * Initial commit hard mute draft full PR * update api names * update * update * Change files * lint * fix lint on fixture.ts * fix import conditional compile * update - need review * fix condition compile - need review * update * update * update * Update strings.json Signed-off-by: fuyan <[email protected]> * Update strings.json Signed-off-by: fuyan <[email protected]> * Update strings.json Signed-off-by: fuyan <[email protected]> * update * Merge branch 'origin/fuyan/hard_mute_part_full_draft' of https://github.com/Azure/communication-ui-library into origin/fuyan/hard_mute_part_full_draft * stable api changes * update * update mock * Update packages/react-components browser test snapshots * Update packages/react-components browser test snapshots * Update embed html bundle snapshots * Update packages/react-composites ChatComposite browser test snapshots * update feature.js * update conditional compile * Add fixture for e2e test * update test * Update packages/react-components browser test snapshots * Update packages/react-components browser test snapshots * update * update test fixture * update test fixture * update test fixture * Update packages/react-components browser test snapshots * update fixture * Update packages/react-components browser test snapshots * update * Update packages/react-components browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * update to master files * update by git checkout origin/main files * update by git checkout origin/main files * update logic to check media access undefined * git checkout from origin/main * checkout files from main * update * update * update * checkout fixture from origin main * update * update * update * update * update * update * update js doc * update stable api doc * change videoGalleryParticipant role prop to canAudioBeForbidden and canVideoBeForbidden * update stable api.md * address PR comments * Change files * update api md * update jsdoc * update jsdoc * address PR comments --------- Signed-off-by: fuyan <[email protected]> Co-authored-by: Fuji Yan <[email protected]> Co-authored-by: mgamis-msft <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Donald McEachern <[email protected]>
Azure · Dec 20, 2024 · 28586d8 · 28586d8
1 parent af2b60c
commit 28586d8
Show file tree

Hide file tree

Showing 48 changed files with 1,534 additions and 244 deletions.
diff --git a/change-beta/@azure-communication-react-770df296-e84b-4925-9152-a8832b309a65.json b/change-beta/@azure-communication-react-770df296-e84b-4925-9152-a8832b309a65.json
@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "feature",
+  "workstream": "Hard mute",
+  "comment": "Hard mute feature UI changes",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-c0b634e9-dc8d-4ecb-9d78-940517f2f5dc.json b/change-beta/@azure-communication-react-c0b634e9-dc8d-4ecb-9d78-940517f2f5dc.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "UI components changes",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-770df296-e84b-4925-9152-a8832b309a65.json b/change/@azure-communication-react-770df296-e84b-4925-9152-a8832b309a65.json
@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "feature",
+  "workstream": "Hard mute",
+  "comment": "Hard mute feature UI changes",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-c0b634e9-dc8d-4ecb-9d78-940517f2f5dc.json b/change/@azure-communication-react-c0b634e9-dc8d-4ecb-9d78-940517f2f5dc.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "UI components changes",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/common/config/babel/features.js b/common/config/babel/features.js
@@ -23,8 +23,6 @@ module.exports = {
     "remote-ufd",
     // Feature for together mode
     "together-mode",
-    // Feature for forbid/permit remote participants audio/video access
-    "media-access",
     // Feature for RTT
     "rtt"
   ],
@@ -80,5 +78,7 @@ module.exports = {
     // Demo feature. Used in live-documentation of conditional compilation.
     // Do not use in production code.
     "stabilizedDemo",
+    // Feature for forbid/permit remote participants audio/video access
+    "media-access"
   ]
 }
diff --git a/packages/calling-component-bindings/src/baseSelectors.ts b/packages/calling-component-bindings/src/baseSelectors.ts
@@ -24,7 +24,7 @@ import { CaptionsKind } from '@azure/communication-calling';
 import { RaisedHandState } from '@internal/calling-stateful-client';
 import { SupportedCaptionLanguage, SupportedSpokenLanguage } from '@internal/react-components';
 import { ConferencePhoneInfo } from '@internal/calling-stateful-client';
-/* @conditional-compile-remove(breakout-rooms) */
+/* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
 import { CallNotifications } from '@internal/calling-stateful-client';
 /* @conditional-compile-remove(media-access) */
 import { CapabilitiesChangeInfo } from '@azure/communication-calling';
@@ -183,7 +183,7 @@ export const getIdentifier = (state: CallClientState): string => toFlatCommunica
  */
 export const getLatestErrors = (state: CallClientState): CallErrors => state.latestErrors;
 
-/* @conditional-compile-remove(breakout-rooms) */
+/* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
 /**
  * @private
  */

diff --git a/packages/calling-component-bindings/src/handlers/createCommonHandlers.ts b/packages/calling-component-bindings/src/handlers/createCommonHandlers.ts
@@ -142,57 +142,48 @@ export interface CommonCallingHandlers {
   /**
    * Forbid remote participants from sending audio
    *
-   * @beta
    */
   onForbidAudio?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   /**
    * Permit remote participants to send audio
    *
-   * @beta
    */
   onPermitAudio?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   /**
    * Change meeting option forbid remote participants from sending audio
    *
-   * @beta
    */
   onForbidOthersAudio?: () => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   /**
    * Change meeting option permit remote participants to send audio
    *
-   * @beta
    */
   onPermitOthersAudio?: () => Promise<void>;
-
   /* @conditional-compile-remove(media-access) */
   /**
    * Forbid remote participants from sending video
    *
-   * @beta
    */
   onForbidVideo?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   /**
    * Permit remote participants to send video
    *
-   * @beta
    */
   onPermitVideo?: (userIds: string[]) => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   /**
    * Change meeting option forbid remote participants from sending video
    *
-   * @beta
    */
   onForbidOthersVideo?: () => Promise<void>;
   /* @conditional-compile-remove(media-access) */
   /**
    * Change meeting option permit remote participants to send video
    *
-   * @beta
    */
   onPermitOthersVideo?: () => Promise<void>;
 }

diff --git a/packages/calling-component-bindings/src/notificationStackSelector.ts b/packages/calling-component-bindings/src/notificationStackSelector.ts
@@ -51,7 +51,7 @@ export type NotificationStackSelector = (
 export const notificationStackSelector: NotificationStackSelector = createSelector(
   [
     getLatestErrors,
-    /* @conditional-compile-remove(breakout-rooms) */ getLatestNotifications,
+    /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */ getLatestNotifications,
     getDiagnostics,
     getDeviceManager,
     getEnvironmentInfo,

diff --git a/packages/calling-component-bindings/src/participantListSelector.ts b/packages/calling-component-bindings/src/participantListSelector.ts
@@ -185,8 +185,8 @@ export const participantListSelector: ParticipantListSelector = createSelector(
       spotlight: memoizedSpotlight(spotlightCallFeature?.spotlightedParticipants, userId),
       /* @conditional-compile-remove(media-access) */
       mediaAccess: {
-        isAudioPermitted: capabilities ? capabilities.unmuteMic.isPresent : true,
-        isVideoPermitted: capabilities ? capabilities.turnVideoOn.isPresent : true
+        isAudioPermitted: capabilities?.unmuteMic ? capabilities.unmuteMic.isPresent : true,
+        isVideoPermitted: capabilities?.turnVideoOn ? capabilities.turnVideoOn.isPresent : true
       }
     });
     /* @conditional-compile-remove(total-participant-count) */

diff --git a/packages/calling-component-bindings/src/utils/videoGalleryUtils.ts b/packages/calling-component-bindings/src/utils/videoGalleryUtils.ts
@@ -78,15 +78,13 @@ export const _videoGalleryRemoteParticipantsMemo: _VideoGalleryRemoteParticipant
             participant.contentSharingStream,
             remoteParticipantReaction,
             spotlight,
+            participant.mediaAccess,
+            participant.role,
             /* @conditional-compile-remove(remote-ufd) */
             Math.max(
               (participant.diagnostics?.networkReceiveQuality?.value ?? 0) as number,
               (participant.diagnostics?.networkSendQuality?.value ?? 0) as number
-            ),
-            /* @conditional-compile-remove(media-access) */
-            participant.mediaAccess,
-            /* @conditional-compile-remove(media-access) */
-            participant.role
+            )
           );
         })
     );
@@ -105,10 +103,9 @@ const memoizedAllConvertRemoteParticipant = memoizeFnAll(
     contentSharingStream?: HTMLElement,
     reaction?: Reaction,
     spotlight?: Spotlight,
-    /* @conditional-compile-remove(remote-ufd) */
-    signalStrength?: number,
     mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess,
-    role?: undefined | /* @conditional-compile-remove(media-access) */ ParticipantRole
+    role?: undefined | /* @conditional-compile-remove(media-access) */ ParticipantRole,
+    signalStrength?: undefined | /* @conditional-compile-remove(remote-ufd) */ number
   ): VideoGalleryRemoteParticipant => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(
       userId,
@@ -121,11 +118,8 @@ const memoizedAllConvertRemoteParticipant = memoizeFnAll(
       contentSharingStream,
       reaction,
       spotlight,
-      /* @conditional-compile-remove(remote-ufd) */
       signalStrength,
-      /* @conditional-compile-remove(media-access) */
       mediaAccess,
-      /* @conditional-compile-remove(media-access) */
       role
     );
   }
@@ -143,8 +137,7 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
   contentSharingStream?: HTMLElement,
   reaction?: Reaction,
   spotlight?: Spotlight,
-  /* @conditional-compile-remove(remote-ufd) */
-  signalStrength?: number,
+  signalStrength?: undefined | /* @conditional-compile-remove(remote-ufd) */ number,
   mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess,
   role?: undefined | /* @conditional-compile-remove(media-access) */ ParticipantRole
 ): VideoGalleryRemoteParticipant => {
@@ -190,12 +183,13 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
     raisedHand,
     reaction,
     spotlight,
-    /* @conditional-compile-remove(remote-ufd) */
-    signalStrength,
-    /* @conditional-compile-remove(media-access) */
     mediaAccess,
     /* @conditional-compile-remove(media-access) */
-    role
+    canAudioBeForbidden: role === 'Attendee',
+    /* @conditional-compile-remove(media-access) */
+    canVideoBeForbidden: role === 'Attendee',
+    /* @conditional-compile-remove(remote-ufd) */
+    signalStrength
   };
 };
 
@@ -255,8 +249,8 @@ export const memoizeLocalParticipant = memoizeOne(
     capabilities,
     /* @conditional-compile-remove(media-access) */
     mediaAccess: {
-      isAudioPermitted: capabilities?.unmuteMic.isPresent,
-      isVideoPermitted: capabilities?.turnVideoOn.isPresent
+      isAudioPermitted: capabilities?.unmuteMic ? capabilities.unmuteMic.isPresent : true,
+      isVideoPermitted: capabilities?.turnVideoOn ? capabilities.turnVideoOn.isPresent : true
     }
   })
 );

diff --git a/packages/calling-stateful-client/src/CallClientState.ts b/packages/calling-stateful-client/src/CallClientState.ts
@@ -488,7 +488,7 @@ export interface VideoStreamRendererViewState {
 /* @conditional-compile-remove(media-access) */
 /**
  * Media access state
- * @alpha
+ * @public
  */
 export interface MediaAccessState {
   /**
@@ -763,7 +763,7 @@ export interface CallState {
   /**
    * Proxy of {@link @azure/communication-calling#MediaAccessFeature}.
    */
-  mediaAccess?: MediaAccessState;
+  meetingMediaAccess?: MediaAccessState;
 }
 
 /**

diff --git a/packages/calling-stateful-client/src/CallContext.ts b/packages/calling-stateful-client/src/CallContext.ts
@@ -48,8 +48,8 @@ import {
   CallErrorTarget,
   CallError
 } from './CallClientState';
-/* @conditional-compile-remove(breakout-rooms) */
-import { NotificationTarget, CallNotification, CallNotifications } from './CallClientState';
+/* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
+import { NotificationTarget, CallNotifications, CallNotification } from './CallClientState';
 import { TeamsIncomingCallState } from './CallClientState';
 import { CaptionsInfo } from './CallClientState';
 import { ReactionState } from './CallClientState';
@@ -94,7 +94,7 @@ export class CallContext {
   private _atomicId: number;
   private _callIdHistory: CallIdHistory = new CallIdHistory();
   private _timeOutId: { [key: string]: ReturnType<typeof setTimeout> } = {};
-  /* @conditional-compile-remove(breakout-rooms) */
+  /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
   private _latestCallIdsThatPushedNotifications: Partial<Record<NotificationTarget, string>> = {};
 
   constructor(userId: CommunicationIdentifierKind, maxListeners = 50) {
@@ -115,7 +115,8 @@ export class CallContext {
       userId: userId,
       environmentInfo: undefined,
       latestErrors: {} as CallErrors,
-      /* @conditional-compile-remove(breakout-rooms) */ latestNotifications: {} as CallNotifications
+      /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */ latestNotifications:
+        {} as CallNotifications
     };
     this._emitter = new EventEmitter();
     this._emitter.setMaxListeners(maxListeners);
@@ -1395,15 +1396,15 @@ export class CallContext {
     });
   }
 
-  /* @conditional-compile-remove(breakout-rooms) */
+  /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
   public setLatestNotification(callId: string, notification: CallNotification): void {
     this._latestCallIdsThatPushedNotifications[notification.target] = callId;
     this.modifyState((draft: CallClientState) => {
       draft.latestNotifications[notification.target] = notification;
     });
   }
 
-  /* @conditional-compile-remove(breakout-rooms) */
+  /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
   public deleteLatestNotification(callId: string, notificationTarget: NotificationTarget): void {
     let callIdToPushLatestNotification = this._latestCallIdsThatPushedNotifications[notificationTarget];
     callIdToPushLatestNotification = callIdToPushLatestNotification
@@ -1449,7 +1450,7 @@ export class CallContext {
       }
 
       if (meetingMediaAccess) {
-        call.mediaAccess = {
+        call.meetingMediaAccess = {
           isAudioPermitted: meetingMediaAccess.isAudioPermitted,
           isVideoPermitted: meetingMediaAccess.isVideoPermitted
         };