@azure/communication-react 1.7.1-alpha-202308300012 → 1.7.1-alpha-202308310013

package/dist/communication-react.d.ts

@@ -1390,6 +1390,8 @@ export declare type CallCompositeIcons = {
     ControlButtonParticipants?: JSX.Element;
     ControlButtonScreenShareStart?: JSX.Element;
     ControlButtonScreenShareStop?: JSX.Element;
+    ControlButtonCameraProhibited?: JSX.Element;
+    ControlButtonMicProhibited?: JSX.Element;
     ControlButtonRaiseHand?: JSX.Element;
     ControlButtonLowerHand?: JSX.Element;
     RaiseHandContextualMenuItem?: JSX.Element;
@@ -2991,6 +2993,8 @@ export declare type CallWithChatCompositeIcons = {
     ControlButtonOptions?: JSX.Element;
     ControlButtonScreenShareStart?: JSX.Element;
     ControlButtonScreenShareStop?: JSX.Element;
+    ControlButtonCameraProhibited?: JSX.Element;
+    ControlButtonMicProhibited?: JSX.Element;
     ErrorBarCallCameraAccessDenied?: JSX.Element;
     ErrorBarCallCameraAlreadyInUse?: JSX.Element;
     ErrorBarCallLocalVideoFreeze?: JSX.Element;
@@ -5685,6 +5689,8 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     ControlButtonParticipants: JSX.Element;
     ControlButtonScreenShareStart: JSX.Element;
     ControlButtonScreenShareStop: JSX.Element;
+    ControlButtonCameraProhibited?: JSX.Element | undefined;
+    ControlButtonMicProhibited?: JSX.Element | undefined;
     ControlButtonRaiseHand: JSX.Element;
     ControlButtonLowerHand: JSX.Element;
     RaiseHandContextualMenuItem: JSX.Element;
@@ -5779,6 +5785,13 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     CaptionsIcon: JSX.Element;
     CaptionsOffIcon: JSX.Element;
     CaptionsSettingsIcon: JSX.Element;
+    /**
+     * Icon wrapper to use when including customizable icons inside the CallWithChatComposite.
+     * This wrapper ensures the icon name is being type-checked helping ensure no typos
+     * and ensure that icon is customizable through the composite API.
+     *
+     * @private
+     */
     ChangeSpokenLanguageIcon: JSX.Element;
     ChangeCaptionLanguageIcon: JSX.Element;
     ContextMenuCameraIcon: JSX.Element;

package/dist/dist-cjs/communication-react/index.js

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.1-alpha-202308300012';
+var telemetryVersion = '1.7.1-alpha-202308310013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11902,7 +11902,7 @@ const useRemoteVideoStreamLifecycleMaintainer = (props) => {
  */
 const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem, toggleAnnouncerString } = props;
+    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
         /* @conditional-compile-remove(pinned-participants) */
@@ -11970,6 +11970,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Fit');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
                     },
                     'data-ui-id': 'video-tile-fit-to-frame',
@@ -11986,6 +11987,7 @@ const useVideoTileContextualMenuProps = (props) => {
                             styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                         },
                         onClick: () => {
+                            onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
                             view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
                         },
                         'data-ui-id': 'video-tile-fill-frame',
