Draft (do not review) - Fuyan/3807116/hard mute

common/config/babel/features.js

@@ -25,6 +25,8 @@ module.exports = {
     "dtmf-dialer-on-by-default",
     // Feature for together mode
     "together-mode",
+    // Feature for hard mute audio/video
+    "meida-access",
     // Feature for RTT
     "rtt"
   ],

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

@@ -26,6 +26,7 @@ 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';
+// import { MediaAccessCallFeatureState } from '@internal/calling-stateful-client/dist/dist-esm/CallClientState';
 
 /**
  * Common props used to reference calling declarative client state.
@@ -111,6 +112,16 @@ export const getSpotlightCallFeature = (
   return state.calls[props.callId]?.spotlight;
 };
 
+// /**
+//  * @private
+//  */
+// export const getMediaAccessCallFeature = (
+//   state: CallClientState,
+//   props: CallingBaseSelectorProps
+// ): MediaAccessCallFeatureState | undefined => {
+//   return state.calls[props.callId]?.mediaAccess;
+// };
+
 /**
  * @private
  */

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

@@ -103,6 +103,23 @@ export interface CommonCallingHandlers {
   onStopAllSpotlight: () => Promise<void>;
   onMuteParticipant: (userId: string) => Promise<void>;
   onMuteAllRemoteParticipants: () => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onForbidParticipantAudio?: (userIds: string[]) => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onPermitParticipantAudio?: (userIds: string[]) => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onForbidAllAttendeesAudio?: () => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onPermitAllAttendeesAudio?: () => Promise<void>;
+
+  /* @conditional-compile-remove(media-access) */
+  onForbidParticipantVideo?: (userIds: string[]) => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onPermitParticipantVideo?: (userIds: string[]) => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onForbidAllAttendeesVideo?: () => Promise<void>;
+  /* @conditional-compile-remove(media-access) */
+  onPermitAllAttendeesVideo?: () => Promise<void>;
 }
 
 /**
@@ -689,6 +706,7 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
     const onMuteAllRemoteParticipants = async (): Promise<void> => {
       call?.muteAllRemoteParticipants();
     };
+
     const canStartSpotlight = call?.feature(Features.Capabilities).capabilities.spotlightParticipant.isPresent;
     const canRemoveSpotlight = call?.feature(Features.Capabilities).capabilities.removeParticipantsSpotlight.isPresent;
     const onStartLocalSpotlight = canStartSpotlight
@@ -711,6 +729,75 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
           await call?.feature(Features.Spotlight).stopSpotlight(participants);
         }
       : undefined;
+    // const canForbidOthersMedia = call?.feature(Features.Capabilities).capabilities.forbidOthersMedia.isPresent;
+    // const callState = call && callClient.getState().calls[call.id];
+    // const canForbidOthersMedia = callState
+    //   ? callState.capabilitiesFeature?.capabilities.forbidOthersMedia.isPresent
+    //   : false;
+
+    // console.log('hi there canForbidOthersMedia', canForbidOthersMedia);
+    // const onForbidParticipantAudio = canForbidOthersMedia
+    //   ? async (userIds: string[]): Promise<void> => {
+    //       const participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
+    //       await call?.feature(Features.MediaAccess).forbidAudio(participants);
+    //     }
+    //   : undefined;
+    // const onPermitParticipantAudio = canForbidOthersMedia
+    //   ? async (userIds: string[]): Promise<void> => {
+    //       const participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
+    //       await call?.feature(Features.MediaAccess).permitAudio(participants);
+    //     }
+    //   : undefined;
+
+    /* @conditional-compile-remove(media-access) */
+    const onForbidParticipantAudio = 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 participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
+      await call?.feature(Features.MediaAccess).permitAudio(participants);
+    };
+    /* @conditional-compile-remove(media-access) */
+    const onForbidAllAttendeesAudio = async (): Promise<void> => {
+      await call?.feature(Features.MediaAccess).forbidRemoteParticipantsAudio();
+    };
+    /* @conditional-compile-remove(media-access) */
+    const onPermitAllAttendeesAudio = async (): Promise<void> => {
+      await call?.feature(Features.MediaAccess).permitRemoteParticipantsAudio();
+    };
+
+    /* @conditional-compile-remove(media-access) */
+    const onForbidParticipantVideo = 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 participants = userIds?.map((userId) => _toCommunicationIdentifier(userId));
+      await call?.feature(Features.MediaAccess).permitVideo(participants);
+    };
+    /* @conditional-compile-remove(media-access) */
+    const onForbidAllAttendeesVideo = async (): Promise<void> => {
+      await call?.feature(Features.MediaAccess).forbidRemoteParticipantsVideo();
+    };
+    /* @conditional-compile-remove(media-access) */
+    const onPermitAllAttendeesVideo = async (): Promise<void> => {
+      await call?.feature(Features.MediaAccess).permitRemoteParticipantsVideo();
+    };
+
+    // const onForbidAllAttendeesAudio = canForbidOthersMedia
+    //   ? async (): Promise<void> => {
+    //       await call?.feature(Features.MediaAccess).forbidOthersAudio();
+    //     }
+    //   : undefined;
+
+    // const onPermitAllAttendeesAudio = canForbidOthersMedia
+    //   ? async (): Promise<void> => {
+    //       await call?.feature(Features.MediaAccess).permitOthersAudio();
+    //     }
+    //   : undefined;
 
     return {
       onHangUp,
@@ -761,7 +848,23 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
       onMuteParticipant,
       onMuteAllRemoteParticipants,
       onAcceptCall: notImplemented,
-      onRejectCall: notImplemented
+      onRejectCall: notImplemented,
+      /* @conditional-compile-remove(media-access) */
+      onForbidParticipantAudio,
+      /* @conditional-compile-remove(media-access) */
+      onPermitParticipantAudio,
+      /* @conditional-compile-remove(media-access) */
+      onForbidAllAttendeesAudio,
+      /* @conditional-compile-remove(media-access) */
+      onPermitAllAttendeesAudio,
+      /* @conditional-compile-remove(media-access) */
+      onForbidParticipantVideo,
+      /* @conditional-compile-remove(media-access) */
+      onPermitParticipantVideo,
+      /* @conditional-compile-remove(media-access) */
+      onForbidAllAttendeesVideo,
+      /* @conditional-compile-remove(media-access) */
+      onPermitAllAttendeesVideo
     };
   }
 );

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

