🔴 Build Spotify Clone with React JS and Styled Components using Spotify API and Context API

[Music] hey youtube i'm christian and in this video we are going to create this completely functional spotify clue using react and spotify api so this is the login page and when i click this connect spotify it will connect to the original spotify here so let's do that it has been connected and now i'm getting this playlist from the spotify you can see that here and we also get the playlist contents from there so when i change the playlist it will also change it will fetch all the tracks from the playlist now when i click over this it will play the track you can see that here it has been playing and it is also playing in the mean spotify now when i change the track it will change the track okay now when i hit this play pause button it will play and pause the track you can see that here i'll skip to the next song and it will skip here i'll skip to the previous song and it would be same in here i can also increase and decrease the volume i'll increase the volume the volume is increased here i'll decrease it here and i will pause here so it is also being paused so let's play another track yeah it is working perfectly so without wasting any time let's get started to create this spotify clone so now we'll begin setting up of our react application so i'll open a new terminal and i will write npx create hyphen react hyphen app and the name of our react app which is spotify clone this will set up our react application this process may take time depending upon your network connection so react application has been successfully installed now we'll move on to the spotify clone directory and i will write yarn add and we'll add some dependencies that we are going to use so first we will need the style components then we will need the react icons package and we will also need xcos for api calling and that's it hit enter to install this dependencies while this is being installed let's open our source folder and remove this clutter files we don't need this this this this one and this one we will delete those and inside app.js we'll remove all this code and we'll write rfc and this will create our component again and inside index.js we are gonna remove this input over here and the function call at the end of here that's it save it now let's wait for these dependencies to get installed and run the application okay so dependencies have been installed and now let's start the application by yarn start yarn start hit enter and yeah that's it our app is working fine now let's head over to vs code again and create a new directory over here which is okay we will create the directory utils and inside the utils we will have the state provider dot jsx and we'll have the reducer.js reducer.js now inside the state provider so we are going to use context api and use reducer hook for state management so for that first we'll import create context use context and the use reducer hook from react now we'll write export const state context is equals to create context now we'll also export const state provider equals to arrow function and we'll return state context dot provider and inside here we'll have the children props so we will destructure that from here children again after children we will also need the initial state initial state the reducer and we will pass that as value here so we'll use that as use reducer hook and we'll pass the reducer here and the initial state here that's it now let's head over to the reducer.js and create this initial state and the reducer function so inside the reducer what we are going to do is we'll write export const initial state initial state this would be the initial state here we'll just write the token for now this would be the spotify token this would be null at the initial now we'll also write cons reducer equals to state and the action we'll have this switch case here we'll have the action dot type here and will return the values accordingly so that now we'll just write the default as return state that's it and at the end we'll write export default reducer now let's head over to the index.js and we are going to use the uh state provider here so we are going to wrap this app component inside the state provider so whenever we want to use our state provider we can use everywhere in the child components so we'll write state provider this would be auto imported now we will pass initial state as initial state okay it is auto inputted and the reducer would be the reducer yeah that's it so it is also input auto imported so now we have made a mistake in the state provider we have to use the parent thesis instead of the curly braces because we will automatically return this that's it okay our app is running and now we'll also export const use state provider equals to use context and state context so what this use state provider will do is it will return the use context value of the state context so this is very reusable so that's it so our base setup is completed now let's have the login function id and get the spotify token from the spotify so now we'll create the login functionality for that we will create a new folder named as components inside components we'll create a login.jsx file this would be our login component we'll write rfc and this is login.jsx not logins so login.gs6 rename this component here as login now will import styled from okay we need to write the whole input import styled from style components now we'll write const container is equals to style dot div this is container and we will replace the stairs with the style there named as container now we'll import this into the app.js inside here we'll write login we need this component we now let's head over to login.jsx and here we'll write login not here inside here login okay it's working now inside this login will have an image tag and we will have an button as connect spotify okay we have the button and for the image we have this website this is in the description and we are going to copy this logo and paste head here the l text would be spotify save it let's see close this yeah it is here now let's style this before proceeding further so this is the login.jsx we have display of flex given to it let me shrink the window so you can see display flex flex direction column not this column then we need align items center justify content center then we will have an height of 100 viewport height with of 100 viewport width then we will give it a background color of green this would be hexadecimal 1d b954 save it then we'll also provide a gap of 5 m then we will select the image we'll give it the height of 20 viewport height then we'll select the button and we'll give it a padding of one drum and firearm then we'll give it a border radius of 5 mm okay this should be outside the image tag that's it okay why this is not working okay this should be width should be 100 we put with yeah that's correct now we don't need any border to this button [Applause] after that we'll also give it a background color of black then we'll give it a color of hexadecimal 4 9 f 5 8 5 then we'll give it a font size of 1.4 ram and we'll give it a cursor of pointer yeah that's it now on click of this button we need an handle click event so this would be and function here const handle click equals to arrow function and let's check if it's working click connect spotify yeah it's working let me maximize this okay so now we need to create and spotify application inside the spotify developers console so hit this url this is in the description of the video then log in with your spotify account and we'll create a new application here this would be spotify clone description is also needed we'll write spotify clone check this create now inside this will edit settings and then copy our react this url and we'll have this redirect url as this add save and we will also copy this client id that's it we don't need this now now inside this function again we'll have const client id is equals to the id which we copied then we will have and cons redirect url equals to this url then we'll have const api url equals to https colon slash accounts dot spotify com slash authorize that's it then we will have some scope so we will have the scope from this so what this scopes are that in order to perform anything in the spotify application you first have the scope then only you can uh do that so we will have this various uh scopes if you want to know about them in detail you can click on that and you can read about that so what we'll do is first we need these both scopes this should be in string format after this we need the these three scopes and then we want these codes so now let's have the url first and then i will explain this window.location.hraf this would be api url then we have the query string as client id this would have our client id then we will have redirect uri equals to redirect url in percent scope and here this should be in this string format and this should be space separated so what we'll do is we'll write scope dot join and we'll join all of this with an empty space done and after that we have response type equals to token and we need to show dialog so we'll write show dialog equals to true okay that's it so let me explain this so this client id is the specific client id that is unique for everyone then we have this redirect url so after authenticated we need our application to be redirected to this url so this is important if you have done this incorrectly then we will not get the token then we will we need to connect this to this api url and i have already explained the scopes then we have this window.location.href this is the javascript function so we will assign this url api url so it will automatically redirect it uh to this url so let's head over here and i'll click this and yeah it's working agree and we have the access token here now so now we need to get this access token from the url so let's do that let's head over to app.js and inside what we will do is we'll have an use effect hook here use effect and every time this page is loaded we will run this use effect and we'll pass it an empty dependency array now we need hash from window dot location dot hash so let me console this hash i'll open the console ignore this warning so we have this hash here now we have to get this token from the hash so for that what we'll do is we'll write if there is a hash then we'll have token equals to hash dot substring of one so let me console it and write token okay so we have removed the hash from here so now we have this full values now what we'll do is we'll chain the split method here we'll split everything by m percent so before saving you can see that everything is separated by this m percent here you can see that here it is so i'll have it and we will get an array of the values so from here we need the zeroth element which is our token okay so x is token now we'll do the same split method for equals and will get the first element so that's it done we have our access token here now okay now what we'll do is we'll head over to the reducer.js you will define our token so for that we will create and constants.js file constants instance.js and in here we'll will be writing export const reducer cases equals to the first would be set token equals to not equals to colon set token that's it now head over to reducer.js and here we'll write a case case reducer cases make sure to import the reducer cases reduce our cases dot set token then we will return dot dot state and token as do we have to return the token yes we have to return the token as action dot token that's it now let's head over to the app.js and here we'll have the use state provider this would return the values and the dispatch method dispatch and here will destructure the token now what we'll do is we'll dispatch action as reducer cases dot set token and the token that's it remove this console and here we'll pass the token and the dispatch and their dependencies so whenever these booths are changed this would be rerun okay now what we will do is we'll create another component as spotify dot jsx i'll write rfc head over to app.js and we will check if initially if the token is null the token is null then we will have the will uh okay so initially if the token uh is not null we will have these 45 component or else we will have the login component okay i think i made a mistake you can spotify let me open this components and check it here okay so our dispatch has not worked correctly i think okay this should be type not action type and yeah it's working now so that's it our login is done and we have the access token from the spotify so we can use the spotify apis now so first we'll create the spotify layout so let's do that so now we'll create the spotify layout so for that let's head over to spotify.jsx and we'll import styled from style components and we'll write const container is equal to styled dot dev this would be small o container and will remove this spotify inside this will have a div with a class name of spotify body then inside this we have the body inside the body we have the body contents okay now after this we have spotify footer that's it now let's create some components that we are going to use here so first we will have a sidebar not here we will write new file sidebar dot jsx write rfc then we will have navbar.jsx rfc then we will have body dot jsx we'll write rfc then after the body we will have footer.jsx we'll again write rfc that's it now head over to spotify.jsx again and here we are gonna input those components inside the spotify body we will have sidebar then inside the body we will have nav bar then inside the body contents we will have the body body and inside this 45 footer we will have our footer component that's it now inside this style dot we are gonna do our styling so let me showing this so let's give it the max width of 100 viewport width 100 input width give it a max height of 100 viewport height then we will have overflow of hidden then we'll give it a display of grid and we'll give it a grid template rules of 85 viewport height and 15 viewport height so the footer would be here and this would be the spotify body now we'll select the spotify body give it a display of grid grid template columns of 15 you put with and an 85 we put with so this would be the sidebar and this would be spotify body now let's give it a height of we'll give it a height of 100 and will also provide a width of 100 percent then we will give it a background color not background color we'll just give it a background of linear gradient value would be transparent transparent and rgb a 0 0 0 1. okay so there's our gradient then we'll give it a background color this would be rgb 32 87 and 100 okay then let's select the body we'll copy this height with 100 paste it and we'll give it an overflow of auto yeah that's it now let's head over to sidebar.jsx and have the styling there so inside the sidebar dot jsx we'll just give it a background color of black so const not const we'll write import style from style components const container is equals to style dot div we'll have this as container now we'll just give this a background color of black that's it so this is a sidebar now let's go to the footer we'll copy this i think we should copy all of this head over to footer i'll just paste it here change the component name to footer remove this okay i think we have an error here okay this is here butter let's give it a red okay so this should be after this why is that let's head over to spotify.jsx let me debug this it's 45 footer let's head over to footer and i think we should give this a height of 100 yeah that's it and we'll change this color to 1 8 1 8 1 8 yeah that's it so our spotify layout is ready and now we'll start creating this sidebar so let's do that so now for the sidebar here the first three would be the links and after that we will be having the playlist so let's do that inside here uh i'll get rid of this sidebar i'll create a new div with a class name of top links inside it we have a name with the class name of logo inside that will have an image and the source would be copied from login.jsx we want this image and copy this inside the sidebar i'll get rid of this image tag and paste it and here at the end instead of this black we'll just replace this black with white so we will have inviting each you can see that here and after this after this div we'll have an ul inside ul we have three li so i'll write li into three inside the allies will have span tag span inside this pan will have the home and search not ally span inside this again we'll have the span and this would be your library so these would be static links so let's also input the icons that we need so i'll import from react icons and this would be io5 we need to uh not to just one icon from this package that is io library and the others would be from the react icons md so i'll write input from react icons md and in here i'm gonna import md home filled and other would be md search that's it now let's use that inside here we'll use md home field this would be md search this would be i o library that's it let's check the ui okay it won't be visible because this image let let's tell that so in here we have the background color black then we'll give it a color of hexadecimal b3 b3 b3 then we will give it a display of flex let me shrink this so you can see flex direction column after that we'll give it a height of 100 percent a width of 100 percent after that let's select the top links inside the top links we'll give it a display of flex flex direction of column then we'll select the logo we'll give it a text line of center and we will give it a margin of one run to top and bottom and zero to left and right we'll select the image and we'll give it a match in line size of 80 i think okay that's correct and we'll also give it a block size of auto that's it now let's select the ul we'll give it a list style type of none then we'll go to display of flex flex direction of column gap of one ram padding of one rim and we'll select the li inside it will give it a display of flex gap of one ram cursor of pointer you get a transition transition of 0.3 seconds seconds easing out and whenever we hover over this over we'll give it a color of white let's hold over it yeah it's working so this is done now we'll list the playlists here so for the playlist let me expand this we'll create a new component named as playlists dot jsx i'll write rfc and inside the sidebar i think at the end here will import and use the playlist yeah okay the playlists are here now we'll move on to that component only playlist yeah inside here first what we will do is before doing anything else we'll get the playlist from the spotify api so let's do that first we'll import the use effect hook here use effect okay there should be curly braces remove this and we'll use the use effect book here use effect [Applause] will pass the token and dispatch here because that's only we are going to use and this would be used from you state provider use state provider const equals to restructure the token from the state you just need the token and the dispatch this patch and that's it now what we'll do is we will create a function named as const get playlist data is equals to async this would be an async function because we are going to call an epi so we have to use async await you can also use promises but i prefer async await now inside here we'll have const response res pawns is equals to a weight axios make sure that you input xcos from x use so we'll write await excuse dot this would be any get request and what the api we are going to use is this one let me show you that uh dogs reference this api and in here we will have this playlist i think where that ap i got yeah this one so not this one we are gonna use let me find that api give me a minute okay so we are gonna use this api get current users playlist that would be under the users and we are going to use this get slash me playlist so we are going to copy this and make sure that you pass this header of authorization and content type application json so we are going to copy this [Applause] we will paste this here and after this will pass and headers headers that would be authorization let's copy that from here only authorization and the authorization would be bearer space and we'll join with this with our token after that we'll pass content type as application slash json make sure that this is correct if anything is mistaken here then this will fail so after this let's console the response response and i think our api would fail because our token would have expired yes we have an 401 error which is of our token expiration let's get a new token okay request field with status404 let's check that in network service not found what does that mean okay let me check service not phone api.spotify.com please okay this should be playlists not playlist let's see the control here we have our console inside this data we have our playlist this items so these are all our playlists so let's only console that so what i'm gonna do is i'll get the items items is equals to response dot data and we'll just console the items i'll close this so you can see that i'm good talking about this items array so this is our items here we have our all the playlist details that we need okay so now let's remove this console and we'll write const list is equals to items dot map will pass an error function here will destructure name and id and we will return return name and id that's it now let's control the playlists play lists yeah that's it we have got the id and the playlist okay so now we are gonna store this in our reducer so let's go to the constants.js and here we'll add a new type as set play list and this would be the string set playlist now let's head over to reducer.js and here we will add a new case reducer cases dot set playlist as return dot dot dot state and here i think we will be naming this as plain list yes we are gonna name this as playlist this would be action dot play list okay and initially this playlist would be an empty array here playlist empty array let's head over to playlists and now what we will do is we are gonna dispatch this dispatch type as reducer cases make sure that it is auto imported set playlist and will pass the playlist that's it okay so our use effect has done now what we will do is inside this playlist we'll have an ul and we are gonna map the playlist here playlist dot map we are gonna restructure the name and id will return like will pass key as the id and here we'll just have the name let's check okay playlist is not defined okay we also need to import that and this dispatch would be outside of this curly bracket and this would be playlists that's it dispatch is not a function let's reload this okay yeah we have our playlist here we just have to style this now so for that let's go to sidebar and copy this paste it here and let's go to sidebar again and i'm just gonna copy this ul style and i'll write const container as equals to styled dot dev i'll pass in the styles and replace this div with the container let's check okay we have some here error here nail list okay this is inputted here the same component we have to remove this yeah it's working now we are going to add some code here for this scroll bar so i have less amount of playlist in my account of spotify if you have more then we will add a scroll bar here so it scrolls so let's do that what i'm gonna do is i will just copy this paste it two times so we get the data and it gets overflown so now we can add the scroll bar here first what i'm gonna do is i'll give it a height here of 100 then we'll give it a overflow of hidden then inside the ul after padding will give it a height of 55 you put height then we'll give it a max height of 100 percent not here we'll give it a here hundred percent after this we'll give it an overflow of auto let's check yeah we have the scroll bar here let's child the scroll bar to make it more like the spotify theme here we'll write m percent webkit scroll bar we just need these two pseudo selectors with 0.7 rim and we'll select ampersand dash thumb we'll give it a background color rgb a 255 five five and zero point six yeah that's more like it and it's looking great we will just decrease this to 52 viewport height now what i'm just gonna delete this extra playlist that's it so that's it our sidebar is completed now we will design this body section first we'll design the nav bar here so let's do that so now let's head over to nav bar navbar.j6 okay so before uh doing anything here we are gonna get uh the user info from the spotify.jsx so we have to call the api from there so let's head over to spotify.jsx and in here we will get this first will have the use effect use effect we are going to use the use effect here we'll have an uh not empty we'll just pass dispatch dispatch and token here we'll get the token from you state provider i think we should copy this from not now bar playlists copy inside spotify.jsx we don't need the playlists that's it inside here we'll make a function get user info is equals to a sink look at const data is equals to a weight axios dot get so which api we are going to use is yeah we are going to use this slash me this is a get a type so get we'll just copy this from here https not this header that's it and we are gonna pass the headers and we are gonna copy that from here copy paste that's it let's console the data data refresh this do we have a console no we don't have any console okay we have to call this function get user info get user info yeah we have the data so we just need the display name from here so let's get it and save it so we will also get the id so we'll write const user info as user id as data dot id and we'll get user name as data dot display underscore name that's it now we need to dispatch this event dispatch type reducer cases dot set user okay we haven't set it so let's go to constants and we'll write set user set user copy this head over to reducer.js and we'll write user info as null and here we'll get a case as case reducer cases dot set user return dot dot state and user info as action dot user info that's it let's head over to spotify.csx and here type reducer cases dot set user and will pass our user info here that's it it's complete now let's head over to playlist not please nava dot jsx and inside the navbar.jsx will first import style style from style components we will write const container is equals to style dot dev let's change this divs to container container now we'll remove the snare bar and inside the nav bar we'll give it a yeah we'll give it a div of last name search bar we will give it a f a search this has to be imported from react icons f a search from react icons fa then we will also need another icon which is cg profile cgpro file from react icons cg so this is uh fs search after this we'll write input type text we don't need name and id we give it a placeholder as artists songs and podcasts artists songs or quad casts after this tip we'll have another div named as avatar then we'll use a tag the reference would be hash here we'll use the cg profile and we'll use a span tag which would have user info dot name that's it so we need to use the uh hook or not hook use state provider and we don't need the dispatch method also we don't need the token we just need the user info let's check data is not defined use state provider is not defined let's auto input this and inside spotify.jsx data okay we have the data here okay this needs to be inside this get user function inside of here and we'll have get user info function called that's it you don't have any errors okay this is a body and i don't think we got our username let me see let me control the user info okay we are getting our user info so why it is not working let's head over to navarre user info let's console user info console log user info [Applause] okay here we are getting object object and user info is null this is set afterwards let's have another console here named as from navbar okay so we are getting it here user info dot name we will leave this for now we'll just style this first and we'll check that afterwards so let's style this i'll showing this remove this give it a display of flex proto justify content of space between align items of center then we'll give the padding of 2 ram after that we'll give it a height of 15 viewport height and we'll give it a position of sticky so whenever we scroll the body so it should stick to the top now we'll also give it a top of zero and we'll get a transition of 0.3 seconds easing out after that we'll give it a background color we'll just give it a none for now and afterwards whenever it is scrolled we'll give it a black color that would be in the body section search bar let's create a background color of white then we'll give it a width of 30 and give it a padding of 0.4 ram and one rim will give it a border radius of 2 run so uh i got the error here so we just have to write user name here instead of name i think n should be capital yeah we are getting the name as you can see here that's it now after this border radius 2 ram what we are going to do is we will give it a display of flex we will give it a align items of center a gap of 0.5 ram now let's select the input first we don't need any border here so we'll give it a border of none after that um we'll give it a height of 2 ram after height will give it the width of 100 that's it now whenever we focus over this we don't need any outline so let me show you the outline so we don't need this outline we'll remove this and percent focus outline and this would be none that's it okay we are still getting it the spelling is incorrect this should be focus yeah it's gone now now we just have to style this avatar so let me get the vs code here after this input um not input outside of this search bar will have another div class name of avatar we'll give it a background color of black then we'll go to padding of 0.3 ram and 0.4 ram then we'll give it a padding right of one rim then we'll get a border radius of 2 ram give it a display of legs justify content not justify content just if justify content of center then we'll give it a line items of center that's it now let's select the e will give it a display of legs will give it justify content of center align items of center gap of 0.5 m text decoration of none color of white font weight would be bold let's select the svg and we'll give it a font size of 1.3 ram background color would be hash 282828 padding would be 0.2 run water radius would be one ram and we'll give it a color of hexadecimal c 7 c5 c5 yeah that's it so that's it our nav bar is complete and it is styled now we'll have this body section here so let's do that let's head over to body.jsx and create this spotify body body.jsx and inside here first we'll import style from style components from style components then we are gonna import two icons not two we are just gonna input one icon which is from react icons ei here type ins ai this would be e i fill clock circle that's it now we will also need use effect use effect let's create container is equal to styled dot dev let's replace this div with container that's it now before writing any further code we'll get the data from our api so for that we'll use the ustade provider first so we are going to copy that yeah we can copy that from here estate provider body paste we do not want the user info we need the token and we also need the dispatch method this patch okay we also need to import estate provider then we'll use the use effect hook let's pass the dependency array of token and dispatch yeah that's it now what we will do is we'll create a function as get initial playlist playlist equals to async now for the initial playlist what we are going to do is i have this playlist i'm gonna copy this id from the spotify so whatever playlist you open it has a unique id you can copy that from above here so i'm just gonna copy this id and i'll head over to reducer.js and what i'm gonna do is i'm gonna paste this id here as selected playlist id okay now let's head over to uh okay we also no we will not write the case now whenever it is needed we'll write that we'll just get that from here token get selected playlist id and we are going to use that in the use effect now write const response response is equals to await [Music] x use dot get so let me show you which api we are going to use we are going to use playlist so where is the playlist yeah we are gonna use this get playlist id so let's copy that from here and instead of this playlist id we are gonna use our selected playlist id that's it and we have to pass the headers which we are going to copy from any of the components let's remove this console we don't need it let's copy this headers head over to body.jsx after this headers that's it now let's console the response okay we have an error that our token is expired let's get a new token i think we haven't called this function get initial playlist and also let's move on to navbar and remove this console from here and check if there are any consoles in the spotify no that isn't any okay we have an network error what does this network playlist okay i think we haven't set our playlist id correctly so let's console that first console log selected playlist id [Applause] we just have the errors okay let's do this first we have the playlist id and y is showing object selected playlist id is the error coming from this only let's comment it out response yeah the error is coming from there only okay i think we made the mistake here we have to end this here that's it and this should end here now we have some brackets issue yes we are getting the data back it's here okay so uh let me just console the response.data so what do we need is from this we will get the id this one then we will get the name where is the name name yeah this one name then we will get the description this one then we will get the image this one then we will get all the tracks from this this is an uh inside the tracks we have an items array so we are going to map this and inside that we have all of the details we need inside this track so let's uh get the data from that so now i'll write const selected play list equals to id that would be from response dot data dot id then we will have a name that would be from response dot data dot need then we will have description description which would be from response.data dot description now we are going to gene with this with starts with starts with because sometimes we get an e l uh a tag anchor tag link inside this so we don't want this if there is anchor tag link then we will just pass an empty string or will pass response dot data dot description now after this description we will get the image and we'll write response dot data dot images this is an array and we need the zeroth element and inside that there is the image url after that we will have our tracks so this is the array response dot tracks dot items so we are going to map this we will get the track here all right id as track dot id then the name as track dot me then we will have our tests our tests [Applause] there could be several artists and it is an array so we are going to map that too test dot name then image track dot album dot images of to dot url then we need the duration of the track so it is track dot duration underscore ms so it is in milliseconds we need to convert this into minutes and seconds album track dot album dot name then we need the context uri this is a specific uri so if we want to change the track we need this url so we are going to grab that then we want the track number from the album so we'll write track dot track number yeah that's it so this is the data we are gonna need let's control this console.hello console.log selected playlist let me refresh this yeah so this is our selected playlist we have the description id image name and the tracks that we need that's very simple now let's dispatch this and see this to the c state dispatch type reduce your cases dot set playlist this isn't defined yet set playlist not set playlist we are gonna go to constants set playlist set playlists and now into the reducer we are gonna use this reducer and selected play list is gonna be null at first after this we'll use case reducer cases dot set playlist return um this would be dot dot sheet and reduce uh not that but will return i think yeah we are going to return this selected playlist action action dot selected playlist why do we have an error here case reducer cases this is correct okay return spelling is not correct return yeah that's it now let's head over to body.jsx and now what we are going to do is we'll dispatch this and after this we'll have the selected playlist that's it okay we are also gonna add the selected playlist id to this dependency list so whenever the id change uh the use effect is again run now we also need the selected playlist from our state selected playlist and now everything is done we just have to use that everything here okay so first we are going to check if there is a selected playlist if it is not null then only we want to render our component so we'll use the fragments after this we have a dev with the class name of playlist inside the playlist we will have our image image tag source would be a selected playlist selected playlist dot image and this will be selected playlist after the image we will have the details span will give it a class name of type this would be playlist in all claps caps play list after this we have an h1 with class name of title we will give it a selected playlist select let playlist dot name after this h1 we have p with description description so we'll write selected playlist dot description let's just check if everything is working yeah it does we have our image and we have our text and name and everything okay so we are gonna style it afterwards let's let's uh get the list also so after this dev player step we will have a div with a class name of list then we'll have a header row header row inside the header row we will have call inside the call we will have span okay we need the span tag and inside this let's copy all of this paste this would be title this would be album and this would be the icon that we imported first the clock circle okay after this we will have the tracks and we are gonna use the selected playlist dot tracks dot map we need the id name our test image duration the album context uri then we need track number yeah that's it and after this we will have this and return return dev with class name of row will also pass the key attribute as id then we'll have the call inside we'll have span this would be index plus one okay we also need the index from here index y is a error here okay we have to grab this into one more parentheses that's it let's copy this we'll add a new class name here as detail and we have an image inside this this source would be the image id would be track not id held we'll remove this and i think we have error here [Music] okay what's the error yeah everything is perfect now let's okay so we don't need this we will remove this we have and call not call we'll call this as info with span.name that is name inside this then i think this should be inside this only yeah we will create an image tab here this is inside this and will have this infidel inside this after this we'll have span and r test and that's it so after this div we'll have another call we'll have album inside this album okay and we again have in call inside this span will have our duration will convert milliseconds to minutes and seconds afterwards let's uh see here yes everything is perfect we have our data and everything okay also as you can see that our nav bar is sticky it's to the top will change the color when the scroll height is more i will do that afterwards so let's style this first let me shrink this and we will style this now i'll select the playlist inside the playlist we'll give it a margin margin of 0 and 2n we'll give it a display of flex align items of center let me scroll this will also give it a gap of two ram we'll select the image inside that we have the image tag we'll give it a height of 50 m 15 rim not 50 m okay it's small now now we will give it a box shadow of rgb a 0 0 0 it's outside this 0.25 then we have 0 pixels 25 pixels 50 pixels and the last would be 12 pixels okay let's increase this 0.1 okay there is a slight shadow now now after this we'll have the details [Applause] then inside the details you'll give it a display of flex then we'll give it a flex direction of column we'll give it a gap of one run [Applause] color would be e0 d e d e will select the title and give it the color of white this is color and we'll give it a font size of four rim okay this isn't looking perfect i think yeah there should be some issue here let's reduce the gap to one trim okay we need to decrease this gap let's style this afterwards we'll do this afterwards now let's select the list dot list select the header row give it a display of grid grid template columns would be 0.3 fr 3 fr 2 fr and 0.1 fr you can see that here that it's a grid now let's also give it a color color would be dd cdc okay it should be visible now after the color we'll give it a margin of 1 ram and 0 0 0 we'll also give it this as position sticky and the top would be 15 you put height same as the navbar height so if you remember we give nav bar a top of 15 viewport height not top but uh height why did we have an error i don't know did we invest something [Applause] let me reload this yeah it's working now then we'll also give it a padding of one ram and three ram then what else will also give it a transition of 0.3 seconds is in out now let's head over to the tracks and we'll give this a margin of 0 and 2 ram then we'll give it a display of flex and a flex direction of column also give it a margin bottom of 5 we'll select the row give it a padding of 0.5 ram one rim we will give it a display of grid and we are going to copy grid template columns from here and this would be 3.1 fr just that and whenever we hover over this we will change the background color to rgb a co zero zero okay zero point seven let's move yeah the color is coming okay now inside the call we'll give it a display of flex align items of center color would be ddd cdc color dd cdc so we also need to give an hexadecimal here okay the colors are changed now after this we will have an image and give this a height of 40 pixels that's it now we'll have the detail give it a display of flex um gap of after detail gap of one rim and we'll select the info will give it a display of flex and the flex direction of column that's it okay it's almost correct now we have to change this album so for that we'll change this to 2.3 2.3 fr 2.3 fr no we have to reduce this to 1.8 fr not that 1.9 yeah now it's correct album the whole effects are there now now what we'll do is whenever we scroll we want this to be a black color so let's head over to spotify.jsx and here we have to do something tricky so for that we are going to use the use ref hook first and we'll have as here const body ref equals to use ref we will also need the use state hook use state and we are going to create two state as nav background and set now background initially this would be false let me copy this and this would be this would be header background header background we will just change this to set header background that's it now we'll create a function as const body scrolled scrolled equals to body ref dot current dot scroll top greater than equals to 30 then we will set set now background as true or will set nav background as false that's it let's copy this and change this 30 to 268 and this would be set header background that's it now what we will do is we are going to use this body ref on the body class here we will have ref equals to body ref and we'll have on scroll as body scroll now we'll pass the props here as now background nav background and inside the body we will pass header background as header background let's copy this and head over to navbar we'll restructure the prop from here and we'll pass this to our style component here and we are going to use in the background color here we will use this syntax we need the nav background will return a string on the basis of nav background if it is true we will have rgba 0 comma 0 comma 0.7 or else will pass none that's it let's check if it's working let's scroll okay we have an issue here what is that let's open the console why the styles are not correct background color let's remove this for now [Applause] comment this and we'll refresh it and see yeah it's working we just have issue from this so rgba okay we have to close this yeah it is working you can see that here it is working and we have now we also have to do this title now let's do that we'll copy this head over to the body.jsx will restructure the header background from here header back ground and we will provide this as prop to this container add a background add a background and inside here the header row we will use this sorry at the background and what height should be given here not height but the color okay it is hexadecimal color zero zero zero zero zero zero dc that's it okay as you can see that we have different colors here and it is looking great now we just have to convert this milliseconds to seconds let's write the function for that um const ms two minutes and seconds equals to we'll get the ms const minutes minutes equals to math dot floor will have ms divided by 60 000 and will have const seconds equals to ms modulo 60 000 divide by thousand and we'll have two fixed as zero after this we'll return return minutes plus also plus we need seconds if it's less than 10 we will have zero or else we will have this plus seconds that's it let's wrap this into a parentheses so it will be mud it would be clear to you yeah that's it now let's use this ms2 minutes here ms to minutes and seconds duration that's it let's check yeah it's working perfect now we have to style this scroll bar for that we'll head over to playlists.jsx and we are gonna copy this code from here and head over to body.js not body.jsx we'll head over to spotify.jsx and inside this body here we'll paste it and yeah we have our scroll bar yeah it's looking great and it's working perfect now we'll design the footer so let's do that let's head over to the footer.jsx and we'll just give it some styles here width of 100 then we'll give a border top of one pixel solid color would be exactly decimal to it to it to it then we'll give it a display of grid grid template columns of 1fr 2fr and 1fr then we'll give it align items of center justify content of center and we'll give it a padding of zero and one rim that's it now let's head over here and you can see that we have the border and we have this footer okay so now what we'll do is we'll have a track information here currently playing track so for that we'll head over to our spotify and i'll play any of the song i'll just refresh this first if any song is not playing or there is no current uh playing song available if it all if it is also in pau state it is uh okay but if there is no song here then there isn't so uh there would not be a song here also so make sure a song is here now so now we'll create a new component named as current track current track dot jsx rfc we will import the component here current track we'll also import this style and this container we only need style components once we replace the stills with the container we also do need the use effect hook use if okay it's from react not styled use effect then let's head over to login.jsx and not login.jsx we will go to playlist.jsx and we'll import this use state provider current track estate provider don't need the playlists let's uh an api call also we'll get this use effect copy current track paste it will change this to get current track and this apa is gonna be this one get currently playing track this is under the player get currently playing track this is a get request copy this replace it with this endpoint then now we don't need this consoles console log response i'll comment this out let's test this key x us is not defined let's import it refresh okay the name is up in flames and here there is up in flames currently playing track so that's correct so we have the currently playing track now let's store that into the uh reducer so let's go to constants.js and i have already written that set playing here set playing to settling and inside the radius of that cs i have written currently playing as null and return case reducer cases start set playing currently playing action.currently playing so that's it you can just write it and let's head over to currently current track and i will create the object on if condition if the response dot data is not equal to an empty string then we'll create current plane equals to i'm gonna grab item from response dot data so id would be item dot id then name would be item dot name artist would be item dot artists dot map a test artist dot name then we'll have the image item dot album dot to images second dot url and now we'll dispatch these cases dot we also need to import these cases you do so cases dot set playing and currently playing current play we can also write current playing or we'll just replace this with currently playing let's check this in reducer.js yeah it is currently playing and we'll input this with the token we link it once currently playing okay that's it so now let's use this in the component below first we'll check if there is currently playing if it is null then we do need to render our component now we have a div with the class name of track inside that we have there with a class name of track image we'll have the image image source would be uh current the plane dot image this would be currently playing after this we'll have a track info we have h4 inside this and we are gonna use current the plane dot name and we have h6 this is for the artists and here what we'll do is we'll use currently playing dot artists dot join will join it by and send a comma and the space yeah that's it so let's check it here yes we have our image and here is the name let's style this and select the track give it a display flex align items center gap of one drum i'll select the image no we don't need to select the image because it is correct i'll set up the info and give it a display of flex then we'll give it a flex direction of column then we'll give it a gap of 0.3 done and i'll select the h4 give it a color of white and i'll give it a h6 and go to color of hexadecimal b3 b3 b3 that's it so this is correct now also head over to index.css and replace the uh code here with a star selector and give it a margin of 0 grading the 0 box sizing of water box so before before the star selector there was a code here i have replaced it with this you can also do that now i will change the track and i will refresh this so yeah it is working now we'll have the player controls here so let's do that so now we'll create a new component named as player controls player controls dot jsx rfc let's import this into the footer layer controls let's head over to player controls import style from style components cons container is equal to style dot tab replace this now we are going to import some icons for the player controls these are from rear tycoons b s b fill play circle bs fill play circle fill then p s fill pause circle fill and bs shuffle then we will import from react icon cg these are c g lay track next c g play track grip that's it and we will also import from react icons f i then this is if i repeat not d i f i if i repeat yeah that's it okay now we'll head over to reducer.js and we'll create a state first for our currently player state if it is uh playing or not playing so i'll write player state as false and head over to constant chart cs and will have the player state as set play state that's it let's head over to reducer.js copy this paste it and replace this with set player state and this currently playing would be player state that's it now let's head over to player controls okay and replace this with our gsx markup so we will call the apa afterwards so let's first do this shuffle ps shuffle then previous cg play track drive [Applause] then [Music] we'll have a state [Applause] so for that we'll check player state and if it is true then we'll have bs filser bs boss or else we'll have ps play circle fill and we have to write a question mark here that's it then we'll select the next cd play track next after this we have repeat here if i repeat yeah i think that's it let's check yes it is not defined let's grab it so i'm gonna go to current track and i'm gonna use this you straightforward on it method call it here we don't current playing we need player state that's it estate product is not defined okay i made a mistake here we have our player controls here you can see that and currently there is no playing song so there is no here we play a song refresh yeah we have now here let's try this so first i'll give it a display of flex then we'll align items not line self we need align items let's enter justify content as center will give a gap of two ram then we'll select the svg we'll give it a color of hexadecimal b3 b3 b3 b3 e3 b3 we got a transition of 0.2 seconds easing out and when we hover over this we need the color to white then we'll select the state select the svg give it a color of white then select previous next and state and give it a font size of dual that's it so this is the styling now let's handle the click methods of this so whenever we play and pause this we want to play and pause from the spotify it will handle the previous and next so let's do that so i'll create a method here first const change track equals to a sync we'll have the type here so let's use this first change track on click change track and we'll pass riff here let's copy this and here at the next we'll do the same and just change the type to next now we have got the type here let's grab the api call from current rack copy this and we also need to dispatch this api call would be replaced by skip to previous and skip to next skip to previous has this previous at the end and skip to next helps us next at the end so both are similar we just need this okay and i think in the type here we need to pass this as full name as previous now we'll replace the end point here this would be template string and this would be string interpolation of type let's console response i think there would not be any response from this um yes there wouldn't be any response and after this we will call another api um let's remove this and also make sure this is a post request not a get request you can see that from here it is a post request and after this will pass currently playing api so that would be from current track currently playing just copy this entire code clear controls paste it and we'll dispatch if else will dispatch null not just null currently playing as now [Applause] okay that's it let's test it we have error reducer cases are like use auto import reducer cases now let's test this currently it is playing something special i'll just decrease the volume first i'll change the track to the changed i think i have to play first refresh this next previous i think we should be having errors let's check into the network i'll just pause it next no token provided we did provide the token okay here headers okay so so this is a post request so after uh the url it counts the body part so we'll just part uh pass an empty object to the body and the headers would be the third part so now it should work next yeah it has been changed you can see that here next still in it is changed let's go to previous yes it is working correctly okay so now we'll have the play pause functionality let's do that const will have change state here const change state equals to a sink so we'll have constitute equals to player state if it is true then we'll have pause and we'll have play if it is false let's copy this api call and i'm sorry this should be outside here copy paste again and empty body so this api call would be set playback state not get playback street yeah this one start regime track no i don't think this is the one yeah we have this uh nice last place plus pause and for play yeah we have display so we'll have laypos conditionally so we'll just change this to dollar state make sure to change this string type and we will dispatch type as set player sheet and [Music] player state would be not player state we'll just invert this so if it is true then it will be false and if it is false then it will be true now we will just use this here on click change change state copy this paste it here let's try it i think we have an error here maximum update depth what mistake that we made okay so the dispatch should be inside of this yeah so that's the mistake we made let's play we have an error of 401 let's check no token provided okay so this is an put request i think yeah this is a put request put yeah it is working now so here now it is in this pause button will change now play again change yeah so this is working perfect now we'll have the volume controls here let's do that so now we'll have the volume controls so for that we'll create a new component volume.jsx rfc import that into the footer volume let's head over to volume i'm just gonna copy this style copy the container we'll replace this div with container and inside the container will have an input of type range at radio range you don't need to give a name and id we'll just give it min of 0 and you know 0 and max of 100 and on mouse up we will have a function called of set token not set token will have set volume and pass the event will have const set volume equals to this let's grab the token so i'm gonna copy this we don't need the dispatch method here and just place it you just need the token use tape provider let's style this first so currently this is like this and give it a display of flex we'll give it justify content of flex and align items align content content of center and we'll select the input give it a width of 15 ram [Applause] border radius of plural height of 0.5 run yeah it is looking great now let's call the api we'll copy the api from here and this is going to be set playback volume api this one this is a put request and at the end we just have the volume [Applause] volume put request and here we also need to pass a query param of volume percent device id is optional but volume percent would be the percent of volume that we want to set so i'll write forums before header here buttons and i'll write volume percent as parse end and the value from e dot target dot value okay this should be this and the comma here we still have an error let's check okay this should be async xcs is not defined okay so the current volume is this let's increase it i think it failed four zero four just means less volume this is a put request what error did we have let's change it again you feel no active device found okay there should be an active device let's play and now let's change the volume okay yeah it's working so i'll decrease the volume yeah it is working so the player controls volume and this is done so now what we'll do is when we select this playlist we want to change the playlist here and when we select any song from here we want to change the track here so that's the last things let's do that so we'll first head over to playlist dot jsx inside the playlist.jsx we'll just have a method here as const change current playlist play list equals to selected playlist id and we'll use the dispatch method we'll write set playlist id and we'll pass selected playlist id and that's it and now we'll use this function here inside the li we'll write on click and we'll pass change change current uh playlist and we'll pass the id here that's it let's test it i don't know why this is not working are we sending the dispatch method correct type ok set playlist id i think we need to add set playlist id into the reducing state set playlist id set playlist id that's it and now inside the reducer copy this paste it set playlist id and you will have a selected playlist id here that's it let's head over to playlist.jsx [Applause] it should work now yeah it is being changed you can see that change the songs are also being changed yeah it is perfect now let's uh play a song when we click here so let's do that so for that i think you need to go to body dot jsx and inside body dot jsx will create a method as play track after this const play track equals to async and we need id name artist image context uri and track number that's it now let's call this from below so on the row here yeah this one when we click over this on click you call our function play track and we'll pass in the all of this that is needed here copy and paste that's it now inside the function here we'll call the api of play so let's head over to layer controls and i'm gonna copy this away excuse dot post not this one this one yeah this one let's head over to body.jsx paste it and this would be play we will pass in the context uri the offset would be position and track number -1 after the offset will pass position to z shin underscore ms as 0 okay that's it now after this api we'll check if response or status triple if the track is played will have const current laying as id name artist and image and will dispatch dispatch type reducing [Applause] reduce the cases dot set playing and we'll pass current plane and we'll use another dispatch here and pass type this would be reducer cases dot set clear state if it is in pause state we need to make it into the play state and then pass player state as true and we'll also use the else here and you do the same in the else that's it now let's check we'll go to youtube next and currently it is something special we'll use lost control okay it did played last heaven but why we don't have any here so current lane current plane and let's go to current track current playing and then i think this component did not update let's consume log here component and will also pass current plane [Applause] component change okay so now it is undefined why is that did we make any mistake currently okay so it is currently playing not current playing we have to change that it should work now yeah it is working now perfect as we change here it is also being changed here yeah everything is working perfect play pause skip skip previous so yes so our application is complete if you want more videos like this please like and subscribe to the channel see you next time [Applause] [Music] you

Channel: Kishan Sheth

Views: 99,243

Keywords: Reactjs, Spotify Clone, Spotify Clone React, React Projects, Mern Stack Projects, Styled Components, Spotify Api, react music player, react projects, music player projects, javascript projects, context api, usereducer hook, javascript music player, react tutorial, mern stack tutorial

Id: ajVcLGEw8Xw

Length: 154min 0sec (9240 seconds)

Published: Mon Apr 11 2022