123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- 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'>
- <span>{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>{minutes || 0}:{(seconds < 10?"0"+seconds : seconds) || "00"}</span>
- <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>
- <input
- type="range"
- min={0}
- step={0.1}
- max={1}
- onChange={(e) => trackVolume(e.target.value)}
- value={volume}/>
- <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)
|