Azure
/
communication-ui-library
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Add toggle for DNS on by default and hide DNS button in adapter options (#5095) 

* Add toggle for DNS on by default and hide DNS button in adapter options

* Change files

* minor
This commit is contained in:
prabhjot-msft 2024-08-29 17:19:51 -07:00 коммит произвёл GitHub
Родитель b11bc8a535
Коммит 5680829e1f
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
11 изменённых файлов: 153 добавлений и 47 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

9
change-beta/@azure-communication-react-38289f14-dae3-4a94-a1ef-ed56ebb6ca3d.json Normal file
Просмотреть файл

@ -0,0 +1,9 @@
{
"type": "prerelease",
"area": "feature",
"workstream": "DNS",
"comment": "Add toggle for DNS on by default and hide DNS button in adapter options",
"packageName": "@azure/communication-react",
"email": "97124699+prabhjot-msft@users.noreply.github.com",
"dependentChangeType": "patch"
}

9
change/@azure-communication-react-38289f14-dae3-4a94-a1ef-ed56ebb6ca3d.json Normal file
Просмотреть файл

@ -0,0 +1,9 @@
{
"type": "prerelease",
"area": "feature",
"workstream": "DNS",
"comment": "Add toggle for DNS on by default and hide DNS button in adapter options",
"packageName": "@azure/communication-react",
"email": "97124699+prabhjot-msft@users.noreply.github.com",
"dependentChangeType": "patch"
}

5
packages/communication-react/review/beta/communication-react.api.md
Просмотреть файл

@ -506,6 +506,8 @@ export type CallAdapterClientState = {
videoBackgroundImages?: VideoBackgroundImage[];
onResolveVideoEffectDependency?: () => Promise<VideoBackgroundEffectsDependency>;
onResolveDeepNoiseSuppressionDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
deepNoiseSuppressionOnByDefault?: boolean;
hideNoiseSuppressionButton?: boolean;
selectedVideoBackgroundEffect?: VideoBackgroundEffect;
acceptedTransferCallState?: CallState;
hideAttendeeNames?: boolean;
@ -1391,10 +1393,12 @@ export interface CallWithChatClientState {
alternateCallerId?: string | undefined;
call?: CallState;
chat?: ChatThreadClientState;
deepNoiseSuppressionOnByDefault?: boolean;
devices: DeviceManagerState;
displayName: string | undefined;
environmentInfo?: EnvironmentInfo;
hideAttendeeNames?: boolean;
hideNoiseSuppressionButton?: boolean;
isTeamsCall: boolean;
isTeamsMeeting: boolean;
latestCallErrors: AdapterErrors;
@ -3786,6 +3790,7 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
onToggleMicrophone?: () => Promise<void>;
selectedMicrophone?: OptionsDevice;
selectedSpeaker?: OptionsDevice;
showNoiseSuppressionButton?: boolean;
speakers?: OptionsDevice[];
strings?: Partial<MicrophoneButtonStrings>;
styles?: Partial<MicrophoneButtonStyles>;

95
packages/react-components/src/components/MicrophoneButton.tsx
Просмотреть файл

@ -191,6 +191,11 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
* Callback when noise suppression is clicked
*/
onClickNoiseSuppression?: () => void;
/* @conditional-compile-remove(DNS) */
/**
* Show/Hide the deep noise suppression button
*/
showNoiseSuppressionButton?: boolean;
}
/**
@ -260,6 +265,51 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
label: { fontWeight: 400 }
};
const splitButtonMenuItems: IContextualMenuItem[] = [];
splitButtonMenuItems.push({
key: 'microphonePrimaryAction',
text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,
onClick: () => {
onToggleClick();
},
iconProps: {
iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
styles: { root: { lineHeight: 0 } }
}
});
/* @conditional-compile-remove(DNS) */
if (props.showNoiseSuppressionButton) {
splitButtonMenuItems.push({
key: 'microphoneDNSToggle',
onRender: () => {
return (
<Stack
onClick={async () => {
await props.onClickNoiseSuppression?.();
setAnnouncerString(
props.isDeepNoiseSuppressionOn
? strings.deepNoiseSuppresionOnAnnouncement
: strings.deepNoiseSuppresionOffAnnouncement
);
}}
>
<Toggle
label={
props.isDeepNoiseSuppressionOn
? strings.deepNoiseSuppresionOnTitle
: strings.deepNoiseSuppresionOffTitle
}
checked={props.isDeepNoiseSuppressionOn}
inlineLabel
styles={deepNoiseSuppressionToggleStyles}
/>
</Stack>
);
}
});
}
/**
* We need to also include the primary action of the button to the
* split button for mobile devices.
@ -270,50 +320,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
items: [
{
key: 'microphonePrimaryAction',
text: props.checked
? strings.onSplitButtonMicrophonePrimaryAction
: strings.offSplitButtonMicrophonePrimaryAction,
onClick: () => {
onToggleClick();
},
iconProps: {
iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
styles: { root: { lineHeight: 0 } }
}
},
/* @conditional-compile-remove(DNS) */
{
key: 'microphoneDNSToggle',
onRender: () => {
return (
<Stack
onClick={async () => {
await props.onClickNoiseSuppression?.();
setAnnouncerString(
props.isDeepNoiseSuppressionOn
? strings.deepNoiseSuppresionOnAnnouncement
: strings.deepNoiseSuppresionOffAnnouncement
);
}}
>
<Toggle
label={
props.isDeepNoiseSuppressionOn
? strings.deepNoiseSuppresionOnTitle
: strings.deepNoiseSuppresionOffTitle
}
checked={props.isDeepNoiseSuppressionOn}
inlineLabel
styles={deepNoiseSuppressionToggleStyles}
/>
</Stack>
);
}
}
]
items: splitButtonMenuItems
}
};

