fix bugs 2

src/App.scss

@@ -38,6 +38,7 @@ h2 {
 }
 
 button {
+  min-width: 30px;
   color: white;
   background: none;
   font-weight: 70;
@@ -84,6 +85,7 @@ input {
   margin-top: 60px;
   height: 600px;
   @media (max-width: $breakpoint-tablet) {
+    margin-left: 50px;
     height: 300px;
   }
 }
@@ -124,7 +126,8 @@ main {
 }
 
 .Aside {
-  height: 80vh;
+  z-index: 1;
+  height: 89%;
   top: 114px;
   position: fixed;
   width: 430px;
@@ -138,6 +141,9 @@ main {
 .Content {
   margin-left: 440px;
   margin-bottom: 120px;
+  @media (max-width: $breakpoint-tablet) {
+    margin-left: 330px;
+  }
 }
 
 .Avatar {
@@ -160,10 +166,12 @@ main {
 }
 
 footer {
-  width: 100%;
+  z-index: 0;
+  width: 80%;
   height: 100px;
   background-color: #303030;
   position: fixed;
+right: 0px;
  bottom: 0px;
   .Player {
     margin-top: 10px;
@@ -200,6 +208,7 @@ footer {
 }
 
 .Tracks {
+  min-width: 540px;
   text-align: left;
   padding: 2px;
   margin: 2px;
@@ -270,12 +279,13 @@ footer {
 
 
 .list1a {
+  overflow: auto;
   margin: 4px;
   padding:4px;
   list-style-type: none;
   counter-set: none;
 }
-.list1a li {
+.list1a-li {
   border: 2px solid rgba(78, 232, 14, 0.47);
   background: none;
   position: relative;
@@ -284,10 +294,10 @@ footer {
 }
 
 
-.list1a li:hover {
+.list1a-li:hover {
   z-index: 1;
 }
-.list1a li:before {
+.list1a-li:before {
   border: 2px solid #337AB7;
   position: absolute;
   top: -14px;
@@ -299,7 +309,7 @@ footer {
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }
-.list1a li:hover:before {
+.list1a-li:hover:before {
   background: #337AB7;
   color: #FFF;
   -webkit-transform: translate(-12px, 0);
@@ -307,7 +317,7 @@ footer {
   -o-transform: translate(-12px, 0);
   transform: translate(-12px, 0);
 }
-.list1a li:after {
+.list1a-li:after {
   content: "";
   position: absolute;
   -webkit-transition-duration: 0.4s;
@@ -321,7 +331,7 @@ footer {
   top: 0;
   width: 0;
 }
-.list1a li:hover:after {
+.list1a-li:hover:after {
   width: 100%;
 }
 

src/actions/about-me-actions.js

@@ -1,6 +1,7 @@
 import {put, select, takeEvery} from "redux-saga/effects";
 import {gql} from "./gql-queries-backurl";
-import {actionPromise} from "../reducers";
+import {actionPromise, store} from "../reducers";
+import {actionPlaylistFindByOwner} from "./find-actions";
 
 export const actionUserFindOne = (_id, name = "userFindOne") =>
     actionPromise(

src/actions/index.js

@@ -1,8 +1,10 @@
 export {actionAboutMe,aboutMeWatcher} from "./about-me-actions";
-export {actionUserFind, actionPlaylistFindByOwner,} from "./find-actions";
+export {actionUserFind, actionPlaylistFindByOwner} from "./find-actions";
 export {getGQL,backURL,gql,queries} from "./gql-queries-backurl";
 export {actionLogin,actionFullReg,actionFullLogin,actionReg} from "./login-reg-actions";
-export {actionCreatePlaylist,actionUploadTrackToPlaylist,actionFullUploadPlaylists,actionSetTrackToPlaylist} from "./my-playlist-tracks-actions";
+export {actionCreatePlaylist,actionUploadTrackToPlaylist,
+    actionFullUploadPlaylists,actionSetTrackToPlaylist} from "./my-playlist-tracks-actions";
+
 export {actionUploadImage,actionSetAvatar} from "./set-avatar-actions";
 
 

src/actions/login-reg-actions.js

@@ -1,7 +1,7 @@
 import {actionAuthLogin, actionPromise} from "../reducers";
 import {call, put, takeEvery} from "redux-saga/effects";
 import {promiseWorker} from "../reducers/promiseReducer";
-import {gql} from "./index";
+import {actionPlaylistFindByOwner, gql} from "./index";
 import {actionAboutMe,actionUserFind,actionFindMyTracks} from "./index";
 
 export const actionLogin = (login, password) => {
@@ -27,6 +27,7 @@ export function* fullLoginWorker (action) {
     if (token) {
         yield put(actionAuthLogin(token));
         yield put(actionUserFind())
+        yield put(actionPlaylistFindByOwner())
         yield put(actionAboutMe())
     }
 }

src/actions/my-playlist-tracks-actions.js

@@ -47,23 +47,20 @@ export const actionFullUploadPlaylists = (array=[]) =>
 
 export function* fullUploadPlaylistsWorker (action) {
     const {array} = action
-    console.log(array,action,'eeeeeeeee')
+    console.log(array,'eeeeeeeee')
     let { route } = yield select()
     let playlistId = route.params?._id;
     let arr = []
     for (let i=0; i<array.length; i++) {
         if ('_id' in array[i]) {
             arr.push({_id:array[i]._id})
-           console.log(arr, array,'if')
         }else {
             let result = yield call(promiseWorker,actionUploadTrackToPlaylist(array[i]));
             let trackId = result?._id
             arr.push({_id: trackId})
-            console.log(arr, 'else')
         }
 
     }
-    console.log(arr,'4to polu4')
     yield put(actionSetTrackToPlaylist(playlistId, arr))
     yield put(actionAboutMe())
 }
@@ -87,6 +84,7 @@ export function* setTrackToPlaylistWorker (action) {
          }
       }`, {playlist: {_id: playlistId,tracks: arr}}))
     );
+    console.log(playlistId,arr,'4topolu4')
     yield put(actionAboutMe());
 };
 
@@ -95,3 +93,25 @@ export function* setTrackToPlaylistWatcher() {
     yield takeEvery ('SET_TRACK_TO_PLAYLIST', setTrackToPlaylistWorker)
 }
 
+//
+//
+//
+//
+// export const actionPlaylistById = (_id) =>
+//     ({type:'PLAYLIST_BY_ID', _id})
+//
+// export function* playlistByIdWorker (action) {
+//     let {_id} = action
+//     yield call(promiseWorker,actionPromise('playlistById1', gql(`query playlistById1($q: String){
+//     PlaylistFindOne(query: $q){
+//         _id name owner {login} tracks {_id url originalFileName}
+//     }
+// }`, { q: JSON.stringify([{ _id: _id}]) } )))
+//     yield put (actionPlaylistFindByOwner())
+// }
+//
+//
+// export function* playlistByIdWatcher() {
+//     yield takeEvery ('PLAYLIST_BY_ID',playlistByIdWorker)
+// }
+//

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

@@ -3,28 +3,29 @@ import {useState} from "react";
 import {connect} from "react-redux";
 import {actionPlaylistFindByOwner} from "../../actions";
 import {store} from "../../reducers";
+import {actionCreatePlaylist} from "../../actions";
 
 const Playlist = ({playlist:{_id, name}={}}) => {
     return (
         <div>
-            {name !== null ? ( <li><Link to={`/myPlaylist/${_id}`}>{name}</Link></li>) : <></>}
+            {name !== null ? ( <div className='list1a-li'><Link to={`/myPlaylist/${_id}`}>{name}</Link></div>) : <></>}
         </div>
     )
 
 }
-const MyPlaylists =  ({playlists={}}) => {
+const MyPlaylists =  ({playlists={},createPlaylist}) => {
     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="list1a">
+            <button disabled={p.length >= 6  && p !== "" ? false : true} onClick={()=>createPlaylist(p)}>Создать</button>
+            <div className="list1a">
                 {playlists.map((playlist,playlistIndex) =>  <Playlist key={`playlist-${playlistIndex}`} playlist={playlist}/> )}
-            </ul>
+            </div>
         </div>
     )
 }
 
-export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}))(MyPlaylists)
+export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}),
+    {createPlaylist:actionCreatePlaylist})(MyPlaylists)
 
-store.dispatch(actionPlaylistFindByOwner())

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

@@ -1,71 +1,64 @@
-// import {sortableContainer, sortableElement} from 'react-sortable-hoc';
 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";
 import {CPlaylistDropZone} from "../tools";
 import {CPreloaded} from "../preloader";
-
+import {actionFullUploadPlaylists} from "../../actions";
 
 const SortableItem = SortableElement(CTrack);
 
-const MyTracks = ( {children}) =>
-    <div className='Category'>
-        {children}
-    </div>
-
-
-
-const SortableList = SortableContainer(({children, tracks}) => {
 
+const SortableList = SortableContainer(({items}) => {
     return (
-        <div tracks={tracks}>
-            {children}
+        <div>
+            {items.map((value, index) =>
+                <SortableItem key={`item-${value}`} index={index} trackIndex={index} track={value}/>)}
         </div>
     )
 });
 
+function SortableComponent({playlist:{name, tracks=[]}={},onLoad}) {
 
-export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
-    <>
-        <CPlaylistDropZone >
-            <CPreloaded promiseName='playlistById'>
-            <CSortableComponent />
-            </CPreloaded>
-     </CPlaylistDropZone >
-    </>
-
+    const [state, setState] = useState(tracks || [])
 
-function SortableComponent({playlist=[]}) {
-    const{name, tracks} = playlist
-    const [state, setState] = useState(tracks)
     useEffect(() => {
-        setState (tracks)
+        setState (tracks || [])
     },[tracks])
     const onSortEnd = ({oldIndex, newIndex}) => {
         setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
     };
+    onLoad(state)
+
     return (
         <div>
             <h2>{name}</h2>
-            <SortableList axis={'xy'} tracks={tracks} onSortEnd={onSortEnd}>
-                {state.map((value, index) =>
-                    <SortableItem key={`item-${value}`} trackIndex={index} track={value}/>)}
-            </SortableList>
+            <SortableList axis={'y'} items={state} onSortEnd={onSortEnd}/>
         </div>
     )
 }
 
-const CSortableComponent = connect(state => ({ playlist: state.promise.playlistById?.payload || []}))(SortableComponent)
 
 
+const CSortableComponent = connect(state => ({ playlist: state?.promise?.playlistById?.payload || {}}),
+    {onLoad:actionFullUploadPlaylists})
+(SortableComponent)
 
 
+export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
+    <>
+        <CPlaylistDropZone >
+            <CPreloaded promiseName='playlistById'>
+                <CSortableComponent />
+            </CPreloaded>
+        </CPlaylistDropZone >
+    </>
+
+
+//
 // const MyTracks = ({playlist={}}) => {
-//     const{name, tracks} = playlist
+//     const{name, tracks=[]} = playlist
 //     return (
 //         <div className='Category'>
 //             <h2>{name}</h2>
@@ -76,7 +69,7 @@ const CSortableComponent = connect(state => ({ playlist: state.promise.playlistB
 //     )
 // }
 //
-// const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),)(MyTracks)
+// const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}),)(MyTracks)
 //
 //
 // export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
@@ -85,6 +78,5 @@ const CSortableComponent = connect(state => ({ playlist: state.promise.playlistB
 //             <CMyTracks />
 //      </CPlaylistDropZone >
 //     </>
-
 //
-//
+//

src/pages/player.js

@@ -6,7 +6,7 @@ import {connect} from "react-redux";
 import {actionTrackPlay, actionTrackStop,actionTrackVolume,actionTrackCurrentTime,actionNextTrack,actionPreviousTrack} from "../reducers";
 
 
-export const Player = ({player:{volume,duration,currentTime,isPlaying,track={}},
+export const Player = ({player:{volume,duration=0,currentTime=0,isPlaying,track={}},
                                 trackPlay, trackStop,trackVolume,trackCurrentTime,trackNext,trackPrevious}) => {
 
     let {originalFileName} = track

src/pages/tools/playlistdropzone.js

@@ -6,7 +6,7 @@ import {actionFullUploadPlaylists} from "../../actions";
 
 
 function PlaylistDropZone({playlist={}, onLoad, children }) {
-    const files = useRef(playlist.tracks)
+    const files = useRef(playlist.tracks || [])
 
     const onDrop = useCallback( (acceptedFiles) => {
          files.current = ([...files.current,
@@ -31,6 +31,7 @@ function PlaylistDropZone({playlist={}, onLoad, children }) {
 
 
 
-export const CPlaylistDropZone = connect(state => ({playlist: state.promise.playlistById?.payload || []}), {onLoad: actionFullUploadPlaylists})(PlaylistDropZone)
+export const CPlaylistDropZone = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
+    {onLoad: actionFullUploadPlaylists})(PlaylistDropZone)
 
 

src/pages/track.js

@@ -6,10 +6,11 @@ import {connect} from "react-redux";
 
 export const Track = ({player:{isPlaying,playlist,playlistIndex}={},
                           playlistP,
-                          track={},trackIndex,
+                          track={}, trackIndex=0,
                           trackStop,setPlaylist}) => {
 
-   const {originalFileName} = track
+
+    const {originalFileName} = track
     return (
         <div className='Tracks'>
             {!isPlaying || playlist[playlistIndex]._id  !== track._id  ?

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

@@ -5,7 +5,9 @@ import {Link} from "react-router-dom";
 const Playlist = ({playlist:{_id, name}={}}) => {
     return (
         <div>
-        {name !== null && name.length > 6 ? (<Link to={`/userPlaylist/${_id}`}><li>{name}</li></Link>) : <></>}
+        {name !== null && name.length > 6 ? (
+            <Link to={`/userPlaylist/${_id}`}><div className="list1a-li">{name}</div></Link>
+        ) : <></>}
         </div>
     )
 
@@ -16,9 +18,9 @@ const UserPlaylists =  ({playlists={}}) => {
     return (
         <div className='my-playlists'>
             <h2>Плейлиты пользователя</h2>
-            <ul className="list1a">
+            <div className="list1a">
                 {playlists.map((playlist) =>  <Playlist playlist={playlist}/> )}
-            </ul>
+            </div>
         </div>
     )
 }

src/reducers/index.js

@@ -4,6 +4,7 @@ export {actionPromise} from './promiseReducer'
 export {actionTrackPlay,actionTrackStop,actionSetPlaylist,actionTrackCurrentTime,actionTrackVolume,
     trackPlayWatcher,trackStopWatcher,setPlaylistWatcher,trackVolumeWatcher, trackLoadWatcher,nextTrackWatcher,
     actionNextTrack,previousTrackWatcher,actionPreviousTrack,
+    // trackCurrentTimeWatcher,
 } from "./playerReducer";
 
 export {actionAuthLogin, actionAuthLogout} from './authReducer'

src/reducers/playerReducer.js

@@ -83,6 +83,7 @@ export const playerReducer = (
 
 
 export const audio = new Audio()
+audio.onended = () => store.dispatch (actionNextTrack())
 
 
 
@@ -223,12 +224,44 @@ export const actionSetDuration = () => {
     store.dispatch({type:"TRACK_DURATION",duration:e})
 }
 
-export const actionTrackCurrentTime = () => {
-    let e = audio.currentTime
-    store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
+
+export const actionTrackCurrentTime = (e) => {
+    if (e) {
+        audio.currentTime = e
+        store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
+    } else {
+        let e = audio.currentTime
+        store.dispatch({type:"TRACK_CURRENT_TIME", currentTime:e})
+    }
+
 }
 
 
+//
+// export const actionTrackCurrentTime = (e) =>
+//     ({type:'CURRENT_TIME', e})
+//
+//
+// export function* trackCurrentTimeWorker (action) {
+//     let {e} = action
+//     if (e) {
+//         audio.currentTime = e
+//         yield put({type:"TRACK_CURRENT_TIME", currentTime:e})
+//     } else {
+//        e = audio.currentTime
+//        yield put({type:"TRACK_CURRENT_TIME", currentTime:e})
+//     }
+//
+// }
+//
+// export function* trackCurrentTimeWatcher() {
+//     yield takeEvery('CURRENT_TIME', trackCurrentTimeWorker)
+// }
+
+
+
+
+
 
 
 

src/reducers/store.js

@@ -10,6 +10,7 @@ import {fullUploadPlaylistsWatcher,setTrackToPlaylistWatcher} from "../actions/m
 import {aboutMeWatcher,actionAboutMe} from "../actions/about-me-actions";
 import {trackPlayWatcher,trackStopWatcher,setPlaylistWatcher,trackVolumeWatcher,trackLoadWatcher,
     nextTrackWatcher,previousTrackWatcher,
+    // trackCurrentTimeWatcher,
 } from "./playerReducer";
 
 
@@ -51,6 +52,7 @@ function* rootSaga(){
         trackLoadWatcher(),
         nextTrackWatcher(),
         previousTrackWatcher(),
+         // trackCurrentTimeWatcher(),
          // setUserPasswordWatcher(),
     ])
 }