communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
335 lines • 12.5 kB
TypeScript
/// <reference types="react" />
import { VideoTilesOptions } from "../../../../react-components/src";
import { CallSurveyImprovementSuggestions } from "../../../../react-components/src";
import { BaseCompositeProps } from '../common/BaseComposite';
import { CallCompositeIcons } from '../common/icons';
import { CommonCallAdapter } from './adapter/CallAdapter';
import { CallControlOptions } from './types/CallControlOptions';
import { CallSurvey } from '@azure/communication-calling';
import { MobileChatSidePaneTabHeaderProps } from '../common/TabHeader';
import { InjectedSidePaneProps } from './components/SidePane/SidePaneProvider';
import { VideoGalleryLayout, LocalScreenShareView } from "../../../../react-components/src";
/**
* Props for {@link CallComposite}.
*
* @public
*/
export interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {
/**
* An adapter provides logic and data to the composite.
* Composite can also be controlled using the adapter.
*/
adapter: CommonCallAdapter;
/**
* Optimizes the composite form factor for either desktop or mobile.
* @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.
* @defaultValue 'desktop'
*/
formFactor?: 'desktop' | 'mobile';
/**
* URL to invite new participants to the current call. If this is supplied, a button appears in the Participants
* Button flyout menu.
*/
callInvitationUrl?: string;
/**
* Flags to enable/disable or customize UI elements of the {@link CallComposite}.
*/
options?: CallCompositeOptions;
}
/**
* Device Checks.
* Choose whether or not to block starting a call depending on camera and microphone permission options.
*
* @beta
*/
export interface DeviceCheckOptions {
/**
* Camera Permission prompts for your call.
* 'required' - requires the permission to be allowed before permitting the user join the call.
* 'optional' - permission can be disallowed and the user is still permitted to join the call.
* 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.
*/
camera: 'required' | 'optional' | 'doNotPrompt';
/**
* Microphone permission prompts for your call.
* 'required' - requires the permission to be allowed before permitting the user join the call.
* 'optional' - permission can be disallowed and the user is still permitted to join the call.
* 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.
*/
microphone: 'required' | 'optional' | 'doNotPrompt';
}
/**
* Menu options for remote video tiles in {@link VideoGallery}.
*
* @public
*/
export interface RemoteVideoTileMenuOptions {
/**
* If set to true, remote video tiles in the VideoGallery will not have menu options
*
* @defaultValue false
*/
isHidden?: boolean;
}
/**
* Options for the local video tile in the Call composite.
*
* @public
*/
export interface LocalVideoTileOptions {
/**
* Position of the local video tile. If unset will render the local tile in the floating local position.
*
* @defaultValue 'floating'
* @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.
* 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery
* local video tile rules and be docked in the bottom corner.
* This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.
*/
position?: 'grid' | 'floating';
}
/**
* Options for controlling the notifications in the composite.
* @public
*/
export interface NotificationOptions {
/**
* Whether to show the notifications in the composite. useful
* for hiding the notifications in the composite to replace with your own custom notifications.
*/
hideAllNotifications?: boolean;
}
/**
* Options to determine the rendering behavior of the dtmfDialer in the CallComposite
* @public
*/
export interface DtmfDialPadOptions {
dialerBehavior?: 'autoShow' | 'alwaysShow' | 'alwaysHide';
}
/**
* Optional features of the {@link CallComposite}.
*
* @public
*/
export type CallCompositeOptions = {
captionsBanner?: {
height: 'full' | 'default';
};
/**
* Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.
* Hide or show the error bar.
* @defaultValue true
*/
errorBar?: boolean;
/**
* Hide or Customize the control bar element.
* Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.
* @defaultValue true
*/
callControls?: boolean | CallControlOptions;
/**
* Device permissions check options for your call.
* Here you can choose what device permissions you prompt the user for,
* as well as what device permissions must be accepted before starting a call.
*/
deviceChecks?: DeviceCheckOptions;
/**
* Callback you may provide to supply users with further steps to troubleshoot why they have been
* unable to grant your site the required permissions for the call.
*
* @example
* ```ts
* onPermissionsTroubleshootingClick: () =>
* window.open('https://contoso.com/permissions-troubleshooting', '_blank');
* ```
*
* @remarks
* if this is not supplied, the composite will not show a 'further troubleshooting' link.
*/
onPermissionsTroubleshootingClick?: (permissionsState: {
camera: PermissionState;
microphone: PermissionState;
}) => void;
/**
* Callback you may provide to supply users with further steps to troubleshoot why they have been
* having network issues when connecting to the call.
*
* @example
* ```ts
* onNetworkingTroubleShootingClick?: () =>
* window.open('https://contoso.com/network-troubleshooting', '_blank');
* ```
*
* @remarks
* if this is not supplied, the composite will not show a 'network troubleshooting' link.
*/
onNetworkingTroubleShootingClick?: () => void;
/**
* Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.
*
* @example
* ```ts
* onBrowserTroubleShootingClick?: () =>
* window.open('https://contoso.com/browser-troubleshooting', '_blank');
* ```
*
* @remarks
* if this is not supplied, the composite will not show a unsupported browser page.
*/
onEnvironmentInfoTroubleshootingClick?: () => void;
/**
* Remote participant video tile menu options
*/
remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
/**
* Options for controlling the local video tile.
*
* @remarks if 'false' the local video tile will not be rendered.
*/
localVideoTile?: boolean | LocalVideoTileOptions;
/**
* Options for controlling video tile.
*/
videoTilesOptions?: VideoTilesOptions;
/**
* Options for controlling the notifications in the composite.
*/
notificationOptions?: NotificationOptions;
/**
* Whether to auto show the DTMF Dialer when the call starts in supported scenarios.
* - Teams Voice Application like Call queue or Auto Attendant
* - PSTN Calls
* @defaultValue false
*/
disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
/**
* Options for controlling the starting layout of the composite's video gallery
*/
galleryOptions?: {
/**
* Layout for the gallery when the call starts
*/
layout?: VideoGalleryLayout;
/**
* Controls the view of the local screenshare stream in the gallery
*/
localScreenShareView?: LocalScreenShareView;
};
/**
* Options for end of call survey
*/
surveyOptions?: {
/**
* Disable call survey at the end of a call.
* @defaultValue false
*/
disableSurvey?: boolean;
/**
* Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided
* This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey
*/
onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;
/**
* Optional callback to handle survey data including free form text response
* Note that free form text response survey option is only going to be enabled when this callback is provided
* User will need to handle all free form text response on their own
*/
onSurveySubmitted?: (callId: string, surveyId: string,
/**
* This is the survey results containing star survey data and API tag survey data.
* This part of the result will always be sent to the calling sdk
* This callback provides user with the ability to gain access to survey data
*/
submittedSurvey: CallSurvey,
/**
* This is the survey results containing free form text
* This part of the result will not be handled by composites
* User will need to collect and handle this information 100% on their own
* Free form text survey is not going to show in the UI if onSurveySubmitted is not populated
*/
improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;
};
/**
* Options for setting additional customizations related to personalized branding.
*/
branding?: {
/**
* Logo displayed on the configuration page.
*/
logo?: {
/**
* URL for the logo image.
*
* @remarks
* Recommended size is 80x80 pixels.
*/
url: string;
/**
* Alt text for the logo image.
*/
alt?: string;
/**
* The logo can be displayed as a circle.
*
* @defaultValue 'unset'
*/
shape?: 'unset' | 'circle';
};
/**
* Background image displayed on the configuration page.
*/
backgroundImage?: {
/**
* URL for the background image.
*
* @remarks
* Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
*/
url: string;
};
};
/**
* Options for settings related to spotlight.
*/
spotlight?: {
/**
* Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.
* @defaultValue false
*/
hideSpotlightButtons?: boolean;
};
/**
* Options for settings related to joining a call.
*/
joinCallOptions?: {
/**
* options for checking microphone permissions when joining a call.
* block on access will block the user from joining the call if the microphone permission is not granted.
* skip will allow the user to join the call without granting the microphone permission.
* @defaultValue 'requireMicrophoneAvailable'
*/
microphoneCheck?: 'requireMicrophoneAvailable' | 'skip';
};
};
/**
* A customizable UI composite for calling experience.
*
* @remarks Call composite min width/height are as follow:
* - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)
* - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)
*
* @public
*/
export declare const CallComposite: (props: CallCompositeProps) => JSX.Element;
/**
* @private
*/
export interface InternalCallCompositeProps {
overrideSidePane?: InjectedSidePaneProps;
onSidePaneIdChange?: (sidePaneId: string | undefined) => void;
onCloseChatPane?: () => void;
mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;
}
/** @private */
export declare const CallCompositeInner: (props: CallCompositeProps & InternalCallCompositeProps) => JSX.Element;
//# sourceMappingURL=CallComposite.d.ts.map