Music App Clone

8 |

9 | 10 |

11 |

20 | 21 |

22 |

{artistId ? artist?.name : songData?.title}

23 | {!artistId && ( 24 | 25 |

{songData?.subtitle}

26 | 27 | )} 28 | 29 |

{artistId ? artist?.genreNames[0] : songData?.genres?.primary}

30 |

31 |

32 | 33 |

34 |

35 | ); 36 | }; 37 | 38 | export default DetailsHeader; 39 | -------------------------------------------------------------------------------- /src/pages/Search.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import { useParams } from "react-router-dom"; 3 | 4 | import { Error, Loader, SongCard } from "../components"; 5 | import { useGetSongsBySearchQuery } from "../redux/services/shazamCore"; 6 | 7 | const Search = () => { 8 | const { searchTerm } = useParams(); 9 | const { activeSong, isPlaying } = useSelector((state) => state.player); 10 | const { data, isFetching, error } = useGetSongsBySearchQuery(searchTerm); 11 | 12 | const songs = data?.tracks?.hits?.map((song) => song.track); 13 | 14 | if(isFetching) return ; 15 | 16 | if(error) return ; 17 | 18 | return ( 19 |

20 |

21 | Showing results for {searchTerm} 22 |

23 | 24 |

25 | {songs?.map((song, i) => ( 26 | 34 | ))} 35 |

36 |

37 | ) 38 | 39 | }; 40 | 41 | export default Search; -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: { 6 | colors: { 7 | black: '#191624', 8 | }, 9 | animation: { 10 | slideup: 'slideup 1s ease-in-out', 11 | slidedown: 'slidedown 1s ease-in-out', 12 | slideleft: 'slideleft 1s ease-in-out', 13 | slideright: 'slideright 1s ease-in-out', 14 | wave: 'wave 1.2s linear infinite', 15 | slowfade: 'slowfade 2.2s ease-in-out', 16 | }, 17 | keyframes: { 18 | slowfade: { 19 | from: { opacity: 0 }, 20 | to: { opacity: 1 }, 21 | }, 22 | slideup: { 23 | from: { opacity: 0, transform: 'translateY(25%)' }, 24 | to: { opacity: 1, transform: 'none' }, 25 | }, 26 | slidedown: { 27 | from: { opacity: 0, transform: 'translateY(-25%)' }, 28 | to: { opacity: 1, transform: 'none' }, 29 | }, 30 | slideleft: { 31 | from: { opacity: 0, transform: 'translateX(-20px)' }, 32 | to: { opacity: 1, transform: 'translateX(0)' }, 33 | }, 34 | slideright: { 35 | from: { opacity: 0, transform: 'translateX(20px)' }, 36 | to: { opacity: 1, transform: 'translateX(0)' }, 37 | }, 38 | wave: { 39 | '0%': { transform: 'scale(0)' }, 40 | '50%': { transform: 'scale(1)' }, 41 | '100%': { transform: 'scale(0)' }, 42 | }, 43 | }, 44 | }, 45 | }, 46 | }; 47 | -------------------------------------------------------------------------------- /src/components/SongBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import PlayPause from './PlayPause'; 5 | 6 | const SongBar = ({ song, i, artistId, isPlaying, activeSong, handlePauseClick, handlePlayClick }) => ( 7 |

8 |

{i + 1}.

9 |

10 |

15 |

16 | {!artistId ? ( 17 | 18 |

19 | {song?.title} 20 |

21 | 22 | ) : ( 23 |

24 | {song?.attributes?.name} 25 |

26 | )} 27 |

28 | {artistId ? song?.attributes?.albumName : song?.subtitle} 29 |

30 |

31 |

32 | {!artistId 33 | ? ( 34 | handlePlayClick(song, i)} 40 | /> 41 | ) 42 | : null} 43 |

