///
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