delete playlist

src/components/Playlist.js

@@ -10,7 +10,7 @@ import { actionFullSetPlaylist } from '../store/playerReducer';
 const Playlist = ({playlist: {id, user_id, name, photo, description, tracks} = {}}) =>
 <div className="col-sm-3">
   <Link className="card" to= {`/playlist/${id}`} onClick={() => store.dispatch(actionFullSetPlaylist({id, user_id, name, photo, description, tracks}) )}>
-    <img src={photo} className="card-img-top" alt="..."/>
+    <img src={photo} className="card-img-top" alt="..." height={'150px'}/>
     <div className="card-body">
       <h5 className="card-title"> {name}</h5>
       {/* <p className="card-text">{description? description :  '.' }</p> */}

src/components/Tracks.js

@@ -1,17 +1,21 @@
 import {connect}   from 'react-redux';
-import {actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
+import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist} from '../store/playerReducer';
+import { actionNowPlaylist} from '../store/promiseReducer';
 import { store } from '../store/store';
 
 let i = 1;
 export let audio = new Audio();
 
-const Track = ({track: {name, file, id3, id} = {} }, key) => 
+const Track = ({track: {name, file, id3, id , pivot, number} = {}, playlist={}, plstnow={} },  key) => 
 <tr>
     <th scope="row">{i++}</th>
     <td>          
         <div onClick={async () => {
-            audio.src = `http://player-api/storage/tracks/${file}`;   
-            store.dispatch(actionFullSetTrack({name, file, id3, id}));
+            store.dispatch(actionFullSetTrack({name, file, id3, id, pivot, number}));
+            store.dispatch(actionNowPlaylist(store.getState().player?.track?.pivot?.playlist_id));
+            //store.dispatch(actionFullSetPlaylist(playlist));
+            //store.dispatch(actionFullSetPlaylist(plstnow?.payload?.tracks));
+            //store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
             store.dispatch(actionFullPlay());
         }}>
             {name}
@@ -39,4 +43,6 @@ const TracksAll = ({tracks=[]}) =>
     </tbody>
 </table>
 
-export const СAllTracks = connect(state => ({tracks: state.promise.plstById?.payload?.tracks || []}), )(TracksAll);
+export const СAllTracks = connect(state => ({playlist: state.promise.plstById?.payload || {},
+                                 tracks: state.promise?.plstById?.payload?.tracks || [],
+                                 plstnow: state.promise?.plstnow || {}} ), )(TracksAll);

src/components/playing.js

@@ -23,7 +23,6 @@ export let NowPlayingPlayer = (props) => {
     const [volume, setVolume] = useState(20);
     const [newCurrent, setNewCurrent] = useState(0)
 
-    // audio.ontimeupdate = () =>  store.dispatch(actionFullSetCurrentTime(audio.currentTime));
     useEffect(() => {
         if (props.currentTime) audio.currentTime = newCurrent
     }, [newCurrent])
@@ -73,7 +72,7 @@ return(
             </div>
             <div className="prev-track" 
             // onClick={prevTrack()}
-            >
+            > 
                 <FontAwesomeIcon icon={faStepBackward} className='fa-2x'/>
                 
             </div>

src/components/playlistById.js

@@ -3,69 +3,121 @@ import { store } from '../store/store';
 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 { actionFullSetPlaylist, actionFullSetTrack} from '../store/playerReducer';
 import {connect}   from 'react-redux';
 // import {actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
 import {СAllTracks } from './Tracks'
 import { LoadTrackModal } from './LoadTrackModal';
 import { EditPlaylistModal } from './EditPlaylistModal';
+import { Link } from 'react-router-dom';
+import { sendForm } from './LoadTrackModal';
+import { history } from '../App';
+import {audio}  from './Tracks'
 
-export const PlaylistById = ({playlist = {}}) => {
+let listToPlay;
+export const PlaylistById = ({playlist = {}, tracks={}}) => {
+    
     let id = window.location.href.split('/')[4];
+    
     const getAnswer = async () => {
-      await store.dispatch(actionPlaylistById(id));	
-      
+      listToPlay = await store.dispatch(actionPlaylistById(id));
+      return listToPlay;
     };
-    
+
     useEffect(() => {
+  
       getAnswer();
     }, []);
 
     const [modalShow, setModalShow] = React.useState(false);
+    const [deletePllstModal, setDeletePllstModal] = useState(false);
     const [modalTrackShow, setModalTrackShow] = React.useState(false);
   
   return(
     <>
     <div className='d-flex justify-content-around'>
-    <div>
-        <h1 >Playlist</h1>
-        <div className='d-flex justify-content-center'>
-            <div className='me-4'>
-                <img src={playlist.photo} width ='250px' alt='...'/>
-            </div>
-            <div>
-                <p className='h4'>Playlist name: {playlist.name}</p>
-                <p>Playlist author: {playlist.user_name}</p>
-                {playlist.user_id === store.getState().auth.user.id? 
-                <><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">Добавить в библиотеку</button></div> */}
+        <div className='pt-4'>
+            {/* <h1 >Playlist</h1> */}
+            <div className='d-flex justify-content-center'>
+                <div className='me-4'>
+                    <img src={playlist.photo} width ='250px' alt='...'/>
                 </div>
-                {playlist.user_id === store.getState().auth.user.id? 
-                (<>
-                    <Button variant="primary" onClick={() => setModalShow(true)}>
-                        Add Tracks
-                    </Button>
+                <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>
+                    </>: <></>
+                    }
 
-                    <LoadTrackModal
-                        
-                        show={modalShow}
-                        onHide={() => setModalShow(false)}
-                    /></>) : <></>}
-                
+                    <p>Playlist author: {playlist.user_name}</p>
+
+                    {playlist.user_id === store.getState().auth.user.id? 
+
+                    <><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]));
+                    }}
+                    
+                    >Play</button></div>
+                    
+                    {playlist.user_id === store.getState().auth.user.id? 
+                    (<>
+                        <Button variant="primary" onClick={() => setModalShow(true)}>
+                            Add Tracks
+                        </Button>
+
+                        <LoadTrackModal
+                            
+                            show={modalShow}
+                            onHide={() => setModalShow(false)}
+                        /></>) : <></>}
+                    
+                </div>
+                </div>
+                {/* <div>
+                {playlist.user_id === store.getState().auth.user.id ? 
+                    <FontAwesomeIcon icon={faTrashCan} /> : <></>}
+                </div> */}
             </div>
+                <СAllTracks />
         </div>
-            <СAllTracks/>
-      </div>
-          {/* <СNowPlayingPlayer/> */}
       </div>
       
       
       </>
   )}
 
