组件封装思路 about step-by-step HOT 1 OPEN

import {
    useCallback,
    useEffect,
    useRef,
    useState,
    MutableRefObject,
} from 'react';
import Sound from 'react-native-sound';
import { downLoadFile } from '@/utils/utils';

type Status = 'pause' | 'play' | 'pending';

export const statusMap: Record<'PAUSE' | 'PLAY' | 'PENDING', Status> = {
    PAUSE: 'pause',
    PLAY: 'play',
    PENDING: 'pending',
};

export type SoundMethods = {
    play: (callback: (error: Error) => void) => void;
    pause: () => void;
};

export type Info = {
    status: Status;
    currentTime: number;
    duration: number;
};

const useSound = (
    url: string
): [SoundMethods, Info, MutableRefObject<Sound | null>] => {
    const soundRef = useRef<Sound | null>(null);
    const timer = useRef<any>(null);
    const [status, setStatus] = useState(statusMap.PAUSE);
    const [currentTime, setCurrentTime] = useState(0);
    const [error, setError] = useState('');
    const [duration, setDuration] = useState(0);

    const play = useCallback(
        (callback) => {
            setStatus(statusMap.PLAY);
            soundRef.current?.play((success) => {
                if (success) {
                    clearInterval(timer.current);
                    setStatus(statusMap.PAUSE);
                    setCurrentTime(duration);
                }
            });
            callback(error);
        },
        [error, duration]
    );

    const pause = useCallback(() => {
        soundRef.current?.pause();
        setStatus(statusMap.PAUSE);
    }, []);

    useEffect(() => {
        if (status === statusMap.PLAY) {
            timer.current = setInterval(() => {
                soundRef.current?.getCurrentTime((second) => {
                    setCurrentTime(second);
                });
            }, 1000);
        }
        return () => {
            clearInterval(timer.current);
        };
    }, [status, soundRef]);

    useEffect(() => {
        if (!url) {
            return;
        }
        setStatus(statusMap.PENDING);
        const { savePath, rnfs } = downLoadFile(url);
        rnfs.promise
            .then((res) => {
                if (res.statusCode === 200) {
                    soundRef.current = new Sound(savePath, '', (err) => {
                        if (err) {
                            setError(err);
                            return;
                        }
                        setDuration(soundRef.current?.getDuration()!);
                    });
                    setStatus(statusMap.PAUSE);
                }
            })
            .catch((err) => {
                setError(err);
            });
        return () => {
            soundRef.current?.release();
        };
    }, [url]);

    return [
        { play, pause },
        {
            status,
            currentTime,
            duration,
        },
        soundRef,
    ];
};

export default useSound;