communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
167 lines • 6.3 kB
TypeScript
import { IContextualMenuProps, IStyle } from '@fluentui/react';
import React from 'react';
import { BaseCustomStyles, OnRenderAvatarCallback } from '../types';
import { RaisedHand, MediaAccess } from '../types';
import { ParticipantState } from '../types';
import { ReactionResources } from '../types/ReactionTypes';
/**
* Strings of {@link VideoTile} that can be overridden.
* @public
*/
export interface VideoTileStrings {
/** Aria label for announcing the remote video tile drawer menu */
moreOptionsButtonAriaLabel: string;
/** String for displaying the Ringing of the remote participant */
participantStateRinging: string;
/** String for displaying the Hold state of the remote participant */
participantStateHold: string;
/** String for displaying the reconnecting state of the remote participant */
participantReconnecting?: string;
/** String for the announcement of the muted state of the participant when muted */
moreOptionsParticipantMutedStateMutedAriaLabel: string;
/** String for the announcement of the unmuted state of the participant when unmuted */
moreOptionsParticipantMutedStateUnmutedAriaLabel: string;
/** String for the announcement of the participant has their hand raised */
moreOptionsParticipantHandRaisedAriaLabel: string;
/** String for the announcement of whether the participant is speaking or not */
moreOptionsParticipantIsSpeakingAriaLabel: string;
/** String for the announcement of whether the participant microphone disabled */
moreOptionsParticipantMicDisabledAriaLabel: string;
/** String for the announcement of whether the participant camera disabled */
moreOptionsParticipantCameraDisabledAriaLabel: string;
}
/**
* Fluent styles for {@link VideoTile}.
*
* @public
*/
export interface VideoTileStylesProps extends BaseCustomStyles {
/** Styles for video container. */
videoContainer?: IStyle;
/** Styles for container overlayed on the video container. */
overlayContainer?: IStyle;
/** Styles for displayName on the video container. */
displayNameContainer?: IStyle;
}
/**
* Props for {@link VideoTile}.
*
* @public
*/
export interface VideoTileProps {
/** React Child components. Child Components will show as overlay component in the VideoTile. */
children?: React.ReactNode;
/**
* Allows users to pass in an object contains custom CSS styles.
* @Example
* ```
* <VideoTile styles={{ root: { background: 'blue' } }} />
* ```
*/
styles?: VideoTileStylesProps;
/** user id for the VideoTile placeholder. */
userId?: string;
/** Component with the video stream. */
renderElement?: JSX.Element | null;
/**
* Overlay component responsible for rendering reaction
*/
overlay?: JSX.Element | null;
/** Determines if the video is mirrored or not. */
isMirrored?: boolean;
/** Custom render Component function for no video is available. Render a Persona Icon if undefined. */
onRenderPlaceholder?: OnRenderAvatarCallback;
/**
* Show label on the VideoTile
* @defaultValue true
*/
showLabel?: boolean;
/**
* Show label background on the VideoTile
* @defaultValue false
*/
alwaysShowLabelBackground?: boolean;
/**
* Whether to display a mute icon beside the user's display name.
* @defaultValue true
*/
showMuteIndicator?: boolean;
/**
* Whether the video is muted or not.
*/
isMuted?: boolean;
/**
* If true, the video tile will show the pin icon.
*/
isPinned?: boolean;
/**
* Display Name of the Participant to be shown in the label.
* @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.
*/
displayName?: string;
/**
* Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.
* @remarks `displayName` is used if this property is not specified.
*/
initialsName?: string;
/**
* Minimum size of the persona avatar in px.
* The persona avatar is the default placeholder shown when no video stream is available.
* For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona
* @defaultValue 32px
*/
personaMinSize?: number;
/**
* Maximum size of the personal avatar in px.
* The persona avatar is the default placeholder shown when no video stream is available.
* For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona
* @defaultValue 100px
*/
personaMaxSize?: number;
/** Optional property to set the aria label of the video tile if there is no available stream. */
noVideoAvailableAriaLabel?: string;
/** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */
isSpeaking?: boolean;
/** Whether the participant is raised hand. Show a indicator (border) and icon with order */
raisedHand?: RaisedHand;
/**
* The call connection state of the participant.
* For example, `Hold` means the participant is on hold.
*/
participantState?: ParticipantState;
/**
* Strings to override in the component.
*/
strings?: VideoTileStrings;
/**
* Display custom menu items in the VideoTile's contextual menu.
* Uses Fluent UI ContextualMenu.
* An ellipses icon will be displayed to open the contextual menu if this prop is defined.
*/
contextualMenu?: IContextualMenuProps;
/**
* Callback triggered by video tile on touch and hold.
*/
onLongTouch?: () => void;
/**
* If true, the video tile will show the spotlighted icon.
*/
isSpotlighted?: boolean;
/**
* Reactions resources' url and metadata.
*/
reactionResources?: ReactionResources;
/**
* Media access state of the participant.
*/
mediaAccess?: MediaAccess;
}
/**
* A component to render the video stream for a single call participant.
*
* Use with {@link GridLayout} in a {@link VideoGallery}.
*
* @public
*/
export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
//# sourceMappingURL=VideoTile.d.ts.map