LoadTrackModal.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import Button from 'react-bootstrap/Button';
  2. import Modal from 'react-bootstrap/Modal';
  3. import {connect} from 'react-redux';
  4. import React, {useState, useEffect} from 'react';
  5. import { store } from '../store/store';
  6. import { sendForm } from './SendForm';
  7. import { actionPlaylistById} from '../store/promiseReducer';
  8. import { actionFullSetPlaylist, actionFullSetTrack, actionFullSetTrackCount} from '../store/playerReducer';
  9. import {Form} from "react-bootstrap";
  10. export function LoadTrackModal (props) {
  11. const [tracks, setTrack] = useState(null);
  12. const PostLoadTracks = async(event) =>{
  13. event.preventDefault();
  14. const data = new FormData();
  15. data.append("id", store.getState().promise.plstById.payload.id);
  16. let i = 0;
  17. for (let track of tracks) {
  18. data.append(`tracks[${i++}]`, track);
  19. }
  20. sendForm('playlists/load-tracks', data);
  21. props.onHide();
  22. setTimeout(() => {
  23. store.dispatch(actionPlaylistById(props.id));
  24. setTimeout(() => store.dispatch(actionFullSetPlaylist(store.getState().promise.plstById?.payload?.tracks)), 1000);
  25. }
  26. , 1000);
  27. }
  28. let TracksTableItem = ({name}) =>
  29. <tr>
  30. <td>
  31. <span className="text-dark"> {name}</span>
  32. </td>
  33. </tr>
  34. const PreViewTracks = (preTracks) => {
  35. if (preTracks && preTracks.length > 0)
  36. return (
  37. <div className="preview-tracks-block">
  38. <table className="table table-light table-hover align-middle sticky-top bg-light">
  39. <thead>
  40. <tr>
  41. <th>
  42. Loaded files
  43. </th>
  44. </tr>
  45. </thead>
  46. </table>
  47. <table className="table table-light table-hover align-middle">
  48. <tbody>
  49. {Array.from(preTracks).map((preTracks, i) => <TracksTableItem name={preTracks.name} key={i}></TracksTableItem>)}
  50. </tbody>
  51. </table>
  52. </div>
  53. )}
  54. return(
  55. <Modal
  56. {...props}
  57. size=""
  58. aria-labelledby="contained-modal-title-vcenter"
  59. centered
  60. >
  61. <Modal.Header closeButton>
  62. <Modal.Title id="contained-modal-title-vcenter">
  63. Load tracks
  64. </Modal.Title>
  65. </Modal.Header>
  66. <Modal.Body >
  67. <Form onSubmit={PostLoadTracks} className="authorization" id='loadTracksForm'>
  68. <Form.Group className="mb-3">
  69. <Form.Label>Select your tracks</Form.Label>
  70. <Form.Control type="file" required accept=".mp3" id="formFileMultiple" multiple onChange={(e) => {
  71. setTrack(e.target.files);
  72. }} />
  73. </Form.Group>
  74. </Form>
  75. {PreViewTracks(tracks)}
  76. </Modal.Body>
  77. <Modal.Footer>
  78. <Button variant="outline-success" type='submit' form='loadTracksForm'>Save</Button>
  79. </Modal.Footer>
  80. </Modal>)
  81. }