@azure/communication-react 1.23.0-alpha-202501080016 → 1.23.0-alpha-202501100017

package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  participant: VideoGalleryParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n    startSpotlightVideoTileMenuLabel?: string;\n    addSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightOnSelfVideoTileMenuLabel?: string;\n    spotlightLimitReachedMenuTitle?: string;\n    muteParticipantMenuItemLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    forbidAudioTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    permitAudioTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    forbidVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    permitVideoTileMenuLabel?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  isSpotlighted?: boolean;\n  spotlightedParticipantUserIds?: string[];\n  onStartSpotlight?: (userIds: string[]) => void;\n  onStopSpotlight?: (userIds: string[]) => void;\n  maxParticipantsToSpotlight?: number;\n  myUserId?: string;\n  onMuteParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(media-access) */\n  onForbidAudio?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onPermitAudio?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onForbidVideo?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onPermitVideo?: (userIds: string[]) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    participant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    spotlightedParticipantUserIds = [],\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    myUserId,\n    onMuteParticipant,\n    /* @conditional-compile-remove(media-access) */\n    onForbidAudio,\n    /* @conditional-compile-remove(media-access) */\n    onPermitAudio,\n    /* @conditional-compile-remove(media-access) */\n    onForbidVideo,\n    /* @conditional-compile-remove(media-access) */\n    onPermitVideo\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.participant.videoStream?.scalingMode;\n  }, [props.participant.videoStream?.scalingMode]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (onMuteParticipant && strings?.muteParticipantMenuItemLabel) {\n      items.push({\n        key: 'mute',\n        text: strings?.muteParticipantMenuItemLabel,\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onMuteParticipant(participant.userId),\n        'data-ui-id': 'video-tile-mute-participant',\n        ariaLabel: strings?.muteParticipantMenuItemLabel,\n        disabled: participant.isMuted\n      });\n    }\n\n    /* @conditional-compile-remove(media-access) */\n    if (\n      participant.canAudioBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isAudioPermitted &&\n      onPermitAudio\n    ) {\n      items.push({\n        key: 'permitAudio',\n        text: strings?.permitAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitAudio([participant.userId]),\n        'data-ui-id': 'audio-tile-permit-audio',\n        ariaLabel: strings?.permitAudioTileMenuLabel\n      });\n    }\n    /* @conditional-compile-remove(media-access) */\n    if (participant.canAudioBeForbidden && participant.mediaAccess?.isAudioPermitted && onForbidAudio) {\n      items.push({\n        key: 'forbidAudio',\n        text: strings?.forbidAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidAudio([participant.userId]),\n        'data-ui-id': 'audio-tile-forbid-audio',\n        ariaLabel: strings?.forbidAudioTileMenuLabel\n      });\n    }\n\n    /* @conditional-compile-remove(media-access) */\n    if (\n      participant.canVideoBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isVideoPermitted &&\n      onPermitVideo\n    ) {\n      items.push({\n        key: 'permitVideo',\n        text: strings?.permitVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitVideo([participant.userId]),\n        'data-ui-id': 'video-tile-permit-video',\n        ariaLabel: strings?.permitVideoTileMenuLabel\n      });\n    }\n    /* @conditional-compile-remove(media-access) */\n    if (participant.canVideoBeForbidden && participant.mediaAccess?.isVideoPermitted && onForbidVideo) {\n      items.push({\n        key: 'forbidVideo',\n        text: strings?.forbidVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidVideo([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-video',\n        ariaLabel: strings?.forbidVideoTileMenuLabel\n      });\n    }\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUnpinParticipant(participant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onPinParticipant(participant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem || isSpotlighted,\n          ariaLabel: strings.pinParticipantForMe\n        });\n      }\n    }\n\n    if (isSpotlighted) {\n      const stopSpotlightMenuLabel =\n        myUserId === participant.userId\n          ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n          : strings?.stopSpotlightVideoTileMenuLabel;\n      if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: stopSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight([participant.userId]),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel =\n        spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n          ? strings?.addSpotlightVideoTileMenuLabel\n          : strings?.startSpotlightVideoTileMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n        ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n        : false;\n      if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStartSpotlight([participant.userId]),\n          ariaLabel: startSpotlightMenuLabel,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        items.push({\n          key: 'fillRemoteParticipantFrame',\n          text: strings.fillRemoteParticipantFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFill',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Crop');\n            view?.updateScalingMode('Crop');\n          },\n          'data-ui-id': 'video-tile-fill-frame',\n          ariaLabel: strings.fillRemoteParticipantFrame\n        });\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {}, calloutProps: { preventDismissOnEvent }, shouldFocusOnContainer: false };\n  }, [\n    onMuteParticipant,\n    strings,\n    participant.isMuted,\n    participant.userId,\n    participant.displayName,\n    isPinned,\n    isSpotlighted,\n    scalingMode,\n    onUnpinParticipant,\n    onPinParticipant,\n    toggleAnnouncerString,\n    disablePinMenuItem,\n    myUserId,\n    onStopSpotlight,\n    spotlightedParticipantUserIds,\n    maxParticipantsToSpotlight,\n    onStartSpotlight,\n    onUpdateScalingMode,\n    view,\n    /* @conditional-compile-remove(media-access) */\n    participant.canAudioBeForbidden,\n    /* @conditional-compile-remove(media-access) */\n    participant.canVideoBeForbidden,\n    /* @conditional-compile-remove(media-access) */\n    participant.mediaAccess,\n    /* @conditional-compile-remove(media-access) */\n    onPermitAudio,\n    /* @conditional-compile-remove(media-access) */\n    onForbidAudio,\n    /* @conditional-compile-remove(media-access) */\n    onPermitVideo,\n    /* @conditional-compile-remove(media-access) */\n    onForbidVideo\n  ]);\n\n  return contextualMenuProps;\n};\n"]}
+{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  participant: VideoGalleryParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n    startSpotlightVideoTileMenuLabel?: string;\n    addSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightVideoTileMenuLabel?: string;\n    stopSpotlightOnSelfVideoTileMenuLabel?: string;\n    spotlightLimitReachedMenuTitle?: string;\n    muteParticipantMenuItemLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    forbidAudioTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    permitAudioTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    forbidVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(media-access) */\n    permitVideoTileMenuLabel?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  isSpotlighted?: boolean;\n  spotlightedParticipantUserIds?: string[];\n  onStartSpotlight?: (userIds: string[]) => void;\n  onStopSpotlight?: (userIds: string[]) => void;\n  maxParticipantsToSpotlight?: number;\n  myUserId?: string;\n  onMuteParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(media-access) */\n  onForbidAudio?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onPermitAudio?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onForbidVideo?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(media-access) */\n  onPermitVideo?: (userIds: string[]) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    participant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    spotlightedParticipantUserIds = [],\n    isSpotlighted,\n    onStartSpotlight,\n    onStopSpotlight,\n    maxParticipantsToSpotlight,\n    myUserId,\n    onMuteParticipant,\n    /* @conditional-compile-remove(media-access) */\n    onForbidAudio,\n    /* @conditional-compile-remove(media-access) */\n    onPermitAudio,\n    /* @conditional-compile-remove(media-access) */\n    onForbidVideo,\n    /* @conditional-compile-remove(media-access) */\n    onPermitVideo\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.participant.videoStream?.scalingMode;\n  }, [props.participant.videoStream?.scalingMode]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (onMuteParticipant && strings?.muteParticipantMenuItemLabel) {\n      items.push({\n        key: 'mute',\n        text: strings?.muteParticipantMenuItemLabel,\n        iconProps: {\n          iconName: 'ContextualMenuMicMutedIcon',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onMuteParticipant(participant.userId),\n        'data-ui-id': 'video-tile-mute-participant',\n        ariaLabel: strings?.muteParticipantMenuItemLabel,\n        disabled: participant.isMuted\n      });\n    }\n\n    /* @conditional-compile-remove(media-access) */\n    if (\n      participant.canAudioBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isAudioPermitted &&\n      onPermitAudio\n    ) {\n      items.push({\n        key: 'permitAudio',\n        text: strings?.permitAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitAudio([participant.userId]),\n        'data-ui-id': 'video-tile-permit-audio',\n        ariaLabel: strings?.permitAudioTileMenuLabel\n      });\n    }\n    /* @conditional-compile-remove(media-access) */\n    if (participant.canAudioBeForbidden && participant.mediaAccess?.isAudioPermitted && onForbidAudio) {\n      items.push({\n        key: 'forbidAudio',\n        text: strings?.forbidAudioTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonMicProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidAudio([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-audio',\n        ariaLabel: strings?.forbidAudioTileMenuLabel\n      });\n    }\n\n    /* @conditional-compile-remove(media-access) */\n    if (\n      participant.canVideoBeForbidden &&\n      participant.mediaAccess &&\n      !participant.mediaAccess.isVideoPermitted &&\n      onPermitVideo\n    ) {\n      items.push({\n        key: 'permitVideo',\n        text: strings?.permitVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraOn',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onPermitVideo([participant.userId]),\n        'data-ui-id': 'video-tile-permit-video',\n        ariaLabel: strings?.permitVideoTileMenuLabel\n      });\n    }\n    /* @conditional-compile-remove(media-access) */\n    if (participant.canVideoBeForbidden && participant.mediaAccess?.isVideoPermitted && onForbidVideo) {\n      items.push({\n        key: 'forbidVideo',\n        text: strings?.forbidVideoTileMenuLabel,\n        iconProps: {\n          iconName: 'ControlButtonCameraProhibited',\n          styles: { root: { lineHeight: 0 } }\n        },\n        onClick: () => onForbidVideo([participant.userId]),\n        'data-ui-id': 'video-tile-forbid-video',\n        ariaLabel: strings?.forbidVideoTileMenuLabel\n      });\n    }\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUnpinParticipant(participant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onPinParticipant(participant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem || isSpotlighted,\n          ariaLabel: strings.pinParticipantForMe\n        });\n      }\n    }\n\n    if (isSpotlighted) {\n      const stopSpotlightMenuLabel =\n        myUserId === participant.userId\n          ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n          : strings?.stopSpotlightVideoTileMenuLabel;\n      if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: stopSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight([participant.userId]),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel =\n        spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n          ? strings?.addSpotlightVideoTileMenuLabel\n          : strings?.startSpotlightVideoTileMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n        ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n        : false;\n      if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStartSpotlight([participant.userId]),\n          ariaLabel: startSpotlightMenuLabel,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        items.push({\n          key: 'fillRemoteParticipantFrame',\n          text: strings.fillRemoteParticipantFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFill',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.userId, 'Crop');\n            view?.updateScalingMode('Crop');\n          },\n          'data-ui-id': 'video-tile-fill-frame',\n          ariaLabel: strings.fillRemoteParticipantFrame\n        });\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {}, calloutProps: { preventDismissOnEvent }, shouldFocusOnContainer: false };\n  }, [\n    onMuteParticipant,\n    strings,\n    participant.isMuted,\n    participant.userId,\n    participant.displayName,\n    isPinned,\n    isSpotlighted,\n    scalingMode,\n    onUnpinParticipant,\n    onPinParticipant,\n    toggleAnnouncerString,\n    disablePinMenuItem,\n    myUserId,\n    onStopSpotlight,\n    spotlightedParticipantUserIds,\n    maxParticipantsToSpotlight,\n    onStartSpotlight,\n    onUpdateScalingMode,\n    view,\n    /* @conditional-compile-remove(media-access) */\n    participant.canAudioBeForbidden,\n    /* @conditional-compile-remove(media-access) */\n    participant.canVideoBeForbidden,\n    /* @conditional-compile-remove(media-access) */\n    participant.mediaAccess,\n    /* @conditional-compile-remove(media-access) */\n    onPermitAudio,\n    /* @conditional-compile-remove(media-access) */\n    onForbidAudio,\n    /* @conditional-compile-remove(media-access) */\n    onPermitVideo,\n    /* @conditional-compile-remove(media-access) */\n    onForbidVideo\n  ]);\n\n  return contextualMenuProps;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoTile.d.ts

@@ -26,6 +26,10 @@ export interface VideoTileStrings {
     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}.

package/dist/dist-esm/react-components/src/components/VideoTile.js

@@ -6,7 +6,7 @@ import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { RaisedHandIcon } from './assets/RaisedHandIcon';
-import { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, tileInfoContainerStyle, participantStateStringStyles, videoTileHighContrastStyles } from './styles/VideoTile.styles';
+import { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, tileInfoContainerStyle, participantStateStringStyles, videoTileHighContrastStyles, iconsGroupContainerStyle } from './styles/VideoTile.styles';
 import { pinIconStyle } from './styles/VideoTile.styles';
 import useLongPress from './utils/useLongPress';
 import { moreButtonStyles } from './styles/VideoTile.styles';
@@ -31,17 +31,19 @@ const videoTileMoreMenuProps = {
 const VideoTileMoreOptionsButton = (props) => {
     const locale = useLocale().strings.videoTile;
     const theme = useTheme();
-    const { contextualMenu, canShowContextMenuButton, participantDisplayName, participantHandRaised, participantIsSpeaking, participantState, participantIsMuted } = props;
+    const { contextualMenu, canShowContextMenuButton, participantDisplayName, participantHandRaised, participantIsSpeaking, participantState, participantIsMuted, isMicDisabled, isCameraDisabled } = props;
     const [moreButtonAiraDescription, setMoreButtonAriaDescription] = useState('');
     useEffect(() => {
-        setMoreButtonAriaDescription(formatMoreButtonAriaDescription(participantDisplayName, participantIsMuted, participantHandRaised, participantState, participantIsSpeaking, locale));
+        setMoreButtonAriaDescription(formatMoreButtonAriaDescription(participantDisplayName, participantIsMuted, participantHandRaised, participantState, participantIsSpeaking, isMicDisabled, isCameraDisabled, locale));
     }, [
         participantDisplayName,
         participantHandRaised,
         participantIsMuted,
         participantIsSpeaking,
         participantState,
-        locale
+        locale,
+        isMicDisabled,
+        isCameraDisabled
     ]);
     if (!contextualMenu) {
         return React.createElement(React.Fragment, null);
@@ -152,6 +154,12 @@ export const VideoTile = (props) => {
     const canShowContextMenuButton = isHovered || isFocused;
     let raisedHandBackgroundColor = '';
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
+    const participantMediaAccessIcons = useMemo(() => canShowLabel || participantStateString
+        ? getMediaAccessIconsTrampoline(showMuteIndicator, isMuted, 
+        /* @conditional-compile-remove(media-access) */
+        mediaAccess)
+        : undefined, [canShowLabel, isMuted, mediaAccess, participantStateString, showMuteIndicator]);
+    const canShowParticipantIcons = participantMediaAccessIcons || isSpotlighted || isPinned;
     return (React.createElement(Stack, Object.assign({ "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
             borderRadius: theme.effects.roundedCorner4
@@ -177,14 +185,13 @@ export const VideoTile = (props) => {
                 React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
                     canShowLabel && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
                     participantStateString && (React.createElement(Text, { className: mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
-                    getMediaAccessIconsTrampoline(showMuteIndicator, isMuted, 
-                    /* @conditional-compile-remove(media-access) */
-                    mediaAccess),
-                    isSpotlighted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-                        React.createElement(Icon, { iconName: "VideoTileSpotlighted" }))),
-                    isPinned && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-                        React.createElement(Icon, { iconName: "VideoTilePinned", className: mergeStyles(pinIconStyle) }))),
-                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, participantDisplayName: displayName, participantHandRaised: !!raisedHand, participantIsMuted: isMuted, participantState: participantStateString, participantIsSpeaking: isSpeaking, canShowContextMenuButton: canShowContextMenuButton })))),
+                    canShowParticipantIcons && (React.createElement(Stack, { horizontal: true, className: mergeStyles(iconsGroupContainerStyle) },
+                        participantMediaAccessIcons,
+                        isSpotlighted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                            React.createElement(Icon, { iconName: "VideoTileSpotlighted" }))),
+                        isPinned && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                            React.createElement(Icon, { iconName: "VideoTilePinned", className: mergeStyles(pinIconStyle) }))))),
+                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, participantDisplayName: displayName, participantHandRaised: !!raisedHand, participantIsMuted: isMuted, participantState: participantStateString, participantIsSpeaking: isSpeaking, canShowContextMenuButton: canShowContextMenuButton, isMicDisabled: (mediaAccess === null || mediaAccess === void 0 ? void 0 : mediaAccess.isAudioPermitted) === false, isCameraDisabled: (mediaAccess === null || mediaAccess === void 0 ? void 0 : mediaAccess.isVideoPermitted) === false })))),
             children && (React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
             raisedHand && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(Stack.Item, null,
@@ -193,14 +200,24 @@ export const VideoTile = (props) => {
                     React.createElement(RaisedHandIcon, null)))))));
 };
 const getMediaAccessIconsTrampoline = (showMuteIndicator, isMuted, mediaAccess) => {
+    /* @conditional-compile-remove(media-access) */
+    const cameraForbidIcon = mediaAccess && !(mediaAccess === null || mediaAccess === void 0 ? void 0 : mediaAccess.isVideoPermitted) ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+        React.createElement(Icon, { iconName: "ControlButtonCameraProhibitedSmall" }))) : undefined;
+    /* @conditional-compile-remove(media-access) */
+    const micOffIcon = (mediaAccess ? mediaAccess.isAudioPermitted : true) && showMuteIndicator && isMuted ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+        React.createElement(Icon, { iconName: "VideoTileMicOff" }))) : undefined;
+    /* @conditional-compile-remove(media-access) */
+    const micForbidIcon = mediaAccess && !(mediaAccess === null || mediaAccess === void 0 ? void 0 : mediaAccess.isAudioPermitted) && showMuteIndicator ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+        React.createElement(Icon, { iconName: "ControlButtonMicProhibitedSmall" }))) : undefined;
+    /* @conditional-compile-remove(media-access) */
+    if (!(cameraForbidIcon || micOffIcon || micForbidIcon)) {
+        return undefined;
+    }
     /* @conditional-compile-remove(media-access) */
     return (React.createElement(React.Fragment, null,
-        mediaAccess && !(mediaAccess === null || mediaAccess === void 0 ? void 0 : mediaAccess.isVideoPermitted) ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-            React.createElement(Icon, { iconName: "ControlButtonCameraProhibitedSmall" }))) : undefined,
-        (mediaAccess ? mediaAccess.isAudioPermitted : true) && showMuteIndicator && isMuted ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-            React.createElement(Icon, { iconName: "VideoTileMicOff" }))) : undefined,
-        mediaAccess && !(mediaAccess === null || mediaAccess === void 0 ? void 0 : mediaAccess.isAudioPermitted) && showMuteIndicator ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-            React.createElement(Icon, { iconName: "ControlButtonMicProhibitedSmall" }))) : undefined));
+        cameraForbidIcon,
+        micOffIcon,
+        micForbidIcon));
     return showMuteIndicator && isMuted ? (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
         React.createElement(Icon, { iconName: "VideoTileMicOff" }))) : undefined;
 };

