@cometchat/chat-uikit-react-native/lib/shared/views/CometChatMediaRecorder/CometChatAudioPlayer.js

Ready-to-use Chat UI Components for React Native

import React, { useCallback, useEffect, useRef, useState } from "react";
import { NativeModules, Text, TouchableOpacity, View } from "react-native";
import { useTheme } from "../../../theme";
import { Icon } from "../../icons/Icon";
import { AnimatedAudioWaves } from "../CometChatAudioBubble/AnimatedAudioWaves";
export const CometChatAudioPlayer = ({ totalDuration }) => {
    const [status, setStatus] = useState("stopped");
    const [currentTime, setCurrentTime] = useState(0);
    const audioBubbleStyles = useTheme().messageListStyles.outgoingMessageBubbleStyles?.audioBubbleStyles;
    const intervalRef = useRef(null);
    const displayDuration = useCallback(() => (<Text style={audioBubbleStyles?.playProgressTextStyle}>
        {`${String(Math.floor((currentTime || 0) / 60)).padStart(2, "0")}:${String(Math.floor((currentTime || 0) % 60)).padStart(2, "0")}`}
        /
        {`${String(Math.floor((totalDuration || 0) / 60)).padStart(2, "0")}:${String(Math.floor((totalDuration || 0) % 60)).padStart(2, "0")}`}
      </Text>), [currentTime, totalDuration]);
    function clearTimeInterval() {
        if (intervalRef.current !== null) {
            clearInterval(intervalRef.current);
            intervalRef.current = null;
        }
    }
    const playAudio = (type) => {
        NativeModules.FileManager[type === "play" ? "playAudio" : "resumePlaying"]((filepath) => {
            console.log("Filepath _playRecorderAudio", filepath);
            intervalRef.current = setInterval(() => {
                setCurrentTime((prev) => {
                    if (prev >= totalDuration) {
                        setStatus("stopped");
                        stopAudio();
                        return prev;
                    }
                    return prev + 1;
                });
            }, 1000);
        });
    };
    const pauseAudio = () => {
        NativeModules.FileManager.pausePlaying((filepath) => {
            clearTimeInterval();
            console.log("Filepath _pauseRecorderAudio", filepath);
        });
    };
    const stopAudio = () => {
        NativeModules.FileManager.releaseMediaResources((filepath) => {
            clearTimeInterval();
            setCurrentTime(0);
            console.log("Filepath _pauseRecorderAudio", filepath);
        });
    };
    useEffect(() => {
        return clearTimeInterval;
    }, []);
    return (<View style={audioBubbleStyles?.playViewContainerStyle}>
      <TouchableOpacity style={audioBubbleStyles?.playIconContainerStyle} onPress={() => {
            setStatus((prev) => {
                if (prev === "playing") {
                    pauseAudio();
                    return "paused";
                }
                else if (prev === "paused") {
                    playAudio("resume");
                    return "playing";
                }
                else {
                    playAudio("play");
                    return "playing";
                }
            });
        }}>
        <Icon name={status === "playing" ? "pause-fill" : "play-arrow-fill"} height={audioBubbleStyles?.playIconStyle?.height} width={audioBubbleStyles?.playIconStyle?.width} color={audioBubbleStyles?.playIconStyle?.tintColor} imageStyle={audioBubbleStyles?.playIconStyle}/>
      </TouchableOpacity>

      <View style={{ flex: 1 }}>
        <AnimatedAudioWaves waveStyle={audioBubbleStyles?.waveStyle} waveContainerStyle={audioBubbleStyles?.waveContainerStyle} isAnimating={status === "playing"}/>
        {displayDuration()}
      </View>
    </View>);
};
//# sourceMappingURL=CometChatAudioPlayer.js.map