styles playlist by id, delete track, repeat track

src/components/EditPlaylistModal.js

@@ -2,7 +2,8 @@ import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import {connect}   from 'react-redux';
 import React, {useState} from 'react';
-import { sendForm } from './LoadTrackModal';
+// import { sendForm } from './LoadTrackModal';
+import { sendForm } from './SendForm';
 
 
 export function EditPlaylistModal  (props)  {

src/components/LoadTrackModal.js

@@ -3,28 +3,11 @@ import Modal from 'react-bootstrap/Modal';
 import {connect}   from 'react-redux';
 import React, {useState, useEffect} from 'react';
 import { store } from '../store/store';
+import { sendForm } from './SendForm';
+import { actionPlaylistById} from '../store/promiseReducer';
+import { actionFullSetPlaylist, actionFullSetTrack, actionFullSetTrackCount} from '../store/playerReducer';
 
 
-export function sendForm (url, data) {
-    fetch(`http://player-api/api/${url}`, {
-        method: 'POST',
-        body: data,
-        headers: {
-          
-          ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
-          
-          },
-      }).then(res => res.json())
-      .then(data => {
-          if(data.token) {
-            console.log(data)
-            return data
-          } else {
-            //console.log(data.login[0]); 
-          }
-      })
-} 
-
 export function LoadTrackModal  (props)  {
     const [tracks, setTrack] = useState(null);
 
@@ -62,7 +45,15 @@ return(
     </form>
     </Modal.Body>
     <Modal.Footer> 
-      <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={props.onHide}>Save</Button> 
+      <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={() => {
+      props.onHide();
+      setTimeout(() => {
+        store.dispatch(actionPlaylistById(props.id));
+        setTimeout(() => store.dispatch(actionFullSetPlaylist(store.getState().promise.plstById?.payload?.tracks)), 1000);
+        }
+        , 1000);
+      }
+      }>Save</Button> 
      </Modal.Footer>
   </Modal>)
 }

src/components/Routs.js

@@ -1,9 +1,8 @@
-import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import {Router, Route, Redirect, Switch} from 'react-router-dom';
 import { history } from '../App';
 import {LoginForm} from './authorization';
 import {CRegisterForm} from './authRegistration';
 import { store } from '../store/store';
-import {CreatePlaylist} from './createPlaylist';
 import { Aside } from '../App';
 import { UserPage} from './userPage';
 import {CPlaylistById}  from './playlistById';

src/components/SendForm.js

@@ -0,0 +1,23 @@
+
+
+
+
+export function sendForm (url, data) {
+    fetch(`http://player-api/api/${url}`, {
+        method: 'POST',
+        body: data,
+        headers: {
+          
+          ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
+          
+          },
+      }).then(res => res.json())
+      .then(data => {
+          if(data.token) {
+            console.log(data)
+            return data
+          } else {
+            //console.log(data.login[0]); 
+          }
+      })
+} 

src/components/Tracks.js

@@ -1,39 +1,92 @@
 import {connect}   from 'react-redux';
 import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist, actionFullSetTrackCount} from '../store/playerReducer';
-import { actionNowPlaylist} from '../store/promiseReducer';
+import { actionNowPlaylist, actionPlaylistById} from '../store/promiseReducer';
 import { store } from '../store/store';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { sendForm } from './SendForm';
+import React, {useState} from 'react';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlay, faUserAstronaut} from "@fortawesome/free-solid-svg-icons";
+import { Link } from 'react-router-dom';
 
 
 export let audio = new Audio();
 