44 | ); 45 | 46 | export default SongBar; -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector } from 'react-redux'; 2 | import { Route, Routes } from 'react-router-dom'; 3 | 4 | import { Searchbar, Sidebar, MusicPlayer, TopPlay } from './components'; 5 | import { ArtistDetails, TopArtists, AroundYou, Discover, Search, SongDetails, TopCharts } from './pages'; 6 | 7 | const App = () => { 8 | const { activeSong } = useSelector((state) => state.player); 9 | 10 | return ( 11 |

12 | 13 |

14 | 15 | 16 |

17 |

18 | 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | 27 |

28 |

29 | 30 |

31 |

32 |

33 | 34 | {activeSong?.title && ( 35 |

36 | 37 |

38 | )} 39 |

40 | ); 41 | }; 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /src/pages/AroundYou.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import { useSelector } from "react-redux"; 4 | 5 | import { Error, Loader, SongCard } from "../components"; 6 | import { useGetSongsByCountryQuery } from "../redux/services/shazamCore"; 7 | 8 | const AroundYou = () => { 9 | const [country, setCountry] = useState(''); 10 | const [loading, setloading] = useState(true); 11 | const { activeSong, isPlaying } = useSelector((state) => state.player); 12 | const { data, isFetching, error } = useGetSongsByCountryQuery(country); 13 | 14 | useEffect(() => { 15 | axios.get(`https://geo.ipify.org/api/v2/country?apiKey=at_nxOsushE5XT1Zrw6ULvn8uIRtTrOU`) 16 | .then((res) => setCountry(res?.data?.location?.country)) 17 | .catch((err) => console.log(err)) 18 | .finally(() => setloading(false)); 19 | }, [country]); 20 | 21 | if(isFetching && loading) return ; 22 | 23 | if(error && country) return ; 24 | 25 | return ( 26 |

27 |

28 | Around You {country} 29 |

30 | 31 |

32 | {data?.map((song, i) => ( 33 | 41 | ))} 42 |

43 |

44 | ) 45 | 46 | }; 47 | 48 | export default AroundYou; 49 | -------------------------------------------------------------------------------- /src/components/SongCard.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { useDispatch } from "react-redux"; 3 | 4 | import PlayPause from "./PlayPause"; 5 | import { playPause, setActiveSong } from "../redux/features/playerSlice"; 6 | 7 | const SongCard = ({ song, isPlaying, activeSong, i, data }) => { 8 | const dispatch = useDispatch(); 9 | 10 | const handlePauseClick = () => { 11 | dispatch(playPause(false)); 12 | } 13 | 14 | const handlePlayClick = () => { 15 | dispatch(setActiveSong({ song, data, i})); 16 | dispatch(playPause(true)); 17 | } 18 | 19 | return ( 20 |

21 |

22 |

27 | 34 |

35 |

36 |

37 | 38 |

39 |

40 | {song.title} 41 |

42 | 43 |

44 | 45 | {song.subtitle} 46 | 47 |

48 |

49 |

50 | ); 51 | }; 52 | 53 | export default SongCard; 54 | -------------------------------------------------------------------------------- /src/pages/Discover.jsx: -------------------------------------------------------------------------------- 1 | import { useDispatch, useSelector } from "react-redux"; 2 | 3 | import { Error, Loader, SongCard } from "../components"; 4 | import { genres } from "../assets/constants"; 5 | 6 | import { useGetSongsByGenreQuery } from "../redux/services/shazamCore"; 7 | import { selectGenreListId } from "../redux/features/playerSlice"; 8 | 9 | const Discover = () => { 10 | const dispatch = useDispatch(); 11 | const { activeSong, isPlaying, genreListId } = useSelector((state) => state.player); 12 | const { data, isFetching, error } = useGetSongsByGenreQuery(genreListId || 'POP'); 13 | 14 | if (isFetching) return ; 15 | 16 | if (error) return ; 17 | 18 | const genreTitle = genres.find(({value}) => value === genreListId)?.title; 19 | 20 | return ( 21 |

22 |

23 |

Discover {genreTitle}

24 | 35 |

36 | 37 |

38 | {data?.map((song, i) => ( 39 | 46 | ))} 47 |

48 |

49 | ); 50 | }; 51 | 52 | export default Discover; 53 | -------------------------------------------------------------------------------- /src/redux/features/playerSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const initialState = { 4 | currentSongs: [], 5 | currentIndex: 0, 6 | isActive: false, 7 | isPlaying: false, 8 | activeSong: {}, 9 | genreListId: '', 10 | }; 11 | 12 | const playerSlice = createSlice({ 13 | name: 'player', 14 | initialState, 15 | reducers: { 16 | setActiveSong: (state, action) => { 17 | state.activeSong = action.payload.song; 18 | 19 | if (action.payload?.data?.tracks?.hits) { 20 | state.currentSongs = action.payload.data.tracks.hits; 21 | } else if (action.payload?.data?.properties) { 22 | state.currentSongs = action.payload?.data?.tracks; 23 | } else { 24 | state.currentSongs = action.payload.data; 25 | } 26 | 27 | state.currentIndex = action.payload.i; 28 | state.isActive = true; 29 | }, 30 | 31 | nextSong: (state, action) => { 32 | if (state.currentSongs[action.payload]?.track) { 33 | state.activeSong = state.currentSongs[action.payload]?.track; 34 | } else { 35 | state.activeSong = state.currentSongs[action.payload]; 36 | } 37 | 38 | state.currentIndex = action.payload; 39 | state.isActive = true; 40 | }, 41 | 42 | prevSong: (state, action) => { 43 | if (state.currentSongs[action.payload]?.track) { 44 | state.activeSong = state.currentSongs[action.payload]?.track; 45 | } else { 46 | state.activeSong = state.currentSongs[action.payload]; 47 | } 48 | 49 | state.currentIndex = action.payload; 50 | state.isActive = true; 51 | }, 52 | 53 | playPause: (state, action) => { 54 | state.isPlaying = action.payload; 55 | }, 56 | 57 | selectGenreListId: (state, action) => { 58 | state.genreListId = action.payload; 59 | }, 60 | }, 61 | }); 62 | 63 | export const { setActiveSong, nextSong, prevSong, playPause, selectGenreListId } = playerSlice.actions; 64 | 65 | export default playerSlice.reducer; 66 | -------------------------------------------------------------------------------- /src/components/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | import { HiOutlineMenu } from "react-icons/hi"; 4 | import { RiCloseLine } from "react-icons/ri"; 5 | 6 | import { logo } from "../assets"; 7 | import { links } from "../assets/constants"; 8 | 9 | const NavLinks = ({ handleClick }) => ( 10 |

11 | {links.map((item) => ( 12 | handleClick && handleClick()} 17 | > 18 | 19 | {item.name} 20 | 21 | ))} 22 |

