tracklist

src/components/Tracks.js

@@ -119,12 +119,9 @@ export const TracksAll = ({tracks, playlist}) =>
         </tr>
 </thead>
     <tbody>
-        {tracks.map((tracks, i) => <CTrack key={i} track={tracks} playlist={playlist}/>)}
+        {tracks.map((tracks, i) => <Track key={i} track={tracks} playlist={playlist}/>)}
     </tbody>
 </table>
 
 export const СAllTracks = connect(state => ({playlist: state.promise.plstById?.payload || {},
                                  tracks: state.promise?.plstById?.payload?.tracks || []} ), )(TracksAll);
-
-export const CTrack = connect(state => ({playlist: state.promise.plstById?.payload || {},
-                                tracks: state.promise?.plstById?.payload?.tracks || []} ), )(Track);

src/components/playing.js

@@ -7,6 +7,7 @@ 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";
+import { CTrackList } from './tracklist';
 
 function msToTime(duration) {
     let hours,minutes,seconds;
@@ -38,8 +39,6 @@ export let NowPlayingPlayer = (props) => {
                     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">
@@ -60,7 +59,7 @@ export let NowPlayingPlayer = (props) => {
                                 <div className="now-playing">{props.track?.id3?.artist || 'Artist'  }</div>
                             </div>
         
-                            <div className="slider-container duration">
+                            <div className="slider-container duration w-100">
         
                                 <div className="d-flex align-items-end justify-content-between">
                                     <div className="slider-container d-flex flex-column w-75 pe-2" >
@@ -128,8 +127,8 @@ export let NowPlayingPlayer = (props) => {
                         </div>
         
                     </Tab>
-                    <Tab className="text-white bg-dark" tabClassName="text-white bg-dark"  eventKey="profile" title="Queue">
-                        asdasd
+                    <Tab className="text-white bg-dark playing-list" tabClassName="text-white bg-dark playing-list"  eventKey="profile" title="Queue">
+                        {store.getState().player?.playlist && <CTrackList/>}
                     </Tab>
                 </Tabs>
         

src/components/tracklist.js

@@ -0,0 +1,59 @@
+import { faPlay, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button } from "react-bootstrap";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { actionRemoveTrackFromQueue } from "../store/playerReducer";
+import { store } from "../store/store";
+import { sendForm } from "./SendForm";
+
+
+const Track = ({track}) => 
+<>
+<tr>
+<td width={30} data-id={track.id}>
+    <div className="col">
+        <Button variant="outline-light" className='rounded-5'  title='Play' onClick={async () => {
+            // console.log(playlist.tracks, playlist?.tracks[playlist?.tracks.indexOf(track)]);
+            // playlist.tracks && store.dispatch(actionFullSetPlaylist(playlist?.tracks));
+            // playlist.tracks ? store.dispatch(actionFullSetTrack(playlist?.tracks[playlist?.tracks.indexOf(track)])) : store.dispatch(actionFullSetTrack(track))
+            // store.dispatch(actionFullPlay());
+        }}>
+            <FontAwesomeIcon className='' icon={faPlay}/>
+        </Button>
+    </div>
+</td>
+    <td>          
+        <Link className="link-light" to='#'>  {track.name}</Link>
+    </td>
+    <td align={"right"}>
+        <FontAwesomeIcon icon={faXmark} onClick={() => store.dispatch(actionRemoveTrackFromQueue(track))}/>
+    </td>
+</tr>
+
+
+    {/* <div>{track?.name} - {track?.id3?.artist}</div> */}
+</>
+
+const TrackList = ({tracks}) => {
+    return(
+        <>
+        <table className="table table-dark table-hover align-middle">
+            <thead>
+                <tr>
+                    <th scope="col" width={30}></th>
+                    <th scope="col">Track name</th>
+                    {/* <th scope="col">Artist</th> */}
+                    {/* <th scope="col">Album</th> */}
+                    <th scope='col'>Action</th>
+                </tr>
+        </thead>
+            <tbody>
+                {tracks.map((track, i) => <Track track={track}/>)}
+            </tbody>
+        </table>
+        </>
+    )
+}
+
+export const CTrackList = connect(state => ({tracks: state.player?.playlist || []} ), )(TrackList);

src/index.css

@@ -1,3 +1,29 @@
+/* Customize website's scrollbar like Mac OS
+Not supports in Firefox and IE */
+
+/* total width */
+::-webkit-scrollbar {
+  background-color: #fff;
+  width: 5px;
+}
+
+/* background of the scrollbar except button or resizer */
+::-webkit-scrollbar-track {
+  background-color: #fff;
+}
+
+/* scrollbar itself */
+::-webkit-scrollbar-thumb {
+  background-color: #606060bc;
+  border-radius: 2px;
+  border: none;
+}
+
+/* set button(top and bottom of the scrollbar) */
+::-webkit-scrollbar-button {
+  display:none;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -95,6 +121,8 @@ code {
   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;
+  position: sticky;
+  top: 50px;
 }
 .details{
   display: flex;
@@ -204,3 +232,10 @@ i.fa-step-backward{
 .randomActive{
   color: black;
 }
+.tab-content{
+  max-height: 450px;
+}
+.playing-list{
+  max-height: inherit;
+  overflow: auto;
+}

src/pages/artistPage.js

@@ -1,16 +1,27 @@
 import { connect } from "react-redux"
 import { store } from "../store/store";
+import { useEffect } from "react";
 import { PlaylistsAll } from "../components/Playlist";
 import { TracksAll } from "../components/Tracks";
+import { actionArtistById } from "../store/promiseReducer";
 
-export const ArtistPage = ({artist}) => 
-<>
- <>{artist.name}</>
+export const ArtistPage = ({artist}) => {
+    let id = window.location.href.split('/')[4];
+    const getAnswer =  () => {
+      store.dispatch(actionArtistById(id));
+    };
+
+    useEffect(() => {
+      getAnswer();
+    }, []);
+
+return(<>
+ <h1>{artist.name}</h1>
  <CArtistPlaylists/>
  <CArtistTracks/>
- </>
+ </>)
 
- 
+}
 
 export const CArtistPage = connect(state => ({artist: state.promise.artistById?.payload || {}} ), )(ArtistPage);
 const CArtistPlaylists = connect(state => ({playlists: state.promise.artistById?.payload?.albums || []} ), )(PlaylistsAll);

src/store/playerReducer.js

@@ -60,62 +60,62 @@ export const playerReducer = function(state = {}, {type, duration, track, playli
 
 
 const actionPlay = () => ({type:'PLAY'})
-export const actionFullPlay = () =>
-    dispatch => {  
-        audio.play();
-        dispatch(actionPlay());
-        audio.onloadedmetadata = (() => dispatch(actionFullGetDuration(audio.duration)));
-        audio.ontimeupdate = () =>  dispatch(actionFullSetCurrentTime(audio.currentTime));
-        actionFullSetCurrentTime(audio.currentTime);
-        actionSetRepeat(1);
-    }
+    export const actionFullPlay = () =>
+        dispatch => {  
+            audio.play();
+            dispatch(actionPlay());
+            audio.onloadedmetadata = (() => dispatch(actionFullGetDuration(audio.duration)));
+            audio.ontimeupdate = () =>  dispatch(actionFullSetCurrentTime(audio.currentTime));
+            actionFullSetCurrentTime(audio.currentTime);
+            actionSetRepeat(1);
+        }
  
 
 const actionPause = () => ({type:'PAUSE'})
-export const actionFullPause = () =>
-    dispatch => {
-        audio.pause();
-        dispatch(actionPause());
-    }
+    export const actionFullPause = () =>
+        dispatch => {
+            audio.pause();
+            dispatch(actionPause());
+        }
 
 const actionSetVolume = (volume) => ({type:'SET_VOLUME', volume})
-export const actionFullSetVolume = (volume) =>
-    dispatch => {
-        audio.volume = volume / 100;
-        dispatch(actionSetVolume(volume));
-    }
+    export const actionFullSetVolume = (volume) =>
+        dispatch => {
+            audio.volume = volume / 100;
+            dispatch(actionSetVolume(volume));
+        }
 
 const actionSetTrack = (track) => ({type:'SET_TRACK', track})
-export const actionFullSetTrack = (track) =>
-    dispatch => {
-        console.log(track)
-        audio.src = `http://player-api/storage/tracks/${track?.file}`;
-        dispatch(actionSetTrack(track));
-        dispatch(actionFullPlay());
-    }
+    export const actionFullSetTrack = (track) =>
+        dispatch => {
+            console.log(track)
+            audio.src = `http://player-api/storage/tracks/${track?.file}`;
+            dispatch(actionSetTrack(track));
+            dispatch(actionFullPlay());
+        }
 
 const actionGetDuration = (duration) => ({type:'GET_DURATION', duration})
-export const actionFullGetDuration = (duration) =>
-    dispatch => {
-        dispatch(actionGetDuration(duration));
-    }
+    export const actionFullGetDuration = (duration) =>
+        dispatch => {
+            dispatch(actionGetDuration(duration));
+        }
 
 const actionSetCurrentTime = (currentTime) => ({type:'SET_CURRENT_TIME', currentTime})
-export const actionFullSetCurrentTime = (currentTime) =>
-    dispatch => {
-        const playlist = store.getState().player?.playlist;
-        const track = store.getState().player?.track;
-        const count = playlist.indexOf(track);
-        dispatch(actionSetCurrentTime(currentTime));
-        audio.onended = ()  => dispatch(actionNextTrack({track:playlist[count], end:'true'}));
-    }
+    export const actionFullSetCurrentTime = (currentTime) =>
+        dispatch => {
+            const playlist = store.getState().player?.playlist;
+            const track = store.getState().player?.track;
+            const count = playlist.indexOf(track);
+            dispatch(actionSetCurrentTime(currentTime));
+            audio.onended = ()  => dispatch(actionNextTrack({track:playlist[count], end:'true'}));
+        }
 
 
 const actionSetPlaylist = (playlist) => ({type:'SET_PLAYLIST', playlist})
-export const actionFullSetPlaylist = (playlist) =>
-    dispatch => {
-        dispatch(actionSetPlaylist(playlist));
-    }
+    export const actionFullSetPlaylist = (playlist) =>
+        dispatch => {
+            dispatch(actionSetPlaylist(playlist));
+        }
 
 
 
@@ -188,11 +188,17 @@ export const actionAddTrackToQueue = (track) =>
         }
     }
 
-    export const actionAddPlaylistToQueue = (tracks) => 
+export const actionAddPlaylistToQueue = (tracks) => 
     async (dispatch, getState) => {
         if (getState().player?.playlist) {
             let newPlaylist = [...getState().player.playlist, ...tracks];
-            console.log(newPlaylist);
             dispatch(actionSetPlaylist([...newPlaylist])) 
         }
-    }
+}
+
+export const actionRemoveTrackFromQueue = (track) => 
+    async (dispatch, getState) => {
+        let newPlaylist = getState().player.playlist.filter((oneTrack) => oneTrack !== track)
+        dispatch(actionSetPlaylist([...newPlaylist])) 
+    }
+