+
+const ButtonDeleteTrack = (track) => {
+    const [deletePllstModal, setDeletePllstModal] = useState(false);
+    let id = store.getState().plstById?.payload?.id;
+    return (
+    <>
+        <Button  variant="outline-danger" onClick={() => {console.log(track); setDeletePllstModal(true)}}> Delete</Button>
+            <Modal
+                show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
+                backdrop="static" keyboard={false} track={track}>
+                <Modal.Header closeButton>
+                    <Modal.Title className='w-100 text-center'>Delete Track?</Modal.Title>
+                </Modal.Header>
+                <Modal.Body className='text-center'>
+                    Are you really want to delete track  <span className='text-danger'><i>"{track.track.name}" - {track.track?.id3?.artist}</i></span>?
+                </Modal.Body>
+                <Modal.Footer className='d-flex justify-content-center'>
+                    <Button className='mx-2' variant="secondary" onClick={() => setDeletePllstModal(false)}>
+                    Close
+                    </Button>
+                    <Button track={track} className='mx-2' variant="danger" onClick={async() => {
+                        const data = new FormData();
+                        data.append('playlistId', track.track?.pivot?.playlist_id);
+                        data.append('trackId',  track.track?.pivot?.track_id);
+                        await sendForm(`playlists/remove-track`, data);
+                        setDeletePllstModal(false);
+
+                        setTimeout(() => store.dispatch(actionPlaylistById(id)), 1000)
+                    }}>Delete</Button>
+                </Modal.Footer>
+                </Modal>
+                </>
+    )
+}
+
+
 const Track = ({track = {}, trackone={}, playlist={}, plstnow={}},  key) => 
 <tr>
