index.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import * as action from '../../actions'
  2. import { useEffect, useState, useCallback } from 'react';
  3. import { connect } from 'react-redux';
  4. import { useDropzone } from 'react-dropzone'
  5. import { sortableContainer, sortableElement } from 'react-sortable-hoc';
  6. import { arrayMoveImmutable } from 'array-move';
  7. const Track = ({ track, playlist, player, setTrack, playTrack, pauseTrack }) => {
  8. let [_player, setPlayer] = useState()
  9. let [isPlay, setPlay] = useState(true)
  10. useEffect(() => setPlayer(player), [player])
  11. return (
  12. <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
  13. <div style={{ marginRight: '2%', padding: '2%' }}>
  14. {isPlay && _player?.isPlaying && _player.track?._id === track._id ?
  15. <button style={{ fontSize: '3vh' }} onClick={() => { pauseTrack(); setPlay(false) }}>{`\u23F8`}</button> :
  16. <button
  17. style={{ fontSize: '3vh' }}
  18. onClick={() => {
  19. if (track?._id !== _player?.track?._id) {
  20. //setTrack(track, (playlist.constructor.name === 'Array'? playlist : playlist.tracks))
  21. console.log('setting playlist', playlist)
  22. setTrack(track, playlist)
  23. }
  24. playTrack()
  25. setPlay(true)
  26. }}
  27. >{`\u23F5`}</button>
  28. }
  29. </div>
  30. <div style={{ textAlign: 'left' }}>
  31. <h5>{track.id3.artist || 'Artist: unknown'}</h5>
  32. <h6>{track.id3.album || 'Album: unknown'}</h6>
  33. <h5>{track.id3.title || track.originalFileName}</h5>
  34. </div>
  35. </li>
  36. )
  37. }
  38. const TrackConnect = connect(
  39. state => ({
  40. player: state.player || {},
  41. }),
  42. {
  43. setTrack: action.setTrack,
  44. pauseTrack: action.pauseTrack,
  45. playTrack: action.playTrack
  46. }
  47. )(Track)
  48. const SortableItem = sortableElement(TrackConnect);
  49. const SortableContainer = sortableContainer(({ children }) => { return <ul>{children}</ul> });
  50. const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
  51. let [_tracks, setTracks] = useState()
  52. let [_player, setPlayer] = useState()
  53. useEffect(() => setPlayer(player), [player])
  54. useEffect(() => {
  55. setTracks(playlist[0]?.tracks)
  56. }, [playlist])
  57. const onSortEnd = ({ oldIndex, newIndex }) => {
  58. let newArr = arrayMoveImmutable(_tracks, oldIndex, newIndex)
  59. setTracks(newArr)
  60. updPlaylist(playlist[0]._id, newArr.map(track => ({ _id: track._id })))
  61. //setPlaylist(newArr)
  62. console.log(_player, _player.playlist)
  63. if(_player.playlist.tracks) {
  64. _player.playlist.tracks = newArr
  65. setPlaylist(_player.playlist.tracks)
  66. console.log('amoma', _player.playlist)
  67. }
  68. let aboba = _player.playlist
  69. console.log('aboba', aboba)
  70. setPlaylist({..._player.playlist, 'tracks': newArr})
  71. //setPlaylist({..._player.playlist, 'tracks': newArr})
  72. //setPlaylist(_player?.playlist.constructor.name === 'Array'? newArr : {..._player.playlist, 'tracks': newArr})
  73. if (_player?.track) setIndex(newArr.map((item) => item._id).indexOf(_player?.track?._id))
  74. };
  75. return (
  76. <>
  77. <h2>{playlist[0]?.name || 'Playlist'}</h2>
  78. <SortableContainer onSortEnd={onSortEnd}>
  79. {/* {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]?.tracks} />)} */}
  80. {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]} />)}
  81. </SortableContainer>
  82. </>
  83. )
  84. }
  85. export const PlaylistConnect = connect(
  86. state => ({
  87. playlist: state.promise.playlistTracks?.payload || [],
  88. player: state.player || {}
  89. }),
  90. {
  91. updPlaylist: action.actionUpdatePlaylist,
  92. setPlaylist: action.setPlaylist,
  93. setIndex: action.setIndex
  94. }
  95. )(Playlist)
  96. const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
  97. let [playlistId, setPlaylistId] = useState()
  98. useEffect(() => {
  99. setPlaylistId(playlist[0]?._id)
  100. }, [playlist])
  101. const onDrop = useCallback(acceptedFiles => {
  102. uploadTrack(acceptedFiles[0], playlistId)
  103. }, [uploadTrack, playlistId])
  104. const { getRootProps, isDragActive } = useDropzone({ onDrop })
  105. return (
  106. <div
  107. {...getRootProps()}
  108. style={{ height: 'fit-content', border: `${isDragActive ? '1px solid mediumseagreen' : '1px solid black'}` }}
  109. >
  110. {isDragActive ? <small>...drag here</small> : <small>to upload drag track here</small>}
  111. <PlaylistConnect />
  112. </div>
  113. )
  114. }
  115. const PlaylistTrackDropzoneConnect = connect(
  116. state => ({ playlist: state.promise.playlistTracks?.payload || [] }),
  117. { uploadTrack: action.actionUploadUserTrack }
  118. )(PlaylistTrackDropzone)
  119. const PlaylistPage = ({ match: { params: { _id } }, getTracks }) => {
  120. useEffect(() => { getTracks(_id.substring(1)) }, [_id, getTracks])
  121. return (<PlaylistTrackDropzoneConnect />)
  122. }
  123. export const PlaylistPageConnect = connect(null, { getTracks: action.actionGetPlaylistById })(PlaylistPage)
  124. const UserTracks = ({ user, tracks }) => {
  125. let tracksRev = [...tracks].reverse()
  126. return (
  127. <>
  128. <h2>{user.login || 'My'} tracks:</h2>
  129. <ul>{(tracksRev || []).map(track => <TrackConnect track={track} playlist={tracksRev} />)}</ul>
  130. </>
  131. )
  132. }
  133. const UserTracksConnect = connect(state => ({
  134. tracks: state.promise.userTracks?.payload || [],
  135. user: state.promise.userData?.payload || {}
  136. })
  137. )(UserTracks)
  138. const UserTracksDropzone = ({ onLoad }) => {
  139. const onDrop = useCallback(acceptedFiles => {
  140. onLoad(acceptedFiles[0])
  141. }, [onLoad])
  142. const { getRootProps, isDragActive } = useDropzone({ onDrop })
  143. return (
  144. <div
  145. {...getRootProps()}
  146. style={{ height: 'fit-content', border: `${isDragActive ? '1px solid mediumseagreen' : '1px solid black'}` }}
  147. >
  148. {isDragActive ? <small>...drag here</small> : <small>to upload drag track here</small>}
  149. <UserTracksConnect />
  150. </div>
  151. )
  152. }
  153. export const UserTrackDropzoneConnect = connect(null, { onLoad: action.actionUploadUserTrack })(UserTracksDropzone)
  154. const UserTracksPage = ({ match: { params: { _id } }, getUserTracks }) => {
  155. useEffect(() => { getUserTracks() }, [_id, getUserTracks])
  156. return (<UserTrackDropzoneConnect />)
  157. }
  158. export const UserTracksPageConnect = connect(null, { getUserTracks: action.actionGetUserTracks })(UserTracksPage)