1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- import React from 'react';
- import {Link} from 'react-router-dom';
- import { actionPlaylistById} from '../store/promiseReducer';
- import { actionFullSetPlaylist, actionFullSetTrack} from '../store/playerReducer';
- import { store } from '../store/store';
- import image from '../images/card.jpg';
- import {CreatePlaylist} from './createPlaylist';
- import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
- import {faHeadphonesSimple, faPlay, faPlus, faLock,} from "@fortawesome/free-solid-svg-icons";
- import Button from "react-bootstrap/Button";
- export const Playlist = ({playlist}) => {
- let link = (((window.location.href.split('/')[3]) === 'artists' || (window.location.href.split('/')[3]) === 'search') ? 'albums' : 'playlist');
- return(
- <div className="">
- <div className="me-4 mb-4 p-4 playlist-img-box rounded-5 position-relative"
- style={{backgroundImage: `url(${playlist.photo})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center", width:250, height:250}}
- >
- <div className="playlist-grey-box"></div>
- <Link className="d-flex justify-content-between flex-wrap border-0 link-light position-relative text-decoration-none h6 text-wrap"
- to={`/${link}/${playlist.id}`} onClick={() => {
- store.dispatch(actionPlaylistById(playlist.id));
- }}>
- <span className="playlist-title w-75">{playlist.name}</span>
- {store.getState().auth?.user?.id === playlist.user_id && playlist.private === 1 ?
- <span>
- <FontAwesomeIcon icon={faLock}></FontAwesomeIcon>
- </span> : null
- }
- </Link>
- <Button variant="outline-light" className='rounded-5 position-absolute playlist-play-box' title='Play'>
- <FontAwesomeIcon className='' icon={faPlay}
- onClick={() => {
- store.dispatch(actionPlaylistById(playlist.id));
- setTimeout(() => {
- if(store.getState().promise?.plstById?.payload?.tracks) {
- let tracks = store.getState().promise?.plstById?.payload?.tracks;
- store.dispatch(actionFullSetPlaylist(tracks));
- store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
- }
- }
- , 500)
- }}
- />
- </Button>
- </div>
- </div>)
- }
-
- export const UsersPlaylistsAll = ({playlists}) => {
- const [modalShow, setModalShow] = React.useState(false);
- return (
- <>
- <div className="d-flex justify-content-between align-items-center py-3">
- <h3 className="text-uppercase"> <FontAwesomeIcon icon={faHeadphonesSimple} className="me-2"/>My playlists</h3>
- <Button variant="outline-success" title='Create playlist' onClick={() => setModalShow(true)}>
- <FontAwesomeIcon icon={faPlus} />
- </Button>
- <CreatePlaylist
- show={modalShow}
- onHide={() => setModalShow(false)}
- />
- </div>
- <div className='RootCategories d-flex justify-content-start flex-wrap'>
- {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
- </div>
- </>)
- }
|