play pause change

src/App.scss

@@ -96,7 +96,6 @@ main {
   background-position:  200px 0px;
   overflow: auto;
   margin-top: 112px;
-  width: 99%;
   height: 80vh;
   display: flex;
   flex-direction: row;
@@ -148,7 +147,7 @@ footer {
   position: fixed;
  bottom: 0px;
   .Player {
-    margin-top: 30px;
+    margin-top: 10px;
     button {
       margin: 5px;
     }
@@ -198,7 +197,7 @@ footer {
 
 
 .dropdown-menu {
-  z-index: 1;
+  z-index: 1000;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background: #000000;
   text-align: center;
@@ -230,14 +229,69 @@ footer {
 }
 
 .Users {
+  margin-top: 40px;
   display: flex;
   flex-wrap: wrap;
-  .user-beauty {
-
-  }
-
 }
 
 .hello-column {
   display: flex;
 }
+
+
+
+.list1a {
+  margin: 4px;
+  padding:4px;
+  list-style-type: none;
+  counter-set: none;
+}
+.list1a li {
+  border: 2px solid rgba(78, 232, 14, 0.47);
+  background: none;
+  position: relative;
+  margin: 2px;
+  padding: 4px;
+}
+
+
+.list1a li:hover {
+  z-index: 1;
+}
+.list1a li:before {
+  border: 2px solid #337AB7;
+  position: absolute;
+  top: -14px;
+  padding: 2px 10px;
+  font-size: 11px;
+  font-weight: bold;
+  color: #337AB7;
+  background: #F7FAFD;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.list1a li:hover:before {
+  background: #337AB7;
+  color: #FFF;
+  -webkit-transform: translate(-12px, 0);
+  -ms-transform: translate(-12px, 0);
+  -o-transform: translate(-12px, 0);
+  transform: translate(-12px, 0);
+}
+.list1a li:after {
+  content: "";
+  position: absolute;
+  -webkit-transition-duration: 0.4s;
+  transition-duration: 0.4s;
+  -webkit-transition-property: width;
+  transition-property: width;
+  z-index: -1;
+  background: #FFF;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 0;
+}
+.list1a li:hover:after {
+  width: 100%;
+}

src/actions/gql-queries-backurl.js

@@ -1,6 +1,3 @@
-import {actionPromise} from "../reducers";
-
-
 export const getGQL = url =>
     async (query, variables = {}) => {
         let obj = await fetch(url, {
@@ -37,6 +34,7 @@ export const queries = {
     }
 }`, variables:{ q: JSON.stringify([{ _id: match.params._id }]) } }),
 
+
     "/userPlaylist/:_id": match => ({name: 'playlistById',
         query: `query playlistById($q: String){
     PlaylistFindOne(query: $q){

src/pages/my-tracks/my-playlists.js

@@ -1,19 +1,24 @@
 import {Link} from "react-router-dom";
 import {useState} from "react";
 import {connect} from "react-redux";
-import {actionCreatePlaylist, actionPlaylistFindByOwner} from "../../actions";
+import {actionPlaylistFindByOwner} from "../../actions";
 import {store} from "../../reducers";
 
-const Playlist = ({playlist:{_id, name}={}}) =>
-    <li><Link to={`/myPlaylist/${_id}`}>{name}</Link></li>
+const Playlist = ({playlist:{_id, name}={}}) => {
+    return (
+        <div>
+            {name !== null ? ( <li><Link to={`/myPlaylist/${_id}`}>{name}</Link></li>) : <></>}
+        </div>
+    )
 
+}
 const MyPlaylists =  ({playlists={}}) => {
     const [p, setP] = useState ('')
     return (
         <div className='my-playlists'>
-            <input placeholder='Название' onChange={e => setP(e.target.value)}/>
-            <button disabled={p.length >= 6  && p !== "" ? false : true}>Создать плейлист</button>
-            <ul className='Playlists'>
+            <input placeholder='Имя плейлиста' onChange={e => setP(e.target.value)}/>
+            <button disabled={p.length >= 6  && p !== "" ? false : true}>Создать</button>
+            <ul className="list1a">
                 {playlists.map((playlist,playlistIndex) =>  <Playlist key={`playlist-${playlistIndex}`} playlist={playlist}/> )}
             </ul>
         </div>

src/pages/my-tracks/my-tracks.js

@@ -1,6 +1,6 @@
-// import {SortableContainer, SortableElement} from 'react-sortable-hoc';
-// import {arrayMoveImmutable} from 'array-move';
-// import {useState,useEffect} from "react";
+import {SortableContainer, SortableElement} from 'react-sortable-hoc';
+import {arrayMoveImmutable} from 'array-move';
+import {useState,useEffect} from "react";
 
 import {connect} from "react-redux";
 import {CTrack} from "../track";
@@ -8,75 +8,66 @@ import {CPlaylistDropZone} from "../tools";
 import {CPreloaded} from "../preloader";
 
 
-const MyTracks = ({playlist={}}) => {
-    const{_id, name, tracks} = playlist
-    return (
-        <div className='Category'>
-            <h2>{name}</h2>
-            <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
-            </CPreloaded>
-        </div>
-    )
-}
+// const MyTracks = ({playlist={}}) => {
+//     const{_id, name, tracks} = playlist
+//     return (
+//         <div className='Category'>
+//             <h2>{name}</h2>
+//             <CPreloaded promiseName='playlistById'>
+//                 {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
+//             </CPreloaded>
+//         </div>
+//     )
+// }
+//
+// const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),)(MyTracks)
+//
+//
+// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
+//     <>
+//         <CPlaylistDropZone >
+//             <CMyTracks />
+//      </CPlaylistDropZone >
+//     </>
+
+
+
+const SortableItem = SortableElement(CTrack);
 
-const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),)(MyTracks)
+const MyTracks = ( {children}) =>
+    <div className='Category'>
+        {children}
+    </div>
+const SortableList = SortableContainer(MyTracks)
 
 
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
         <CPlaylistDropZone >
-            <CMyTracks />
+            <CPreloaded promiseName='playlistById'>
+            <CSortableComponent />
+            </CPreloaded>
      </CPlaylistDropZone >
     </>
 
 
+function SortableComponent({playlist=[]}) {
+    const{name, tracks} = playlist
+    const [state, setState] = useState(tracks)
+    useEffect(() => {
+        setState (tracks)
+    },[tracks])
+    const onSortEnd = ({oldIndex, newIndex}) => {
+        setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
+    };
+    return (
+        <div>
+            <h2>{name}</h2>
+            <SortableList tracks={tracks} onSortEnd={onSortEnd}>
+                {state.map((value, index) => <SortableItem key={`item-${value}`} trackIndex={index} trackP={value}/>)}
+            </SortableList>
+        </div>
+    )
+}
 
-
-
-
-
-
-
-
-
-
-
-// const SortableItem = SortableElement(CTrack);
-//
-// const MyTracks = ( {children}) =>
-//     <div className='Category'>
-//         {children}
-//     </div>
-// const SortableList = SortableContainer(MyTracks)
-// // const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
-//
-//
-// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
-//     <>
-//         <CPlaylistDropZone >
-//             <CPreloaded promiseName='playlistById'>
-//             <CSortableComponent />
-//             </CPreloaded>
-//      </CPlaylistDropZone >
-//     </>
-//
-//
-// function SortableComponent({tracks=[]}) {
-//     const [state, setState] = useState(tracks)
-//     useEffect(() => {
-//         setState (tracks)
-//     },[tracks])
-//     const onSortEnd = ({oldIndex, newIndex}) => {
-//         setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
-//     };
-//
-//     return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
-//         {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
-//         {/*{console.log(state)}*/}
-//     </SortableList>;
-// }
-//
-// const CSortableComponent = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}))(SortableComponent)
-
-
+const CSortableComponent = connect(state => ({ playlist: state.promise.playlistById?.payload || []}))(SortableComponent)

src/pages/player.js

@@ -6,11 +6,20 @@ import {connect} from "react-redux";
 import {actionTrackPlay, actionTrackStop,actionTrackVolume,actionTrackCurrentTime,actionNextTrack,actionPreviousTrack} from "../reducers";
 
 
-export const Player = ({player:{volume,duration,currentTime,isPlaying},
+export const Player = ({player:{volume,duration,currentTime,isPlaying,track:{originalFileName}},
                                 trackPlay, trackStop,trackVolume,trackCurrentTime,trackNext,trackPrevious}) => {
+
+    let minutes = Math.floor(duration / 60);
+    let seconds = Math.floor(parseInt((duration % 60) * 100) / 100);
+
+    let minutesLeft = Math.floor(currentTime / 60);
+    let secondsLeft = Math.floor(parseInt((currentTime % 60) * 100) / 100);
+
     return (
         <div className='Player'>
 
+            <span>{minutesLeft}:{secondsLeft < 10?"0"+secondsLeft : secondsLeft}</span>
+
             <input className='currentTime'
                 type="range"
                 min={0}
@@ -19,15 +28,17 @@ export const Player = ({player:{volume,duration,currentTime,isPlaying},
                 onChange={(e) => trackCurrentTime(e.target.value)}
                 value={currentTime}/>
 
-            <button onClick={() => trackPrevious()}><img src={prev}/></button>
+
+            <span>{minutes}:{seconds < 10?"0"+seconds : seconds}</span>
+            <button onClick={() => trackPrevious()}><img src={prev} alt='prev'/></button>
             {!isPlaying ? (   <button onClick={() => trackPlay()}>
-                <img src={play}/></button>) : (     <button onClick={() => trackStop()}>
-                <img src={pause}/></button>)}
+                <img src={play}  alt='play'/></button>) : (     <button onClick={() => trackStop()}>
+                <img src={pause}  alt='pause'/></button>)}
 
 
 
 
-            <button onClick={()=>trackNext()}><img src={next}/></button>
+            <button onClick={()=>trackNext()}><img src={next}  alt='next'/></button>
             <input
                 type="range"
                 min={0}
@@ -35,6 +46,7 @@ export const Player = ({player:{volume,duration,currentTime,isPlaying},
                 max={1}
                 onChange={(e) => trackVolume(e.target.value)}
                 value={volume}/>
+                <h3>{originalFileName}</h3>
         </div>
     )
 }

src/pages/track.js

@@ -4,27 +4,29 @@ import {actionTrackPlay,actionTrackStop,actionSetPlaylist} from "../reducers";
 import {connect} from "react-redux";
 
 
-export const Track = ({playlist,track:{originalFileName},trackIndex,
+export const Track = ({player:{isPlaying,track}={},
+                          playlist,
+                          trackP={},trackIndex,
                           trackStop,setPlaylist}) => {
 
+   const {originalFileName} = trackP
     return (
         <div className='Tracks'>
-                <button onClick={() => {
-                    setPlaylist(playlist,trackIndex);
+            {!isPlaying || trackP !==track  ?
+                (<button onClick={() => {
+                    setPlaylist(playlist,trackIndex,trackP);
                 }}>
                     <img src={play} alt='play'/>
-                </button>
-
-                <button onClick={() => trackStop()}>
+                </button>) : (<button onClick={() => trackStop()}>
                     <img src={pause} alt='pause'/>
-                </button>
+                </button>)}
             <span>{originalFileName}</span>
         </div>
     )
 }
 
 
-export const CTrack = connect(state => ({playlist: state.promise.playlistById?.payload?.tracks || []}),
+export const CTrack = connect(state => ({playlist: state.promise.playlistById?.payload?.tracks || [], player: state.player}),
     {trackPlay: actionTrackPlay, trackStop: actionTrackStop,setPlaylist:actionSetPlaylist})(Track)
 
 

src/pages/user-tracks/user-button.scss

@@ -1,6 +1,8 @@
 $breakpoint-mobile: 720px;
 $breakpoint-tablet: 1640px;
 
+
+
 .btn-three {
     margin: 5px;
     font-size: 16px;
@@ -11,6 +13,9 @@ $breakpoint-tablet: 1640px;
         margin: 3px;
         font-size: 12px;
     }
+    span {
+        color: rgba(255, 255, 255, 0.55);
+    }
 }
 .btn-three::before {
     content: '';

src/pages/user-tracks/user-playlists.js

@@ -1,17 +1,22 @@
 import {connect} from "react-redux";
-import {CPlaylistDropZone} from "../tools";
 import {Link} from "react-router-dom";
-import {store} from "../../reducers";
-import {actionPlaylistFindByOwner} from "../../actions";
 
-const Playlist = ({playlist:{_id, name}={}}) =>
-    <li><Link to={`/userPlaylist/${_id}`}>{name}</Link></li>
+
+const Playlist = ({playlist:{_id, name}={}}) => {
+    return (
+        <div>
+        {name !== null && name.length > 6 ? (<Link to={`/userPlaylist/${_id}`}><li>{name}</li></Link>) : <></>}
+        </div>
+    )
+
+}
+
 
 const UserPlaylists =  ({playlists={}}) => {
     return (
         <div className='my-playlists'>
             <h2>Плейлиты пользователя</h2>
-            <ul className='Playlists'>
+            <ul className="list1a">
                 {playlists.map((playlist) =>  <Playlist playlist={playlist}/> )}
             </ul>
         </div>

src/pages/user-tracks/userTracks.js

@@ -5,25 +5,23 @@
 import {connect} from "react-redux";
 import {CTrack} from "../track";
 import {CPreloaded} from "../preloader";
-import {actionSetPlaylist} from "../../reducers";
-import {CPlaylistDropZone} from "../tools";
 
 
 
 const UserTracks = ({playlist={}}) => {
-    const{_id, name, tracks} = playlist
+    const{name, tracks} = playlist
     return (
         <div className='Category'>
             <h2>{name}</h2>
             <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
+                {(tracks || []).map((track,index) => <CTrack trackIndex={index} trackP={track}/>)}
             </CPreloaded>
         </div>
     )
 }
 
 
-const CUserTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(UserTracks)
+const CUserTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}))(UserTracks)
 
 
 export const UserPlaylistTracks = ({match:{params:{_id}}}) =>

src/reducers/playerReducer.js

@@ -75,6 +75,7 @@ export const playerReducer = (
         return {
             ...state,
             playlist,
+            track,
         };
     }
     return state;
@@ -231,12 +232,12 @@ export const actionTrackCurrentTime = () => {
 
 
 
-export const actionSetPlaylist = (playlist,trackIndex) =>
-    ({type:'ACTION_SET_PLAYLIST', playlist,trackIndex})
+export const actionSetPlaylist = (playlist,trackIndex,trackP) =>
+    ({type:'ACTION_SET_PLAYLIST', playlist,trackIndex,trackP})
 
 export function* setPlaylistWorker(action) {
-    let {playlist, trackIndex} = action
-    yield put ({type:"SET_PLAYLIST", playlist:playlist})
+    let {playlist, trackIndex,trackP} = action
+    yield put ({type:"SET_PLAYLIST", playlist:playlist,track:trackP})
     yield put (actionTrackLoad(trackIndex))
 }