-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added: playlist page & api functionality
- Loading branch information
1 parent
13dee0a
commit 3a1ec6c
Showing
7 changed files
with
282 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| Music /genre/0JQ5DAqbMKFSi39LMRT0Cy | ||
| Made for you /genre/0JQ5DAt0tbjZptfcdMSKl3 | ||
| Explore all category /genre/0JQ5DArNBzkmxXHCqFLx3c | ||
| Daily mix /genre/section0JQ5DACFo5h0jxzOyHOsIo | ||
| Your artist mixes /genre/section0JQ5DACFo5h0jxzOyHOsIa | ||
| Featured playlist /genre/section0JQ5DAzQHECxDlYNI6xD1g | ||
| Uniquely yours /genre/section0JQ5DACFo5h0jxzOyHOsIe | ||
| Handpicked new release /genre/section0JQ5IMCbQBLAlPhkJ41ypw | ||
| New release /genre/0JQ5DAqbMKFz6FAsUtgAab | ||
| Your genre mixes /genre/section0JQ5DACFo5h0jxzOyHOsI9 | ||
| Your decade mixes /genre/section0JQ5DACFo5h0jxzOyHOsIb | ||
| Your mood mixes /genre/section0JQ5DACFo5h0jxzOyHOsIc | ||
| Your niche mixes /genre/section0JQ5DATaxswzruE2nWp3Lr | ||
| The best new release /genre/section0JQ5IMCbQBLiGLtWsAvnNG | ||
| Recently played /genre/recently-played | ||
| Popular equal playlist /genre/section0JQ5IMCbQBLmdV4K4hLrHt | ||
| Playlist from our editors /genre/0JQ5DAqbMKFSi39LMRT0Cy | ||
| Jump back in /section/0JQ5DAIiKWzVFULQfUm85X | ||
| Popular album /section/0JQ5DAnM3wGh0gz1MXnu3B | ||
| Today's biggest hits /section/0JQ5DAnM3wGh0gz1MXnu3M | ||
| More of what you like /section/0JQ5DAnM3wGh0gz1MXnu3J | ||
| India's best /section/0JQ5DAuChZYPe9iDhh2mJz | ||
| Charts /section/0JQ5DAnM3wGh0gz1MXnu5g | ||
| Popular radio /section/0JQ5DAnM3wGh0gz1MXnu4h | ||
| Popular artist /section/0JQ5DAnM3wGh0gz1MXnu3C | ||
| For that 'pasandida insaan' /section/0JQ5IMCbQBLkvpuwqL2UWr | ||
| Spotify playlist /section/0JQ5DAuChZYPe9iDhh2mJz | ||
| Featured charts /section/0JQ5DAzQHECxDlYNI6xD1g |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,213 @@ | ||
| import React from 'react'; | ||
| import styles from './Playlist.module.css'; | ||
| import React, { useState, useEffect } from 'react'; | ||
| import styles from '../Collection/Collection.module.css'; | ||
| import { Icon } from '../../Icons'; | ||
| import { FaArrowLeft } from 'react-icons/fa6'; | ||
| import { RiMore2Line } from 'react-icons/ri'; | ||
| import { LuClock3 } from 'react-icons/lu'; | ||
| import { IoPlay } from 'react-icons/io5'; | ||
| import NavBar from '../../components/NavBar/NavBar'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { Link, useNavigate, useParams } from 'react-router-dom'; | ||
| import { useAuth } from '../../hooks/useAuth'; | ||
| import { PlaylistWithId, User } from '../../constants/constant'; | ||
| import equ from '../../assets/images/equaliser-animated-green.gif'; | ||
| import { ThreeDots } from 'react-loader-spinner'; | ||
|
|
||
| function Playlist() { | ||
| return <></>; | ||
| const navigate = useNavigate(); | ||
| const [cardHover, setCardHover] = useState(false); | ||
| const [playlistData, setPlaylistData] = useState(null); | ||
| const [playlistOwner, setPlaylistOwner] = useState(null); | ||
| const { fetchData } = useAuth(); | ||
| const { playlistId } = useParams(); | ||
|
|
||
| const DateConverter = (zuluTime) => { | ||
| const date = new Date(zuluTime); | ||
| const months = [ | ||
| 'Jan', | ||
| 'Feb', | ||
| 'Mar', | ||
| 'Apr', | ||
| 'May', | ||
| 'Jun', | ||
| 'Jul', | ||
| 'Aug', | ||
| 'Sep', | ||
| 'Oct', | ||
| 'Nov', | ||
| 'Dec', | ||
| ]; | ||
| const day = String(date.getUTCDate()).padStart(2, '0'); | ||
| const month = months[date.getUTCMonth()]; | ||
| const year = date.getUTCFullYear(); | ||
| return `${day} ${month} ${year}`; | ||
| }; | ||
|
|
||
| const msToTime = (milliseconds) => { | ||
| const totalSeconds = Math.floor(milliseconds / 1000); | ||
|
|
||
| const minutes = Math.floor((totalSeconds % 3600) / 60); | ||
| const seconds = totalSeconds % 60; | ||
|
|
||
| const formattedMinutes = String(minutes).padStart(2, '0'); | ||
| const formattedSeconds = String(seconds).padStart(2, '0'); | ||
|
|
||
| return `${formattedMinutes}:${formattedSeconds}`; | ||
| }; | ||
| useEffect(() => { | ||
| // do { | ||
| fetchData(`${PlaylistWithId}/${playlistId}`) | ||
| .then((res) => { | ||
| setPlaylistData(res); | ||
| fetchData(`${User}/${res.owner.id}`) | ||
| .then((res) => { | ||
| setPlaylistOwner(res); | ||
| }) | ||
| .catch((err) => { | ||
| console.log(err); | ||
| }); | ||
| }) | ||
| .catch((err) => { | ||
| console.log(err); | ||
| }); | ||
| // } while (savedTracks != null); | ||
| }, [playlistId]); | ||
|
|
||
| return ( | ||
| <div className={styles.collectionSection}> | ||
| {playlistData ? ( | ||
| <div className={styles.innerSection}> | ||
| <div className={styles.navigationBar}> | ||
| <NavBar /> | ||
| </div> | ||
| <nav> | ||
| <div className={styles.navigationBtn}> | ||
| <button onClick={() => navigate(-1)}> | ||
| <FaArrowLeft size={20} color="black" /> | ||
| </button> | ||
| </div> | ||
| <div className={styles.songManageSection}> | ||
| <div className={styles.searchBar}> | ||
| <button> | ||
| <Icon name="search" size={15} /> | ||
| </button> | ||
| <input type="text" placeholder="Find in liked songs" /> | ||
| </div> | ||
| <div className={styles.sortBtn}> | ||
| <button>sort</button> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| <header> | ||
| <div className={styles.imgSection}> | ||
| <div> | ||
| <img | ||
| src={playlistData && playlistData.images[0].url} | ||
| alt={playlistData && playlistData.name} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={styles.detailsSection}> | ||
| <div className={styles.type}> | ||
| <span>{playlistData && playlistData.type}</span> | ||
| </div> | ||
| <div className={styles.title}> | ||
| <h1>{playlistData && playlistData.name}</h1> | ||
| </div> | ||
| <div className={styles.desc}> | ||
| <h4>{playlistData && playlistData.description}</h4> | ||
| </div> | ||
| <div className={styles.desc}> | ||
| <h5 className={styles.name}> | ||
| <img | ||
| src={playlistOwner && playlistOwner.images[0].url} | ||
| alt={playlistOwner && playlistOwner.display_name} | ||
| /> | ||
| <Link to={playlistOwner && `/user/${playlistOwner.id}`}> | ||
| <h3>{playlistOwner && playlistOwner.display_name}</h3> | ||
| </Link> | ||
| </h5> | ||
| <span className={styles.songCount}> | ||
| • {playlistData.tracks.total} songs | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <div className={styles.tableContainer}> | ||
| <hr /> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th className={styles.tableSongNoLabel}>#</th> | ||
| <th className={styles.tableSongTitleLabel}>title</th> | ||
| <th className={styles.tableSongAlbumLabel}>album</th> | ||
| <th className={styles.tableSongDateLabel}>date added</th> | ||
| <th className={styles.tableSongDurationLabel}> | ||
| <LuClock3 /> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {playlistData.tracks.items.map((data, index) => { | ||
| return ( | ||
| <tr key={index} style={{ cursor: 'pointer' }}> | ||
| <td className={styles.songNo}> | ||
| {cardHover ? <IoPlay /> : <span>{index + 1}</span>} | ||
| {/* <img | ||
| src={equ} | ||
| style={{ width: '15px', height: '15px' }} | ||
| /> */} | ||
| </td> | ||
| <td className={styles.songMainData}> | ||
| <div className={styles.songAvatar}> | ||
| <img src={data.track.album.images[1].url} /> | ||
| </div> | ||
| <div className={styles.songDetails}> | ||
| <div className={styles.songName}> | ||
| <Link to={`/track/${data.track.id}`}> | ||
| <span>{data.track.name}</span> | ||
| </Link> | ||
| </div> | ||
| <div className={styles.artistName}> | ||
| {data.track.artists.map((obj, index) => { | ||
| return ( | ||
| <Link to={`/artist/${obj.id}`} key={index}> | ||
| <span>{obj.name},</span> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| </td> | ||
| <td className={styles.songAlbumName}> | ||
| <div className={styles.albumNameSection}> | ||
| <Link to={`/album/${data.track.album.id}`}> | ||
| <span>{data.track.album.name}</span> | ||
| </Link> | ||
| </div> | ||
| </td> | ||
| <td className={styles.songAddedTime}> | ||
| <span>{DateConverter(data.added_at)}</span> | ||
| </td> | ||
| <td className={styles.songDuration}> | ||
| <span>{msToTime(data.track.duration_ms)}</span> | ||
| </td> | ||
| <td className={styles.moreBtn}> | ||
| <RiMore2Line style={{ cursor: 'not-allowed' }} /> | ||
| </td> | ||
| </tr> | ||
| ); | ||
| })} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <div className={styles.loaderSection}> | ||
| <ThreeDots visible={true} height="50" width="50" color="gray" /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Playlist; |
Empty file.