|
@@ -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>
|
|
|
</>
|