player.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import play from '../play.svg'
  2. import pause from '../pause.svg'
  3. import next from '../next.svg'
  4. import prev from '../prev.svg'
  5. import {connect} from "react-redux";
  6. import {actionTrackPlay, actionTrackStop,actionTrackVolume,actionTrackCurrentTime} from "../reducers";
  7. export const Player = ({player:{volume,duration,currentTime},
  8. trackPlay, trackStop,trackVolume,trackCurrentTime}) => {
  9. return (
  10. <div className='Player'>
  11. <input className='currentTime'
  12. type="range"
  13. min={0}
  14. step={0.1}
  15. max={duration ? duration : `${duration}`}
  16. onChange={(e) => trackCurrentTime(e.target.value)}
  17. value={currentTime}/>
  18. <button><img src={prev}/></button>
  19. <button onClick={() => trackPlay()}>
  20. <img src={play}/></button>
  21. <button onClick={() => trackStop()}>
  22. <img src={pause}/></button>
  23. <button><img src={next}/></button>
  24. <input
  25. type="range"
  26. min={0}
  27. step={0.1}
  28. max={1}
  29. onChange={(e) => trackVolume(e.target.value)}
  30. value={volume}/>
  31. </div>
  32. )
  33. }
  34. export const CPlayer = connect(state => ({player: state.player}),
  35. {trackPlay: actionTrackPlay,
  36. trackStop: actionTrackStop,
  37. trackVolume:actionTrackVolume,
  38. trackCurrentTime:actionTrackCurrentTime})(Player)