@raishid/react-native-voice-message-player
Version:
An intuitive and customizable React Native module for playing voice messages seamlessly in chat interfaces. This package offers out-of-the-box components and easy-to-use configurations to integrate voice message playback functionality in your application.
301 lines (271 loc) • 10.7 kB
TypeScript
import type { Audio } from 'expo-av';
import type { ImageRequireSource } from 'react-native';
import type { ImageSourcePropType } from 'react-native';
import type { ImageStyle } from 'react-native';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { default as React_2 } from 'react';
import { Ref } from 'react';
import type { ViewStyle } from 'react-native';
declare interface AvatarProps {
renderMic?: (props: { micSource: ImageSourcePropType }) => JSX.Element | null;
renderImage?: (props: {
imageSource: ImageSourcePropType;
}) => JSX.Element | null;
theme?: Itheme;
disabled?: boolean;
micPosition?: "left" | "right";
onImagePress?: () => void;
imageSource?: ImageSourcePropType;
micSource?: ImageSourcePropType;
micColor?: string;
}
/**
* The default theme configuration.
* @typedef {Object} Theme
* @property {Colors} colors - The theme's color settings.
* @property {Typography} typography - The theme's typography settings.
* @property {number} roundness - The border radius for round elements.
*/
declare const _default: Itheme;
export { _default as default_alias_9 }
export { _default as theme }
declare const _default_2: React_2.MemoExoticComponent<({ renderMic, renderImage, theme, disabled, micPosition, onImagePress, imageSource, micSource, micColor, }: AvatarProps) => JSX_2.Element>;
export { _default_2 as ProfileComponent }
export { _default_2 as default_alias_2 }
declare const _default_3: React_2.MemoExoticComponent<({ isPlaying, isDownloadable, onPress, onDownload, disabled, isLoading, isError, theme, style, configSources, leftActionImgStyle, }: PlayPauseButtonProps) => JSX_2.Element>;
export { _default_3 as LeftActionComponent }
export { _default_3 as default_alias_4 }
declare const _default_4: React_2.MemoExoticComponent<({ percentage, theme, renderComponent, }: DownloadProgressBarProps) => JSX_2.Element>;
export { _default_4 as DownloadProgressBarComponent }
export { _default_4 as default_alias_3 }
export declare const default_alias_7: React_2.MemoExoticComponent<React_2.NamedExoticComponent<ProfillingProps>>;
/**
* Convert seconds to a time format (MM:SS).
*
* @param {number} seconds - Total seconds.
* @returns {string} Time in MM:SS format.
*/
export declare const default_alias_8: (seconds: number) => string;
declare type DefaultActionSources = {
playing: ImageSourcePropType;
pause: ImageSourcePropType;
download: ImageSourcePropType;
loading: ImageSourcePropType;
error: ImageSourcePropType;
};
declare type DefaultStatusSources = {
loading: ImageSourcePropType;
"single-check": ImageSourcePropType;
"double-check": ImageSourcePropType;
"double-check-viewed": ImageSourcePropType;
};
declare type DefaultStatusString =
| "loading"
| "single-check"
| "double-check"
| "double-check-viewed";
declare interface DownloadProgressBarProps {
percentage?: number;
theme?: Itheme;
renderComponent?: (props: {
percentage: number | string;
theme: Itheme;
}) => JSX.Element;
}
declare interface Itheme {
colors?: {
primary?: string;
secondary?: string;
tertiary?: string;
primaryBackground?: string;
secondaryBackground?: string;
disabled?: string;
accent?: string;
label?: string;
secondaryLabel?: string;
};
typography?: {
family?: string;
};
roundness?: number;
}
declare interface PlayPauseButtonProps {
isPlaying?: boolean;
isDownloadable?: boolean;
onPress: () => void;
onDownload: () => void;
disabled?: boolean;
isLoading?: boolean;
isError?: boolean;
theme?: Itheme;
configSources?: Record<string, any>;
style?: ViewStyle;
leftActionImgStyle?: ImageStyle;
}
declare interface ProfillingProps {
micSource?: ImageSourcePropType;
imageSource?: ImageSourcePropType;
theme: Itheme;
isPlayed: boolean;
onImagePress?: () => void;
ProfileImagePressDisabled?: boolean;
renderProfileImage?: () => JSX.Element | null;
renderProfileMic?: () => JSX.Element | null;
profilePosition: string;
renderProfile?: (props: {
micSource?: ImageSourcePropType;
imageSource?: ImageSourcePropType;
}) => JSX.Element | null;
}
declare const RNVoiceMessagePlayer: React_2.ForwardRefExoticComponent<Omit<VoiceMessagePlayerProps, "ref"> & React_2.RefAttributes<any>>;
export { RNVoiceMessagePlayer as default_alias }
export { RNVoiceMessagePlayer as default_alias_1 }
/**
* TrackerLine component provides a slider-like interface to track progress.
*
* @param {object} props - The props of the TrackerLine component.
* @param {import("../helpers/theme").Theme} [props.theme=_theme] - The theme object with colors.
* @param {number} [props.thumbSize=16] - Size of the slider thumb.
* @param {boolean} [props.disabled=false] - Whether the slider is disabled or not.
* @param {number} [props.totalValue=0] - Total possible value of the slider.
* @param {number} [props.currentValue=0] - Current value of the slider.
* @param {function} props.onValuesChange - Callback for value change.
* @param {function} props.onValuesChangeStart - Callback for value change start.
* @param {function} props.onValuesChangeFinish - Callback for value change finish.
* @param {()=>JSX.Element} props.renderComponent - Custom component.
* @param {string} props.thumbColor - Custom thumb or marker color
*/
declare const TrackerLine: ({ theme, thumbSize, disabled, totalValue, currentValue, onValuesChange, onValuesChangeStart, onValuesChangeFinish, renderComponent, thumbColor, }: TrackerLineProps) => JSX_2.Element;
export { TrackerLine as TrackerLineComponent }
export { TrackerLine as default_alias_5 }
declare interface TrackerLineProps {
theme?: Itheme;
thumbSize?: number;
disabled?: boolean;
totalValue?: number;
currentValue?: number;
onValuesChange: (value: number) => void;
onValuesChangeStart: () => void;
onValuesChangeFinish: (value?: number) => void;
renderComponent?: () => JSX.Element;
thumbColor?: string;
}
/**
* TrackerTimers component to display timer and timestamp.
* Allows for custom rendering of both timer and timestamp values.
*
* @param {object} props - Properties to configure the component.
* @param {import("../helpers/theme").Theme} [props.theme=_theme] - Theme for the component.
* @param {number} props.timer - Timer value in seconds.
* @param {keyof defaultStatusSources | "none"} props.status - Status icon changed
* @param {string} props.timestamp - Timestamp value.
* @param {DefaultStatusSources} props.statusSources - Optional custom status sources for images.
* @param {({timer:number})=>JSX.Element} [props.renderTimer] - Custom render function for timer.
* Receives an object of the form: { timer: number }
* @param {({timestamp:string})=>JSX.Element} [props.renderTimestamp] - Custom render function for timestamp.
* Receives an object of the form: { timestamp: string }
* @returns {JSX.Element} Rendered TrackerTimers component.
*/
declare const TrackerTimers: ({ theme, timer, timestamp, renderTimer, renderTimestamp, status, statusSources, }: TrackerTimersProps) => JSX_2.Element;
export { TrackerTimers as BottomTimesComponent }
export { TrackerTimers as default_alias_6 }
declare interface TrackerTimersProps {
theme: Itheme;
timer: number;
timestamp: string;
renderTimer?: (props: { timer: number }) => JSX.Element;
renderTimestamp?: (props: { timestamp: string }) => JSX.Element;
status?: string;
statusSources?: Record<string, any>;
}
declare interface VoiceMessagePlayerProps {
source: { uri: string } | ImageRequireSource;
timestamp?: string;
autoDownload?: boolean;
customTheme?: Itheme;
containerStyle?: ViewStyle;
ref?: Ref<any>;
chatStatusProps?: {
isNew?: boolean;
isPlayed?: boolean;
status?: DefaultStatusString;
};
profileProps?: {
profilePosition?: "left" | "right";
profileImageSource: ImageSourcePropType;
profileMicSource: ImageSourcePropType;
ProfileImagePressDisabled?: boolean;
onProfileImagePress?: () => void;
renderProfileMic?: () => JSX.Element | null;
renderProfileImage?: () => JSX.Element | null;
renderProfile?: () => JSX.Element | null;
profileContainerStyle?: ViewStyle;
};
bottomProps?: {
renderBottomTimestamp?: () => JSX.Element | null;
renderBottomTimer?: () => JSX.Element | null;
bottomStatusSources?: DefaultStatusSources;
bottomContainerStyle?: ViewStyle;
renderBottom?: (props: {
theme: Itheme;
timer?: number;
timestamp: string;
}) => JSX.Element | null;
};
leftActionProps?: {
leftActionSources?: DefaultActionSources;
leftActionContainerStyle?: ViewStyle;
leftActionImgStyle: ImageStyle;
renderLeftAction?: (props: {
isLoading?: boolean;
isError?: boolean;
isDownloaded?: boolean;
isDownloading?: boolean;
isPlaying?: boolean;
}) => JSX.Element;
};
renderDownloadProgress?: (props: {
progress: number;
theme: Itheme;
}) => JSX.Element;
trackProps?: {
renderTrack?: (props: {
error: boolean;
theme: Itheme;
duration: number;
currentTime: number;
setCurrentTime: (time: number) => void;
soundRef: Audio.Sound | null;
}) => JSX.Element;
onTrackChange?: (value: number) => void;
onTrackChangeComplete?: (value: number) => void;
onTrackChangeStart?: () => void;
};
renderText?: (props: {
theme: Itheme;
initializing: boolean;
error: boolean;
isDownloading: boolean;
isURL: boolean;
isDownloaded: boolean;
autoDownload?: boolean;
text: string;
}) => JSX.Element | null;
textNotDownloaded?: string;
textLoading?: string;
textError?: string;
showProfileAvatar?: boolean;
trackContainerStyle?: ViewStyle;
onPlay?: () => void;
onPause?: () => void;
onError?: (error: Error) => void;
onLoading?: () => void;
onDownload?: () => void;
onDownloadSuccess?: (localPath: string) => void;
onDownloadSaved?: (localPath: string) => void;
onDownloadFailed?: (error: Error) => void;
onLoadStart?: () => void;
onLoadSuccess?: (ref: Audio.Sound) => void;
onLoadFailed?: (error: Error) => void;
}
export { }