import * as action from '../../actions'
import { useEffect, useState, useCallback } from 'react';
import { connect } from 'react-redux';
import { useDropzone } from 'react-dropzone'
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';
import { faPlay, faPause} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack }) => {
let [_player, setPlayer] = useState()
let [isPlay, setPlay] = useState(true)
useEffect(() => setPlayer(player), [player])
return (
{isPlay && _player?.isPlaying && _player.track?._id === track._id ?
:
}
{track.id3.artist || 'Artist: unknown'}
{track.id3.album || 'Album: unknown'}
{track.id3.title || track.originalFileName}
)
}
const TrackConnect = connect(
state => ({
player: state.player || {},
}),
{
setTrack: action.setTrack,
pauseTrack: action.pauseTrack,
playTrack: action.playTrack
}
)(Track)
const SortableItem = sortableElement(TrackConnect);
const SortableContainer = sortableContainer(({ children }) => );
const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
let [_tracks, setTracks] = useState()
let [_player, setPlayer] = useState()
useEffect(() => setPlayer(player), [player])
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 })))
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 (
<>
{playlist[0]?.name || 'Playlist'}
{ (_tracks || []).map((track, index) => ) }
>
)
}
export const PlaylistConnect = connect(
state => ({
playlist: state.promise.playlistTracks?.payload || [],
player: state.player || {}
}),
{
updPlaylist: action.actionUpdatePlaylist,
setPlaylist: action.setPlaylist,
setIndex: action.setIndex
}
)(Playlist)
const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
let [playlistId, setPlaylistId] = useState()
useEffect(() => {
setPlaylistId(playlist[0]?._id)
}, [playlist])
const onDrop = useCallback(acceptedFiles => {
if(acceptedFiles[0].type === 'audio/mpeg') uploadTrack(acceptedFiles[0], playlistId)
}, [uploadTrack, playlistId])
const { getRootProps, isDragActive } = useDropzone({ onDrop })
return (
{isDragActive ? '...drop here' : 'to upload: drag and drop track here'}
)
}
const PlaylistTrackDropzoneConnect = connect(
state => ({ playlist: state.promise.playlistTracks?.payload || [] }),
{ uploadTrack: action.actionUploadUserTrack }
)(PlaylistTrackDropzone)
const PlaylistPage = ({ match: { params: { _id } }, getTracks }) => {
useEffect(() => { getTracks(_id.substring(1)) }, [_id, getTracks])
return ()
}
export const PlaylistPageConnect = connect(null, { getTracks: action.actionGetPlaylistById })(PlaylistPage)
const UserTracks = ({ user, tracks }) => {
let tracksRev = [...tracks].reverse()
return (
<>
{user.login || 'My'} uploaded tracks:
{(tracksRev || []).map(track => )}
>
)
}
const UserTracksConnect = connect(state => ({
tracks: state.promise.userTracks?.payload || [],
user: state.promise.userData?.payload || {}
})
)(UserTracks)
const UserTracksDropzone = ({ onLoad }) => {
const onDrop = useCallback(acceptedFiles => {
if(acceptedFiles[0].type === 'audio/mpeg') onLoad(acceptedFiles[0])
}, [onLoad])
const { getRootProps, isDragActive } = useDropzone({ onDrop })
return (
{isDragActive ? '...drop here' : 'to upload: drag and drop track here'}
)
}
export const UserTrackDropzoneConnect = connect(null, { onLoad: action.actionUploadUserTrack })(UserTracksDropzone)
const UserTracksPage = ({ match: { params: { _id } }, getUserTracks }) => {
useEffect(() => { getUserTracks() }, [_id, getUserTracks])
return ()
}
export const UserTracksPageConnect = connect(null, { getUserTracks: action.actionGetUserTracks })(UserTracksPage)