mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
105 lines (104 loc) • 3.37 kB
TypeScript
import React from 'react';
import { MediaStream } from '../../@types/types';
/**
* Interface defining the props for the FlexibleVideo component.
*/
export interface FlexibleVideoOptions {
/**
* Custom width for each grid item.
*/
customWidth: number;
/**
* Custom height for each grid item.
*/
customHeight: number;
/**
* Number of rows in the grid.
*/
rows: number;
/**
* Number of columns in the grid.
*/
columns: number;
/**
* Array of React components or elements to render in the grid.
*/
componentsToRender: React.ReactNode[];
/**
* Flag indicating whether to show the aspect ratio.
*/
showAspect: boolean;
/**
* Background color for each grid item.
* @default 'transparent'
*/
backgroundColor?: string;
/**
* Screenboard component to overlay on the video grid.
*/
Screenboard?: React.ReactNode;
/**
* Flag to annotate the screen stream.
* @default false
*/
annotateScreenStream?: boolean;
/**
* The local screen stream to use for annotation.
*/
localStreamScreen?: MediaStream;
}
export type FlexibleVideoType = (options: FlexibleVideoOptions) => JSX.Element;
/**
* FlexibleVideo is a React Native component that renders a flexible video grid with optional screenboard overlay
* and annotation capabilities.
*
* This component arranges components in a grid layout with specified rows and columns. It supports custom item
* dimensions, optional screenboard overlay, and video stream annotation.
*
* @component
* @param {FlexibleVideoOptions} props - Options to configure the FlexibleVideo component.
* @param {number} props.customWidth - Width of each grid item.
* @param {number} props.customHeight - Height of each grid item.
* @param {number} props.rows - Number of rows in the grid.
* @param {number} props.columns - Number of columns in the grid.
* @param {React.ReactNode[]} props.componentsToRender - Components or elements to display in the grid.
* @param {boolean} [props.showAspect=false] - Controls whether the aspect ratio is enforced.
* @param {string} [props.backgroundColor='transparent'] - Background color for each grid item.
* @param {React.ReactNode} [props.Screenboard] - Overlay component for the video grid.
* @param {boolean} [props.annotateScreenStream=false] - Enables screen stream annotation.
* @param {MediaStream} [props.localStreamScreen] - Media stream for local screen annotation.
*
* @returns {JSX.Element} The rendered FlexibleVideo component.
*
* @example
* ```tsx
* import React from 'react';
* import { FlexibleVideo } from 'mediasfu-reactnative';
*
* function App() {
* const videoComponents = [
* <RTCView streamURL="stream1" />,
* <RTCView streamURL="stream2" />,
* ];
*
* return (
* <FlexibleVideo
* customWidth={200}
* customHeight={150}
* rows={2}
* columns={2}
* componentsToRender={videoComponents}
* showAspect={true}
* backgroundColor="black"
* Screenboard={<Text>Overlay Component</Text>}
* annotateScreenStream={true}
* localStreamScreen={myLocalStream}
* />
* );
* }
*
* export default App;
* ```
*/
declare const FlexibleVideo: React.FC<FlexibleVideoOptions>;
export default FlexibleVideo;