123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- import {connect} from 'react-redux';
- import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist , actionAddTrackToQueue} from '../store/playerReducer';
- import {actionPlaylistById, actionArtistById} from '../store/promiseReducer';
- import { store } from '../store/store';
- import Button from 'react-bootstrap/Button';
- import Modal from 'react-bootstrap/Modal';
- import { sendForm } from './SendForm';
- import React, {useState} from 'react';
- import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
- import {faCheck, faPause, faPlay} from "@fortawesome/free-solid-svg-icons";
- import { Link } from 'react-router-dom';
- import { Dropdown , Form} from 'react-bootstrap';
- import { RunToast } from './Toast';
- export let audio = new Audio();
- const PlaylistOption = () => {
- const playlists = store.getState().promise?.usersPlaylists?.payload?.playlists;
- if (playlists) {
- console.log(playlists);
- return (playlists.map((playlistone, i) => <option value={playlistone.id} className="bg-dark" key={i}>{playlistone.name}</option>))
- }
- }
- const ButtonDeleteTrack = (track) => {
- const [deletePllstModal, setDeletePllstModal] = useState(false);
- return (
- <>
- <Dropdown.Item onClick={() => {console.log(track); setDeletePllstModal(true)}}>Delete</Dropdown.Item>
- <Modal
- show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
- backdrop="static" keyboard={false} track={track}>
- <Modal.Header closeButton>
- <Modal.Title className='w-100 text-center'>Delete Track?</Modal.Title>
- </Modal.Header>
- <Modal.Body className='text-center'>
- Are you really want to delete track <span className='text-danger'><i>"{track.track.name}" - {track.track?.id3?.artist}</i></span>?
- </Modal.Body>
- <Modal.Footer className='d-flex justify-content-center'>
- <Button className='mx-2' variant="secondary" onClick={() => setDeletePllstModal(false)}>
- Close
- </Button>
- <Button track={track} className='mx-2' variant="danger" onClick={async() => {
- const data = new FormData();
- data.append('playlistId', track.track?.pivot?.playlist_id);
- data.append('trackId', track.track?.pivot?.track_id);
- await sendForm(`playlists/remove-track`, data);
- setDeletePllstModal(false);
- setTimeout(() => store.dispatch(actionPlaylistById(track.track?.pivot?.playlist_id)), 100)
- }}>Delete</Button>
- </Modal.Footer>
- </Modal>
- </>
- )
- }
- const Track = ({track, playlist, isPlaying}) => {
- const PostLoadTracks = async(form) =>{
- console.log(form.target)
- const data = new FormData(form.target);
- sendForm('playlists/add-track', data);
- RunToast('bg-success','Success', `Track add to playlist`)
- }
-
- return(
- <tr className={`disactive-track track-play-button-${track?.id}`}>
- <td scope="row" width={30} data-id={track.id}>
- <div className="col">
- <Button variant="outline-light" className={`rounded-5`} title='Play' onClick={async () => {
- // console.log(playlist.tracks, playlist?.tracks[playlist?.tracks.indexOf(track)]);
- playlist.tracks && store.dispatch(actionFullSetPlaylist(playlist?.tracks));
- playlist.tracks ? store.dispatch(actionFullSetTrack(playlist?.tracks[playlist?.tracks.indexOf(track)])) : store.dispatch(actionFullSetTrack(track))
- store.dispatch(actionFullPlay());
- }}>
- <FontAwesomeIcon className={`track-play-icon-${track?.id}`} icon={faPlay}/>
- </Button>
- </div>
- </td>
- <td>
- <Link className="link-light" to='#'> {track.name}</Link>
- </td>
- <td onClick={() => store.dispatch(actionArtistById(track.artist_id))}>
- <Link className="link-light" to={`/artists/${track.artist_id}`}> {track.id3.artist}</Link>
- </td>
- <td>
- <Link className="link-light" to={`/albums/${track?.album?.id}`}> {track.id3.getAlbum}</Link>
- </td>
- <td align={"right"}>
- <Dropdown align={"end"}>
- <Dropdown.Toggle variant="outline-light" id="dropdown-basic"></Dropdown.Toggle>
- <Dropdown.Menu variant={"dark"}>
- {playlist?.user_id === store.getState().auth.user.id ? <ButtonDeleteTrack track={track} /> :
- <Form className="input-group d-flex" onSubmit={(e) => {
- e.preventDefault();
- PostLoadTracks(e);
-
- }}>
- <input type={"hidden"} name="trackId" value={track?.id}></input>
- <select className="dropdown-item btn btn-outline-secondary w-75" name="playlistId" id="inputGroupSelect04"
- aria-label="Example select with button addon">
- <PlaylistOption/>
- </select>
- <button type={"submit"} className="btn btn-outline-secondary w-auto"><FontAwesomeIcon icon={faCheck}/></button>
- </Form>
- }
- <Dropdown.Item onClick={() => {
- store.dispatch(actionAddTrackToQueue(track))
- }}>Add to Queue</Dropdown.Item>
-
- </Dropdown.Menu>
- </Dropdown>
- </td>
- </tr>)
- }
- export const TracksAll = ({tracks, playlist, isPlaying}) =>
- <table className="table table-dark table-hover align-middle">
- <thead>
- <tr>
- <th scope="col" width={30}></th>
- <th scope="col">Track name</th>
- <th scope="col">Artist</th>
- <th scope="col">Album</th>
- <th scope='col'>Action</th>
- </tr>
- </thead>
- <tbody>
- {tracks.map((tracks, i) => <Track key={i} track={tracks} playlist={playlist} isPlaying={isPlaying}/>)}
- </tbody>
- </table>
- export const СAllTracks = connect(state => ({playlist: state.promise.plstById?.payload || {},
- tracks: state.promise?.plstById?.payload?.tracks || [],
- isPlaying: state.player?.isPlaying || false,} ), )(TracksAll);
|