@@ -142,4 +142,7 @@ export interface _ComponentCallingHandlers {
   onStartRemoteSpotlight: (userIds: string[]) => Promise<void>;
   /** VideoGallery callback prop to stop remote spotlight */
   onStopRemoteSpotlight: (userIds: string[]) => Promise<void>;
+
+  // onForbidParticipantAudio: (userIds: string[]) => Promise<void>;
+  // onPermitParticipantAudio: (userIds: string[]) => Promise<void>;
 }

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

@@ -8,7 +8,8 @@ import {
   getDisplayName,
   getIsScreenSharingOn,
   getIsMuted,
-  CallingBaseSelectorProps
+  CallingBaseSelectorProps,
+  getCapabilities
 } from './baseSelectors';
 import { getRole } from './baseSelectors';
 import { isHideAttendeeNamesEnabled } from './baseSelectors';
@@ -73,6 +74,12 @@ const convertRemoteParticipantsToParticipantListParticipants = (
             spotlightedParticipants,
             toFlatCommunicationIdentifier(participant.identifier)
           );
+          /* @conditional-compile-remove(media-access) */
+          const mediaAccess = {
+            isAudioPermitted: participant.mediaAccess?.isAudioPermitted,
+            isVideoPermitted: participant.mediaAccess?.isVideoPermitted
+          };
+          console.log('hi there convertRemoteParticipantsToParticipantListParticipants', participant.mediaAccess);
           return memoizeFn(
             toFlatCommunicationIdentifier(participant.identifier),
             displayName,
@@ -83,7 +90,9 @@ const convertRemoteParticipantsToParticipantListParticipants = (
             participant.raisedHand,
             localUserCanRemoveOthers,
             remoteParticipantReaction,
-            spotlight
+            spotlight,
+            /* @conditional-compile-remove(media-access) */
+            mediaAccess
           );
         })
         .sort((a, b) => {
@@ -134,7 +143,9 @@ export const participantListSelector: ParticipantListSelector = createSelector(
     getParticipantCount,
     isHideAttendeeNamesEnabled,
     getLocalParticipantReactionState,
-    getSpotlightCallFeature
+    getSpotlightCallFeature,
+    /* @conditional-compile-remove(media-access) */
+    getCapabilities
   ],
   (
     userId,
@@ -147,13 +158,16 @@ export const participantListSelector: ParticipantListSelector = createSelector(
     partitipantCount,
     isHideAttendeeNamesEnabled,
     localParticipantReactionState,
-    spotlightCallFeature
+    spotlightCallFeature,
+    /* @conditional-compile-remove(media-access) */
+    capabilities
   ): {
     participants: CallParticipantListParticipant[];
     myUserId: string;
     totalParticipantCount?: number;
   } => {
     const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
+    console.log('hi there participantListSelector', remoteParticipants);
     const participants = remoteParticipants
       ? convertRemoteParticipantsToParticipantListParticipants(
           _updateUserDisplayNames(Object.values(remoteParticipants)),
@@ -163,6 +177,8 @@ export const participantListSelector: ParticipantListSelector = createSelector(
           spotlightCallFeature?.spotlightedParticipants
         )
       : [];
+
+    console.log('hi there capabilties', capabilities);
     participants.push({
       userId: userId,
       displayName: displayName,
@@ -173,7 +189,12 @@ export const participantListSelector: ParticipantListSelector = createSelector(
       // Local participant can never remove themselves.
       isRemovable: false,
       reaction: memoizedConvertToVideoTileReaction(localParticipantReactionState),
-      spotlight: memoizedSpotlight(spotlightCallFeature?.spotlightedParticipants, userId)
+      spotlight: memoizedSpotlight(spotlightCallFeature?.spotlightedParticipants, userId),
+      /* @conditional-compile-remove(media-access) */
+      mediaAccess: {
+        isAudioPermitted: capabilities ? capabilities.unmuteMic.isPresent : true,
+        isVideoPermitted: capabilities ? capabilities.turnVideoOn.isPresent : true
+      }
     });
     /* @conditional-compile-remove(total-participant-count) */
     const totalParticipantCount = partitipantCount;

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

@@ -11,6 +11,9 @@ import { Spotlight } from '@internal/react-components';
 import { RaisedHandState } from '@internal/calling-stateful-client';
 import { ReactionState } from '@internal/calling-stateful-client';
 import { Reaction } from '@internal/react-components';
+/* @conditional-compile-remove(media-access) */
+import { MediaAccess } from '@internal/react-components';
+
 import memoizeOne from 'memoize-one';
 
 const convertRemoteParticipantToParticipantListParticipant = (
@@ -23,7 +26,9 @@ const convertRemoteParticipantToParticipantListParticipant = (
   raisedHand: RaisedHandState | undefined,
   localUserCanRemoveOthers: boolean,
   reaction: undefined | Reaction,
-  spotlight: undefined | Spotlight
+  spotlight: undefined | Spotlight,
+  /* @conditional-compile-remove(media-access) */
+  mediaAccess: MediaAccess | undefined
 ): CallParticipantListParticipant => {
   const identifier = fromFlatCommunicationIdentifier(userId);
   return {
@@ -41,7 +46,9 @@ const convertRemoteParticipantToParticipantListParticipant = (
         getIdentifierKind(identifier).kind === 'phoneNumber') &&
       localUserCanRemoveOthers,
     reaction,
-    spotlight
+    spotlight,
+    /* @conditional-compile-remove(media-access) */
+    mediaAccess
   };
 };
 
@@ -59,7 +66,9 @@ export const memoizedConvertAllremoteParticipants = memoizeFnAll(
     raisedHand: RaisedHandState | undefined,
     localUserCanRemoveOthers: boolean,
     reaction: undefined | Reaction,
-    spotlight: undefined | Spotlight
+    spotlight: undefined | Spotlight,
+    /* @conditional-compile-remove(media-access) */
+    mediaAccess: MediaAccess | undefined
   ): CallParticipantListParticipant => {
     return convertRemoteParticipantToParticipantListParticipant(
       userId,
@@ -71,7 +80,9 @@ export const memoizedConvertAllremoteParticipants = memoizeFnAll(
       raisedHand,
       localUserCanRemoveOthers,
       reaction,
-      spotlight
+      spotlight,
+      /* @conditional-compile-remove(media-access) */
+      mediaAccess
     );
   }
 );