Merge branch 'main' into cnwankwo/together_mode_bugbash_fixes

Azure · Jan 31, 2025 · 7f34a80 · 7f34a80
2 parents 1ddb1a4 + d9f22aa
commit 7f34a80
Show file tree

Hide file tree

Showing 22 changed files with 87 additions and 241 deletions.
diff --git a/change-beta/@azure-communication-react-88229cb5-1f75-4c50-89c6-3107a2a02529.json b/change-beta/@azure-communication-react-88229cb5-1f75-4c50-89c6-3107a2a02529.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Hide read by in chat action flyout when participants is 20 or more, as read count is not supported.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
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
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "Remove hard mute conditional compile - part 3",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-88229cb5-1f75-4c50-89c6-3107a2a02529.json b/change/@azure-communication-react-88229cb5-1f75-4c50-89c6-3107a2a02529.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Hide read by in chat action flyout when participants is 20 or more, as read count is not supported.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "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
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Hard mute",
+  "comment": "Remove hard mute conditional compile - part 3",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/common/config/webpack/sampleapp.webpack.config.js b/common/config/webpack/sampleapp.webpack.config.js
@@ -6,12 +6,6 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const CopyPlugin = require("copy-webpack-plugin");
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const ReactRefreshTypeScript = require('react-refresh-typescript');
-
-// Detect if running in GitHub Codespaces environment through environment variable set by codespace.
-// More details: https://docs.github.com/en/codespaces/developing-in-a-codespace/default-environment-variables-for-your-codespace#list-of-default-environment-variables
-const RUNNING_IN_GH_CODESPACES = !!process.env.CODESPACES;
 
 const webpackConfig = (sampleAppDir, env, babelConfig) => {
   const config = {
@@ -52,12 +46,7 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
           test: /\.tsx?$/,
           loader: 'ts-loader',
           options: {
-            transpileOnly: true,
-
-            // Enable HRML for GH codespaces devlopment (this was found to not work on MacOS so enabling for GH Codespaces only)
-            getCustomTransformers: () => ({
-              before: [!env.production && RUNNING_IN_GH_CODESPACES && ReactRefreshTypeScript()].filter(Boolean),
-            })
+            transpileOnly: true
           },
           exclude: /dist/,
           sideEffects: false
@@ -77,9 +66,6 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
       ]
     },
     plugins: [
-      // Enable HRML for GH codespaces devlopment (this was found to not work on MacOS so enabling for GH Codespaces only)
-      !env.production && RUNNING_IN_GH_CODESPACES && new ReactRefreshWebpackPlugin(),
-
       new HtmlWebpackPlugin({ template: './public/index.html' }),
       new webpack.DefinePlugin({
         'process.env.PRODUCTION': env.production || !env.development,
@@ -100,19 +86,12 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
           { from: path.resolve(sampleAppDir, "public/assets"), to: "assets",  noErrorOnMissing: true },
         ]
       })
-    ].filter(Boolean),
+    ],
     devServer: {
       port: 3000,
       hot: true,
       open: true,
       static: { directory: path.resolve(sampleAppDir, 'public') },
-      // To support hot reloading in GitHub Codespaces, we need to use the secure websocket URL
-      // For more details: https://github.com/orgs/community/discussions/11524#discussioncomment-2176952
-      client: RUNNING_IN_GH_CODESPACES ? {
-        webSocketURL: {
-          port: '443'
-        }
-      } : undefined,
       proxy: [
         {
           path: '/token',

diff --git 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/ChatMessage/ChatMessageActionsFlyout.tsx b/packages/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx
@@ -122,12 +122,14 @@ export const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JS
         onClick: props.onRemoveClick
       }
     ];
-    // only show read by x of x if more than 3 participants in total including myself
+    // only show read by x of y if more than 3 participants in total including myself
+    // only show read by x of y if less than 20 participants in total including myself. This is because read by is not supported for 20 or more participants.
     // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide
     if (
       props.remoteParticipantsCount &&
       messageReadByCount !== undefined &&
       props.remoteParticipantsCount >= 2 &&
+      props.remoteParticipantsCount < 19 &&
       props.showMessageStatus &&
       props.strings.messageReadCount &&
       props.messageStatus !== 'failed'

diff --git 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 && (
             <Layer hostId={props.drawerMenuHostId}>

diff --git 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
@@ -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
@@ -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
     ? () => (
         <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>
           {callingParticipant.raisedHand && (
@@ -206,29 +194,16 @@ const onRenderParticipantDefault = (
           )}
           {callingParticipant.spotlight && <Icon iconName="ParticipantItemSpotlighted" className={iconStyles} />}
           {isPinned && <Icon iconName="ParticipantItemPinned" className={iconStyles} />}
-          {
-            /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-            !callingParticipant.mediaAccess.isVideoPermitted ? (
-              <Icon
-                iconName="ControlButtonCameraProhibited"
-                className={iconStyles}
-                ariaLabel={strings.mutedIconLabel}
-              />
-            ) : undefined
-          }
-          {
-            /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-            !callingParticipant.mediaAccess?.isAudioPermitted ? (
-              <Icon iconName="ControlButtonMicProhibited" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
-            ) : undefined
-          }
-          {
-            /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess
-              ? callingParticipant.mediaAccess.isAudioPermitted
-              : true) && callingParticipant.isMuted ? (
-              <Icon iconName="ParticipantItemMicOff" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
-            ) : undefined
-          }
+          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? (
+            <Icon iconName="ControlButtonCameraProhibited" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
+          ) : undefined}
+          {callingParticipant.mediaAccess && !callingParticipant.mediaAccess?.isAudioPermitted ? (
+            <Icon iconName="ControlButtonMicProhibited" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
+          ) : undefined}
+          {(callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) &&
+          callingParticipant.isMuted ? (
+            <Icon iconName="ParticipantItemMicOff" className={iconStyles} ariaLabel={strings.mutedIconLabel} />
+          ) : undefined}
         </Stack>
       )
     : () => 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
@@ -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<void>;
-    /* @conditional-compile-remove(media-access) */
     onPermitAudio?: (userIds: string[]) => Promise<void>;
-    /* @conditional-compile-remove(media-access) */
     onForbidVideo?: (userIds: string[]) => Promise<void>;
-    /* @conditional-compile-remove(media-access) */
     onPermitVideo?: (userIds: string[]) => Promise<void>;
   }) => {
     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 && (