-  //export const СPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload?.tracks || []}), )(PlaylistById);
-  export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {}}), )(PlaylistById);
+  
+  export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {},
+    tracks: state.player?.playlist?.tracks}) || [] )(PlaylistById);

src/store/playerReducer.js

@@ -1,4 +1,4 @@
-//import { store } from '../store/store';
+import { store } from '../store/store';
 import { audio } from '../components/Tracks';
 
 export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume}) {
@@ -59,7 +59,7 @@ export const actionFullPlay = () =>
         audio.ontimeupdate = () =>  dispatch(actionFullSetCurrentTime(audio.currentTime));
         actionFullSetCurrentTime(audio.currentTime);
     }
-
+ 
 
 const actionPause = () => ({type:'PAUSE'})
 export const actionFullPause = () =>
@@ -78,8 +78,10 @@ export const actionFullSetVolume = (volume) =>
 const actionSetTrack = (track) => ({type:'SET_TRACK', track})
 export const actionFullSetTrack = (track) =>
     dispatch => {
+        audio.src = `http://player-api/storage/tracks/${track?.file}`;
         dispatch(actionSetTrack(track));
         dispatch(actionFullPlay());
+        //dispatch(actionFullSetPlaylist(store.getState().promise?.plstnow?.payload?.tracks))
     }
 
 const actionGetDuration = (duration) => ({type:'GET_DURATION', duration})
@@ -92,6 +94,9 @@ const actionSetCurrentTime = (currentTime) => ({type:'SET_CURRENT_TIME', current
 export const actionFullSetCurrentTime = (currentTime) =>
     dispatch => {
         dispatch(actionSetCurrentTime(currentTime));
+        audio.onended = function() {
+            dispatch(actionNextTrack());
+        };
     }
 
 
@@ -99,4 +104,27 @@ const actionSetPlaylist = (playlist) => ({type:'SET_PLAYLIST', playlist})
 export const actionFullSetPlaylist = (playlist) =>
     dispatch => {
         dispatch(actionSetPlaylist(playlist));
+    }
+
+export const actionNextTrack = (track) =>
+    async (dispatch, getState) => {
+        const playlist = getState().player?.playlist
+        if (playlist) {
+            const count = playlist.tracks.indexOf(track)
+            if (getState().player.loopType === 1) {
+                console.log('repeat')
+                dispatch(actionFullSetTrack(1))
+                setTimeout(() => { dispatch(actionFullSetTrack(playlist.tracks[count])); 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 {
+                if (count + 1 < playlist.tracks.length) {
+                    dispatch(actionFullSetTrack(playlist.tracks[count + 1]))
+                    dispatch(actionFullPlay())
+                }
+            }
+        }
     }

src/store/promiseReducer.js

@@ -48,9 +48,11 @@ export const actionPromise   = (name, promise) =>
             
         })
   
-    
 
-    const gql = getGQL(backendURL);
+ 
+
+
+export const gql = getGQL(backendURL);
 
 export const actionAllPlaylists = () =>
     actionPromise('allPlaylists', gql('/playlists'))
@@ -63,6 +65,9 @@ export const actionUsersPlaylists = (id) =>
 export const actionPlaylistById = (_id) => 
   actionPromise('plstById', gql('/playlists/'+_id))
 
+  export const actionNowPlaylist = (_id) => 
+  actionPromise('plstnow', gql('/playlists/'+_id))
+
 
  export const actionFullLogin = async function(login, password) {
     let token = await gql("query userLogin($login: String, $password: String) {login(login: $login, password: $password)}",