mediasfu-reactnative/dist/types/src/components/displayComponents/MiniCardAudio.d.ts

MediaSFU Prebuilt React Native SDK

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>;
}
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';
 *
 * 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;