/// import { IStyle } from '@fluentui/react'; import { GridLayoutStyles } from '.'; import { BaseCustomStyles, OnRenderAvatarCallback, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, CreateVideoStreamViewResult } from '../types'; import { VideoGalleryTogetherModeParticipantPosition, VideoGalleryTogetherModeStreams, TogetherModeStreamViewResult, TogetherModeStreamOptions } from '../types/TogetherModeTypes'; import { HorizontalGalleryStyles } from './HorizontalGallery'; import { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton'; import { VerticalGalleryStyles } from './VerticalGallery'; import { ReactionResources } from '../types/ReactionTypes'; /** * @private * Currently the Calling JS SDK supports up to 4 remote video streams */ export declare const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4; /** * @private * Styles to disable the selectivity of a text in video gallery */ export declare const unselectable: { '-webkit-user-select': string; '-webkit-touch-callout': string; '-moz-user-select': string; '-ms-user-select': string; 'user-select': string; }; /** * @private * Set aside only 6 dominant speakers for remaining audio participants */ export declare const MAX_AUDIO_DOMINANT_SPEAKERS = 6; /** * @private * Default remote video tile menu options */ export declare const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS: { kind: string; }; /** * @private * Maximum number of remote video tiles that can be pinned */ export declare const MAX_PINNED_REMOTE_VIDEO_TILES = 4; /** * All strings that may be shown on the UI in the {@link VideoGallery}. * * @public */ export interface VideoGalleryStrings { /** String to notify that local user is sharing their screen */ screenIsBeingSharedMessage: string; /** String to show when remote screen share stream is loading */ screenShareLoadingMessage: string; /** String to show when local screen share stream is loading */ localScreenShareLoadingMessage: string; /** String for local video label. Default is "You" */ localVideoLabel: string; /** String for local video camera switcher */ localVideoCameraSwitcherLabel: string; /** String for announcing the local video tile can be moved by keyboard controls */ localVideoMovementLabel: string; /** Aria-label for announcing the local video tile can be moved by keyboard controls */ localVideoMovementAriaLabel: string; /** String for announcing the selected camera */ localVideoSelectedDescription: string; /** placeholder text for participants who does not have a display name*/ displayNamePlaceholder: string; /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */ fitRemoteParticipantToFrame: string; /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */ fillRemoteParticipantFrame: string; /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */ pinParticipantForMe: string; /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */ unpinParticipantForMe: string; /** Aria label for pin participant menu item of remote participant's video tile */ pinParticipantMenuItemAriaLabel: string; /** Aria label for unpin participant menu item of remote participant's video tile */ unpinParticipantMenuItemAriaLabel: string; /** Aria label to announce when remote participant's video tile is pinned */ pinnedParticipantAnnouncementAriaLabel: string; /** Aria label to announce when remote participant's video tile is unpinned */ unpinnedParticipantAnnouncementAriaLabel: string; /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */ startSpotlightVideoTileMenuLabel: string; /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */ addSpotlightVideoTileMenuLabel: string; /** Menu title for start spotlight menu item when spotlight limit is reached */ spotlightLimitReachedMenuTitle: string; /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */ stopSpotlightVideoTileMenuLabel: string; /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */ stopSpotlightOnSelfVideoTileMenuLabel: string; /** String for the attendee role */ attendeeRole: string; /** Menu text shown in Video Tile contextual menu to mute a remote participant */ muteParticipantMenuItemLabel: string; /** Text shown when waiting for others to join the call */ waitingScreenText: string; } /** * @public */ export type LocalScreenShareView = 'stream' | 'placeholderMessage'; /** * @public */ export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | 'togetherMode' | 'focusedContent'; /** * {@link VideoGallery} Component Styles. * @public */ export interface VideoGalleryStyles extends BaseCustomStyles { /** Styles for the grid layout */ gridLayout?: GridLayoutStyles; /** Styles for the horizontal gallery */ horizontalGallery?: HorizontalGalleryStyles; /** Styles for the local video */ localVideo?: IStyle; /** Styles for the vertical gallery */ verticalGallery?: VerticalGalleryStyles; } /** * Different modes and positions of the overflow gallery in the VideoGallery * * @public */ export type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | 'horizontalTop'; /** * different modes of the local video tile * * @public */ export type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation'; /** * Props for {@link VideoGallery}. * * @public */ export interface VideoGalleryProps { /** * Allows users to pass an object containing custom CSS styles for the gallery container. * * @Example * ``` * * ``` */ styles?: VideoGalleryStyles; /** Layout of the video tiles. */ layout?: VideoGalleryLayout; /** Local video particpant */ localParticipant: VideoGalleryLocalParticipant; /** List of remote video particpants */ remoteParticipants?: VideoGalleryRemoteParticipant[]; /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */ dominantSpeakers?: string[]; /** Local video view options */ localVideoViewOptions?: VideoStreamOptions; /** Remote videos view options */ remoteVideoViewOptions?: VideoStreamOptions; /** Callback to create the local video stream view */ onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise; /** Callback to dispose of the local video stream view */ onDisposeLocalStreamView?: () => void; /** Callback to render the local video tile*/ onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element; /** Callback to create a remote video stream view */ onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise; /** Callback to render a remote video tile */ onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element; /** * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead * * Callback to dispose a remote video stream view */ onDisposeRemoteStreamView?: (userId: string) => Promise; /** Callback to dispose a remote video stream view */ onDisposeRemoteVideoStreamView?: (userId: string) => Promise; /** Callback to dispose a remote screen share stream view */ onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise; /** Callback to dispose a local screen share stream view */ onDisposeLocalScreenShareStreamView?: () => Promise; /** Callback to render a participant avatar */ onRenderAvatar?: OnRenderAvatarCallback; /** * Whether to display the local video camera switcher button */ showCameraSwitcherInLocalPreview?: boolean; /** * Whether to display a mute icon beside the user's display name. * @defaultValue `true` */ showMuteIndicator?: boolean; /** Optional strings to override in component */ strings?: Partial; /** * Maximum number of participant remote video streams that is rendered. * @defaultValue 4 */ maxRemoteVideoStreams?: number; /** * Camera control information for button to switch cameras. */ localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps; /** * List of pinned participant userIds. */ pinnedParticipants?: string[]; /** * This callback will be called when a participant video tile is pinned. */ onPinParticipant?: (userId: string) => void; /** * This callback will be called when a participant video tile is un-pinned. */ onUnpinParticipant?: (userId: string) => void; /** * List of spotlighted participant userIds. */ spotlightedParticipants?: string[]; /** * This callback is to start spotlight for local participant video tile. */ onStartLocalSpotlight?: () => Promise; /** * This callback is to stop spotlight for local participant video tile. */ onStartRemoteSpotlight?: (userIds: string[]) => Promise; /** * This callback is to start spotlight for remote participant video tiles. */ onStopLocalSpotlight?: () => Promise; /** * This callback is to stop spotlight for remote participant video tiles. */ onStopRemoteSpotlight?: (userIds: string[]) => Promise; /** * Maximum participants that can be spotlighted */ maxParticipantsToSpotlight?: number; /** * Options for showing the remote video tile menu. * * @defaultValue \{ kind: 'contextual' \} */ remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps; /** * Determines the layout of the overflowGallery inside the VideoGallery. * @defaultValue 'horizontalBottom' */ overflowGalleryPosition?: OverflowGalleryPosition; /** * Determines the aspect ratio of local video tile in the video gallery. * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and * 16:9 (landscape) aspect ratios. * @defaultValue 'followDeviceOrientation' */ localVideoTileSize?: LocalVideoTileSize; /** * Reaction resources for like, heart, laugh, applause and surprised. */ reactionResources?: ReactionResources; /** * Additional Options for Video Tiles */ videoTilesOptions?: VideoTilesOptions; /** * This callback is to mute a remote participant */ onMuteParticipant?: (userId: string) => Promise; /** * Indicates if the local participant can start together mode */ startTogetherModeEnabled?: boolean; /** * Indicates if together mode is active */ isTogetherModeActive?: boolean; /** * Callback to create a together mode stream view */ onCreateTogetherModeStreamView?: (options?: TogetherModeStreamOptions) => Promise; /** * This callback is to start together mode */ onStartTogetherMode?: () => Promise; /** * This callback is to set the scene size for together mode */ onSetTogetherModeSceneSize?: (width: number, height: number) => void; /** * Together mode video streams */ togetherModeStreams?: VideoGalleryTogetherModeStreams; /** * Seating position of participants in together mode */ togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition; /** * Callback to dispose a together mode stream view */ onDisposeTogetherModeStreamView?: () => Promise; /** * This callback is to forbid audio for remote participant(s) */ onForbidAudio?: (userIds: string[]) => Promise; /** * This callback is to permit audio for remote participant(s) */ onPermitAudio?: (userIds: string[]) => Promise; /** * This callback is to forbid video for remote participant(s) */ onForbidVideo?: (userIds: string[]) => Promise; /** * This callback is to permit video for remote participant(s) */ onPermitVideo?: (userIds: string[]) => Promise; /** * Controls the view of the local screenshare stream in the gallery */ localScreenShareView?: LocalScreenShareView; } /** * Options that apply to all Video Tiles in the {@link VideoGallery} * * @public */ export interface VideoTilesOptions { /** * Whether to always show the label background for the video tile */ alwaysShowLabelBackground?: boolean; } /** * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}. * * @public */ export interface VideoTileContextualMenuProps { /** * The menu property kind */ kind: 'contextual'; } /** * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}. * * @public */ export interface VideoTileDrawerMenuProps { /** * The menu property kind */ kind: 'drawer'; /** * The optional id property provided on an element that the drawer menu should render within when a * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will * render within the VideoGallery component. */ hostId?: string; } /** * VideoGallery represents a layout of video tiles for a specific call. * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call. * * @public */ export declare const VideoGallery: (props: VideoGalleryProps) => JSX.Element; //# sourceMappingURL=VideoGallery.d.ts.map