track to queue

src/components/EditPlaylistModal.js

@@ -16,7 +16,7 @@ export function EditPlaylistModal  (props)  {
         const data = new FormData();
 
         data.append("name", name || props.playlist?.name);
-        data.append("description", description || props.playlist?.description || '');
+        (description !== props.playlist?.description) && data.append("description", description);
         data.append("private", props.playlist?.private);
         image.name && data.append("photo",  image, image.name);
 

src/components/Playlist.js

@@ -3,25 +3,61 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { Link} from 'react-router-dom';
 import {connect}   from 'react-redux';
 import { store } from '../store/store';
-import { actionFullSetPlaylist } from '../store/playerReducer';
+import { actionFullSetPlaylist, actionFullSetTrack } from '../store/playerReducer';
+import { actionPlaylistById} from '../store/promiseReducer';
+import image from '../images/card.png';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faAlignCenter,
+    faCompactDisc,
+    faHeadphonesSimple, faPlay,
+    faPlus
+} from "@fortawesome/free-solid-svg-icons";
+import Button from "react-bootstrap/Button";
 
+const Playlist = ({playlist = {}}) => 
+  <div className="">
+      <div className="me-4 mb-4 p-4 playlist-img-box rounded-5 position-relative"
+           style={{backgroundImage: `url(${playlist.photo || image})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center", width:250, height:250}}
+      >
+          <div className="playlist-grey-box"></div>
+          <Link className="d-flex border-0 link-light position-relative text-decoration-none h4 text-wrap"
+                to={`/playlist/${playlist.id}`}>
+              {playlist.name}
+          </Link>
+          <Button variant="outline-light" className='rounded-5 position-absolute playlist-play-box'  title='Play'>
+              <FontAwesomeIcon className='' icon={faPlay}
+                onClick={() => {
+                  store.dispatch(actionPlaylistById(playlist.id));
+                  setTimeout(() => {
+                      if(store.getState().promise?.plstById?.payload?.tracks) {
+                        let tracks = store.getState().promise?.plstById?.payload?.tracks;
+                        store.dispatch(actionFullSetPlaylist(tracks));
+                        store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
+                    }
+                    }
+                    , 500) 
+                }}
+              />
+          </Button>
+      </div>
+  </div>
 
-
-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="..." height={'150px'}/>
-    <div className="card-body">
-      <h5 className="card-title"> {name}</h5>
-      {/* <p className="card-text">{description? description :  '.' }</p> */}
-      {/* <button className="btn btn-primary" >Go somewhere</button> */}
-    </div>
-  </Link>
-</div>
+// 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="..." height={'150px'}/>
+//     <div className="card-body">
+//       <h5 className="card-title"> {name}</h5>
+//       {/* <p className="card-text">{description? description :  '.' }</p> */}
+//       {/* <button className="btn btn-primary" >Go somewhere</button> */}
+//     </div>
+//   </Link>
+// </div>
 
 
 const PlaylistsAll = ({playlists= []}) => 
-<div className='RootCategories row'>
+<div className='RootCategories d-flex justify-content-start flex-wrap'>
   {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
 </div>
 

src/components/Tracks.js

@@ -1,5 +1,5 @@
 import {connect}   from 'react-redux';
-import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist, actionFullSetTrackCount} from '../store/playerReducer';
+import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist , actionAddTrackToQueue} from '../store/playerReducer';
 import { actionNowPlaylist, actionPlaylistById} from '../store/promiseReducer';
 import { store } from '../store/store';
 import Button from 'react-bootstrap/Button';
@@ -7,7 +7,7 @@ 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 {faPlay} from "@fortawesome/free-solid-svg-icons";
 import { Link } from 'react-router-dom';
 import { Dropdown } from 'react-bootstrap';
 
@@ -17,11 +17,9 @@ export let audio = new Audio();
 
 const ButtonDeleteTrack = (track) => {
     const [deletePllstModal, setDeletePllstModal] = useState(false);
-    let id = store.getState().plstById?.payload?.id;
     return (
     <>
-        <Dropdown.Item href="#/action-1"  onClick={() => {console.log(track); setDeletePllstModal(true)}}>Delete</Dropdown.Item>
-        {/* <Button  variant="outline-danger" onClick={() => {console.log(track); setDeletePllstModal(true)}}> Delete</Button> */}
+        <Dropdown.Item  onClick={() => {console.log(track); setDeletePllstModal(true)}}>Delete</Dropdown.Item>
             <Modal
                 show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
                 backdrop="static" keyboard={false} track={track}>
@@ -42,7 +40,7 @@ const ButtonDeleteTrack = (track) => {
                         await sendForm(`playlists/remove-track`, data);
                         setDeletePllstModal(false);
 
-                        setTimeout(() => store.dispatch(actionPlaylistById(id)), 1000)
+                        setTimeout(() => store.dispatch(actionPlaylistById(track.track?.pivot?.playlist_id)), 100)
                     }}>Delete</Button>
                 </Modal.Footer>
                 </Modal>
@@ -74,16 +72,15 @@ const Track = ({track = {}, trackone={}, playlist={}, plstnow={}},  key) =>
     <td> 
         <Link className="link-light" to='#'> {track.id3.getAlbum}</Link>
     </td>
-    {/* <td>
-    {playlist?.user_id === store.getState().auth.user.id? <ButtonDeleteTrack track={track} /> : <button>V</button>}
-    </td> */}
     <td align={"right"}>
         <Dropdown align={"end"}>
             <Dropdown.Toggle variant="outline-light" id="dropdown-basic"></Dropdown.Toggle>
 
             <Dropdown.Menu variant={"dark"}>
-                {playlist?.user_id === store.getState().auth.user.id ? <ButtonDeleteTrack track={track} /> : <Dropdown.Item href="#/action-3">Add to Playlist</Dropdown.Item>}
-                <Dropdown.Item href="#/action-2">Add to Queue</Dropdown.Item>
+                {playlist?.user_id === store.getState().auth.user.id ? <ButtonDeleteTrack track={track} /> : <Dropdown.Item>Add to Playlist</Dropdown.Item>}
+                <Dropdown.Item onClick={() => {
+                                                    store.dispatch(actionAddTrackToQueue(track))
+                                                }}>Add to Queue</Dropdown.Item>
                 
             </Dropdown.Menu>
         </Dropdown>

src/components/playlistById.js

@@ -11,7 +11,7 @@ import {faTrash,
     faPlus,
     faAlignCenter,
     faPlay, faHeart} from '@fortawesome/free-solid-svg-icons'
-import { actionFullSetPlaylist, actionFullSetTrack} from '../store/playerReducer';
+import { actionFullSetPlaylist, actionFullSetTrack, actionAddPlaylistToQueue} from '../store/playerReducer';
 import {connect}   from 'react-redux';
 import {СAllTracks } from './Tracks'
 import { LoadTrackModal } from './LoadTrackModal';
@@ -46,8 +46,8 @@ export const PlaylistById = ({playlist = {}, tracks={}}) => {
     <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 playlist-img-box rounded-5' style={{backgroundImage: `url(${playlist.photo})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
-                    {/*<img className='rounded-5 playlist-img' src={playlist.photo} width ='250px' alt='...'/>*/}
+                <div className='me-4 playlist-img-box rounded-5' 
+                    style={{backgroundImage: `url(${playlist.photo})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
                 </div>
                 <div className='w-100'>
                     <div className="d-flex flex-column justify-content-between h-100">
@@ -79,7 +79,7 @@ export const PlaylistById = ({playlist = {}, tracks={}}) => {
 
                                     <Modal
                                         show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
-                                        backdrop="static" keyboard={false} playlist={playlist}>
+                                         keyboard={false} playlist={playlist}>
                                         <Modal.Header closeButton>
                                             <Modal.Title className='w-100 text-center'>Delete Playlist?</Modal.Title>
                                         </Modal.Header>
@@ -124,17 +124,11 @@ export const PlaylistById = ({playlist = {}, tracks={}}) => {
                                             <Dropdown.Toggle split variant="outline-light" id="dropdown-split-basic"/>
 
                                             <Dropdown.Menu variant="dark">
-                                                <Dropdown.Item href="#/action-1">Add to Queue</Dropdown.Item>
+                                                <Dropdown.Item onClick={() => {
+                                                    store.dispatch(actionAddPlaylistToQueue(playlist.tracks))
+                                                }}>Add to Queue</Dropdown.Item>
                                             </Dropdown.Menu>
                                         </Dropdown>
-                                        {/* <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">

src/components/userPage.js

@@ -2,6 +2,8 @@ import React, {useEffect} from 'react';
 import {Link} from 'react-router-dom';
 import {connect}   from 'react-redux';
 import { actionUsersPlaylists } from '../store/promiseReducer';
+import { actionPlaylistById} from '../store/promiseReducer';
+import { actionFullSetPlaylist, actionFullSetTrack} from '../store/playerReducer';
 import { store } from '../store/store';
 import image from '../images/card.png';
 import {CreatePlaylist} from './createPlaylist';
@@ -16,6 +18,7 @@ import {
 import Button from "react-bootstrap/Button";
 
 
+
 const Playlist = ({playlist = {}}) => 
   <div className="">
       <div className="me-4 mb-4 p-4 playlist-img-box rounded-5 position-relative"
@@ -27,7 +30,19 @@ const Playlist = ({playlist = {}}) =>
               {playlist.name}
           </Link>
           <Button variant="outline-light" className='rounded-5 position-absolute playlist-play-box'  title='Play'>
-              <FontAwesomeIcon className='' icon={faPlay}/>
+              <FontAwesomeIcon className='' icon={faPlay}
+                onClick={() => {
+                  store.dispatch(actionPlaylistById(playlist.id));
+                  setTimeout(() => {
+                      if(store.getState().promise?.plstById?.payload?.tracks) {
+                        let tracks = store.getState().promise?.plstById?.payload?.tracks;
+                        store.dispatch(actionFullSetPlaylist(tracks));
+                        store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
+                    }
+                    }
+                    , 500) 
+                }}
+              />
           </Button>
       </div>
   </div>

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,  repeat=1, random=1}) {
+export const playerReducer = function(state = {}, {type, duration, track, playlist, currentTime, volume,  repeat=1, random=1}) {
     if (!state) {
         return {};
     }
@@ -42,8 +42,7 @@ export const playerReducer = function(state = {}, {type, duration, track, playli
     } if (type === 'SET_PLAYLIST') {
         return {
             ...state,
-            playlist,
-            playlistIndex
+            playlist
         }
     } if (type === 'SET_REPEAT'){
         return {
@@ -130,7 +129,7 @@ export const actionNextTrack = (track) =>
                 setTimeout(() => { dispatch(actionFullSetTrack(playlist[count]));
                 dispatch(actionFullPlay()) }, 100)
             }
-            else if (repeat === 1 && count === (playlist.length - 1)) {
+            else if (repeat !== 2 && count === (playlist.length - 1)) {
                 setTimeout(() => { dispatch(actionFullSetTrack(playlist[0])); dispatch(actionFullPlay()) }, 100)
             }
             else {
@@ -176,5 +175,23 @@ export const actionPlayerRandom = () =>
             ]))
             
         }
-        
+    }
+
+export const actionAddTrackToQueue = (track) => 
+    async (dispatch, getState) => {
+        if (getState().player?.playlist) {
+            let newPlaylist = [...getState().player.playlist, track];
+            console.log(newPlaylist);
+            dispatch(actionSetPlaylist([...newPlaylist]))
+            
+        }
+    }
+
+    export const actionAddPlaylistToQueue = (tracks) => 
+    async (dispatch, getState) => {
+        if (getState().player?.playlist) {
+            let newPlaylist = [...getState().player.playlist, ...tracks];
+            console.log(newPlaylist);
+            dispatch(actionSetPlaylist([...newPlaylist])) 
+        }
     }