|
@@ -7,41 +7,50 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
|
|
import { arrayMoveImmutable } from 'array-move';
|
|
import { arrayMoveImmutable } from 'array-move';
|
|
|
|
|
|
|
|
|
|
-const Track = ({ track, audio, setTrack, playTrack, pauseTrack }) =>
|
|
|
|
- <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
|
|
|
|
- <div style={{ marginRight: '2%' }}>
|
|
|
|
- <button
|
|
|
|
- style={{ padding: '10px', margin: '2px' }}
|
|
|
|
- onClick={()=> {setTrack(track); console.log('treg',track)}}
|
|
|
|
- > {`SET`} </button>
|
|
|
|
-
|
|
|
|
- <button
|
|
|
|
- style={{ padding: '10px', margin: '2px' }}
|
|
|
|
- onClick={()=> {playTrack(audio, track); console.log('playing')}}
|
|
|
|
- > {`[>]`} </button>
|
|
|
|
-
|
|
|
|
- <button
|
|
|
|
- style={{ padding: '10px', margin: '2px' }}
|
|
|
|
- onClick={()=> {pauseTrack(audio, track); console.log('pause')}}
|
|
|
|
- > {`[ || ]`} </button>
|
|
|
|
-
|
|
|
|
- <button style={{ padding: '10px', margin: '2px' }}>+</button>
|
|
|
|
- </div>
|
|
|
|
- <div style={{ textAlign: 'left' }}>
|
|
|
|
- <h5>{track.id3.artist || 'Artist: unknown'}</h5>
|
|
|
|
- <h6>{track.id3.album || 'Album: unknown'}</h6>
|
|
|
|
- <h5>{track.id3.title || track.originalFileName}</h5>
|
|
|
|
- <p>{track._id}</p>
|
|
|
|
- <p>{track.url}</p>
|
|
|
|
- </div>
|
|
|
|
- </li>
|
|
|
|
|
|
+const Track = ({ track, player, playlist, playTrack, pauseTrack }) => {
|
|
|
|
+ let [_player, setPlayer] = useState(player)
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ console.log('PLAYER_CHANGED')
|
|
|
|
+ console.log(player.isPlaying)
|
|
|
|
+ setPlayer(player)
|
|
|
|
+ }, [player])
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
|
|
|
|
+ <div style={{ marginRight: '2%' }}>
|
|
|
|
+
|
|
|
|
+ {_player?.isPlaying ?
|
|
|
|
+ <button style={{ padding: '10px', margin: '2px' }} onClick={()=> pauseTrack()}>{`[| |]`}</button>:
|
|
|
|
+ <button style={{ padding: '10px', margin: '2px' }} onClick={()=> playTrack(track, playlist)}>{`[>]`}</button>
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <button style={{ padding: '10px', margin: '2px' }}>+</button>
|
|
|
|
+ </div>
|
|
|
|
+ <div style={{ textAlign: 'left' }}>
|
|
|
|
+ <h5>{track.id3.artist || 'Artist: unknown'}</h5>
|
|
|
|
+ <h6>{track.id3.album || 'Album: unknown'}</h6>
|
|
|
|
+ <h5>{track.id3.title || track.originalFileName}</h5>
|
|
|
|
+ <p>{track._id}</p>
|
|
|
|
+ <p>{track.url}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
|
|
const TrackConnect = connect(
|
|
const TrackConnect = connect(
|
|
- state => ({audio: state.player.track || {}}),
|
|
|
|
|
|
+ state => ({
|
|
|
|
+ player: state.player || {},
|
|
|
|
+ playlist: state.playTrack?.payload[0] || {}
|
|
|
|
+ }),
|
|
{
|
|
{
|
|
- setTrack: action.actionTrackSet,
|
|
|
|
- playTrack: action.actionTrackPlay,
|
|
|
|
- pauseTrack: action.actionTrackPause
|
|
|
|
|
|
+ pauseTrack: action.pauseTrack,
|
|
|
|
+ playTrack: action.playTrack
|
|
})(Track)
|
|
})(Track)
|
|
|
|
|
|
const SortableItem = sortableElement(TrackConnect);
|
|
const SortableItem = sortableElement(TrackConnect);
|