Function addVideosGrid

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

// 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
  },
});
Copy

// 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
  },
});
Copy

// 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
  },
});
Copy