-    <th scope="row">{'#'}</th>
-    <td>          
-        <div onClick={async () => {
+<td scope="row" width={30} data-id={track.id}>
+    <div className="col">
+        <Button variant="outline-light" className='rounded-5'  title='Play' onClick={async () => {
             store.dispatch(actionFullSetPlaylist(playlist.tracks));
             store.dispatch(actionFullSetTrack(playlist.tracks[playlist.tracks.indexOf(track)]));
             store.dispatch(actionNowPlaylist(store.getState().player?.track?.pivot?.playlist_id));
             store.dispatch(actionFullPlay());
         }}>
-            {track.name}
-        </div>
+            <FontAwesomeIcon className='' icon={faPlay}/>
+        </Button>
+    </div>
+</td>
+    <td>          
+        <Link className="link-light" to='#'>  {track.name}</Link>
+    </td>
+    <td>
+        <Link className="link-light" to='#'>  {track.id3.artist}</Link>
+    </td>
+    <td> 
+        <Link className="link-light" to='#'> {track.id3.getAlbum}</Link>
     </td>
     <td>
-        <span>{track.id3.artist}</span>
+    {playlist?.user_id === store.getState().auth.user.id? <ButtonDeleteTrack track={track} /> : <button>V</button>}
     </td>
-    <td>{track.id3.getAlbum}</td>
 </tr>
 
 
-const TracksAll = ({tracks=[]}) => 
-<table className="table table-dark table-striped table-dark table-hover">
+const TracksAll = ({tracks=[], playlist={}}) => 
+<table className="table table-dark table-hover align-middle">
     <thead>
         <tr>
-            <th scope="col">#</th>
+            <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'>{playlist?.user_id === store.getState().auth.user.id? 'X' : 'V'}</th>
         </tr>
 </thead>
     <tbody>

src/components/createPlaylist.js

@@ -1,29 +1,30 @@
 import React, {useState} from 'react';
+import { sendForm } from './SendForm';
 // import {Link} from 'react-router-dom';
 // import { actionAuthLogin } from '../store/authReducer';
 // import { store } from '../store/store';
 
 
 
-function sendForm (url, data) {
-    fetch(`http://player-api/api/${url}`, {
-        method: 'POST',
-        body: data,
-        headers: {
+// function sendForm (url, data) {
+//     fetch(`http://player-api/api/${url}`, {
+//         method: 'POST',
+//         body: data,
+//         headers: {
           
-          ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
+//           ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
           
-          },
-      }).then(res => res.json())
-      .then(data => {
-          if(data.token) {
-            console.log(data)
-            return data
-          } else {
-            //console.log(data.login[0]); 
-          }
-      })
-}
+//           },
+//       }).then(res => res.json())
+//       .then(data => {
+//           if(data.token) {
+//             console.log(data)
+//             return data
+//           } else {
+//             //console.log(data.login[0]); 
+//           }
+//       })
+// }
 
 
 export const CreatePlaylist = (props) => {

src/components/playing.js

@@ -2,7 +2,7 @@ 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 {actionFullGetDuration, actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack} from '../store/playerReducer';
+import {actionFullGetDuration, actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack, actionSetRepeat} from '../store/playerReducer';
 import {Provider, connect}   from 'react-redux';
 import { audio } from './Tracks';
 import img_album from '../images/default_album.gif'
@@ -79,7 +79,7 @@ return(
                 <FontAwesomeIcon icon={faStepBackward} className='fa-2x'/>
                 
             </div>
-            <div className="random-track" 
+            <div className="play-track" 
               onClick={() => {
                 if(store.getState()?.player?.isPlaying === true) {
                     store.dispatch(actionFullPause());
@@ -92,18 +92,16 @@ return(
             </div>
             <div className="next-track"
               onClick={() => {
-                console.log(props.track);
-                store.dispatch(actionNextTrack(props.track));
-
+                store.dispatch(actionNextTrack({track: props.track, end:'false'}));
                 }
               }
              >
                 <FontAwesomeIcon icon={faStepForward} className='fa-2x'/>
             </div>
             <div className="random-track" 
-            // onClick={repeatTrack()}
+             onClick={() => (props.repeat === 1 ? store.dispatch(actionSetRepeat(2)) : store.dispatch(actionSetRepeat(1)))}
             >
-                <FontAwesomeIcon icon={faRepeat} className='fa-2x'/>
+                <FontAwesomeIcon icon={faRepeat} className={props.repeat === 1 ? 'fa-2x' : 'fa-3x'}/>
             </div>
 
         </div>
@@ -114,5 +112,6 @@ return(
 
   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' }) )(NowPlayingPlayer);
+    isPlaying: state.player?.isPlaying || false,
+    currentTime: state.player?.currentTime || '00:00',
+    repeat: state.player?.repeat || 1}) )(NowPlayingPlayer);

src/components/playlistById.js

@@ -4,7 +4,13 @@ import { actionPlaylistById} from '../store/promiseReducer';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {faTrashCan} from '@fortawesome/free-solid-svg-icons'
+import {faTrash,
+    faPen,
+    faUserAstronaut,
+    faCompactDisc,
+    faPlus,
+    faAlignCenter,
+    faPlay, faHeart} from '@fortawesome/free-solid-svg-icons'
 import { actionFullSetPlaylist, actionFullSetTrack, actionFullSetTrackCount} from '../store/playerReducer';
 import {connect}   from 'react-redux';
 // import {actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
@@ -12,9 +18,9 @@ import {СAllTracks } from './Tracks'
 import { LoadTrackModal } from './LoadTrackModal';
 import { EditPlaylistModal } from './EditPlaylistModal';
 import { Link } from 'react-router-dom';
-import { sendForm } from './LoadTrackModal';
+import { sendForm } from './SendForm';
 import { history } from '../App';
-import {audio}  from './Tracks'
+
 
 let listToPlay;
 export const PlaylistById = ({playlist = {}, tracks={}}) => {
@@ -37,89 +43,107 @@ export const PlaylistById = ({playlist = {}, tracks={}}) => {
   
   return(
     <>
-    <div className='d-flex justify-content-around'>
-        <div className='pt-4'>
-            {/* <h1 >Playlist</h1> */}
-            <div className='d-flex justify-content-center'>
+    <div className='d-flex justify-content-around w-100'>
+        <div className='w-100 pt-4'>
+            <div className='d-flex mb-3 w-100'>
                 <div className='me-4'>
-                    <img src={playlist.photo} width ='250px' alt='...'/>
+                    <img className='rounded-5' src={playlist.photo} width ='250px' alt='...'/>
                 </div>
-                <div>
-                    <p className='h4'>Playlist name: {playlist.name}</p>
-
-                    {playlist.user_id === store.getState().auth.user.id?
-                    <>
-                    <Button  variant="outline-danger" onClick={() => setDeletePllstModal(true)}> Delete</Button>
-                    
-                    <Modal
-                        show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
-                        backdrop="static" keyboard={false} playlist={playlist}>
-                        <Modal.Header closeButton>
-                            <Modal.Title className='w-100 text-center'>Delete Playlist?</Modal.Title>
-                        </Modal.Header>
-                        <Modal.Body className='text-center'>
-                            Are you really want to delete playlist  <span className='text-danger'><i>"{playlist.name}"</i></span>?
-                        </Modal.Body>
-                        <Modal.Footer className='d-flex justify-content-center'>
-                            <Button className='mx-2' variant="secondary" onClick={() => setDeletePllstModal(false)}>
-                            Close
-                            </Button>
-                            <Button className='mx-2' variant="danger" onClick={async() => {
-                            await sendForm(`playlists/${playlist.id}/delete`);
-                            setDeletePllstModal(false)
-                            history.push('/user')}}>Delete</Button>
-                        </Modal.Footer>
-                        </Modal>
-                    </>: <></>
-                    }
+                <div className='w-100'>
+                    <div className="d-flex flex-column justify-content-between h-100">
+                        <div className="w-100 row">
+                            <div className='d-flex justify-content-between align-items-center w-100'>
+                                <p className='h4 m-0'>{playlist.name}</p>
+                                {playlist.user_id === store.getState().auth.user.id?
+                                    <>
+                                    <div className="d-flex row g-2">
+                                        <div className="col">
+                                            <Button  variant="outline-success" title='Add tracks' onClick={() => setModalShow(true)}>
+                                                <FontAwesomeIcon icon={faPlus} />
+                                            </Button>
+                                            <LoadTrackModal id={id} show={modalShow} onHide={() => setModalShow(false)} />
+                                        </div>
+                                        <div className="col">
+                                            <Button  variant="outline-secondary" title='Edit playlist' onClick={() => setModalTrackShow(true)}>
+                                                <FontAwesomeIcon icon={faPen} />
+                                            </Button>
+                                            <EditPlaylistModal  tracks={tracks}  show={modalTrackShow} playlist={playlist}
+                                                                onHide={() => setModalTrackShow(false)}></EditPlaylistModal>
+                                        </div>
+                                        <div className="col">
+                                            <Button  variant="outline-danger" title='Delete playlist' onClick={() => setDeletePllstModal(true)}>
+                                                <FontAwesomeIcon icon={faTrash} />
+                                            </Button>
+                                        </div>
+                                    </div>
 
-                    <p>Playlist author: {playlist.user_name}</p>
+                                    <Modal
+                                        show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
+                                        backdrop="static" keyboard={false} playlist={playlist}>
+                                        <Modal.Header closeButton>
+                                            <Modal.Title className='w-100 text-center'>Delete Playlist?</Modal.Title>
+                                        </Modal.Header>
+                                        <Modal.Body className='text-center'>
+                                            Are you really want to delete playlist  <span className='text-danger'><i>"{playlist.name}"</i></span>?
+                                        </Modal.Body>
+                                        <Modal.Footer className='d-flex justify-content-center'>
+                                            <Button className='mx-2' variant="secondary" onClick={() => setDeletePllstModal(false)}>
+                                                Close
+                                            </Button>
+                                            <Button className='mx-2' variant="danger" onClick={async() => {
+                                                await sendForm(`playlists/${playlist.id}/delete`);
+                                                setDeletePllstModal(false)
+                                                history.push('/user')}}>Delete</Button>
+                                        </Modal.Footer>
+                                    </Modal>
+                                </>: <></>
+                                }
+                            </div>
 
-                    {playlist.user_id === store.getState().auth.user.id? 
+                            <Link className="link-secondary mb-2" title='Author' to='#'><FontAwesomeIcon className='me-2' icon={faUserAstronaut} />  {playlist.user_name}</Link>
+                            <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faCompactDisc} /> {playlist?.tracks?.length} Tracks</p>
+                            <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faAlignCenter} /> {playlist.description}</p>
+                        </div>
 
-                    <><span onClick={() => setModalTrackShow(true)}>Edit Playlist</span>
-                    <EditPlaylistModal  show={modalTrackShow} playlist={playlist}
-                            onHide={() => setModalTrackShow(false)}></EditPlaylistModal></> : <></>}
-                    <p>{playlist?.tracks?.length} треков</p> 
-                    <div className='d-flex'>
-                    {/* <div> <button type="button" className="btn btn-light me-2">Shake</button></div> */}
-                    <div> <button type="button" className="btn btn-light"
-                    onClick={async() => {
-                        store.dispatch(actionFullSetPlaylist(playlist.tracks));
-                        store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
-                        store.dispatch(actionFullSetTrackCount(0));
-                        //store.dispatch(actionFullSetTrack(0));
-                    }}
                     
-                    >Play</button></div>
-                    
-                    {playlist.user_id === store.getState().auth.user.id? 
-                    (<>
-                        <Button variant="primary" onClick={() => setModalShow(true)}>
-                            Add Tracks
-                        </Button>
+                        <div className="w-100">
+                            <div className='d-flex'>
+                                <div className='row g-2'>
+                                    <div className="col">
+                                        <Button className='d-flex align-items-center' variant="outline-light" title='Play' onClick={async() => {
+                                            store.dispatch(actionFullSetPlaylist(playlist.tracks));
+                                            store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
+                                            //store.dispatch(actionFullSetTrackCount(0));
+                                        }}>
+                                            <FontAwesomeIcon className='me-2' icon={faPlay}/>
+                                            Play
+                                        </Button>
+                                    </div>
+                                    <div className="col">
+                                        <button type="button" className="btn btn-outline-danger">
+                                            <FontAwesomeIcon icon={faHeart}/> 
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
 
-                        <LoadTrackModal
-                            
-                            show={modalShow}
-                            onHide={() => setModalShow(false)}
-                        /></>) : <></>}
-                    
-                </div>
+
+                    </div>
                 </div>
-                {/* <div>
-                {playlist.user_id === store.getState().auth.user.id ? 
-                    <FontAwesomeIcon icon={faTrashCan} /> : <></>}
-                </div> */}
             </div>
-                <СAllTracks />
+            <СAllTracks />
         </div>
-      </div>
-      
+    </div>
       
-      </>
+    </>
   )}
 
   
-  export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {},
-    tracks: state.player?.playlist?.tracks}) || [] )(PlaylistById);
+//   export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {},
+//     tracks: state.player?.playlist?.tracks}) || [] )(PlaylistById);
+
+export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {},
+    tracks: state.promise.plstById?.payload?.tracks}) || [] )(PlaylistById);
+
+    

