gistfile1.txt

import usePlayerStore from '../hooks/use-player-store/use-player-store';

import { useCallback } from 'react';

export function UsePlayer() {
  const { audio, setAudio, state, setState, updateTime, updateDuration } =
    usePlayerStore();

  const preLoad = useCallback(
    (url: string) => {
      const audio = new Audio(url);

      audio.ontimeupdate = (event) => {
        const target = event.target as HTMLAudioElement;
        updateTime(target.currentTime);
      };

      audio.ondurationchange = (event) => {
        const target = event.target as HTMLAudioElement;
        updateDuration(target.duration);
      };

      setAudio(audio);
    },
    [setAudio, updateTime, updateDuration]
  );

  const play = useCallback(() => {
    if (audio) {
      console.log('play');
      audio.play();
      setState({
        ...state,
        paused: false,
        playing: true,
      });
    }
  }, [audio, state, setState]);

  const pause = useCallback(() => {
    if (audio) {
      console.log('pause');
      audio.pause();
      setState({
        ...state,
        paused: true,
        playing: false,
      });
    }
  }, [audio, state, setState]);

  const mute = useCallback(() => {
    if (audio) {
      console.log('mute');
      audio.muted = true;
      setState({
        ...state,
        muted: true,
      });
    }
  }, [audio, state, setState]);

  const unmute = useCallback(() => {
    if (audio) {
      console.log('unmute');
      audio.muted = false;
      setState({
        ...state,
        muted: false,
      });
    }
  }, [audio, state, setState]);

  const volume = useCallback(
    (volume: number) => {
      if (audio) {
        console.log('volume');
        volume = Math.min(1, Math.max(0, volume));
        audio.volume = volume;
        setState({
          ...state,
          volume,
        });
      }
    },
    [audio, state, setState]
  );

  const seek = useCallback(
    (time: number) => {
      if (audio && state && state.duration) {
        console.log('seek');
        time = Math.min(state.duration, Math.max(0, time));
        audio.currentTime = time;
        setState({
          ...state,
          time,
        });
      }
    },
    [audio, state, setState]
  );

  return { preLoad, play, pause, mute, unmute, volume, seek };
}

export default UsePlayer;