1234567891011121314151617181920212223242526272829303132333435363738394041 |
- import {useState,useEffect,useRef} from "react";
- import play from '../play.svg'
- import pause from '../pause.svg'
- import {store,actionTrackPlay,actionTrackStop} from "../reducers";
- import {connect} from "react-redux";
- import {backURL} from "../actions";
- export const Track = ({track:{id,url,originalFileName}}) => {
- let audioSrc = backURL + '/'+ url
- const [isPlaying, setIsPlaying] = useState(false);
- const audioRef = useRef(new Audio(audioSrc));
- useEffect(() => {
- if (isPlaying) {
- audioRef.current.play();
- } else {
- audioRef.current.pause();
- }
- }, [isPlaying]);
- return (
- <div className='Tracks'>
- {isPlaying ? (
- <button onClick={() => setIsPlaying(false)}>
- <img src={pause}/>
- </button>
- ) : (
- <button onClick={() => setIsPlaying(true)}>
- <img src={play}/>
- </button>
- )}
- <span>{originalFileName}</span>
- </div>
- )
- }
- export const CTrack = connect(null, {trackPlay: actionTrackPlay, trackStop: actionTrackStop})(Track)
|