Sfoglia il codice sorgente

fixed navigation inside playlist. Now if user changes tracks order in playlist current playlist will not stop playing and it's order won't be changed

miskson 2 anni fa
parent
commit
d89da7f668
1 ha cambiato i file con 4 aggiunte e 23 eliminazioni
  1. 4 23
      src/components/Page/index.js

+ 4 - 23
src/components/Page/index.js

@@ -58,43 +58,24 @@ const SortableContainer = sortableContainer(({ children }) => { return <ul>{chil
 const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
   let [_tracks, setTracks] = useState()
   let [_player, setPlayer] = useState()
-  let [_playlist, _setPlaylist] = useState()
   useEffect(() => setPlayer(player), [player])
-  useEffect(() => {
-    setTracks(playlist[0]?.tracks)
-    if(_playlist) {
-      _setPlaylist(_playlist)
-    } else {
-      _setPlaylist(playlist[0])
-    }
-    console.log('11PLAYLIST OLD - NEW',playlist, _playlist)
-    
-    console.log('PLAYLIST OLD - NEW',playlist, _playlist)
-  }, [playlist])
+  useEffect(() => setTracks(playlist[0]?.tracks), [playlist])
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
     let newArr = arrayMoveImmutable(_tracks, oldIndex, newIndex)
     setTracks(newArr)
     updPlaylist(playlist[0]._id, newArr.map(track => ({ _id: track._id })))
 
-    console.log('sovpadaet?', _player?.playlist?._id, _playlist?._id)
-    if(_player?.playlist?._id === _playlist?._id) {
-      console.log('sovpadaet')
-      let newObj = {..._player.playlist, 'tracks': newArr}
-      setPlaylist(newObj)
-      if (_player?.track) {
-        let newInd = newArr.map((item) => item._id).indexOf(_player?.track?._id)
-        setIndex(newInd)
-      }
+    if(_player?.playlist?._id === playlist[0]?._id) {
+      setPlaylist({..._player.playlist, 'tracks': newArr})
+      if (_player?.track) setIndex(newArr.map((item) => item._id).indexOf(_player?.track?._id))
     }
   };
 
-
   return (
     <>
       <h2>{playlist[0]?.name || 'Playlist'}</h2>
       <SortableContainer onSortEnd={onSortEnd}>
-        {/* {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]?.tracks} />)} */}
         {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]} />)}
       </SortableContainer>
     </>