6
packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts
Просмотреть файл

@ -164,6 +164,8 @@ class CallContext {
/* @conditional-compile-remove(DNS) */
deepNoiseSuppressionOptions?: {
onResolveDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
deepNoiseSuppressionOnByDefault?: boolean;
hideNoiseSuppressionButton?: boolean;
};
callingSounds?: CallingSounds;
reactionResources?: ReactionResources;
@ -193,6 +195,10 @@ class CallContext {
onResolveVideoEffectDependency: options?.videoBackgroundOptions?.onResolveDependency,
/* @conditional-compile-remove(DNS) */
onResolveDeepNoiseSuppressionDependency: options?.deepNoiseSuppressionOptions?.onResolveDependency,
/* @conditional-compile-remove(DNS) */
deepNoiseSuppressionOnByDefault: options?.deepNoiseSuppressionOptions?.deepNoiseSuppressionOnByDefault ?? false,
/* @conditional-compile-remove(DNS) */
hideNoiseSuppressionButton: options?.deepNoiseSuppressionOptions?.hideNoiseSuppressionButton ?? false,
selectedVideoBackgroundEffect: undefined,
cameraStatus: undefined,
sounds: options?.callingSounds,

15
packages/react-composites/src/composites/CallComposite/adapter/CallAdapter.ts
Просмотреть файл

@ -176,7 +176,20 @@ export type CallAdapterClientState = {
* @beta
*/
onResolveDeepNoiseSuppressionDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
/* @conditional-compile-remove(DNS) */
/**
* State to track whether the noise suppression should be on by default.
* @beta
* @default false
*/
deepNoiseSuppressionOnByDefault?: boolean;
/* @conditional-compile-remove(DNS) */
/**
* State to track whether to hide the noise suppression button.
* @beta
* @default false
*/
hideNoiseSuppressionButton?: boolean;
/**
* State to track the selected video background effect.
*/

25
packages/react-composites/src/composites/CallComposite/components/CallControls.tsx
Просмотреть файл

@ -9,7 +9,7 @@ import { ControlBar, DevicesButton, ParticipantMenuItemsCallback } from '@intern
import { HoldButton } from '@internal/react-components';
import React, { useMemo } from 'react';
/* @conditional-compile-remove(DNS) */
import { useCallback, useState } from 'react';
import { useCallback, useState, useEffect } from 'react';
import { CallControlOptions } from '../types/CallControlOptions';
import { Camera } from './buttons/Camera';
import { Devices } from './buttons/Devices';
@ -96,6 +96,27 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
/* @conditional-compile-remove(DNS) */
const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);
/* @conditional-compile-remove(DNS) */
const startDeepNoiseSuppression = useCallback(async () => {
await adapter.startNoiseSuppressionEffect();
}, [adapter]);
/* @conditional-compile-remove(DNS) */
useEffect(() => {
if (
adapter.getState().onResolveDeepNoiseSuppressionDependency &&
adapter.getState().deepNoiseSuppressionOnByDefault
) {
startDeepNoiseSuppression();
setDeepNoiseSuppressionOn(true);
}
}, [adapter, startDeepNoiseSuppression]);
/* @conditional-compile-remove(DNS) */
const showNoiseSuppressionButton =
adapter.getState().onResolveDeepNoiseSuppressionDependency && !adapter.getState().hideNoiseSuppressionButton
? true
: false;
/* @conditional-compile-remove(DNS) */
const onClickNoiseSuppression = useCallback(async () => {
if (isDeepNoiseSuppressionOn) {
@ -363,6 +384,8 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
onClickNoiseSuppression={onClickNoiseSuppression}
/* @conditional-compile-remove(DNS) */
isDeepNoiseSuppressionOn={isDeepNoiseSuppressionOn}
/* @conditional-compile-remove(DNS) */
showNoiseSuppressionButton={showNoiseSuppressionButton}
/>
)}
{cameraButtonIsEnabled && (

4
packages/react-composites/src/composites/CallComposite/components/buttons/Microphone.tsx
Просмотреть файл

@ -26,6 +26,8 @@ export const Microphone = (props: {
isDeepNoiseSuppressionOn?: boolean;
/* @conditional-compile-remove(DNS) */
onClickNoiseSuppression?: () => void;
/* @conditional-compile-remove(DNS) */
showNoiseSuppressionButton?: boolean;
}): JSX.Element => {
const microphoneButtonProps = usePropsFor(MicrophoneButton);
const callStatus = useSelector(getCallStatus);
@ -54,6 +56,8 @@ export const Microphone = (props: {
isDeepNoiseSuppressionOn={props.isDeepNoiseSuppressionOn}
/* @conditional-compile-remove(DNS) */
onClickNoiseSuppression={props.onClickNoiseSuppression}
/* @conditional-compile-remove(DNS) */
showNoiseSuppressionButton={props.showNoiseSuppressionButton}
showLabel={props.displayType !== 'compact'}
disableTooltip={props.disableTooltip}
styles={styles}

6
packages/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.ts
Просмотреть файл

@ -90,6 +90,12 @@ export interface CallWithChatClientState {
/* @conditional-compile-remove(DNS) */
/** Dependency to be injected for deep noise suppression effect. */
onResolveDeepNoiseSuppressionDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
/* @conditional-compile-remove(DNS) */
/** State to track whether the noise suppression should be on by default. */
deepNoiseSuppressionOnByDefault?: boolean;
/* @conditional-compile-remove(DNS) */
/** State to track whether to hide the noise suppression button. */
hideNoiseSuppressionButton?: boolean;
/** State to track the selected video background effect */
selectedVideoBackgroundEffect?: VideoBackgroundEffect;

23
packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx
Просмотреть файл

@ -228,6 +228,27 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
/* @conditional-compile-remove(DNS) */
const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);
/* @conditional-compile-remove(DNS) */
const startDeepNoiseSuppression = useCallback(async () => {
await props.callAdapter.startNoiseSuppressionEffect();
}, [props.callAdapter]);
/* @conditional-compile-remove(DNS) */
useEffect(() => {
if (
props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
props.callAdapter.getState().deepNoiseSuppressionOnByDefault
) {
startDeepNoiseSuppression();
setDeepNoiseSuppressionOn(true);
}
}, [props.callAdapter, startDeepNoiseSuppression]);
/* @conditional-compile-remove(DNS) */
const showNoiseSuppressionButton =
props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
!props.callAdapter.getState().hideNoiseSuppressionButton
? true
: false;
/* @conditional-compile-remove(DNS) */
const onClickNoiseSuppression = useCallback(async () => {
if (isDeepNoiseSuppressionOn) {
@ -417,6 +438,8 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
onClickNoiseSuppression={onClickNoiseSuppression}
/* @conditional-compile-remove(DNS) */
isDeepNoiseSuppressionOn={isDeepNoiseSuppressionOn}
/* @conditional-compile-remove(DNS) */
showNoiseSuppressionButton={showNoiseSuppressionButton}
/>
)}
{cameraButtonIsEnabled && (

3
samples/Calling/src/app/views/CallScreen.tsx
Просмотреть файл

@ -161,7 +161,8 @@ const AzureCommunicationCallScreen = (props: AzureCommunicationCallScreenProps):
},
// /* @conditional-compile-remove(DNS) */
deepNoiseSuppressionOptions: {
onResolveDependency: onResolveDeepNoiseSuppressionDependencyLazy
onResolveDependency: onResolveDeepNoiseSuppressionDependencyLazy,
deepNoiseSuppressionOnByDefault: true
},
callingSounds: {
callEnded: { url: '/assets/sounds/callEnded.mp3' },