@@ -12005,6 +12007,7 @@ const useVideoTileContextualMenuProps = (props) => {
         isPinned,
         onPinParticipant,
         onUnpinParticipant,
+        onUpdateScalingMode,
         remoteParticipant.userId,
         remoteParticipant.displayName,
         disablePinMenuItem,
@@ -12442,7 +12445,7 @@ const bracketedParticipantString = (participantString, withBrackets) => {
 const _RemoteVideoTile = React__default['default'].memo((props) => {
     var _a;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem, toggleAnnouncerString, strings } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -12474,6 +12477,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         isPinned,
         onPinParticipant,
         onUnpinParticipant,
+        onUpdateScalingMode,
         disablePinMenuItem,
         toggleAnnouncerString
     });
@@ -14911,6 +14915,15 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     const [pinnedParticipantsState, setPinnedParticipantsState] = React__default['default'].useState([]);
     /* @conditional-compile-remove(pinned-participants) */
+    const [selectedScalingModeState, setselectedScalingModeState] = React__default['default'].useState({});
+    /* @conditional-compile-remove(pinned-participants) */
+    const onUpdateScalingMode = React.useCallback((remoteUserId, scalingMode) => {
+        setselectedScalingModeState((current) => (Object.assign(Object.assign({}, current), { [remoteUserId]: {
+                scalingMode,
+                isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
+            } })));
+    }, [remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored]);
+    /* @conditional-compile-remove(pinned-participants) */
     React.useEffect(() => {
         var _a;
         (_a = props.pinnedParticipants) === null || _a === void 0 ? void 0 : _a.forEach((pinParticipant) => {
@@ -15000,10 +15013,16 @@ const VideoGallery = (props) => {
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
         /* @conditional-compile-remove(pinned-participants) */
+        const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;
+        /* @conditional-compile-remove(pinned-participants) */
         const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
         const createViewOptions = () => {
             var _a, _b;
             /* @conditional-compile-remove(pinned-participants) */
+            if (selectedScalingMode) {
+                return selectedScalingMode;
+            }
+            /* @conditional-compile-remove(pinned-participants) */
             return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) &&
                 ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width)
                 ? {
@@ -15030,6 +15049,8 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             onUnpinParticipant: onUnpinParticipant, 
             /* @conditional-compile-remove(pinned-participants) */
+            onUpdateScalingMode: onUpdateScalingMode, 
+            /* @conditional-compile-remove(pinned-participants) */
             isPinned: isPinned, 
             /* @conditional-compile-remove(pinned-participants) */
             disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, 
@@ -15043,12 +15064,14 @@ const VideoGallery = (props) => {
         onRenderAvatar,
         showMuteIndicator,
         strings,
-        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ selectedScalingModeState,
         /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,
-        /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString
+        /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,
+        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -20280,6 +20303,10 @@ const COMPOSITE_ONLY_ICONS = {
     LocalCameraSwitch: React__default['default'].createElement(reactIcons.CameraSwitch24Regular, null),
     ControlBarChatButtonActive: React__default['default'].createElement(reactIcons.Chat20Filled, null),
     ControlBarChatButtonInactive: React__default['default'].createElement(reactIcons.Chat20Regular, null),
+    /* @conditional-compile-remove(capabilities) */
+    ControlButtonCameraProhibited: React__default['default'].createElement(reactIcons.VideoProhibited20Filled, null),
+    /* @conditional-compile-remove(capabilities) */
+    ControlButtonMicProhibited: React__default['default'].createElement(reactIcons.MicProhibited20Filled, null),
     ControlBarPeopleButton: React__default['default'].createElement(reactIcons.People20Regular, null),
     MoreDrawerMicrophones: React__default['default'].createElement(reactIcons.Mic20Regular, null),
     MoreDrawerPeople: React__default['default'].createElement(reactIcons.People20Regular, null),
@@ -23112,16 +23139,22 @@ const usePropsFor$1 = (component) => {
  * @private
  */
 const Camera = (props) => {
-    var _a;
+    var _a, _b, _c;
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     /* @conditional-compile-remove(rooms) */
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const isRoomsCall = adapter.getState().isRoomsCall;
+    /* @conditional-compile-remove(capabilities) */
+    const turnVideoOnCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.turnVideoOn;
     return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled ||
             props.disabled ||
-            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), 
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
+        /* @conditional-compile-remove(capabilities) */
+        onRenderOffIcon: turnVideoOnCapability && !turnVideoOnCapability.isPresent
+            ? () => React__default['default'].createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonCameraProhibited' })
+            : undefined, 
         /* @conditional-compile-remove(video-background-effects) */
         onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.componentRef })));
 };
@@ -23335,7 +23368,7 @@ const getLatestCapabilitiesChangedInfo = (state) => {
  * @private
  */
 const Microphone = (props) => {
-    var _a;
+    var _a, _b, _c;
     const microphoneButtonProps = usePropsFor$1(MicrophoneButton);
     const callStatus = useSelector$1(getCallStatus);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
@@ -23344,6 +23377,8 @@ const Microphone = (props) => {
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const isRoomsCall = adapter.getState().isRoomsCall;
+    /* @conditional-compile-remove(capabilities) */
+    const unmuteMicCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.unmuteMic;
     /**
      * When call is in Lobby, microphone button should be disabled.
      * This is due to to headless limitation where a call can not be muted/unmuted in lobby.
@@ -23366,7 +23401,11 @@ const Microphone = (props) => {
     // tab focus on MicrophoneButton on page load
     return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled ||
             props.disabled ||
-            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown') })));
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
+        /* @conditional-compile-remove(capabilities) */
+        onRenderOffIcon: unmuteMicCapability && !unmuteMicCapability.isPresent
+            ? () => React__default['default'].createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonMicProhibited' })
+            : undefined })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26221,7 +26260,8 @@ const CapabilitiesChangedNotificationBar = (props) => {
         if (!message) {
             return null;
         }
-        return (React__default['default'].createElement(react.MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: react.MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification) }, message));
+        const iconProps = getNotificationIconProps(notification);
+        return (React__default['default'].createElement(react.MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: react.MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message));
     })));
 };
 /* @conditional-compile-remove(capabilities) */
@@ -26254,6 +26294,22 @@ const getCapabilityChangedNotificationString = (notification, strings) => {
     return undefined;
 };
 /* @conditional-compile-remove(capabilities) */
+const getNotificationIconProps = (notification) => {
+    switch (notification.capabilityName) {
+        case 'turnVideoOn':
+            if (notification.isPresent) {
+                return { iconName: 'ControlButtonCameraOn' };
+            }
+            return { iconName: 'ControlButtonCameraProhibited' };
+        case 'unmuteMic':
+            if (notification.isPresent) {
+                return { iconName: 'ControlButtonMicOn' };
+            }
+            return { iconName: 'ControlButtonMicProhibited' };
+    }
+    return undefined;
+};
+/* @conditional-compile-remove(capabilities) */
 const messageBarStyles = {
     innerText: {
         alignSelf: 'center'