react-native-chating-ui-kit/lib/shared/views/CometChatAudioBubble/CometChatAudioBubble.js

CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly

import React, { useEffect, useContext } from "react";
import { View, Text, TouchableOpacity, Image, NativeModules, ActivityIndicator, NativeEventEmitter } from "react-native";
import { CometChatContext } from "../../CometChatContext";
import { AudioBubbleStyle } from "./AudioBubbleStyle";
import { defaultPauseIcon, defaultPlayIcon, } from "./resources";
import { Style } from "./style";
const { SoundPlayer } = NativeModules;
const eventEmitter = new NativeEventEmitter(SoundPlayer);
let listener;
export const CometChatAudioBubble = ({ audioUrl, onPress, playIcon, pauseIcon, style, subtitle, title }) => {
    const { theme } = useContext(CometChatContext);
    const _style = new AudioBubbleStyle({
        backgroundColor: theme?.palette.getBackgroundColor(),
        iconTint: theme?.palette.getPrimary(),
        subtitleColor: theme?.palette.getAccent400(),
        subtitleFont: theme?.typography.subtitle2,
        titleColor: theme?.palette.getAccent(),
        titleFont: theme?.typography.title2,
        ...style
    });
    const { iconTint, subtitleColor, subtitleFont, titleColor, titleFont, backgroundColor, border, borderRadius, height, width } = _style;
    const [status, setStatus] = React.useState("paused");
    useEffect(() => {
        listener = eventEmitter.addListener("soundPlayStatus", (data) => {
            if (audioUrl == data.url) {
                setStatus("paused");
            }
        });
        return () => {
            listener.remove();
        };
    }, []);
    const playPauseAudio = () => {
        if (onPress) {
            onPress(audioUrl);
            return;
        }
        if (status == "playing") {
            SoundPlayer.pause((s) => {
                try {
                    let json = JSON.parse(s);
                    if (json['success'] == true) {
                        setStatus("paused");
                    }
                }
                catch (ex) {
                    console.log(ex);
                }
                ;
            });
            return;
        }
        if (audioUrl) {
            setStatus("loading");
            SoundPlayer.play(audioUrl, (s) => {
                try {
                    let json = JSON.parse(s);
                    if (json['success'] == true) {
                        setStatus("playing");
                    }
                }
                catch (ex) { }
            });
        }
    };
    React.useEffect(() => {
        return () => {
            SoundPlayer.pause((s) => {
                console.log(s);
            });
        };
    }, []);
    return (<View style={[Style.container, { backgroundColor, ...border, borderRadius, height, width }]}>
            {status == "loading" ?
            <ActivityIndicator style={Style.imageStyle} color={iconTint} size={"small"}/> :
            <TouchableOpacity onPress={playPauseAudio}>
                        <Image source={status == "playing" ?
                    pauseIcon || defaultPauseIcon :
                    playIcon || defaultPlayIcon} style={[Style.imageStyle, { tintColor: iconTint }]}/>
                    </TouchableOpacity>}
            <View style={{ flex: 1 }}>
                <Text style={[Style.titleStyle, { ...titleFont, color: titleColor }]} numberOfLines={1} ellipsizeMode="middle">
                    {title}
                </Text>
                {subtitle &&
            <Text style={[Style.subtitleStyle, { ...subtitleFont, color: subtitleColor }]}>
                        {subtitle}
                    </Text>}
            </View>
        </View>);
};
//# sourceMappingURL=CometChatAudioBubble.js.map