123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- import React, {useState, useEffect} from 'react';
- import { ReactDOM } from 'react';
- import { store } from '../store/store';
- import { actionPlaylistById} from '../store/promiseReducer';
- import Button from 'react-bootstrap/Button';
- import Modal from 'react-bootstrap/Modal';
- import {Provider, connect} from 'react-redux';
- import { actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
- import { Header } from './header';
- import { СNowPlayingPlayer } from './playing';
- function sendForm (url, data) {
- fetch(`http://player-api/api/${url}`, {
- method: 'POST',
- body: data,
- headers: {
-
- ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
-
- },
- }).then(res => res.json())
- .then(data => {
- if(data.token) {
- console.log(data)
- return data
- } else {
- //console.log(data.login[0]);
- }
- })
- }
- function ShowModal (props) {
- const [tracks, setTrack] = useState(null);
- const PostLoadTracks = async(event) =>{
- event.preventDefault();
- const data = new FormData();
-
- data.append("id", store.getState().promise.plstById.payload.id);
- let i = 0;
- for (let track of tracks) {
- data.append(`tracks[${i++}]`, track);
- }
- sendForm('playlists/load-tracks', data);
- }
- return(
- <Modal
- {...props}
- size="lg"
- aria-labelledby="contained-modal-title-vcenter"
- centered
- >
- <Modal.Header closeButton>
- <Modal.Title id="contained-modal-title-vcenter">
- Add Tracks
- </Modal.Title>
- </Modal.Header>
- <Modal.Body >
- <form onSubmit={PostLoadTracks} className="authorization center align-items-center justify-content-center d-flex" id='loadTracksForm'>
- <div className="mb-3">
- <label className="form-label">Multiple files input example</label>
-
- <input className="form-control" accept=".mp3" type="file" id="formFileMultiple" multiple onChange={(e) => setTrack(e.target.files)}/>
- </div>
- </form>
- </Modal.Body>
- <Modal.Footer>
- <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={props.onHide}>Save</Button>
- </Modal.Footer>
- </Modal>)
- }
- let i =1;
- export let audio = new Audio();
- const Track = ({track: {name, file, id3, id} = {} }, key) =>
-
- <tr>
- <th scope="row">{i++}</th>
- <td>
- <button onClick={async() => {
- await (() => audio.src = `http://player-api/storage/tracks/${file}`)();
- store.dispatch(actionFullSetTrack({name, file, id3, id}));
- store.dispatch(actionFullPlay());
- }}>
- {name}
- </button>
- </td>
- <td>
- <a href='#/artist'>{id3.artist}</a>
- </td>
- <td>{id3.getAlbum}</td>
- </tr>
- const TracksAll = ({tracks=[]}) =>
- <table className="table table-dark table-striped table-dark table-hover">
- <thead>
- <tr>
- <th scope="col">#</th>
- <th scope="col">Track name</th>
- <th scope="col">Artist</th>
- <th scope="col">Album</th>
- </tr>
- </thead>
- <tbody>
- {tracks.map((tracks, i) => <Track key={i} track={tracks}/>)}
- </tbody>
- </table>
- const СAllTracks = connect(state => ({tracks: state.promise.plstById?.payload?.tracks || []}), )(TracksAll);
- export const PlaylistById = ({playlist = {}}) => {
- let id = window.location.href.split('/')[4];
- const getAnswer = async () => {
- await store.dispatch(actionPlaylistById(id));
-
- };
-
- useEffect(() => {
- getAnswer();
- }, []);
- const [modalShow, setModalShow] = React.useState(false);
-
- return(
- <>
- <Header/>
- <div className='d-flex justify-content-around'>
- <div>
- <h1 >Playlist</h1>
- <div className='d-flex justify-content-center'>
- <div className='me-4'>
- <img src={playlist.photo} width ='250px' alt='...'/>
- </div>
- <div>
- <p className='h4'>Название плейлиста: {playlist.name}</p>
- <p>Автор плейлиста: {playlist.user_name}</p>
-
- <p>{playlist?.tracks?.length} треков</p>
- <div className='d-flex'>
- <div> <button type="button" className="btn btn-light me-2">Перемешать</button></div>
- <div> <button type="button" className="btn btn-light">Добавить в библиотеку</button></div>
- </div>
- {playlist.user_id === store.getState().auth.user.id?
- (<>
- <Button variant="primary" onClick={() => setModalShow(true)}>
- Add Tracks
- </Button>
- <ShowModal
- show={modalShow}
- onHide={() => setModalShow(false)}
- /></>) : <></>}
-
- </div>
- </div>
- <СAllTracks/>
- </div>
- <СNowPlayingPlayer/>
- </div>
-
-
- </>
- )}
|