123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
- import React, {useState, useEffect} from 'react';
- import {faVolumeDown, faVolumeUp, faRandom, faStepBackward, faStopCircle, faStepForward, faPlayCircle, faRepeat} from '@fortawesome/free-solid-svg-icons'
- 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 {Nav, Tab, Tabs} from "react-bootstrap";
- function msToTime(duration) {
- let hours,minutes,seconds;
- hours = Math.floor(duration / 3600);
- minutes = Math.floor((duration - 3600 * hours) / 60);
- seconds = Math.floor((duration - 3600 * hours - 60 * minutes) % 60);
-
- hours = (hours < 10) ? "0" + hours : hours;
- minutes = (minutes < 10) ? "0" + minutes : minutes;
- seconds = (seconds < 10) ? "0" + seconds : seconds;
-
- return minutes + ":" + seconds;
- }
- export let NowPlayingPlayer = (props) => {
- const [volume, setVolume] = useState(20);
- const [newCurrent, setNewCurrent] = useState(0)
- useEffect(() => {
- if (props.currentTime) audio.currentTime = newCurrent
- }, [newCurrent]);
-
- let album_photo = (props.track?.album?.photo) ? `http://player-api/storage/albums/${props.track?.album?.photo}` : img_album
- 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>)
- }
- export const СNowPlayingPlayer = connect(state => ({track: state.player?.track || [],
- duration: state.player?.duration || '00:00',
- isPlaying: state.player?.isPlaying || false,
- currentTime: state.player?.currentTime || '00:00',
- repeat: state.player?.repeat || 1,
- random: state.player?.random || 1}) )(NowPlayingPlayer);
|