23 | ); 24 | 25 | const Sidebar = () => { 26 | const [mobileMenuOpen, setMobileMenuOpen] = useState(false); 27 | 28 | return ( 29 | <> 30 |

31 |

32 |

Music App Clone

33 | 34 |

35 | 36 |

37 | {mobileMenuOpen ? ( 38 | setMobileMenuOpen(false)} /> 39 | ): setMobileMenuOpen(true)} />} 40 |

41 | 42 |

43 |

44 |

Music App Clone

45 | setMobileMenuOpen(false)} /> 46 |

47 | 48 | ); 49 | }; 50 | 51 | export default Sidebar; 52 | -------------------------------------------------------------------------------- /src/pages/SongDetails.jsx: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | import { DetailsHeader, Error, Loader, RelatedSongs } from "../components"; 4 | 5 | import { setActiveSong, playPause } from "../redux/features/playerSlice"; 6 | import { useGetSongDetailsQuery, useGetSongRelatedQuery } from "../redux/services/shazamCore"; 7 | 8 | const SongDetails = () => { 9 | const dispatch = useDispatch(); 10 | const { songid } = useParams(); 11 | const { activeSong, isPlaying } = useSelector((state) => state.player); 12 | const { data: songData, isFetching: isFetchingSongDetails } = useGetSongDetailsQuery({ songid }); 13 | const { data, isFetching: isFetchingRelatedSongs, error } = useGetSongRelatedQuery({ songid }); 14 | 15 | const handlePauseClick = () => { 16 | dispatch(playPause(false)); 17 | }; 18 | 19 | const handlePlayClick = (song, i) => { 20 | dispatch(setActiveSong({ song, data, i })); 21 | dispatch(playPause(true)); 22 | }; 23 | 24 | if (isFetchingSongDetails || isFetchingRelatedSongs) 25 | return ; 26 | 27 | if (error) return ; 28 | 29 | return ( 30 |

31 | 32 | 33 |

34 |

Lyrics:

35 | 36 |

37 | {songData?.sections[1].type === "LYRICS" ? ( 38 | songData?.sections[1].text.map((line, i) => ( 39 |

{line}

40 | )) 41 | ) : ( 42 |

Sorry, no lyrics found!

43 | )} 44 |

45 |

46 | 47 | 54 |

55 | ); 56 | }; 57 | 58 | export default SongDetails; 59 | -------------------------------------------------------------------------------- /src/components/MusicPlayer/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { useSelector, useDispatch } from 'react-redux'; 3 | 4 | import { nextSong, prevSong, playPause } from '../../redux/features/playerSlice'; 5 | import Controls from './Controls'; 6 | import Player from './Player'; 7 | import Seekbar from './Seekbar'; 8 | import Track from './Track'; 9 | import VolumeBar from './VolumeBar'; 10 | 11 | const MusicPlayer = () => { 12 | const { activeSong, currentSongs, currentIndex, isActive, isPlaying } = useSelector((state) => state.player); 13 | const [duration, setDuration] = useState(0); 14 | const [seekTime, setSeekTime] = useState(0); 15 | const [appTime, setAppTime] = useState(0); 16 | const [volume, setVolume] = useState(0.3); 17 | const [repeat, setRepeat] = useState(false); 18 | const [shuffle, setShuffle] = useState(false); 19 | const dispatch = useDispatch(); 20 | 21 | useEffect(() => { 22 | if (currentSongs.length) dispatch(playPause(true)); 23 | }, [currentIndex]); 24 | 25 | const handlePlayPause = () => { 26 | if (!isActive) return; 27 | 28 | if (isPlaying) { 29 | dispatch(playPause(false)); 30 | } else { 31 | dispatch(playPause(true)); 32 | } 33 | }; 34 | 35 | const handleNextSong = () => { 36 | dispatch(playPause(false)); 37 | 38 | if (!shuffle) { 39 | dispatch(nextSong((currentIndex + 1) % currentSongs.length)); 40 | } else { 41 | dispatch(nextSong(Math.floor(Math.random() * currentSongs.length))); 42 | } 43 | }; 44 | 45 | const handlePrevSong = () => { 46 | if (currentIndex === 0) { 47 | dispatch(prevSong(currentSongs.length - 1)); 48 | } else if (shuffle) { 49 | dispatch(prevSong(Math.floor(Math.random() * currentSongs.length))); 50 | } else { 51 | dispatch(prevSong(currentIndex - 1)); 52 | } 53 | }; 54 | 55 | return ( 56 |

57 | 58 |

59 | 71 | setSeekTime(event.target.value)} 76 | setSeekTime={setSeekTime} 77 | appTime={appTime} 78 | /> 79 | setAppTime(event.target.currentTime)} 88 | onLoadedData={(event) => setDuration(event.target.duration)} 89 | /> 90 |

