mediasfu-reactnative-expo
Version:
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
122 lines (121 loc) • 3.87 kB
TypeScript
import React from 'react';
import { StyleProp, ViewStyle, ImageStyle } from 'react-native';
/**
* Enum for Overlay Positions.
*/
type OverlayPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
/**
* Interface defining the props for the MiniCardAudio component.
*/
export interface MiniCardAudioOptions {
/**
* Custom styles to apply to the card.
*/
customStyle?: StyleProp<ViewStyle>;
/**
* The name to display on the card.
*/
name: string;
/**
* Flag to show or hide the waveform animation.
*/
showWaveform: boolean;
/**
* Position of the overlay on the card.
* @default 'topLeft'
*/
overlayPosition?: OverlayPosition;
/**
* The color of the waveform bars.
* @default 'white'
*/
barColor?: string;
/**
* The color of the text.
* @default 'white'
*/
textColor?: string;
/**
* The source URI for the background image.
*/
imageSource?: string;
/**
* Flag to apply rounded corners to the image.
* @default false
*/
roundedImage?: boolean;
/**
* Custom styles to apply to the image.
*/
imageStyle?: StyleProp<ImageStyle>;
/**
* Optional custom style to apply to the container.
*/
style?: object;
/**
* Optional function to render custom content, receiving the default content and dimensions.
*/
renderContent?: (options: {
defaultContent: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
/**
* Optional function to render a custom container, receiving the default container and dimensions.
*/
renderContainer?: (options: {
defaultContainer: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type MiniCardAudioType = (options: MiniCardAudioOptions) => JSX.Element;
/**
* MiniCardAudio displays an audio card with optional waveform animation and custom styling options.
*
* This component supports showing an animated waveform, an image, and custom positioning for the overlay. It is designed
* for displaying audio-related information in a visually appealing, customizable way.
*
* @component
* @param {MiniCardAudioOptions} props - Configuration options for the MiniCardAudio component.
* @param {StyleProp<ViewStyle>} [props.customStyle] - Custom styles for the card container.
* @param {string} props.name - The name displayed on the audio card.
* @param {boolean} props.showWaveform - Toggles the waveform animation display.
* @param {OverlayPosition} [props.overlayPosition='topLeft'] - Position of the overlay on the card.
* @param {string} [props.barColor='white'] - Color of the waveform bars.
* @param {string} [props.textColor='white'] - Color of the displayed name text.
* @param {string} [props.imageSource] - URI for the background image.
* @param {boolean} [props.roundedImage=false] - Determines if the image should have rounded corners.
* @param {StyleProp<ImageStyle>} [props.imageStyle] - Custom styles for the background image.
*
* @returns {JSX.Element} The MiniCardAudio component.
*
* @example
* ```tsx
* import React from 'react';
* import { MiniCardAudio } from 'mediasfu-reactnative-expo';
*
* function App() {
* return (
* <MiniCardAudio
* name="Alice Johnson"
* showWaveform={true}
* overlayPosition="bottomRight"
* barColor="blue"
* textColor="white"
* imageSource="https://example.com/profile.jpg"
* roundedImage={true}
* customStyle={{ width: 100, height: 100 }}
* />
* );
* }
*
* export default App;
* ```
*/
declare const MiniCardAudio: React.FC<MiniCardAudioOptions>;
export default MiniCardAudio;