mediasfu-reactnative-expo/dist/types/src/consumers/addVideosGrid.d.ts

mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r

import React from 'react';
import MiniCard from '../components/displayComponents/MiniCard';
import VideoCard from '../components/displayComponents/VideoCard';
import AudioCard from '../components/displayComponents/AudioCard';
import { Participant, Stream, UpdateMiniCardsGridType, UpdateMiniCardsGridParameters, AudioCardParameters, EventType, MediaStream as MediaStreamType, CustomVideoCardType, CustomAudioCardType, CustomMiniCardType } from '../@types/types';
export interface AddVideosGridParameters extends UpdateMiniCardsGridParameters, AudioCardParameters {
    eventType: EventType;
    updateAddAltGrid: (addAltGrid: boolean) => void;
    ref_participants: Participant[];
    islevel: string;
    videoAlreadyOn: boolean;
    localStreamVideo: MediaStreamType | null;
    keepBackground: boolean;
    virtualStream: MediaStreamType | null;
    forceFullDisplay: boolean;
    otherGridStreams: JSX.Element[][];
    updateOtherGridStreams: (otherGridStreams: JSX.Element[][]) => void;
    customVideoCard?: CustomVideoCardType;
    customAudioCard?: CustomAudioCardType;
    customMiniCard?: CustomMiniCardType;
    videoCardComponent?: React.ComponentType<React.ComponentProps<typeof VideoCard>>;
    audioCardComponent?: React.ComponentType<React.ComponentProps<typeof AudioCard>>;
    miniCardComponent?: React.ComponentType<React.ComponentProps<typeof MiniCard>>;
    updateMiniCardsGrid: UpdateMiniCardsGridType;
    getUpdatedAllParams: () => AddVideosGridParameters;
    [key: string]: any;
}
export interface AddVideosGridOptions {
    mainGridStreams: (Stream | Participant)[];
    altGridStreams: (Stream | Participant)[];
    numtoadd: number;
    numRows: number;
    numCols: number;
    actualRows: number;
    lastrowcols: number;
    removeAltGrid: boolean;
    parameters: AddVideosGridParameters;
}
export type AddVideosGridType = (options: AddVideosGridOptions) => Promise<void>;
/**
 * Adds participants to the main and alternate video grids based on the provided parameters.
 *
 * This function populates video grids with participant cards, supporting both custom render functions
 * and component overrides for full UI customization. It uses a two-tier override system:
 * 1. Custom render functions (customVideoCard, customAudioCard, customMiniCard) - Full control via functions
 * 2. Component overrides (videoCardComponent, audioCardComponent, miniCardComponent) - Replace default components
 *
 * @function
 * @async
 * @param {AddVideosGridOptions} options - The options for adding videos to the grid.
 * @param {Array} options.mainGridStreams - The main grid streams containing participant or stream data.
 * @param {Array} options.altGridStreams - The alternate grid streams containing participant or stream data.
 * @param {number} options.numtoadd - The number of participants to add to the grid.
 * @param {number} options.numRows - The number of rows in the grid layout.
 * @param {number} options.numCols - The number of columns in the grid layout.
 * @param {number} options.actualRows - The actual number of rows currently filled in the grid.
 * @param {number} options.lastrowcols - The number of columns in the last row of the grid.
 * @param {boolean} options.removeAltGrid - Flag indicating whether to remove the alternate grid.
 * @param {AddVideosGridParameters} options.parameters - Additional parameters required for the function.
 * @param {string} options.parameters.eventType - The type of event (e.g., meeting, conference).
 * @param {Function} options.parameters.updateAddAltGrid - Callback to update the status of the alternate grid.
 * @param {Array} options.parameters.ref_participants - A reference list of participants.
 * @param {string} options.parameters.islevel - The participation level of the user.
 * @param {boolean} options.parameters.videoAlreadyOn - Indicates if video streaming is already active.
 * @param {MediaStream} options.parameters.localStreamVideo - The user's local video stream.
 * @param {boolean} options.parameters.keepBackground - Flag to determine if the background should be retained.
 * @param {MediaStream} options.parameters.virtualStream - The virtual stream to use.
 * @param {boolean} options.parameters.forceFullDisplay - Flag to enforce full display mode.
 * @param {Array} options.parameters.otherGridStreams - Additional streams for the grid.
 * @param {Function} options.parameters.updateOtherGridStreams - Callback to update other grid streams.
 * @param {Function} options.parameters.updateMiniCardsGrid - Callback to update the mini card display.
 * @param {Function} options.parameters.getUpdatedAllParams - Function to retrieve updated parameters.
 *
 * **Custom UI & Component Overrides:**
 * @param {CustomVideoCardType} [options.parameters.customVideoCard] - Custom render function for video cards.
 *   Receives props and returns JSX. Use for complete control over video card rendering.
 * @param {CustomAudioCardType} [options.parameters.customAudioCard] - Custom render function for audio cards.
 *   Receives props and returns JSX. Use for complete control over audio card rendering.
 * @param {CustomMiniCardType} [options.parameters.customMiniCard] - Custom render function for mini cards.
 *   Receives props and returns JSX. Use for complete control over mini card rendering.
 * @param {React.ComponentType} [options.parameters.videoCardComponent] - Component override for VideoCard.
 *   Replaces the default VideoCard component. Use when you want to replace the component but not control rendering.
 * @param {React.ComponentType} [options.parameters.audioCardComponent] - Component override for AudioCard.
 *   Replaces the default AudioCard component.
 * @param {React.ComponentType} [options.parameters.miniCardComponent] - Component override for MiniCard.
 *   Replaces the default MiniCard component.
 *
 * @returns {Promise<void>} A promise that resolves when the grid has been updated successfully.
 *
 * @example
 * // Basic usage without customization
 * import { addVideosGrid } from 'mediasfu-reactnative-expo';
 *
 * await addVideosGrid({
 *   mainGridStreams: mainGridStreams,
 *   altGridStreams: altGridStreams,
 *   numtoadd: 4,
 *   numRows: 2,
 *   numCols: 2,
 *   actualRows: 2,
 *   lastrowcols: 2,
 *   removeAltGrid: false,
 *   parameters: {
 *     eventType: 'conference',
 *     videoAlreadyOn: true,
 *     // ... other required parameters
 *   },
 * });
 *
 * @example
 * // Using custom render function for complete control
 * import { addVideosGrid } from 'mediasfu-reactnative-expo';
 *
 * const CustomVideoCard = ({ participant, videoStream, showControls }) => (
 *   <View style={{ border: '2px solid blue' }}>
 *     <Text>{participant.name}</Text>
 *     {/* Your custom video rendering logic *\/}
 *   </View>
 * );
 *
 * await addVideosGrid({
 *   mainGridStreams: streams,
 *   altGridStreams: [],
 *   numtoadd: 4,
 *   numRows: 2,
 *   numCols: 2,
 *   actualRows: 2,
 *   lastrowcols: 2,
 *   removeAltGrid: false,
 *   parameters: {
 *     customVideoCard: CustomVideoCard, // Custom render function
 *     eventType: 'conference',
 *     // ... other parameters
 *   },
 * });
 *
 * @example
 * // Using component override to replace default component
 * import { addVideosGrid } from 'mediasfu-reactnative-expo';
 * import { MyCustomVideoCard } from './MyCustomVideoCard';
 *
 * await addVideosGrid({
 *   mainGridStreams: streams,
 *   altGridStreams: [],
 *   numtoadd: 4,
 *   numRows: 2,
 *   numCols: 2,
 *   actualRows: 2,
 *   lastrowcols: 2,
 *   removeAltGrid: false,
 *   parameters: {
 *     videoCardComponent: MyCustomVideoCard, // Component override
 *     audioCardComponent: MyCustomAudioCard,
 *     miniCardComponent: MyCustomMiniCard,
 *     eventType: 'conference',
 *     // ... other parameters
 *   },
 * });
 */
export declare function addVideosGrid({ mainGridStreams, altGridStreams, numtoadd, numRows, numCols, actualRows, lastrowcols, removeAltGrid, parameters, }: AddVideosGridOptions): Promise<void>;