package/dist/dist-esm/react-components/src/components/VideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DirectionalHint,\n  Icon,\n  IconButton,\n  IContextualMenuProps,\n  IStyle,\n  mergeStyles,\n  Persona,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(media-access) */\nimport { MediaAccess } from '../types';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n\nimport { ParticipantState } from '../types';\nimport {\n  disabledVideoHint,\n  displayNameStyle,\n  iconContainerStyle,\n  overlayContainerStyles,\n  rootStyles,\n  videoContainerStyles,\n  tileInfoContainerStyle,\n  participantStateStringStyles,\n  videoTileHighContrastStyles\n} from './styles/VideoTile.styles';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { formatMoreButtonAriaDescription } from './utils';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @public\n */\nexport interface VideoTileStrings {\n  /** Aria label for announcing the remote video tile drawer menu */\n  moreOptionsButtonAriaLabel: string;\n  /** String for displaying the Ringing of the remote participant */\n  participantStateRinging: string;\n  /** String for displaying the Hold state of the remote participant */\n  participantStateHold: string;\n  /* @conditional-compile-remove(remote-ufd) */\n  /** String for displaying the reconnecting state of the remote participant */\n  participantReconnecting?: string;\n  /** String for the announcement of the muted state of the participant when muted */\n  moreOptionsParticipantMutedStateMutedAriaLabel: string;\n  /** String for the announcement of the unmuted state of the participant when unmuted */\n  moreOptionsParticipantMutedStateUnmutedAriaLabel: string;\n  /** String for the announcement of the participant has their hand raised */\n  moreOptionsParticipantHandRaisedAriaLabel: string;\n  /** String for the announcement of whether the participant is speaking or not */\n  moreOptionsParticipantIsSpeakingAriaLabel: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /**\n   * Overlay component responsible for rendering reaction\n   */\n  overlay?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Show label background on the VideoTile\n   * @defaultValue false\n   */\n  alwaysShowLabelBackground?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * If true, the video tile will show the pin icon.\n   */\n  isPinned?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Strings to override in the component.\n   */\n  strings?: VideoTileStrings;\n  /**\n   * Display custom menu items in the VideoTile's contextual menu.\n   * Uses Fluent UI ContextualMenu.\n   * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n   */\n  contextualMenu?: IContextualMenuProps;\n  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n  /**\n   * If true, the video tile will show the spotlighted icon.\n   */\n  isSpotlighted?: boolean;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources?: ReactionResources;\n  /* @conditional-compile-remove(media-access) */\n  /**\n   * Media access state of the participant.\n   */\n  mediaAccess?: MediaAccess;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n  return (\n    <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && (\n          <Persona\n            coinSize={coinSize}\n            hidePersonaDetails={hidePersonaDetails}\n            text={text ?? ''}\n            initialsTextColor=\"white\"\n            aria-label={noVideoAvailableAriaLabel ?? ''}\n            showOverflowTooltip={false}\n          />\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: { container: { maxWidth: '8rem' } }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  participantDisplayName: string | undefined;\n  participantState: string | undefined;\n  participantHandRaised: boolean;\n  participantIsSpeaking: boolean | undefined;\n  participantIsMuted: boolean | undefined;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const locale = useLocale().strings.videoTile;\n  const theme = useTheme();\n\n  const {\n    contextualMenu,\n    canShowContextMenuButton,\n    participantDisplayName,\n    participantHandRaised,\n    participantIsSpeaking,\n    participantState,\n    participantIsMuted\n  } = props;\n  const [moreButtonAiraDescription, setMoreButtonAriaDescription] = useState<string>('');\n\n  useEffect(() => {\n    setMoreButtonAriaDescription(\n      formatMoreButtonAriaDescription(\n        participantDisplayName,\n        participantIsMuted,\n        participantHandRaised,\n        participantState,\n        participantIsSpeaking,\n        locale\n      )\n    );\n  }, [\n    participantDisplayName,\n    participantHandRaised,\n    participantIsMuted,\n    participantIsSpeaking,\n    participantState,\n    locale\n  ]);\n\n  if (!contextualMenu) {\n    return <></>;\n  }\n\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return (\n    <IconButton\n      data-ui-id=\"video-tile-more-options-button\"\n      ariaLabel={moreButtonAiraDescription}\n      styles={moreButtonStyles(theme)}\n      menuIconProps={videoTileMoreMenuIconProps}\n      menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n      iconProps={{ iconName: optionsIcon }}\n    />\n  );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    isSpotlighted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    overlay: reactionOverlay,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu,\n    /* @conditional-compile-remove(media-access) */\n    mediaAccess\n  } = props;\n\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const locale = useLocale();\n  const theme = useTheme();\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const isVideoRendered = !!renderElement;\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      if (!entries[0]) {\n        return;\n      }\n      const { width, height } = entries[0].contentRect;\n      const personaCalcSize = Math.min(width, height) / 3;\n      // we only want to set the persona size if it has changed\n      if (personaCalcSize !== personaSize) {\n        setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  // TODO: Remove after calling sdk fix the keybaord focus\n  useEffect(() => {\n    // PPTLive stream id is null\n    if (videoTileRef.current?.id) {\n      return;\n    }\n    let observer: MutationObserver | undefined;\n    if (videoTileRef.current) {\n      observer = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            const iframe = document.querySelector('iframe');\n            if (iframe) {\n              if (!iframe.getAttribute('tabIndex')) {\n                iframe.setAttribute('tabIndex', '-1');\n              }\n            }\n          }\n        }\n      });\n\n      observer.observe(videoTileRef.current, { childList: true, subtree: true });\n    }\n\n    return () => {\n      observer?.disconnect();\n    };\n  }, [displayName, renderElement]);\n\n  const useLongPressProps = useMemo(() => {\n    return {\n      onLongPress: () => {\n        props.onLongTouch?.();\n      },\n      touchEventsOnly: true\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.onLongTouch]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n\n  const videoHintWithBorderRadius = mergeStyles(disabledVideoHint, {\n    borderRadius: theme.effects.roundedCorner4,\n    backgroundColor: callingPalette.videoTileLabelBackgroundLight\n  });\n\n  const tileInfoStyle = useMemo(\n    () =>\n      mergeStyles(\n        isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint,\n        styles?.displayNameContainer\n      ),\n    [isVideoRendered, videoHintWithBorderRadius, styles?.displayNameContainer, props.alwaysShowLabelBackground]\n  );\n\n  const ids = useIdentifiers();\n\n  const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n  const participantStateString = getParticipantStateString(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n\n  return (\n    <Stack\n      data-ui-id={ids.videoTile}\n      className={mergeStyles(\n        rootStyles,\n        {\n          background: theme.palette.neutralLighter,\n          borderRadius: theme.effects.roundedCorner4\n        },\n        isSpeaking || raisedHand\n          ? {\n              '&::after': {\n                content: `''`,\n                position: 'absolute',\n                border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n                borderRadius: theme.effects.roundedCorner4,\n                width: '100%',\n                height: '100%',\n                pointerEvents: 'none'\n              }\n            }\n          : {},\n        videoTileHighContrastStyles(theme),\n        styles?.root\n      )}\n      {...longPressHandlers}\n    >\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%' }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? (\n          <Stack\n            className={mergeStyles(\n              videoContainerStyles,\n              isMirrored && { transform: 'scaleX(-1)' },\n              styles?.videoContainer\n            )}\n          >\n            {renderElement}\n          </Stack>\n        ) : (\n          <Stack\n            className={mergeStyles(videoContainerStyles, {\n              opacity: participantStateString || props.participantState === 'Idle' ? 0.4 : 1\n            })}\n          >\n            {onRenderPlaceholder ? (\n              onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n            ) : (\n              <DefaultPlaceholder {...placeholderOptions} />\n            )}\n          </Stack>\n        )}\n        {reactionOverlay}\n        {(canShowLabel || participantStateString) && (\n          <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && (\n                <Text\n                  className={mergeStyles(displayNameStyle)}\n                  title={displayName}\n                  style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n                  data-ui-id=\"video-tile-display-name\"\n                >\n                  {displayName}\n                </Text>\n              )}\n              {participantStateString && (\n                <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>\n              )}\n              {getMediaAccessIconsTrampoline(\n                showMuteIndicator,\n                isMuted,\n                /* @conditional-compile-remove(media-access) */\n                mediaAccess\n              )}\n              {isSpotlighted && (\n                <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileSpotlighted\" />\n                </Stack>\n              )}\n              {isPinned && (\n                <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>\n              )}\n              <VideoTileMoreOptionsButton\n                contextualMenu={contextualMenu}\n                participantDisplayName={displayName}\n                participantHandRaised={!!raisedHand}\n                participantIsMuted={isMuted}\n                participantState={participantStateString}\n                participantIsSpeaking={isSpeaking}\n                canShowContextMenuButton={canShowContextMenuButton}\n              />\n            </Stack>\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n        {raisedHand && (\n          <Stack\n            horizontal={true}\n            tokens={{ childrenGap: '0.2rem' }}\n            className={raiseHandContainerStyles(theme, !canShowLabel)}\n          >\n            <Stack.Item>\n              <Text>{raisedHand.raisedHandOrderPosition}</Text>\n            </Stack.Item>\n            <Stack.Item>\n              <RaisedHandIcon />\n            </Stack.Item>\n          </Stack>\n        )}\n      </div>\n    </Stack>\n  );\n};\n\nconst getMediaAccessIconsTrampoline = (\n  showMuteIndicator: boolean,\n  isMuted?: boolean,\n  mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess\n): JSX.Element | undefined => {\n  /* @conditional-compile-remove(media-access) */\n  return (\n    <>\n      {mediaAccess && !mediaAccess?.isVideoPermitted ? (\n        <Stack className={mergeStyles(iconContainerStyle)}>\n          <Icon iconName=\"ControlButtonCameraProhibitedSmall\" />\n        </Stack>\n      ) : undefined}\n      {(mediaAccess ? mediaAccess.isAudioPermitted : true) && showMuteIndicator && isMuted ? (\n        <Stack className={mergeStyles(iconContainerStyle)}>\n          <Icon iconName=\"VideoTileMicOff\" />\n        </Stack>\n      ) : undefined}\n      {mediaAccess && !mediaAccess?.isAudioPermitted && showMuteIndicator ? (\n        <Stack className={mergeStyles(iconContainerStyle)}>\n          <Icon iconName=\"ControlButtonMicProhibitedSmall\" />\n        </Stack>\n      ) : undefined}\n    </>\n  );\n\n  return showMuteIndicator && isMuted ? (\n    <Stack className={mergeStyles(iconContainerStyle)}>\n      <Icon iconName=\"VideoTileMicOff\" />\n    </Stack>\n  ) : undefined;\n};\n\nconst getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  const strings = { ...locale.strings.videoTile, ...props.strings };\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n      ? strings?.participantStateHold\n      : undefined;\n};\n\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DirectionalHint,\n  Icon,\n  IconButton,\n  IContextualMenuProps,\n  IStyle,\n  mergeStyles,\n  Persona,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(media-access) */\nimport { MediaAccess } from '../types';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n\nimport { ParticipantState } from '../types';\nimport {\n  disabledVideoHint,\n  displayNameStyle,\n  iconContainerStyle,\n  overlayContainerStyles,\n  rootStyles,\n  videoContainerStyles,\n  tileInfoContainerStyle,\n  participantStateStringStyles,\n  videoTileHighContrastStyles,\n  iconsGroupContainerStyle\n} from './styles/VideoTile.styles';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { formatMoreButtonAriaDescription } from './utils';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @public\n */\nexport interface VideoTileStrings {\n  /** Aria label for announcing the remote video tile drawer menu */\n  moreOptionsButtonAriaLabel: string;\n  /** String for displaying the Ringing of the remote participant */\n  participantStateRinging: string;\n  /** String for displaying the Hold state of the remote participant */\n  participantStateHold: string;\n  /* @conditional-compile-remove(remote-ufd) */\n  /** String for displaying the reconnecting state of the remote participant */\n  participantReconnecting?: string;\n  /** String for the announcement of the muted state of the participant when muted */\n  moreOptionsParticipantMutedStateMutedAriaLabel: string;\n  /** String for the announcement of the unmuted state of the participant when unmuted */\n  moreOptionsParticipantMutedStateUnmutedAriaLabel: string;\n  /** String for the announcement of the participant has their hand raised */\n  moreOptionsParticipantHandRaisedAriaLabel: string;\n  /** String for the announcement of whether the participant is speaking or not */\n  moreOptionsParticipantIsSpeakingAriaLabel: string;\n  /** String for the announcement of whether the participant microphone disabled */\n  moreOptionsParticipantMicDisabledAriaLabel: string;\n  /** String for the announcement of whether the participant camera disabled */\n  moreOptionsParticipantCameraDisabledAriaLabel: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /**\n   * Overlay component responsible for rendering reaction\n   */\n  overlay?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Show label background on the VideoTile\n   * @defaultValue false\n   */\n  alwaysShowLabelBackground?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * If true, the video tile will show the pin icon.\n   */\n  isPinned?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Strings to override in the component.\n   */\n  strings?: VideoTileStrings;\n  /**\n   * Display custom menu items in the VideoTile's contextual menu.\n   * Uses Fluent UI ContextualMenu.\n   * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n   */\n  contextualMenu?: IContextualMenuProps;\n  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n  /**\n   * If true, the video tile will show the spotlighted icon.\n   */\n  isSpotlighted?: boolean;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources?: ReactionResources;\n  /* @conditional-compile-remove(media-access) */\n  /**\n   * Media access state of the participant.\n   */\n  mediaAccess?: MediaAccess;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n  return (\n    <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && (\n          <Persona\n            coinSize={coinSize}\n            hidePersonaDetails={hidePersonaDetails}\n            text={text ?? ''}\n            initialsTextColor=\"white\"\n            aria-label={noVideoAvailableAriaLabel ?? ''}\n            showOverflowTooltip={false}\n          />\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: { container: { maxWidth: '8rem' } }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  participantDisplayName: string | undefined;\n  participantState: string | undefined;\n  participantHandRaised: boolean;\n  participantIsSpeaking: boolean | undefined;\n  participantIsMuted: boolean | undefined;\n  canShowContextMenuButton: boolean;\n  isMicDisabled?: boolean;\n  isCameraDisabled?: boolean;\n}): JSX.Element => {\n  const locale = useLocale().strings.videoTile;\n  const theme = useTheme();\n\n  const {\n    contextualMenu,\n    canShowContextMenuButton,\n    participantDisplayName,\n    participantHandRaised,\n    participantIsSpeaking,\n    participantState,\n    participantIsMuted,\n    isMicDisabled,\n    isCameraDisabled\n  } = props;\n  const [moreButtonAiraDescription, setMoreButtonAriaDescription] = useState<string>('');\n\n  useEffect(() => {\n    setMoreButtonAriaDescription(\n      formatMoreButtonAriaDescription(\n        participantDisplayName,\n        participantIsMuted,\n        participantHandRaised,\n        participantState,\n        participantIsSpeaking,\n        isMicDisabled,\n        isCameraDisabled,\n        locale\n      )\n    );\n  }, [\n    participantDisplayName,\n    participantHandRaised,\n    participantIsMuted,\n    participantIsSpeaking,\n    participantState,\n    locale,\n    isMicDisabled,\n    isCameraDisabled\n  ]);\n\n  if (!contextualMenu) {\n    return <></>;\n  }\n\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return (\n    <IconButton\n      data-ui-id=\"video-tile-more-options-button\"\n      ariaLabel={moreButtonAiraDescription}\n      styles={moreButtonStyles(theme)}\n      menuIconProps={videoTileMoreMenuIconProps}\n      menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n      iconProps={{ iconName: optionsIcon }}\n    />\n  );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    isSpotlighted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    overlay: reactionOverlay,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu,\n    /* @conditional-compile-remove(media-access) */\n    mediaAccess\n  } = props;\n\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const locale = useLocale();\n  const theme = useTheme();\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const isVideoRendered = !!renderElement;\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      if (!entries[0]) {\n        return;\n      }\n      const { width, height } = entries[0].contentRect;\n      const personaCalcSize = Math.min(width, height) / 3;\n      // we only want to set the persona size if it has changed\n      if (personaCalcSize !== personaSize) {\n        setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  // TODO: Remove after calling sdk fix the keybaord focus\n  useEffect(() => {\n    // PPTLive stream id is null\n    if (videoTileRef.current?.id) {\n      return;\n    }\n    let observer: MutationObserver | undefined;\n    if (videoTileRef.current) {\n      observer = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            const iframe = document.querySelector('iframe');\n            if (iframe) {\n              if (!iframe.getAttribute('tabIndex')) {\n                iframe.setAttribute('tabIndex', '-1');\n              }\n            }\n          }\n        }\n      });\n\n      observer.observe(videoTileRef.current, { childList: true, subtree: true });\n    }\n\n    return () => {\n      observer?.disconnect();\n    };\n  }, [displayName, renderElement]);\n\n  const useLongPressProps = useMemo(() => {\n    return {\n      onLongPress: () => {\n        props.onLongTouch?.();\n      },\n      touchEventsOnly: true\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.onLongTouch]);\n  const longPressHandlers = useLongPress(useLongPressProps);\n\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n\n  const videoHintWithBorderRadius = mergeStyles(disabledVideoHint, {\n    borderRadius: theme.effects.roundedCorner4,\n    backgroundColor: callingPalette.videoTileLabelBackgroundLight\n  });\n\n  const tileInfoStyle = useMemo(\n    () =>\n      mergeStyles(\n        isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint,\n        styles?.displayNameContainer\n      ),\n    [isVideoRendered, videoHintWithBorderRadius, styles?.displayNameContainer, props.alwaysShowLabelBackground]\n  );\n\n  const ids = useIdentifiers();\n\n  const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n  const participantStateString = getParticipantStateString(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n  const participantMediaAccessIcons = useMemo(\n    () =>\n      canShowLabel || participantStateString\n        ? getMediaAccessIconsTrampoline(\n            showMuteIndicator,\n            isMuted,\n            /* @conditional-compile-remove(media-access) */\n            mediaAccess\n          )\n        : undefined,\n    [canShowLabel, isMuted, mediaAccess, participantStateString, showMuteIndicator]\n  );\n  const canShowParticipantIcons = participantMediaAccessIcons || isSpotlighted || isPinned;\n\n  return (\n    <Stack\n      data-ui-id={ids.videoTile}\n      className={mergeStyles(\n        rootStyles,\n        {\n          background: theme.palette.neutralLighter,\n          borderRadius: theme.effects.roundedCorner4\n        },\n        isSpeaking || raisedHand\n          ? {\n              '&::after': {\n                content: `''`,\n                position: 'absolute',\n                border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n                borderRadius: theme.effects.roundedCorner4,\n                width: '100%',\n                height: '100%',\n                pointerEvents: 'none'\n              }\n            }\n          : {},\n        videoTileHighContrastStyles(theme),\n        styles?.root\n      )}\n      {...longPressHandlers}\n    >\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%' }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? (\n          <Stack\n            className={mergeStyles(\n              videoContainerStyles,\n              isMirrored && { transform: 'scaleX(-1)' },\n              styles?.videoContainer\n            )}\n          >\n            {renderElement}\n          </Stack>\n        ) : (\n          <Stack\n            className={mergeStyles(videoContainerStyles, {\n              opacity: participantStateString || props.participantState === 'Idle' ? 0.4 : 1\n            })}\n          >\n            {onRenderPlaceholder ? (\n              onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n            ) : (\n              <DefaultPlaceholder {...placeholderOptions} />\n            )}\n          </Stack>\n        )}\n        {reactionOverlay}\n        {(canShowLabel || participantStateString) && (\n          <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && (\n                <Text\n                  className={mergeStyles(displayNameStyle)}\n                  title={displayName}\n                  style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n                  data-ui-id=\"video-tile-display-name\"\n                >\n                  {displayName}\n                </Text>\n              )}\n              {participantStateString && (\n                <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>\n              )}\n              {canShowParticipantIcons && (\n                <Stack horizontal className={mergeStyles(iconsGroupContainerStyle)}>\n                  {participantMediaAccessIcons}\n                  {isSpotlighted && (\n                    <Stack className={mergeStyles(iconContainerStyle)}>\n                      <Icon iconName=\"VideoTileSpotlighted\" />\n                    </Stack>\n                  )}\n                  {isPinned && (\n                    <Stack className={mergeStyles(iconContainerStyle)}>\n                      <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                    </Stack>\n                  )}\n                </Stack>\n              )}\n              <VideoTileMoreOptionsButton\n                contextualMenu={contextualMenu}\n                participantDisplayName={displayName}\n                participantHandRaised={!!raisedHand}\n                participantIsMuted={isMuted}\n                participantState={participantStateString}\n                participantIsSpeaking={isSpeaking}\n                canShowContextMenuButton={canShowContextMenuButton}\n                isMicDisabled={mediaAccess?.isAudioPermitted === false}\n                isCameraDisabled={mediaAccess?.isVideoPermitted === false}\n              />\n            </Stack>\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n        {raisedHand && (\n          <Stack\n            horizontal={true}\n            tokens={{ childrenGap: '0.2rem' }}\n            className={raiseHandContainerStyles(theme, !canShowLabel)}\n          >\n            <Stack.Item>\n              <Text>{raisedHand.raisedHandOrderPosition}</Text>\n            </Stack.Item>\n            <Stack.Item>\n              <RaisedHandIcon />\n            </Stack.Item>\n          </Stack>\n        )}\n      </div>\n    </Stack>\n  );\n};\n\nconst getMediaAccessIconsTrampoline = (\n  showMuteIndicator: boolean,\n  isMuted?: boolean,\n  mediaAccess?: undefined | /* @conditional-compile-remove(media-access) */ MediaAccess\n): JSX.Element | undefined => {\n  /* @conditional-compile-remove(media-access) */\n  const cameraForbidIcon =\n    mediaAccess && !mediaAccess?.isVideoPermitted ? (\n      <Stack className={mergeStyles(iconContainerStyle)}>\n        <Icon iconName=\"ControlButtonCameraProhibitedSmall\" />\n      </Stack>\n    ) : undefined;\n  /* @conditional-compile-remove(media-access) */\n  const micOffIcon =\n    (mediaAccess ? mediaAccess.isAudioPermitted : true) && showMuteIndicator && isMuted ? (\n      <Stack className={mergeStyles(iconContainerStyle)}>\n        <Icon iconName=\"VideoTileMicOff\" />\n      </Stack>\n    ) : undefined;\n  /* @conditional-compile-remove(media-access) */\n  const micForbidIcon =\n    mediaAccess && !mediaAccess?.isAudioPermitted && showMuteIndicator ? (\n      <Stack className={mergeStyles(iconContainerStyle)}>\n        <Icon iconName=\"ControlButtonMicProhibitedSmall\" />\n      </Stack>\n    ) : undefined;\n  /* @conditional-compile-remove(media-access) */\n  if (!(cameraForbidIcon || micOffIcon || micForbidIcon)) {\n    return undefined;\n  }\n\n  /* @conditional-compile-remove(media-access) */\n  return (\n    <>\n      {cameraForbidIcon}\n      {micOffIcon}\n      {micForbidIcon}\n    </>\n  );\n\n  return showMuteIndicator && isMuted ? (\n    <Stack className={mergeStyles(iconContainerStyle)}>\n      <Icon iconName=\"VideoTileMicOff\" />\n    </Stack>\n  ) : undefined;\n};\n\nconst getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  const strings = { ...locale.strings.videoTile, ...props.strings };\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n      ? strings?.participantStateHold\n      : undefined;\n};\n\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.d.ts

@@ -74,4 +74,8 @@ export declare const overlayStyles: () => IStyle;
  * @private
  */
 export declare const overlayStylesTransparent: () => IStyle;
+/**
+ * @private
+ */
+export declare const iconsGroupContainerStyle: IStyle;
 //# sourceMappingURL=VideoTile.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js

@@ -87,7 +87,7 @@ export const pinIconStyle = {
  * @private
  */
 export const iconContainerStyle = {
-    margin: 'auto',
+    margin: 'auto 0.2rem',
     alignItems: 'center',
     '& svg': {
         display: 'block',
@@ -234,4 +234,10 @@ export const overlayStylesTransparent = () => {
         alignItems: 'center'
     };
 };
+/**
+ * @private
+ */
+export const iconsGroupContainerStyle = {
+    marginLeft: '0.2rem'
+};
 //# sourceMappingURL=VideoTile.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/** @private */\nexport const videoTileHighContrastStyles = (theme: ITheme): IStyle => ({\n  '@media (forced-colors: active)': {\n    border: `0.125rem solid ${theme.palette.black}`\n  }\n});\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string =>\n  mergeStyles(\n    {\n      alignItems: 'center',\n      padding: '0.2rem 0.3rem',\n      backgroundColor: theme.palette.white,\n      opacity: 0.9,\n      borderRadius: '1rem',\n      margin: '0.5rem',\n      width: 'fit-content',\n      position: 'absolute',\n      top: 0,\n      height: 'fit-content'\n    },\n    limitedSpace && raiseHandLimitedSpaceStyles\n  );\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>\n  keyframes({\n    from: {\n      backgroundPosition: `0px 0px`\n    },\n    to: {\n      backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n"]}
+{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/** @private */\nexport const videoTileHighContrastStyles = (theme: ITheme): IStyle => ({\n  '@media (forced-colors: active)': {\n    border: `0.125rem solid ${theme.palette.black}`\n  }\n});\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto 0.2rem',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string =>\n  mergeStyles(\n    {\n      alignItems: 'center',\n      padding: '0.2rem 0.3rem',\n      backgroundColor: theme.palette.white,\n      opacity: 0.9,\n      borderRadius: '1rem',\n      margin: '0.5rem',\n      width: 'fit-content',\n      position: 'absolute',\n      top: 0,\n      height: 'fit-content'\n    },\n    limitedSpace && raiseHandLimitedSpaceStyles\n  );\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>\n  keyframes({\n    from: {\n      backgroundPosition: `0px 0px`\n    },\n    to: {\n      backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const iconsGroupContainerStyle: IStyle = {\n  marginLeft: '0.2rem'\n};\n"]}

package/dist/dist-esm/react-components/src/components/utils.d.ts

@@ -136,5 +136,5 @@ export declare const nullToUndefined: <T>(value: T | null) => T | undefined;
 /**
  * @private
  */
-export declare const formatMoreButtonAriaDescription: (displayName?: string, isMuted?: boolean, isHandRaised?: boolean, state?: string, isSpeaking?: boolean, strings?: VideoTileStrings) => string;
+export declare const formatMoreButtonAriaDescription: (displayName?: string, isMuted?: boolean, isHandRaised?: boolean, state?: string, isSpeaking?: boolean, isMicDisabled?: boolean, isCameraDisabled?: boolean, strings?: VideoTileStrings) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils.js

@@ -358,19 +358,23 @@ export const nullToUndefined = (value) => (value === null ? undefined : value);
 /**
  * @private
  */
-export const formatMoreButtonAriaDescription = (displayName, isMuted, isHandRaised, state, isSpeaking, strings) => {
+export const formatMoreButtonAriaDescription = (displayName, isMuted, isHandRaised, state, isSpeaking, isMicDisabled, isCameraDisabled, strings) => {
     const mutedState = isMuted
         ? strings === null || strings === void 0 ? void 0 : strings.moreOptionsParticipantMutedStateMutedAriaLabel
         : strings === null || strings === void 0 ? void 0 : strings.moreOptionsParticipantMutedStateUnmutedAriaLabel;
     const handRaisedState = isHandRaised ? strings === null || strings === void 0 ? void 0 : strings.moreOptionsParticipantHandRaisedAriaLabel : undefined;
     const isSpeakingState = isSpeaking ? strings === null || strings === void 0 ? void 0 : strings.moreOptionsParticipantIsSpeakingAriaLabel : undefined;
+    const micDisabledState = isMicDisabled ? strings === null || strings === void 0 ? void 0 : strings.moreOptionsParticipantMicDisabledAriaLabel : undefined;
+    const cameraDisabledState = isCameraDisabled ? strings === null || strings === void 0 ? void 0 : strings.moreOptionsParticipantCameraDisabledAriaLabel : undefined;
     const description = (strings === null || strings === void 0 ? void 0 : strings.moreOptionsButtonAriaLabel)
         ? _formatString(strings === null || strings === void 0 ? void 0 : strings.moreOptionsButtonAriaLabel, {
             displayName: displayName !== null && displayName !== void 0 ? displayName : ' ',
             isMuted: mutedState !== null && mutedState !== void 0 ? mutedState : ' ',
             isHandRaised: handRaisedState !== null && handRaisedState !== void 0 ? handRaisedState : ' ',
             state: state !== null && state !== void 0 ? state : ' ',
-            isSpeaking: isSpeakingState !== null && isSpeakingState !== void 0 ? isSpeakingState : ' '
+            isSpeaking: isSpeakingState !== null && isSpeakingState !== void 0 ? isSpeakingState : ' ',
+            micDisabledState: micDisabledState !== null && micDisabledState !== void 0 ? micDisabledState : ' ',
+            cameraDisabledState: cameraDisabledState !== null && cameraDisabledState !== void 0 ? cameraDisabledState : ' '
         })
         : '';
     return description;