src/components/userPage.js

@@ -8,13 +8,14 @@ import image from '../images/card.png';
 import Modal from 'react-bootstrap/Modal';
 // import Button from 'react-bootstrap/Button';
 import {CreatePlaylist} from './createPlaylist'
-import { Header } from './header';
 
 
 
 const Playlist = ({playlist = {}}) => 
   <div className="col-sm-3 p-1">
-    <Link className="card" to= {`/playlist/${playlist.id}`} onClick={() => store.dispatch(actionFullSetPlaylist({playlist}) )}>
+    <Link className="card" to= {`/playlist/${playlist.id}`} 
+    // onClick={() => store.dispatch(actionFullSetPlaylist({playlist}) )}
+    >
       <img src={playlist.photo || image} className="card-img-top" alt="..."  height={'150px'}/>
       <div className="card-body">
         <h5 className="card-title"> {playlist.name}</h5>

src/index.css

@@ -25,13 +25,12 @@ code {
   text-decoration: none;
 }
 
-/* dkfjksdflk */
+.rounded-5 {
+  border-radius: 20px!important;
+}
+
 .player{
-  height: 95vh;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
+  padding-top: 20px;
 }
 .wrapper{
   border: 1px solid transparent;
@@ -46,16 +45,10 @@ code {
   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:20px;
   -webkit-border-radius:20px;
   border-radius: 20px;
@@ -74,7 +67,6 @@ code {
   display: flex;
   flex-direction: row;
   align-items: center;
-  /* margin-bottom: 30px; */
 }
 .active{
   color: black;

src/store/playerReducer.js

@@ -1,7 +1,7 @@
 import { store } from '../store/store';
 import { audio } from '../components/Tracks';
 
-export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume, trackCount}) {
+export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume,  repeat=1}) {
     if (!state) {
         return {};
     }
@@ -45,10 +45,10 @@ export const playerReducer = function(state = {}, {type, duration, track, playli
             playlist,
             playlistIndex
         }
-    } if (type === 'SET_TRACK_COUNT'){
+    } if (type === 'SET_REPEAT'){
         return {
             ...state,
-            trackCount
+            repeat
         }
     }
     return state;
@@ -63,6 +63,7 @@ export const actionFullPlay = () =>
         audio.onloadedmetadata = (() => dispatch(actionFullGetDuration(audio.duration)));
         audio.ontimeupdate = () =>  dispatch(actionFullSetCurrentTime(audio.currentTime));
         actionFullSetCurrentTime(audio.currentTime);
+        actionSetRepeat(1);
     }
  
 
