12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- 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";
- import {useEffect, useState} from "react";
- export const Player = ({player:{token,volume,duration=0,currentTime=0,isPlaying,playlist={},playlistIndex=0},
- trackPlay, trackStop,trackVolume,trackCurrentTime,trackNext,trackPrevious}) => {
- let name = playlist[playlistIndex]?.originalFileName || ''
- let minutes = Math.floor(duration / 60);
- let seconds = Math.floor(parseInt((duration % 60) * 100) / 100);
- let minutesLeft = Math.floor(currentTime / 60);
- let secondsLeft = Math.floor(parseInt((currentTime % 60) * 100) / 100);
- return (
- <div className='Player'>
- <div className='player-nav'>
- <div className='player-current-time'>
- <span className='track-timer'>{minutesLeft || 0}:{(secondsLeft < 10?"0"+secondsLeft : secondsLeft) || "00"}</span>
- <input className='currentTime'
- type="range"
- min={0}
- step={0.1}
- max={duration ? duration : `${duration}`}
- onChange={(e) => trackCurrentTime(e.target.value)}
- value={currentTime}/>
- <span className='track-timer'>{minutes || 0}:{(seconds < 10?"0"+seconds : seconds) || "00"}</span>
- </div>
- <div className="vol-buttons">
- <div className='player-buttons'>
- <button onClick={() => trackPrevious()}><img src={prev} alt='prev'/></button>
- {!isPlaying ? ( <button onClick={() => trackPlay()}>
- <img src={play} alt='play'/></button>) : ( <button onClick={() => trackStop()}>
- <img src={pause} alt='pause'/></button>)}
- <button onClick={()=>trackNext()}><img src={next} alt='next'/></button>
- </div>
- <input className='volume'
- type="range"
- min={0}
- step={0.1}
- max={1}
- onChange={(e) => trackVolume(e.target.value)}
- value={volume}/>
- </div>
- </div>
- <h3>{name || ''}</h3>
- </div>
- )
- }
- export const CPlayer = connect(state => ({player: state.player,token: state.auth.token}),
- {trackPlay: actionTrackPlay,
- trackStop: actionTrackStop,
- trackVolume:actionTrackVolume,
- trackCurrentTime:actionTrackCurrentTime,
- trackNext:actionNextTrack,
- trackPrevious:actionPreviousTrack,})(Player)
|