123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- import play from '../play.svg'
- import pause from '../pause.svg'
- import next from '../next.svg'
- import prev from '../prev.svg'
- import {connect} from "react-redux";
- import {actionTrackPlay, actionTrackStop,actionTrackVolume,actionTrackCurrentTime,actionNextTrack,actionPreviousTrack} from "../reducers";
- export const Player = ({player:{volume,duration,currentTime,isPlaying},
- trackPlay, trackStop,trackVolume,trackCurrentTime,trackNext,trackPrevious}) => {
- return (
- <div className='Player'>
- <input className='currentTime'
- type="range"
- min={0}
- step={0.1}
- max={duration ? duration : `${duration}`}
- onChange={(e) => trackCurrentTime(e.target.value)}
- value={currentTime}/>
- <button onClick={() => trackPrevious()}><img src={prev}/></button>
- {!isPlaying ? ( <button onClick={() => trackPlay()}>
- <img src={play}/></button>) : ( <button onClick={() => trackStop()}>
- <img src={pause}/></button>)}
- <button onClick={()=>trackNext()}><img src={next}/></button>
- <input
- type="range"
- min={0}
- step={0.1}
- max={1}
- onChange={(e) => trackVolume(e.target.value)}
- value={volume}/>
- </div>
- )
- }
- export const CPlayer = connect(state => ({player: state.player}),
- {trackPlay: actionTrackPlay,
- trackStop: actionTrackStop,
- trackVolume:actionTrackVolume,
- trackCurrentTime:actionTrackCurrentTime,
- trackNext:actionNextTrack,
- trackPrevious:actionPreviousTrack,})(Player)
|