@@ -86,15 +87,6 @@ export const actionFullSetTrack = (track) =>
         audio.src = `http://player-api/storage/tracks/${track?.file}`;
         dispatch(actionSetTrack(track));
         dispatch(actionFullPlay());
-        //dispatch(actionFullSetPlaylist(store.getState().promise?.plstnow?.payload?.tracks))
-    }
-const actionSetTrackCount = (trackCount) => ({type:'SET_TRACK_COUNT', trackCount})
-export const actionFullSetTrackCount = (trackCount) =>
-    dispatch => {
-        console.log(trackCount);
-        dispatch(actionSetTrackCount(trackCount));
-        //dispatch(actionFullPlay());
-        //dispatch(actionFullSetPlaylist(store.getState().promise?.plstnow?.payload?.tracks))
     }
 
 const actionGetDuration = (duration) => ({type:'GET_DURATION', duration})
@@ -106,10 +98,11 @@ export const actionFullGetDuration = (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 = function() {
-            dispatch(actionNextTrack());
-        };
+        audio.onended = ()  => dispatch(actionNextTrack({track:playlist[count], end:'true'}));
     }
 
 
@@ -122,22 +115,20 @@ export const actionFullSetPlaylist = (playlist) =>
 
 
 export const actionNextTrack = (track) =>
