src/components/playing.js

@@ -0,0 +1,88 @@
+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 { actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionFullSetCurrentTime } from '../store/playerReducer';
+import {Provider, connect}   from 'react-redux';
+
+export let NowPlayingPlayer = (track, duration) => {
+    const [volume, setVolume] = useState(10);
+    const [play, setPlay] = useState(false);
+
+return(
+<div className="player">
+    <div className="wrapper">
+        <div className="details">
+            <div className="now-playing"></div>
+            <div className="track-art"></div>
+            <div className="track-name">{store.getState()?.player?.track?.name|| 'Track Name'  }</div>
+            <div className="now-playing">{store.getState()?.player?.track?.id3?.artist || 'Artist'  }</div>
+        </div>
+
+        <div className="slider-container duration">
+            <span className="current-time">00:00</span>
+            <input type='range' min={1} max='100' value='0' className="seek-slider" 
+            // onChange={(e) => setVolume(e.target.value)}
+
+            />
+            <span className="total-duration">{store.getState()?.player?.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={randomTrack()}
+            >
+                <FontAwesomeIcon icon={faRandom} className='fa-2x'/>
+            </div>
+            <div className="random-track" 
+            // onClick={prevTrack()}
+            >
+                <FontAwesomeIcon icon={faStepBackward} className='fa-2x'/>
+                
+            </div>
+            <div className="random-track" 
+              onClick={() => {
+                if(store.getState()?.player?.isPlaying === true) {
+                    store.dispatch(actionFullPause());
+                    setPlay(true)
+                 } else{
+                    store.dispatch(actionFullPlay());
+                    setPlay(false)
+                 } 
+                }}
+            >
+                <FontAwesomeIcon icon={(play) ? faPlayCircle : faStopCircle} className='fa-5x' />
+            </div>
+            <div className="next-track"
+            //  onClick={nextTrack()}
+             >
+                <FontAwesomeIcon icon={faStepForward} className='fa-2x'/>
+            </div>
+            <div className="random-track" 
+            // onClick={repeatTrack()}
+            >
+                <FontAwesomeIcon icon={faRepeat} className='fa-2x'/>
+            </div>
+
+        </div>
+        
+    </div>
+</div>)
+}
+
+export const СNowPlayingPlayer = connect(state => ({track: state.player?.track || [], duration: state.player?.duration}), )(NowPlayingPlayer);

src/index.css

@@ -6,8 +6,147 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
+.logo {
+  width: 50px;
+}
+.logoimg{
+  width: 50px;
+}
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+.card {
+  color:black;
+  text-decoration: none;
+}
+
+/* dkfjksdflk */
+.player{
+  height: 95vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.wrapper{
+  border: 1px solid transparent;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+}
+.details{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.track-art{
+  margin: 25px;
+  height: 250px;
+  width: 250px;
+  border: 2px solid #fff;
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+  -moz-box-shadow: 0px 6px 5px #ccc;
+  -webkit-box-shadow:0px 6px 5px #ccc;
+  box-shadow: 0px 6px 5px #ccc;
+  -moz-border-radius:190px;
+  -webkit-border-radius:190px;
+  border-radius: 190px;
+}
+.now-playing{
+  font-size: 1rem;
+}
+.track-name{
+  font-size: 2.5rem;
+}
+.track-artist{
+  margin-top: 5px;
+  font-size: 1.5rem;
+}
+.buttons{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 30px;
+}
+.active{
+  color: black;
+}
+.repeat-track,
+.random-track,
+.playpause-track,
+.prev-track,
+.next-track{
+  padding: 25px;
+  opacity: 0.8;
+  transition: opacity .2s;
+}
+.repeat-track:hover,
+.random-track:hover,
+.playpause-track:hover,
+.prev-track:hover,
+.next-track:hover{
+  opacity: 1.0;
+}
+.duration{
+width: 400px;
+}
+
+.slider_container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.seek_slider,
+.volume_slider{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 5px;
+  background: #83a9ff;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+.seek_slider::-webkit-slider-thumb,
+.volume_slider::-webkit-slider-thumb{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  background: white;
+  border: 3px solid #3774ff;
+  cursor: pointer;
+  border-radius: 100%;
+}
+.seek_slider:hover,
+.volume_slider:hover{
+  opacity: 1.0;
+}
+.seek_slider{
+  width: 80%;
+}
+.volume_slider{
+  width: 30%;
+}
+.current-time,
+.total-duration{
+  padding: 20px;
+}
+i.fa-volume-down,
+i.fa-volume-up{
+  padding: 10px;
+}
+i,
+i.fa-play-circle,
+i.fa-pause-circle,
+i.fa-step-forward,
+i.fa-step-backward{
+  cursor: pointer;
+}
+.randomActive{
+  color: black;
+}

src/index.js

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <App />,
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();