mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
107 lines (106 loc) • 3.31 kB
TypeScript
import React from 'react';
import { StyleProp, ViewStyle, ImageStyle } from 'react-native';
import { Socket } from 'socket.io-client';
import { EventType, ShowAlert, CoHostResponsibility, Participant, AudioDecibels, MediaStream } from '../../@types/types';
/**
* Interface defining the parameters required by the VideoCard component.
*/
export interface VideoCardParameters {
socket: Socket;
roomName: string;
coHostResponsibility: CoHostResponsibility[];
showAlert?: ShowAlert;
coHost: string;
participants: Participant[];
member: string;
islevel: string;
audioDecibels: AudioDecibels[];
getUpdatedAllParams: () => VideoCardParameters;
[key: string]: any;
}
/**
* Interface defining the options for the VideoCard component.
*/
export interface VideoCardOptions {
customStyle?: StyleProp<ViewStyle>;
name: string;
barColor?: string;
textColor?: string;
imageSource?: string;
roundedImage?: boolean;
imageStyle?: StyleProp<ImageStyle>;
remoteProducerId: string;
eventType: EventType;
forceFullDisplay: boolean;
videoStream: MediaStream | null;
showControls?: boolean;
showInfo?: boolean;
videoInfoComponent?: React.ReactNode;
videoControlsComponent?: React.ReactNode;
controlsPosition?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
infoPosition?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
participant: Participant;
backgroundColor?: string;
audioDecibels?: AudioDecibels[];
doMirror?: boolean;
parameters: VideoCardParameters;
}
export type VideoCardType = (options: VideoCardOptions) => JSX.Element;
/**
* VideoCard is a flexible React Native component for displaying a participant's video stream with optional controls and information.
* It includes an animated waveform based on audio decibels.
*
* @param {VideoCardOptions} props - The configuration options for the VideoCard component.
*
* @example
* ```tsx
* import React from 'react';
* import { VideoCard } from 'mediasfu-reactnative';
* import { Socket } from 'socket.io-client';
*
* const socket = Socket('https://example.com'); // Example socket instance
*
* function App() {
* return (
* <VideoCard
* name="John Doe"
* remoteProducerId="1234"
* eventType="meeting"
* forceFullDisplay={true}
* videoStream={null}
* participant={{
* name: 'John Doe',
* id: '123',
* videoOn: true,
* muted: false,
* }}
* parameters={{
* socket,
* roomName: 'room1',
* coHostResponsibility: [],
* getUpdatedAllParams: () => ({
* socket,
* roomName: 'room1',
* coHostResponsibility: [],
* audioDecibels: [],
* participants: [{ name: 'John Doe', id: '123', videoOn: true, muted: false }],
* member: '123',
* islevel: '1',
* coHost: 'coHostId',
* }),
* }}
* backgroundColor="#2c678f"
* showControls={true}
* showInfo={true}
* barColor="green"
* textColor="white"
* doMirror={false}
* />
* );
* }
*
* export default App;
* ```
*/
declare const VideoCard: React.FC<VideoCardOptions>;
export default VideoCard;