-    async (dispatch, getState) => {
-        const playlist = store.getState().player?.playlist
+    async (dispatch) => {
+        const playlist = store.getState().player?.playlist;
+        const repeat = await store.getState().player?.repeat;
+        
         if (playlist) {
-            console.log(playlist)
-            const count = playlist.indexOf(track)
-            if (getState().player?.loopType === 1) {
-                console.log('repeat')
-                //dispatch(actionFullSetTrack(1))
-                //setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[count])); dispatch(actionFullPlay()) }, 100)
+            const count = playlist.indexOf(track.track);
+            if (track.end === 'true' && repeat === 2) {
+                setTimeout(() => { dispatch(actionFullSetTrack(playlist[count]));
+                dispatch(actionFullPlay()) }, 100)
+            }
+            else if (repeat === 1 && count === (playlist.length - 1)) {
+                setTimeout(() => { dispatch(actionFullSetTrack(playlist[0])); dispatch(actionFullPlay()) }, 100)
             }
-            // else if (getState().player.loopType === 2 && playlist.tracks.indexOf(getState().player.track) === playlist.tracks.length - 1) {
-            //     dispatch(actionFullSetTrack(1))
-            //     setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[0])); dispatch(actionFullPlay()) }, 100)
-            // }
             else {
-                console.log('tap tap tap')
                 if (count + 1 < playlist.length) {
                     dispatch(actionFullSetTrack(playlist[count + 1]))
                     dispatch(actionFullPlay())
@@ -156,4 +147,6 @@ export const actionNextTrack = (track) =>
                 dispatch(actionFullPlay())
             }
         }
-    }
+    }
+
+export const actionSetRepeat = (repeat) => ({ type: 'SET_REPEAT', repeat})