update

src/App.scss

@@ -71,6 +71,25 @@ input {
   }
 }
 
+.musicImage {
+  opacity: 0.3;
+  margin-top: 50px;
+  height: 600px;
+  @media (max-width: $breakpoint-tablet) {
+    height: 400px;
+  }
+}
+
+.music-load-image {
+  margin-top: 60px;
+  height: 600px;
+  @media (max-width: $breakpoint-tablet) {
+    height: 300px;
+  }
+}
+
+
+
 .Header {
   position: fixed;
   top: 0px;
@@ -197,15 +216,20 @@ footer {
 
 
 .dropdown-menu {
+  font-size: 14px;
+  width: 40px;
   z-index: 1000;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background: #000000;
   text-align: center;
-  h3 {
+  h2 {
     color: lawngreen;
   }
 }
 
+.change-password-input {
+  width: 100%;
+}
 
 
 .dropdown-button {
@@ -230,6 +254,7 @@ footer {
 
 .Users {
   margin-top: 40px;
+  margin-right: 100px;
   display: flex;
   flex-wrap: wrap;
 }
@@ -239,6 +264,10 @@ footer {
 }
 
 
+.hello-user-page {
+    text-align: center;
+}
+
 
 .list1a {
   margin: 4px;
@@ -295,3 +324,4 @@ footer {
 .list1a li:hover:after {
   width: 100%;
 }
+

src/pages/header/header-build.js

@@ -40,7 +40,7 @@ const ChangePasswordForm = ({onChangePassword}) => {
     const [p, setP] = useState ('')
     return (
         <div>
-            <input type='password' placeholder='Введите пароль' onChange={e => setP(e.target.value)}></input>
+            <input className='change-password-input' type='password' placeholder='Введите пароль' onChange={e => setP(e.target.value)}></input>
             <button className='dropdown-button' onClick={() => {onChangePassword(p); history.push('/')}}>Сменить пароль</button>
         </div>
     )
@@ -79,7 +79,7 @@ const LoginButtons = ({onLogout, history, token}) => {
                             <CAvatar/>
                         </button>
                         <div className="dropdown-menu dropdown-menu-right">
-                            <h3>{JSON.parse(atob(token.split(".")[1])).sub.login}</h3>
+                            <h2>{JSON.parse(atob(token.split(".")[1])).sub.login}</h2>
                             <CAvatarDropZone />
                             <CChangePasswordForm/>
                             <button className='dropdown-button' onClick={() => {onLogout(); history.push('/')}}>Выйти</button>

src/pages/index.js

@@ -6,4 +6,5 @@ export {CMyPlaylists,MyPlaylistTracks,HelloUserPage} from "./my-tracks";
 export {CTrack} from "./track";
 export {CPlaylistDropZone} from "./tools";
 export {CPlayer} from "./player";
-export {UserPlaylistById} from "./user-tracks/user-playlists";
+export {UserPlaylistById} from "./user-tracks/user-playlists";
+export {MusicImage} from "./main";

src/pages/main.js

@@ -1,14 +1,16 @@
 import {Redirect, Switch} from 'react-router-dom';
-import {NoPlaylistMytracks} from "./my-tracks";
 import {HelloPage, UserTracks} from "./user-tracks";
-import {CAllTracks} from "./user-tracks";
-import {CAllUsers} from "./user-tracks";
 import {CMyPlaylists} from "./my-tracks";
 import {CProtectedRoute} from "../reducers";
 import {CSearchResult} from "./tools/search";
 import {HelloUserPage,MyPlaylistTracks} from "./my-tracks";
 import {CUserPlaylists} from "./user-tracks/user-playlists";
 import {UserPlaylistTracks} from "./user-tracks";
+import music from '../music.png'
+
+export const MusicImage = () =>
+    <img className='musicImage' src={music} alt='music'/>
+
 
 export const Aside = ({children}) =>
     <div className='Aside'>
@@ -24,11 +26,13 @@ export const Main = () =>
     <main>
         <Aside>
             <Switch>
-            {/*<CProtectedRoute roles={["anon", "user"]} path="/music" component={CAllUsers}/>*/}
+                <CProtectedRoute roles={["anon", "user"]} path='/' component={MusicImage} exact/>
             <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={CUserPlaylists}/>
             <CProtectedRoute roles={["anon", "user"]} path="/userPlaylist/:_id" component={CUserPlaylists}/>
             <CProtectedRoute roles={["anon", "user"]} path="/myMusic" component={CMyPlaylists}/>
             <CProtectedRoute roles={["anon", "user"]} path="/myPlaylist/:_id" component={CMyPlaylists}/>
+                <CProtectedRoute roles={["anon", "user"]} path="/music" component={MusicImage}/>
+                <CProtectedRoute roles={["anon", "user"]} path="/search" component={MusicImage}/>
             </Switch>
         </Aside>
         <Content>

src/pages/my-tracks/hello-user-page.js

@@ -1,7 +1,15 @@
 import {LogoLarge} from "../header";
+import musicLoad from '../../music-load.png'
+
+export const MusicLoad = () =>
+    <><img className='music-load-image' src={musicLoad} alt='musicLoad'/></>
+
 
 export const HelloUserPage = () =>
-    <div>
+    <div className='hello-user-page'>
         <h3>Загрузите музыку в плейлисты и слушайте любимые композиции</h3>
+        <div className='hello-column'>
         <LogoLarge/>
+        <MusicLoad />
+        </div>
     </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,66 +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 CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),)(MyTracks)
-//
-//
-// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
-//     <>
-//         <CPlaylistDropZone >
-//             <CMyTracks />
-//      </CPlaylistDropZone >
-//     </>
-
-
-
-const SortableItem = SortableElement(CTrack);
+const MyTracks = ({playlist={}}) => {
+    const{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 = ( {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>
+            <CMyTracks />
      </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 CSortableComponent = connect(state => ({ playlist: state.promise.playlistById?.payload || []}))(SortableComponent)
+//
+//
+// const SortableItem = SortableElement(CTrack);
+//
+// const MyTracks = ( {children}) =>
+//     <div className='Category'>
+//         {children}
+//     </div>
+// const SortableList = SortableContainer(MyTracks)
+//
+//
+// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
+//     <>
+//         <CPlaylistDropZone >
+//             <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} track={value}/>)}
+//             </SortableList>
+//         </div>
+//     )
+// }
+//
+// const CSortableComponent = connect(state => ({ playlist: state.promise.playlistById?.payload || []}))(SortableComponent)

src/pages/tools/search.js

@@ -46,7 +46,7 @@ const SearchResult = ({ trackFind }) => {
     return (
         <>
             {trackFind.map((track) => (
-                <CTrack track={track} />
+                <CTrack trackP={track} />
             ))}
         </>
     );

src/pages/track.js

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

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

@@ -10,8 +10,8 @@ $breakpoint-tablet: 1640px;
     transition: all 0.5s;
     position: relative;
     @media (max-width: $breakpoint-tablet)  {
-        margin: 3px;
-        font-size: 12px;
+        margin: 2px;
+        font-size: 11px;
     }
     span {
         color: rgba(255, 255, 255, 0.55);

src/pages/user-tracks/userTracks.js

@@ -14,7 +14,7 @@ const UserTracks = ({playlist={}}) => {
         <div className='Category'>
             <h2>{name}</h2>
             <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} trackP={track}/>)}
+                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
             </CPreloaded>
         </div>
     )

src/reducers/playerReducer.js

@@ -232,12 +232,12 @@ export const actionTrackCurrentTime = () => {
 
 
 
-export const actionSetPlaylist = (playlist,trackIndex,trackP) =>
-    ({type:'ACTION_SET_PLAYLIST', playlist,trackIndex,trackP})
+export const actionSetPlaylist = (playlistP,trackIndex,track) =>
+    ({type:'ACTION_SET_PLAYLIST', playlistP,trackIndex,track})
 
 export function* setPlaylistWorker(action) {
-    let {playlist, trackIndex,trackP} = action
-    yield put ({type:"SET_PLAYLIST", playlist:playlist,track:trackP})
+    let {playlistP, trackIndex,track} = action
+    yield put ({type:"SET_PLAYLIST", playlist:playlistP,track:track})
     yield put (actionTrackLoad(trackIndex))
 }