VideoTileProps interface

Package:

@azure/communication-react

Props for VideoTile.

Properties

alwaysShowLabelBackground	Show label background on the VideoTile
children	React Child components. Child Components will show as overlay component in the VideoTile.
contextualMenu	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.
displayName	Display Name of the Participant to be shown in the label.
initialsName	Name of the participant used to generate initials. For example, a name John Doe will display JD as initials.
isMirrored	Determines if the video is mirrored or not.
isMuted	Whether the video is muted or not.
isPinned	If true, the video tile will show the pin icon.
isSpeaking	Whether the participant in the videoTile is speaking. Shows a speaking indicator (border).
isSpotlighted	If true, the video tile will show the spotlighted icon.
mediaAccess	Media access state of the participant.
noVideoAvailableAriaLabel	Optional property to set the aria label of the video tile if there is no available stream.
onLongTouch	Callback triggered by video tile on touch and hold.
onRenderPlaceholder	Custom render Component function for no video is available. Render a Persona Icon if undefined.
overlay	Overlay component responsible for rendering reaction
participantState	The call connection state of the participant. For example, Hold means the participant is on hold.
personaMaxSize	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
personaMinSize	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
raisedHand	Whether the participant is raised hand. Show a indicator (border) and icon with order
reactionResources	Reactions resources' url and metadata.
renderElement	Component with the video stream.
showLabel	Show label on the VideoTile
showMuteIndicator	Whether to display a mute icon beside the user's display name.
strings	Strings to override in the component.
styles	Allows users to pass in an object contains custom CSS styles.
userId	user id for the VideoTile placeholder.

Property Details

alwaysShowLabelBackground

Show label background on the VideoTile

alwaysShowLabelBackground?: boolean

Property Value

boolean

children

React Child components. Child Components will show as overlay component in the VideoTile.

children?: ReactNode

Property Value

ReactNode

contextualMenu

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

Property Value

IContextualMenuProps

displayName

Display Name of the Participant to be shown in the label.

displayName?: string

Property Value

string

Remarks

displayName is used to generate avatar initials if initialsName is not provided.

initialsName

Name of the participant used to generate initials. For example, a name John Doe will display JD as initials.

initialsName?: string

Property Value

string

Remarks

displayName is used if this property is not specified.

isMirrored

Determines if the video is mirrored or not.

isMirrored?: boolean

Property Value

boolean

isMuted

Whether the video is muted or not.

isMuted?: boolean

Property Value

boolean

isPinned

If true, the video tile will show the pin icon.

isPinned?: boolean

Property Value

boolean

isSpeaking

Whether the participant in the videoTile is speaking. Shows a speaking indicator (border).

isSpeaking?: boolean

Property Value

boolean

isSpotlighted

If true, the video tile will show the spotlighted icon.

isSpotlighted?: boolean

Property Value

boolean

mediaAccess

Media access state of the participant.

mediaAccess?: MediaAccess

Property Value

MediaAccess

noVideoAvailableAriaLabel

Optional property to set the aria label of the video tile if there is no available stream.

noVideoAvailableAriaLabel?: string

Property Value

string

onLongTouch

Callback triggered by video tile on touch and hold.

onLongTouch?: () => void

Property Value

() => void

onRenderPlaceholder

Custom render Component function for no video is available. Render a Persona Icon if undefined.

onRenderPlaceholder?: OnRenderAvatarCallback

Property Value

OnRenderAvatarCallback

overlay

Overlay component responsible for rendering reaction

overlay?: null | Element

Property Value

null | Element

participantState

The call connection state of the participant. For example, Hold means the participant is on hold.

participantState?: ParticipantState

Property Value

ParticipantState

personaMaxSize

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

personaMaxSize?: number

Property Value

number

personaMinSize

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

personaMinSize?: number

Property Value

number

raisedHand

Whether the participant is raised hand. Show a indicator (border) and icon with order

raisedHand?: RaisedHand

Property Value

RaisedHand

reactionResources

Reactions resources' url and metadata.

reactionResources?: ReactionResources

Property Value

ReactionResources

renderElement

Component with the video stream.

renderElement?: null | Element

Property Value

null | Element

showLabel

Show label on the VideoTile

showLabel?: boolean

Property Value

boolean

showMuteIndicator

Whether to display a mute icon beside the user's display name.

showMuteIndicator?: boolean

Property Value

boolean

strings

Strings to override in the component.

strings?: VideoTileStrings

Property Value

VideoTileStrings

styles

Allows users to pass in an object contains custom CSS styles.

styles?: VideoTileStylesProps

Property Value

VideoTileStylesProps

userId

user id for the VideoTile placeholder.

userId?: string

Property Value

string