playing.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  2. import React, {useState, useEffect} from 'react';
  3. import {faVolumeDown, faVolumeUp, faRandom, faStepBackward, faStopCircle, faStepForward, faPlayCircle, faRepeat} from '@fortawesome/free-solid-svg-icons'
  4. import { store } from '../store/store';
  5. import { actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionFullSetCurrentTime } from '../store/playerReducer';
  6. import {Provider, connect} from 'react-redux';
  7. export let NowPlayingPlayer = (track, duration) => {
  8. const [volume, setVolume] = useState(10);
  9. const [play, setPlay] = useState(false);
  10. return(
  11. <div className="player">
  12. <div className="wrapper">
  13. <div className="details">
  14. <div className="now-playing"></div>
  15. <div className="track-art"></div>
  16. <div className="track-name">{store.getState()?.player?.track?.name|| 'Track Name' }</div>
  17. <div className="now-playing">{store.getState()?.player?.track?.id3?.artist || 'Artist' }</div>
  18. </div>
  19. <div className="slider-container duration">
  20. <span className="current-time">00:00</span>
  21. <input type='range' min={1} max='100' value='0' className="seek-slider"
  22. // onChange={(e) => setVolume(e.target.value)}
  23. />
  24. <span className="total-duration">{store.getState()?.player?.duration || '00:00'}</span>
  25. </div>
  26. <div className="slider-container">
  27. <FontAwesomeIcon icon={faVolumeDown} />
  28. <input type='range' min={1} max='99' value={volume} className="volume-slider"
  29. onChange={(e) => {
  30. setVolume(e.target.value);
  31. if (store.getState()?.player?.track) store.dispatch(actionFullSetVolume(volume)) }}
  32. />
  33. <FontAwesomeIcon icon={faVolumeUp} />
  34. </div>
  35. <div className="buttons">
  36. <div className="random-track"
  37. // onClick={randomTrack()}
  38. >
  39. <FontAwesomeIcon icon={faRandom} className='fa-2x'/>
  40. </div>
  41. <div className="random-track"
  42. // onClick={prevTrack()}
  43. >
  44. <FontAwesomeIcon icon={faStepBackward} className='fa-2x'/>
  45. </div>
  46. <div className="random-track"
  47. onClick={() => {
  48. if(store.getState()?.player?.isPlaying === true) {
  49. store.dispatch(actionFullPause());
  50. setPlay(true)
  51. } else{
  52. store.dispatch(actionFullPlay());
  53. setPlay(false)
  54. }
  55. }}
  56. >
  57. <FontAwesomeIcon icon={(play) ? faPlayCircle : faStopCircle} className='fa-5x' />
  58. </div>
  59. <div className="next-track"
  60. // onClick={nextTrack()}
  61. >
  62. <FontAwesomeIcon icon={faStepForward} className='fa-2x'/>
  63. </div>
  64. <div className="random-track"
  65. // onClick={repeatTrack()}
  66. >
  67. <FontAwesomeIcon icon={faRepeat} className='fa-2x'/>
  68. </div>
  69. </div>
  70. </div>
  71. </div>)
  72. }
  73. export const СNowPlayingPlayer = connect(state => ({track: state.player?.track || [], duration: state.player?.duration}), )(NowPlayingPlayer);