|
@@ -5,7 +5,8 @@ import { store } from '../store/store';
|
|
|
import {actionPlayerRandom, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack, actionSetRepeat, actionSetRandom} from '../store/playerReducer';
|
|
|
import {Provider, connect} from 'react-redux';
|
|
|
import { audio } from './Tracks';
|
|
|
-import img_album from '../images/default_album.gif'
|
|
|
+import img_album from '../images/default_album.gif';
|
|
|
+import {Nav, Tab, Tabs} from "react-bootstrap";
|
|
|
|
|
|
function msToTime(duration) {
|
|
|
let hours,minutes,seconds;
|
|
@@ -29,88 +30,112 @@ export let NowPlayingPlayer = (props) => {
|
|
|
}, [newCurrent]);
|
|
|
|
|
|
let album_photo = (props.track?.album?.photo) ? `http://player-api/storage/albums/${props.track?.album?.photo}` : img_album
|
|
|
-
|
|
|
-return(
|
|
|
-<div className="player">
|
|
|
- <div className="wrapper">
|
|
|
- <div className="details">
|
|
|
- <div className="now-playing"></div>
|
|
|
- <div className="track-art" style={{backgroundImage:`url(${album_photo})`}} ></div>
|
|
|
- <div className="track-name">{props.track?.name|| 'Track Name' }</div>
|
|
|
- <div className="now-playing">{props.track?.id3?.artist || 'Artist' }</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="slider-container duration">
|
|
|
- <span className="current-time">{props.currentTime ?
|
|
|
- `0${((props.currentTime - props.currentTime % 60) / 60 % 60).toFixed() !== 'NaN' ?
|
|
|
- ((props.currentTime - props.currentTime % 60) / 60 % 60).toFixed() : '0'}:${(props.currentTime % 60).toFixed() > 9 ?
|
|
|
- '' : '0'}${(props.currentTime % 60).toFixed() !== 'NaN' ? (props.currentTime % 60).toFixed() : '0'}` : '--:--'}
|
|
|
- </span>
|
|
|
-
|
|
|
- <input type='range' min={0} max={props.duration} className="seek-slider"
|
|
|
- value={props.currentTime || 0} onChange={(e) => setNewCurrent(e.target.value)}
|
|
|
- onMouseUp={() => store.dispatch(actionFullPlay())} onMouseDown={() => store.dispatch(actionFullPause())}
|
|
|
- />
|
|
|
-
|
|
|
- <span className="total-duration">{props.track?.id3?.time || (msToTime(props.duration) !== 'NaN:NaN'? msToTime(props.duration) : '00:00')}</span>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="slider-container">
|
|
|
- <FontAwesomeIcon icon={faVolumeDown} />
|
|
|
- <input type='range' min={1} max='99' value={volume} className="volume-slider"
|
|
|
- onChange={(e) => {
|
|
|
- setVolume(e.target.value);
|
|
|
- if (store.getState()?.player?.track) store.dispatch(actionFullSetVolume(volume)) }}
|
|
|
-
|
|
|
- />
|
|
|
- <FontAwesomeIcon icon={faVolumeUp} />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="buttons">
|
|
|
- <div className="random-track"
|
|
|
- onClick={() => {
|
|
|
- props.random === 1 ? store.dispatch(actionSetRandom(2)) : store.dispatch(actionSetRandom(1))
|
|
|
- store.dispatch(actionPlayerRandom());
|
|
|
- }}
|
|
|
- >
|
|
|
- <FontAwesomeIcon icon={faRandom} className={props.random === 1 ? 'fa-2x' : 'fa-3x'}/>
|
|
|
- </div>
|
|
|
- <div className="prev-track"
|
|
|
- onClick={ () => store.dispatch(actionPrevTrack(props.track))}
|
|
|
- >
|
|
|
- <FontAwesomeIcon icon={faStepBackward} className='fa-2x'/>
|
|
|
+ const [key, setKey] = useState('home');
|
|
|
+ return(
|
|
|
+ <div className="player col-xxl-3 col-lg-5 ">
|
|
|
+ <div className="wrapper ">
|
|
|
+ <Tabs
|
|
|
+ id="fill-tab-example"
|
|
|
+ activeKey={key}
|
|
|
+ onSelect={(k) => setKey(k)}
|
|
|
+ className="mb-3 justify-content-center text-white"
|
|
|
+ tabClassName="btn-dark"
|
|
|
+ fill
|
|
|
+ >
|
|
|
+ <Tab className="text-white bg-dark" tabClassName="text-white bg-dark" eventKey="home" title="Player">
|
|
|
+ <div className="flex-column justify-content-center align-items-center d-flex">
|
|
|
+ <div className="details w-100">
|
|
|
+ <div className="now-playing"></div>
|
|
|
+ <div className="track-art" style={{backgroundImage:`url(${album_photo})`}} ></div>
|
|
|
+ {/*<div className="track-name">{props.track?.name|| 'Track Name' }</div>*/}
|
|
|
+ <div className="track-name w-100 text-center">
|
|
|
+ <div className='line w-75'>
|
|
|
+ <div className='second w-100'>
|
|
|
+ <span className="w-100">
|
|
|
+ {props.track?.name|| 'Track Name' }
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="now-playing">{props.track?.id3?.artist || 'Artist' }</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="slider-container duration">
|
|
|
+
|
|
|
+ <div className="d-flex align-items-end justify-content-between">
|
|
|
+ <div className="slider-container d-flex flex-column w-75 pe-2" >
|
|
|
+ <div className="d-flex justify-content-between">
|
|
|
+ <span className="text-secondary">{props.currentTime ?
|
|
|
+ `0${((props.currentTime - props.currentTime % 60) / 60 % 60).toFixed() !== 'NaN' ?
|
|
|
+ ((props.currentTime - props.currentTime % 60) / 60 % 60).toFixed() : '0'}:${(props.currentTime % 60).toFixed() > 9 ?
|
|
|
+ '' : '0'}${(props.currentTime % 60).toFixed() !== 'NaN' ? (props.currentTime % 60).toFixed() : '0'}` : '--:--'}
|
|
|
+ </span>
|
|
|
+ <span className="text-secondary">{props.track?.id3?.time || (msToTime(props.duration) !== 'NaN:NaN'? msToTime(props.duration) : '00:00')}</span>
|
|
|
+ </div>
|
|
|
+ <input type='range' min={0} max={props.duration} className="seek-slider w-100 cursor-pointer"
|
|
|
+ value={props.currentTime || 0} onChange={(e) => setNewCurrent(e.target.value)}
|
|
|
+ onMouseUp={() => store.dispatch(actionFullPlay())} onMouseDown={() => store.dispatch(actionFullPause())}/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="slider-container d-flex flex-column w-25" >
|
|
|
+ <div className="d-flex justify-content-between">
|
|
|
+ <FontAwesomeIcon icon={faVolumeDown} className="text-secondary"/><FontAwesomeIcon icon={faVolumeUp} className="text-secondary"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <input type='range' min={1} max='99' value={volume} className="volume-slider cursor-pointer"
|
|
|
+ onChange={(e) => {
|
|
|
+ setVolume(e.target.value);
|
|
|
+ if (store.getState()?.player?.track) store.dispatch(actionFullSetVolume(volume)) }}/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="buttons">
|
|
|
+ <div className="random-track">
|
|
|
+ <FontAwesomeIcon icon={faRandom} className={props.random === 1 ? 'fa-2x text-white-50 cursor-pointer' : 'fa-2x text-primary cursor-pointer'}
|
|
|
+ onClick={() => {
|
|
|
+ props.random === 1 ? store.dispatch(actionSetRandom(2)) : store.dispatch(actionSetRandom(1))
|
|
|
+ store.dispatch(actionPlayerRandom());
|
|
|
+ }}/>
|
|
|
+ </div>
|
|
|
+ <div className="prev-track">
|
|
|
+ <FontAwesomeIcon icon={faStepBackward} className='fa-2x cursor-pointer'
|
|
|
+ onClick={ () => store.dispatch(actionPrevTrack(props.track))}/>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className="play-track">
|
|
|
+ <FontAwesomeIcon icon={(!props.isPlaying) ? faPlayCircle : faStopCircle} className='fa-5x cursor-pointer'
|
|
|
+ onClick={() => {
|
|
|
+ if(store.getState()?.player?.isPlaying === true) {
|
|
|
+ store.dispatch(actionFullPause());
|
|
|
+ } else{
|
|
|
+ store.dispatch(actionFullPlay());
|
|
|
+ }
|
|
|
+ }}/>
|
|
|
+ </div>
|
|
|
+ <div className="next-track">
|
|
|
+ <FontAwesomeIcon icon={faStepForward} className='fa-2x cursor-pointer' onClick={() => {
|
|
|
+ store.dispatch(actionNextTrack({track: props.track, end:'false'}));
|
|
|
+ }}/>
|
|
|
+ </div>
|
|
|
+ <div className="random-track">
|
|
|
+ <FontAwesomeIcon icon={faRepeat} className={props.repeat === 1 ? 'fa-2x text-white-50 cursor-pointer' : 'fa-2x text-primary cursor-pointer'}
|
|
|
+ onClick={() => (props.repeat === 1 ? store.dispatch(actionSetRepeat(2)) : store.dispatch(actionSetRepeat(1)))}/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </Tab>
|
|
|
+ <Tab className="text-white bg-dark" tabClassName="text-white bg-dark" eventKey="profile" title="Queue">
|
|
|
+ asdasd
|
|
|
+ </Tab>
|
|
|
+ </Tabs>
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
- <div className="play-track"
|
|
|
- onClick={() => {
|
|
|
- if(store.getState()?.player?.isPlaying === true) {
|
|
|
- store.dispatch(actionFullPause());
|
|
|
- } else{
|
|
|
- store.dispatch(actionFullPlay());
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <FontAwesomeIcon icon={(!props.isPlaying) ? faPlayCircle : faStopCircle} className='fa-5x' />
|
|
|
- </div>
|
|
|
- <div className="next-track"
|
|
|
- onClick={() => {
|
|
|
- store.dispatch(actionNextTrack({track: props.track, end:'false'}));
|
|
|
- }
|
|
|
- }
|
|
|
- >
|
|
|
- <FontAwesomeIcon icon={faStepForward} className='fa-2x'/>
|
|
|
- </div>
|
|
|
- <div className="random-track"
|
|
|
- onClick={() => (props.repeat === 1 ? store.dispatch(actionSetRepeat(2)) : store.dispatch(actionSetRepeat(1)))}
|
|
|
- >
|
|
|
- <FontAwesomeIcon icon={faRepeat} className={props.repeat === 1 ? 'fa-2x' : 'fa-3x'}/>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-</div>)
|
|
|
+ </div>)
|
|
|
}
|
|
|
|
|
|
export const СNowPlayingPlayer = connect(state => ({track: state.player?.track || [],
|