91 | setVolume(event.target.value)} setVolume={setVolume} /> 92 |

93 | ); 94 | }; 95 | 96 | export default MusicPlayer; 97 | -------------------------------------------------------------------------------- /src/components/TopPlay.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { useSelector, useDispatch } from "react-redux"; 4 | import { Swiper, SwiperSlide } from "swiper/react"; 5 | import { FreeMode } from "swiper"; 6 | 7 | import PlayPause from "./PlayPause"; 8 | import { playPause, setActiveSong } from "../redux/features/playerSlice"; 9 | import { useGetTopChartsQuery } from "../redux/services/shazamCore"; 10 | 11 | import "swiper/css"; 12 | import "swiper/css/free-mode"; 13 | 14 | const TopChartCard = ({ song, i, isPlaying, activeSong, handlePauseClick, handlePlayClick }) => ( 15 |

16 |

{i + 1}.

17 |

18 |

19 |

20 | 21 |

{song?.title}

22 | 23 | 24 |

{song?.subtitle}

25 | 26 |

27 |

28 | 35 |

36 | ) 37 | 38 | const TopPlay = () => { 39 | const dispatch = useDispatch(); 40 | const { activeSong, isPlaying } = useSelector((state) => state.player); 41 | const { data } = useGetTopChartsQuery(); 42 | const divRef = useRef(null); 43 | 44 | useEffect(() => { 45 | divRef.current.scrollIntoView({ behavior: 'smooth' }); 46 | }); 47 | 48 | const topPlays = data?.slice(0, 5); 49 | 50 | const handlePauseClick = () => { 51 | dispatch(playPause(false)); 52 | }; 53 | 54 | const handlePlayClick = (song, i) => { 55 | dispatch(setActiveSong({ song, data, i})); 56 | dispatch(playPause(true)); 57 | }; 58 | 59 | return ( 60 |

61 |

62 |

63 |

Top Charts

64 | 65 |

66 | 67 |

68 |

69 | {topPlays?.map((song, i) => ( 70 | handlePlayClick(song, i)} 78 | /> 79 | ))} 80 |

81 |

82 | 83 |

84 |

85 |

Top Artists

86 | 87 |

88 | 89 |

90 | 91 | 100 | {topPlays?.map((song, i) => { 101 | if (!song || !song.artists) { 102 | return null; 103 | } 104 | 105 | return ( 106 | 111 | 112 | name

116 | 117 | 118 | ); 119 | })} 120 | 121 |

122 |

123 | ); 124 | 125 | }; 126 | 127 | export default TopPlay; 128 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Music App Clone (Modified Lyrics Version) 2 | 3 | Develop an elegant React.js Music Application based on the original Project Lyrics by the JavaScript Mastery team. Original README [here](https://github.com/adrianhajdin/project_music_player) 4 | 5 | Check out the complete project requirements [here](https://docs.google.com/document/d/13PeFwRlPEhMw_HPyrIrInvQuKaVWnpNmcv-y3NA208s/edit?usp=sharing) 6 | 7 | # Contributing 8 | 9 | When contributing to this repository, please first discuss the change you wish to make via issue. 10 | Please note we have a [code of conduct](CODE_OF_CONDUCT.md), please follow it in all your interactions with the project. 11 | 12 | 13 | ## System Requirements 14 | 15 | To get started with development, you need to install few tools 16 | 17 | 1. git 18 | 19 | `git` version 2.13.1 or higher. Download [git](https://git-scm.com/downloads) if you don't have it already. 20 | 21 | To check your version of git, run: 22 | 23 | ```shell 24 | git --version 25 | ``` 26 | 27 | 2. node 28 | 29 | `node` version 16.15.1 or higher. Download [node](https://nodejs.org/en/download/) if you don't have it already. 30 | 31 | To check your version of node, run: 32 | 33 | ```shell 34 | node --version 35 | ``` 36 | 37 | 3. npm 38 | 39 | `npm` version 5.6.1 or higher. You will have it after you install node. 40 | 41 | To check your version of npm, run: 42 | 43 | ```shell 44 | npm --version 45 | ``` 46 | 47 | ## Setup 48 | 49 | To set up a development environment, please follow these steps: 50 | 51 | 1. Clone the repo 52 | 53 | ```shell 54 | git clone https://github.com/JavaScript-Mastery-PRO/project1_team4_repository.git 55 | ``` 56 | 57 | 2. Change directory to the project directory 58 | 59 | ```shell 60 | cd project1_team4_repository 61 | ``` 62 | 63 | 3. Install the dependencies 64 | 65 | ```shell 66 | npm install 67 | ``` 68 | 69 | If you get an error, please check the console for more information. 70 | 71 | If you don't get an error, you are ready to start development. 72 | 73 | 4. Run the app 74 | 75 | ```shell 76 | npm run dev 77 | ``` 78 | 79 | Project will be running in the browser. 80 | 81 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 82 | 83 | ## Issues 84 | 85 | You've found a bug in the source code, a mistake in the documentation or maybe you'd like a new feature? You can help us by [submitting an issue on GitHub](https://github.com/orgs/JavaScript-Mastery-PRO/projects/8). Before you create an issue, make sure to search the issue archive -- your issue may have already been addressed! 86 | 87 | Please try to create bug reports that are: 88 | 89 | - _Reproducible._ Include steps to reproduce the problem. 90 | - _Specific._ Include as much detail as possible: which version, what environment, etc. 91 | - _Unique._ Do not duplicate existing opened issues. 92 | - _Scoped to a Single Bug._ One bug per report. 93 | 94 | 95 | ## Pull Request 96 | 97 | There are 2 main work flows when dealing with pull requests: 98 | 99 | * Pull Request from a [forked repository](https://help.github.com/articles/fork-a-repo) 100 | * Pull Request from a branch within a repository 101 | 102 | Here we are going to focus on 2. Creating a Topical Branch: 103 | 104 | 105 | 1. First, we will need to create a branch from the latest commit on master. Make sure your repository is up to date first using 106 | 107 | ```bash 108 | git pull origin main 109 | ``` 110 | 111 | *Note:* `git pull` does a `git fetch` followed by a `git merge` to update the local repo with the remote repo. For a more detailed explanation, see [this stackoverflow post](http://stackoverflow.com/questions/292357/whats-the-difference-between-git-pull-and-git-fetch). 112 | 113 | 2. To create a branch, use `git checkout -b []`, where `base-branch-name` is optional and defaults to `main`. 114 | 115 | Use a standard convention for branch names. For example, `-dev`. It will be easier to track your pull requests if you use this convention. 116 | 117 | I'm going to create a new branch called `jsm-dev` from the `main` branch and push it to github. 118 | 119 | ```bash 120 | git checkout -b jsm-dev main 121 | git push origin jsm-dev 122 | ``` 123 | 124 | 3. To create a pull request, you must have changes committed to your new branch. 125 | 126 | 4. Go to [Pull Requests](https://github.com/JavaScript-Mastery-PRO/project1_team4_repository/pulls) and click on the `New Pull Request` button. 127 | 128 | 5. Select the `main` branch as the `base` branch and the `jsm-dev` branch as the `compare` branch. 129 | 130 | 6. Follow the template and fill in the proper information for the pull request. 131 | 132 | 7. Click on the `Submit` button. 133 | 134 | 8. You have successfully created a pull request. Now wait for mentor approval. Once approved, you can merge the pull request. 135 | 136 | # 137 | -------------------------------------------------------------------------------- /src/assets/loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/macFavicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /src/assets/macLogo.svg: -------------------------------------------------------------------------------- 1 | 10 | --------------------------------------------------------------------------------

Something went wrong. Please try again.

{title || 'Loading...'}

Related Songs:

14 | Top Artists 15 |

17 | Discover Top Charts 18 |

21 | Showing results for {searchTerm} 22 |

{i + 1}.

28 | Around You {country} 29 |

Discover {genreTitle}

Music App Clone

Music App Clone

Lyrics:

{i + 1}.

Top Charts

Top Artists