var l=Object.defineProperty,i=Object.defineProperties;var u=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var o=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var r=(n,e,s)=>e in n?l(n,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[e]=s,a=(n,e)=>{for(var s in e||(e={}))o.call(e,s)&&r(n,s,e[s]);if(t)for(var s of t(e))m.call(e,s)&&r(n,s,e[s]);return n},c=(n,e)=>i(n,u(e));var N=(n,e)=>{var s={};for(var p in n)o.call(n,p)&&e.indexOf(p)<0&&(s[p]=n[p]);if(n!=null&&t)for(var p of t(n))e.indexOf(p)<0&&m.call(n,p)&&(s[p]=n[p]);return s};const makeShortcode=n=>function(s){return console.warn("Component "+n+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",a({},s))},Image=makeShortcode("Image"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var p=s,{components:n}=p,e=N(p,["components"]);return mdx(MDXLayout,c(a(a({},layoutProps),e),{components:n,mdxType:"MDXLayout"}),mdx(Image,{src:"/images/articles/consuming-spotify-apis/cover.png",width:"1280",height:"720",alt:"'How to consume Spotify APIs using Next.js and Node.js",href:"/blog/consuming-spotify-apis",quality:60,mdxType:"Image"}),mdx("p",null,"Finally, another article in my (poor \u{1F613}) blog. Sometimes I don't know what to say, or what to explain you. But in this case, I show you how I've integrated ",mdx("strong",{parentName:"p"},"Spotify")," API's into my website."),mdx("p",null,"As you can see in this ",mdx("a",a({parentName:"p"},{href:"https://mateonunez.dev/spotify"}),"section")," I made 2 sections showing you my the ",mdx("strong",{parentName:"p"},"Last Songs I Played"),", the ",mdx("strong",{parentName:"p"},"Top Artists")," and my ",mdx("strong",{parentName:"p"},"Top Tracks"),"."),mdx("h2",a({},{id:"\uFE0F-ingredients"}),"\u{1F468}\u200D\u{1F373}\uFE0F Ingredients"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://nextjs.org/"}),"next")," | ",mdx("inlineCode",{parentName:"li"},"v12.1.5")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://reactjs.org/"}),"react")," | ",mdx("inlineCode",{parentName:"li"},"v18.0")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://tailwindcss.com/"}),"tailwindcss")," | ",mdx("inlineCode",{parentName:"li"},"v3.0.23")," ",mdx("em",{parentName:"li"},"(optional)")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://developer.spotify.com/documentation/web-api/"}),"Spotify Docs")," | ",mdx("inlineCode",{parentName:"li"},"REQUIRED "))),mdx("h2",a({},{id:"-authorization-code-flow"}),"\u{1F511} Authorization Code Flow"),mdx(Image,{src:"/images/articles/consuming-spotify-apis/authorization-code-flow.png",width:"1068",height:"970",alt:"'Authorization Code Flow' - How to consume Spotify APIs using Next.js and Node.js",href:"/images/articles/consuming-spotify-apis/authorization-code-flow.png",target:"_blank",mdxType:"Image"}),mdx("p",null,"Is the image above clear? (not for me)"),mdx("p",null,"Now, Spotify has a lot types of ",mdx("em",{parentName:"p"},"Authentication")," flows (",mdx("a",a({parentName:"p"},{href:"https://developer.spotify.com/documentation/general/guides/authorization/"}),"read more"),"). I'll use the ",mdx("strong",{parentName:"p"},"Authorization Code Flow"),", I'll run the flow locally because the only person who can access my API is me."),mdx("p",null,"The first step is to create a new Application in ",mdx("a",a({parentName:"p"},{href:"https://developer.spotify.com/"}),"Spotify Dashboard"),"."),mdx(Image,{src:"/images/articles/consuming-spotify-apis/dashboard.png",width:"1660",height:"753",alt:"'New Application on Spotify Dashboard' - How to consume Spotify APIs using Next.js and Node.js",href:"/images/articles/consuming-spotify-apis/dashboard.png",target:"_blank",quality:60,mdxType:"Image"}),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},"Bro are you serious? Do I have explain you how to create a new application? I'm a developer, not a philosopher.")),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},"The only thing I can say is that you need add (into the Redirect URIs your ",mdx("inlineCode",{parentName:"p"},"localhost:port")," for development). I think it's enough.")),mdx("p",null,"When you're done, you'll have a new application, a new ",mdx("inlineCode",{parentName:"p"},"Client ID")," and a new ",mdx("inlineCode",{parentName:"p"},"Client Secret"),", required for the next step."),mdx("p",null,"Personally, I prefer to store the ",mdx("inlineCode",{parentName:"p"},"Client ID")," and ",mdx("inlineCode",{parentName:"p"},"Client Secret")," in a ",mdx("inlineCode",{parentName:"p"},".env")," file, but you can use any other way."),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},".env.local.example")),mdx("pre",null,mdx("code",a({parentName:"pre"},{className:"language-env code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),`# Spotify `),mdx("span",a({parentName:"code"},{className:"code-line"}),`SPOTIFY_CLIENT_ID= `),mdx("span",a({parentName:"code"},{className:"code-line"}),`SPOTIFY_CLIENT_SECRET= `),mdx("span",a({parentName:"code"},{className:"code-line"}),`SPOTIFY_REFRESH_TOKEN= `),mdx("span",a({parentName:"code"},{className:"code-line"}),`SPOTIFY_REDIRECT_URI= `))),mdx("h3",a({},{id:"request-authorization-to-access-data"}),"Request authorization to access data"),mdx("p",null,"The first step is to compose the URL to request the authorization. It is comopsed by the following parameters:"),mdx("pre",null,mdx("code",a({parentName:"pre"},{className:"code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),"https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=code&redirect_uri=${REDIRECT_URI}&scope=${SCOPES}\n"))),mdx("p",null,"In my case I've indicated as ",mdx("inlineCode",{parentName:"p"},"${REDIRECT_URI}")," my ",mdx("inlineCode",{parentName:"p"},"localhost:port")," for development (keep in mind that you need to add this in the Redirect URIs section on Spotify Dashboard)."),mdx("p",null,"The list of my scopes:"),mdx("ul",null,mdx("li",{parentName:"ul"},"user-read-currently-playing"),mdx("li",{parentName:"ul"},"user-read-recently-played"),mdx("li",{parentName:"ul"},"user-read-playback-state"),mdx("li",{parentName:"ul"},"user-read-playback-position"),mdx("li",{parentName:"ul"},"user-top-read"),mdx("li",{parentName:"ul"},"playlist-read-collaborative"),mdx("li",{parentName:"ul"},"playlist-read-private")),mdx("p",null,mdx("a",a({parentName:"p"},{href:"https://developer.spotify.com/documentation/general/guides/authorization/scopes/"}),"Read More about Spotify Authorization Scopes")),mdx("p",null,"Visit the composed URL. After you're done, you'll have a new URL with the ",mdx("inlineCode",{parentName:"p"},"code")," parameter in the Redirect URI you've indicated."),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},"http://localhost:3000/?code=AQAwWOR1VPrAsrsRhAVzPOGg2Dg....")),mdx("p",null,"Save that code."),mdx("p",null,"The following step is to encode the ",mdx("inlineCode",{parentName:"p"},"${CLIENT_ID}:${CLIENT_SECRET}")," variables in Base64."),mdx("pre",a({},{className:"language-bash"}),mdx("code",a({parentName:"pre"},{className:"language-bash code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),mdx("span",a({parentName:"span"},{className:"token operator"}),">")," ",mdx("span",a({parentName:"span"},{className:"token builtin class-name"}),"echo")," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-n")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"',mdx("span",a({parentName:"span"},{className:"token variable"}),"${CLIENT_ID}"),":",mdx("span",a({parentName:"span"},{className:"token variable"}),"${CLIENT_SECRET}"),'"')," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"|"),` base64 `))),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},"or just use ",mdx("a",a({parentName:"p"},{href:"https://www.base64encode.org/"}),"base64encode"))),mdx("p",null,"When you have encrypted the ",mdx("inlineCode",{parentName:"p"},"${CLIENT_ID}")," and the ",mdx("inlineCode",{parentName:"p"},"${CLIENT_SECRET}"),", sperated by ",mdx("inlineCode",{parentName:"p"},":"),", you can compose the URL to request the authorization that we will use in the next step."),mdx("pre",a({},{className:"language-bash"}),mdx("code",a({parentName:"pre"},{className:"language-bash code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),mdx("span",a({parentName:"span"},{className:"token function"}),"curl")," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-H")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"Authorization: Basic ',mdx("span",a({parentName:"span"},{className:"token variable"}),"${CLIENT_PARAMETERS_IN_BASE64}"),'"')," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-d")," ",mdx("span",a({parentName:"span"},{className:"token assign-left variable"}),"grant_type"),mdx("span",a({parentName:"span"},{className:"token operator"}),"="),"authorization_code ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-d")," ",mdx("span",a({parentName:"span"},{className:"token assign-left variable"}),"code"),mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token variable"}),"${AUTHORIZATION_CODE}")," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-d")," ",mdx("span",a({parentName:"span"},{className:"token assign-left variable"}),"redirect_uri"),mdx("span",a({parentName:"span"},{className:"token operator"}),"="),`http%3A%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token `))),mdx("p",null,"The response will be something like this:"),mdx("pre",a({},{className:"language-json"}),mdx("code",a({parentName:"pre"},{className:"language-json code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"access_token"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"ACCESS_TOKEN"'),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"token_type"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"Bearer"'),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"expires_in"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"3600"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"refresh_token"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"REFRESH_TOKEN"'),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"scope"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"playlist-read-private playlist-read-collaborative user-read-playback-state user-read-currently-playing user-read-recently-played user-read-playback-position user-top-read"'),` `),mdx("span",a({parentName:"code"},{className:"code-line"}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"The ",mdx("inlineCode",{parentName:"p"},"access_token")," allows you to access the API data."),mdx("p",null,"A simple example of how to use the ",mdx("inlineCode",{parentName:"p"},"access_token")," to get the current user's data:"),mdx("p",null,mdx("strong",{parentName:"p"},"Request:")),mdx("pre",a({},{className:"language-bash"}),mdx("code",a({parentName:"pre"},{className:"language-bash code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),mdx("span",a({parentName:"span"},{className:"token function"}),"curl")," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-X")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"GET"')," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"https://api.spotify.com/v1/me/player/currently-playing"')," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-H")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"Accept: application/json"')," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-H")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"Content-Type: application/json"')," ",mdx("span",a({parentName:"span"},{className:"token parameter variable"}),"-H")," ",mdx("span",a({parentName:"span"},{className:"token string"}),'"Authorization: Bearer ',mdx("span",a({parentName:"span"},{className:"token variable"}),"${ACCESS_TOKEN}"),'"'),` `))),mdx("p",null,mdx("strong",{parentName:"p"},"Response:")),mdx("pre",a({},{className:"language-json"}),mdx("code",a({parentName:"pre"},{className:"language-json code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," timestamp",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"1657357734036"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," context",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," external_urls",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," spotify",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'https",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),mdx("span",a({parentName:"span"},{className:"token comment"}),"//open.spotify.com/playlist/5yIhKIf3Hf3g8HOLNGYWeM'"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," href",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'https",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),mdx("span",a({parentName:"span"},{className:"token comment"}),"//api.spotify.com/v1/playlists/5yIhKIf3Hf3g8HOLNGYWeM',"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," type",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'playlist'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," uri",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'spotify",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),"playlist",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),`5yIhKIf3Hf3g8HOLNGYWeM' `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," progress_ms",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"9490"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," item",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," album",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," album_type",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'album'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," artists",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"Array",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," available_markets",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"Array",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," external_urls",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"Object",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," href",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'https",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),mdx("span",a({parentName:"span"},{className:"token comment"}),"//api.spotify.com/v1/albums/2noRn2Aes5aoNVsU6iWThc',"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," id",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," '2noRn2Aes5aoNVsU6iWThc'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," images",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"Array",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," name",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'Discovery'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," release_date",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," '",mdx("span",a({parentName:"span"},{className:"token number"}),"2001"),mdx("span",a({parentName:"span"},{className:"token number"}),"-03"),mdx("span",a({parentName:"span"},{className:"token number"}),"-12"),"'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," release_date_precision",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'day'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," total_tracks",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"14"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," type",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'album'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," uri",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'spotify",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),"album",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),`2noRn2Aes5aoNVsU6iWThc' `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," artists",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"[")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"Object",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," available_markets",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'AD'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AG'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AL'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AO'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AT'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AU'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'AZ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'BA'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BB'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BD'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BF'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BG'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BH'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BI'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BJ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BN'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'BO'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BS'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BT'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BW'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BY'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'BZ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CA'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CD'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CG'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'CH'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CI'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CL'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CO'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CV'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CW'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CY'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'CZ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'DE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'DJ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'DK'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'DM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'DO'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'DZ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'EC'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'EE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'EG'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'ES'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'FI'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'FJ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'FM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'FR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GA'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GB'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GD'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GH'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'GN'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GQ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GT'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GW'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'GY'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'HK'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'HN'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'HR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'HT'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'HU'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'ID'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'IE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'IL'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'IN'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'IQ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'IS'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'IT'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'JM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'JO'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'JP'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KE'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KG'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KH'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KI'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KM'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KN'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KW'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'KZ'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," 'LA'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LB'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LC'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LI'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LK'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LR'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LS'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LT'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LU'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," 'LV'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ... ",mdx("span",a({parentName:"span"},{className:"token number"}),"83"),` more items `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," disc_number",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"1"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," duration_ms",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"320357"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," explicit",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"false"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," external_ids",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," isrc",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'GBDUW0000053' ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," external_urls",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," spotify",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'https",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),mdx("span",a({parentName:"span"},{className:"token comment"}),"//open.spotify.com/track/0DiWol3AO6WpXZgp0goxAV'"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," href",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'https",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),mdx("span",a({parentName:"span"},{className:"token comment"}),"//api.spotify.com/v1/tracks/0DiWol3AO6WpXZgp0goxAV',"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," id",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," '0DiWol3AO6WpXZgp0goxAV'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," is_local",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"false"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," name",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'One More Time'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," popularity",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"77"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," preview_url",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'https",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),mdx("span",a({parentName:"span"},{className:"token comment"}),"//p.scdn.co/mp3-preview/18781de52205d9ade22904945510161feab085ce?cid=703d39064908445898701a125f391745',"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," track_number",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"1"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," type",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'track'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," uri",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'spotify",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),"track",mdx("span",a({parentName:"span"},{className:"token operator"}),":"),`0DiWol3AO6WpXZgp0goxAV' `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," currently_playing_type",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," 'track'",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," actions",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," disallows",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," resuming",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"true"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," skipping_prev",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"true")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," is_playing",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"true"),` `),mdx("span",a({parentName:"code"},{className:"code-line"}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("h2",a({},{id:"-currently-listening"}),"\u{1F3A7} Currently Listening"),mdx("p",null,"Finally, with that introduction, we can start with the funny part."),mdx("p",null,"In this section, on my website, I've created a Player Component tho show the current track I'm playing on Spotify. This is how it looks like:"),mdx(Image,{src:"/images/articles/consuming-spotify-apis/spotify-player.png",width:"752",height:"113",alt:"Spotify Player",quality:60,mdxType:"Image"}),mdx("p",null,"For that component I've used the following packages, libs and assets:"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://github.com/mifi/react-lottie-player"}),"react-lottie-player")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://github.com/mateonunez/mateonunez-website/blob/main/lib/lottie-files/player.json"}),"player-animation")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://swr.vercel.app/"}),"SWR"))),mdx("h3",a({},{id:"fetching-the-current-track"}),"Fetching the Current Track"),mdx("p",null,"I've created an API on Next.JS to fetch the current track."),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"app/api/spotify/current-listening"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{8,20} showLineNumbers","{8,20}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"}),`/** `)),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"}),` * API handler `)),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"})," */"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," getCurrentlyListening ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/spotify'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," normalizeCurrentlyListening ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/utils/normalizers'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"default")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"async")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"handler"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),"req",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," res"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["8"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," response ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"getCurrentlyListening"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token operator"}),"!"),"response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"500"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"error"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'Spotify not available'")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["13"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"status")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"===")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"204")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"||")," response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"status")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),">")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"400"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"200"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"is_playing"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"false")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," data ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["19"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"200"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token function"}),"normalizeCurrentlyListening"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"data",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["21"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"The ",mdx("inlineCode",{parentName:"p"},"getCurrentlyListening()")," is a simple method that takes the ",mdx("strong",{parentName:"p"},"access token")," and calls the Spotify API."),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"lib/spotify.js"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{7} showLineNumbers","{7}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"}),`/** `)),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"}),` * Consumer of the currently playing track `)),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"})," */"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token function-variable function"}),"getCurrentlyListening")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"async")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," nowPlayingEndpoint ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'https://api.spotify.com/v1/me/player/currently-playing'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["7"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"access_token"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," accessToken ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"getAccessToken"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token operator"}),"!"),"accessToken",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["13"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"fetch"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"nowPlayingEndpoint",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"headers"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"Authorization"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token string"}),"Bearer "),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"accessToken",mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`")),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `))),mdx("p",null,"The ",mdx("inlineCode",{parentName:"p"},"getAccessToken()")," just resolve the access token, stored in the session or refreshed by the ",mdx("inlineCode",{parentName:"p"},"refresh_token")," flow."),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"lib/utils/normalizers/normalizeSpotify.js"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"showLineNumbers",showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token function-variable function"}),"normalizeCurrentlyListening")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," is_playing",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," progress_ms",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," item ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"id"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"id"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"isPlaying"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," is_playing",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"title"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"name"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"artist"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"artists"),mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"map"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," name ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," name",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"join"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"' '"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"album"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"album"),mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"name",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"thumbnail"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"album"),mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"images",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),mdx("span",a({parentName:"span"},{className:"token number"}),"0"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"url",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"url"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"external_urls"),mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"spotify",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"progress"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," progress_ms",mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"duration"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"duration_ms"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `))),mdx("p",null,"After the API is ready, I can use it to fetch the current track. For that, I've created a ",mdx("strong",{parentName:"p"},"contenxt")," to manage ",mdx("strong",{parentName:"p"},"current playing song"),"."),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"pages/index.tsx"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{14,21} showLineNumbers","{14,21}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"s")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'styles/pages/home.module.css'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"useSWR")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'swr'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Player")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'components/spotify'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," useUI ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'components/ui/ui-context'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"default")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"HomePage")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," article ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," setSpotifyListening ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"useUI"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token function-variable function"}),"fetcher")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token parameter"}),"url")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token function"}),"fetch"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"url",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"then"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),"response")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"then"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"setSpotifyListening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["13"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token function"}),"useSWR"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"'/api/spotify/currently-listening'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," fetcher",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"refreshInterval"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"10")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"*")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"1000")," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// 10 seconds"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["19"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"root"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["21"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Player")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["22"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["23"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["24"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["25"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"The motivation for manage the current song via a ",mdx("inlineCode",{parentName:"p"},"context")," it's because I need that data in other components. So I can use it in the ",mdx("inlineCode",{parentName:"p"},"Player")," component and in others."),mdx("p",null,"And this is the ",mdx("em",{parentName:"p"},"Player")," component:"),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"components/spotify/player.tsx"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{13,23,77} showLineNumbers","{13,23,77}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"s")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'./player.module.css'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"React"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," useMemo ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'react'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Link"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'next/link'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Lottie"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'react-lottie-player'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"PlayerJson"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/lottie-files/player.json'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"ChevronUp"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Spotify")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'components/icons'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," useUI ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'components/ui/ui-context'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"config")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/config'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["13"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token function-variable function"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"PlayerAnimation"))," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Lottie")," loop animationData",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"PlayerJson"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," play style",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"width"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'1rem'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"height"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'1rem'")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token function-variable function"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Player"))," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," listening ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"useUI"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["19"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," url ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," listening ",mdx("span",a({parentName:"span"},{className:"token operator"}),"&&")," listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"isPlaying")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"url")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"baseUrl"),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token string"}),"/spotify"),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["21"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["22"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," progress ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"useMemo"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["23"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," listening ",mdx("span",a({parentName:"span"},{className:"token operator"}),"&&")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"progress")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/")," listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"duration"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"*")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"100"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["24"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["25"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["26"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["27"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["28"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["29"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"root"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["30"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"inner"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["31"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Link"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["32"]})," href",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"url",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["33"]}),` passHref `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["34"]})," target",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"isPlaying ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'_blank'")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'_self'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["35"]})," aria",mdx("span",a({parentName:"span"},{className:"token operator"}),"-"),"label",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"Mateo Nunez on Spotify"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["36"]})," rel",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"noopener noreferer noreferrer"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["37"]})," title",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"Mateo Nunez on Spotify"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["38"]})," href",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"url",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["39"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"isPlaying ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["40"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"w-auto h-auto"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["41"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token comment"}),"/* eslint-disable-next-line @next/next/no-img-element */"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["42"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"img width",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"40"')," height",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"40"')," src",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"thumbnail",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," alt",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"album",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["43"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["44"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["45"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Spotify")," className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"w-10 h-10"')," color",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token string"}),"'#1ED760'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["46"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["47"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Link"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["48"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["49"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"details"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["50"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"flex flex-row items-center justify-between"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["51"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"flex flex-col"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["52"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"p className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"title"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["53"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"isPlaying ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"title")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'Not Listening'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["54"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"p",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["55"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"p className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"artist"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"isPlaying ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," listening",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"artist")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'Spotify'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"p",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["56"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["57"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"flex flex-row"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["58"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Link"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["59"]})," href",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"/spotify"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["60"]}),` passHref `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["61"]})," target",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"isPlaying ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'_blank'")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'_self'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["62"]})," aria",mdx("span",a({parentName:"span"},{className:"token operator"}),"-"),"label",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"Mateo Nunez on Spotify"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["63"]})," rel",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"noopener noreferer noreferrer"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["64"]})," title",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"Mateo Nunez on Spotify"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["65"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"ChevronUp")," className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"w-4 h-4 rotate-90"')," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["66"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Link"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["67"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["68"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["69"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"listening",mdx("span",a({parentName:"span"},{className:"token operator"}),"?."),"isPlaying ",mdx("span",a({parentName:"span"},{className:"token operator"}),"&&")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["70"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["71"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"playingContainer"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["72"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"progress"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["73"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"listened"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," style",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"width"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"progress",mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token string"}),"%"),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"))," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["74"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["75"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["76"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"animation"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["77"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"PlayerAnimation")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["78"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["79"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["80"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["81"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["82"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["83"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["84"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["85"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["86"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["87"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["88"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["89"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"default")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"React"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"memo"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Player"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `))),mdx("h2",a({},{id:"-recently-played"}),"\u{1F501} Recently Played"),mdx("p",null,"The ",mdx("a",a({parentName:"p"},{href:"https://mateonunez.dev/spotify"}),"preview"),"."),mdx(Image,{src:"/images/articles/consuming-spotify-apis/recently-played.png",width:"1834",height:"656",alt:"Spotify Player",quality:60,mdxType:"Image"}),mdx("p",null,"Like the previous section, I've created a dedicated API to manage the ",mdx("inlineCode",{parentName:"p"},"fetch"),"."),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"app/api/spotify/recently-played.tsx"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{6,22} showLineNumbers","{6,22}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"config")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/config'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," getRecentlyPlayed ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/spotify'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," normalizeRecentlyPlayed ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/utils/normalizers'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"default")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"async")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"handler"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),"req",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," res"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["6"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," response ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"getRecentlyPlayed"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"catch"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),"err")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return"),` res `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"200"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// prevent the error from being sent to the client"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"recently_played"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"false"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"message"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'Are you connected?'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"extra"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," err ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token operator"}),"!"),"response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["13"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"500"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"error"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'Spotify not available'")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"status")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"===")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"204")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"||")," response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"status")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),">")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"400"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"200"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"recently_played"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token boolean"}),"false")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["19"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," items ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," response",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["21"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["22"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," data ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," items",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"map"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"normalizeRecentlyPlayed",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"sort"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),"a",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," b"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," b",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"played_at")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"-")," a",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"played_at"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["23"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["24"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"status"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token number"}),"200"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"data",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["25"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"The ",mdx("inlineCode",{parentName:"p"},"getRecentlyPlayed()")," is a simple method that takes the ",mdx("strong",{parentName:"p"},"access token")," and calls the Spotify API."),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"showLineNumbers",showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"}),`/** `)),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"}),` * Consumer of the recently played API `)),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),mdx("span",a({parentName:"span"},{className:"token doc-comment comment"})," */"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token function-variable function"}),"getRecentlyPlayed")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"async")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," limit ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"munber"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";")," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// max 33 tracks"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," before ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"new")," ",mdx("span",a({parentName:"span"},{className:"token class-name"}),"Date"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"getTime"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";")," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// now() - 1 hour"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," params ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," querystring",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"stringify"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," limit",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," before ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," recentlyPlayedEndpoint ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token string"}),"https://api.spotify.com/v1/me/player/recently-played?"),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"params",mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"access_token"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," accessToken ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"getAccessToken"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["13"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token operator"}),"!"),"accessToken",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"fetch"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"recentlyPlayedEndpoint",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["19"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"headers"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"Authorization"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token string"}),"Bearer "),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"accessToken",mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`")),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["21"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["22"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["23"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `))),mdx("p",null,"Now the API is ready to be consumed by the client. To do that I've create a simple ",mdx("inlineCode",{parentName:"p"},"fetcher")," to use via server-side."),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"showLineNumbers",showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"async")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"recentlyPlayedFetcher"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," recentlyPlayedResponse ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"fetch"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"baseUrl"),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token string"}),"/api/spotify/recently-played"),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," recentlyPlayed ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," recentlyPlayedResponse",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"json"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," recentlyPlayed",mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"I should to put it all togheter in the dedicated page."),mdx("p",null,mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"app/api/spotify/recently-played.tsx"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{8,30} showLineNumbers","{8,30}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Footer"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Header"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"RecentlyPlayed"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Top")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'components'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"NextSeo")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'next-seo'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," recentlyPlayedFetcher ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'app/api/spotify/recently-played'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"async")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"getServerSideProps"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," res ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]})," res",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"setHeader"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"'Cache-Control'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'public, s-maxage=10, stale-while-revalidate=59'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["8"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," recentlyPlayed ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"await")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"recentlyPlayedFetcher"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";")," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// consuming my API via server-side"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"props"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["12"]}),` recentlyPlayed `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["13"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["15"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["16"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["17"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"default")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"SpotifyPage")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," recentlyPlayed ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["19"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"NextSeo"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["21"]})," title",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"I show you what I \u{1F3A7}"'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["22"]})," description",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"I \u2764\uFE0F the music and you should know it."'),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["23"]})," openGraph",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["24"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"title"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),`"Mateo's activity on Spotify"`),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["25"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["26"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["27"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["28"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token comment"}),"/* Recently Played Component */"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["29"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"RecentlyPlayed")," items",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"recentlyPlayed",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["30"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["31"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["32"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"Yes, this component it'v very simple: just ",mdx("inlineCode",{parentName:"p"},"SSR"),", ",mdx("inlineCode",{parentName:"p"},"caching"),", ",mdx("inlineCode",{parentName:"p"},"fetching"),", ",mdx("inlineCode",{parentName:"p"},"parsing")," and a little bit of ",mdx("inlineCode",{parentName:"p"},"SEO"),"."),mdx("p",null,"The core is the ",mdx("inlineCode",{parentName:"p"},"")," component. It takes the ",mdx("inlineCode",{parentName:"p"},"items")," as a prop and renders the ",mdx("em",{parentName:"p"},"carousel")," of tracks."),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},"I didn't used any external components for the ",mdx("em",{parentName:"p"},"carousel"))),mdx("pre",a({},{className:"language-js"}),mdx("code",a({parentName:"pre"},{className:"language-js code-highlight",metastring:"{12-30,44,47,64,67} showLineNumbers","{12-30,44,47,64,67}":!0,showLineNumbers:!0}),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["1"]}),mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"s")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'./recently-played.module.css'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["2"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["3"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),"config")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'lib/config'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["4"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["5"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"ChevronUp"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Container"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Fade"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Title"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"TrackCard")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'components'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["6"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"import")," ",mdx("span",a({parentName:"span"},{className:"token imports"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," useCallback",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," useRef ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"))," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"from")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'react'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["7"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["8"]}),"",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"export")," ",mdx("span",a({parentName:"span"},{className:"token keyword module"}),"default")," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"function")," ",mdx("span",a({parentName:"span"},{className:"token function"}),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"RecentlyPlayed")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," items ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["9"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," trackContainerRef ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"useRef"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["10"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["11"]})," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// makes the containers scroll method"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["12"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," scrollTrackContainer ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," ",mdx("span",a({parentName:"span"},{className:"token function"}),"useCallback"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["13"]})," ",mdx("span",a({parentName:"span"},{className:"token parameter"}),"direction")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["14"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword"}),"const")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{")," current ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"=")," trackContainerRef",mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["15"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["16"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"if")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),"current",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["17"]})," current",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"scroll"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["18"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"left"),mdx("span",a({parentName:"span"},{className:"token operator"}),":"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["19"]})," direction ",mdx("span",a({parentName:"span"},{className:"token operator"}),"===")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'left'"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["20"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," current",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"scrollLeft")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"-")," current",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"clientWidth")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"-")," config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"munber"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["21"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," direction ",mdx("span",a({parentName:"span"},{className:"token operator"}),"===")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'right'"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["22"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"?")," current",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"scrollLeft")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"+")," current",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"clientWidth")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"-")," config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"munber"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["23"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"0"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["24"]})," ",mdx("span",a({parentName:"span"},{className:"token literal-property property"}),"behavior"),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token string"}),"'smooth'"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["25"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["26"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["27"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["28"]})," ",mdx("span",a({parentName:"span"},{className:"token comment"}),"// eslint-disable-next-line react-hooks/exhaustive-deps"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["29"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),"trackContainerRef",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"current"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["30"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["31"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["32"]})," ",mdx("span",a({parentName:"span"},{className:"token keyword control-flow"}),"return")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["33"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["34"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Container")," clean",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["35"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Fade"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["36"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Title"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Recently")," ",mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Played"),mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Title"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["37"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Fade"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["38"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["39"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"items",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"length")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),">")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"0")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"&&")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["40"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"root"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["41"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),`button `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["42"]})," className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"navigator"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["43"]})," onClick",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["44"]})," ",mdx("span",a({parentName:"span"},{className:"token function"}),"scrollTrackContainer"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"'left'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["45"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["46"]})," onTouchStart",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["47"]})," ",mdx("span",a({parentName:"span"},{className:"token function"}),"scrollTrackContainer"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"'left'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["48"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["49"]})," aria",mdx("span",a({parentName:"span"},{className:"token operator"}),"-"),"label",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"Less Tracks"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["50"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"ChevronUp")," className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"w-6 h-6 font-black transition duration-500 transform -rotate-90"')," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["51"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"button",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["52"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["53"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),"div className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),mdx("span",a({parentName:"span"},{className:"token string"}),"'track-container'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ref",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"trackContainerRef",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["54"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"items",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token method function property-access"}),"map"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token parameter"}),"item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),",")," key"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["55"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Fade")," key",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token template-string"}),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`"),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"id"),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token string"}),"-"),mdx("span",a({parentName:"span"},{className:"token interpolation"}),mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"${"),"key",mdx("span",a({parentName:"span"},{className:"token interpolation-punctuation punctuation"}),"}")),mdx("span",a({parentName:"span"},{className:"token template-punctuation string"}),"`")),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," delay",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"key ",mdx("span",a({parentName:"span"},{className:"token operator"}),"+")," config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"munber")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"100"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," clean",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["56"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"TrackCard")," item",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"item",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," delay",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"key ",mdx("span",a({parentName:"span"},{className:"token operator"}),"+")," config",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"munber")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/")," ",mdx("span",a({parentName:"span"},{className:"token number"}),"100"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}")," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["57"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Fade"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["58"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["59"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["60"]}),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["61"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),`button `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["62"]})," className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),"s",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"."),mdx("span",a({parentName:"span"},{className:"token property-access"}),"navigator"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["63"]})," onClick",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["64"]})," ",mdx("span",a({parentName:"span"},{className:"token function"}),"scrollTrackContainer"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"'right'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["65"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["66"]})," onTouchStart",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")")," ",mdx("span",a({parentName:"span"},{className:"token arrow operator"}),"=>")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number highlight-line",line:["67"]})," ",mdx("span",a({parentName:"span"},{className:"token function"}),"scrollTrackContainer"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"("),mdx("span",a({parentName:"span"},{className:"token string"}),"'right'"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["68"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["69"]})," aria",mdx("span",a({parentName:"span"},{className:"token operator"}),"-"),"label",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"More Tracks"'),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["70"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"ChevronUp")," className",mdx("span",a({parentName:"span"},{className:"token operator"}),"="),mdx("span",a({parentName:"span"},{className:"token string"}),'"w-6 h-6 transition duration-500 transform rotate-90 hover:scale-110"')," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["71"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"button",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["72"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),"div",mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["73"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["74"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token maybe-class-name"}),"Container"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["75"]})," ",mdx("span",a({parentName:"span"},{className:"token operator"}),"<"),mdx("span",a({parentName:"span"},{className:"token operator"}),"/"),mdx("span",a({parentName:"span"},{className:"token operator"}),">"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["76"]})," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),")"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),";"),` `),mdx("span",a({parentName:"code"},{className:"code-line line-number",line:["77"]}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"The scrollTrackContainer uses ",mdx("inlineCode",{parentName:"p"},"useCallback")," to prevent re-render of the component. It just checks if the ",mdx("inlineCode",{parentName:"p"},"trackContainerRef")," is defined and if it is, it calls the ",mdx("inlineCode",{parentName:"p"},"scroll (native)")," method of the ",mdx("em",{parentName:"p"},"node"),"."),mdx("p",null,mdx("em",{parentName:"p"},"Is you are asking why I called a variable ",mdx("inlineCode",{parentName:"em"},"munber"),", I'll answer you another time (or article).")),mdx("blockquote",null,mdx("p",{parentName:"blockquote"},mdx("inlineCode",{parentName:"p"},"")," component just animates the children following the specified criteria.")),mdx("h2",a({},{id:"-top-artiststracks"}),"\u{1F51D} Top Artists/Tracks"),mdx("p",null,"Actually, I don't feel like to copy and paste part of my code (that you can check ",mdx("a",a({parentName:"p"},{href:"https://github.com/mateonunez/mateonunez-website"}),"here"),")."),mdx("p",null,"This is because the ",mdx("inlineCode",{parentName:"p"},"Top Artist and Tops Tracks")," on ",mdx("em",{parentName:"p"},"Spotify")," is almost the same as the ",mdx("inlineCode",{parentName:"p"},"Recently Played")," on ",mdx("em",{parentName:"p"},"Spotify"),"."),mdx("p",null,"So I've created a new api in ",mdx("em",{parentName:"p"},mdx("strong",{parentName:"em"},"app/api/spotify/top.jsx")),", that calls two methods: ",mdx("inlineCode",{parentName:"p"},"getTopArtists()")," and ",mdx("inlineCode",{parentName:"p"},"getTopTracks()"),". Those methods resolve ",mdx("em",{parentName:"p"},"Spotify endpoints")," and returns the data."),mdx("p",null,"I have a two methods to ",mdx("em",{parentName:"p"},"normalize")," both responses."),mdx("p",null,"In this case I've create a single ",mdx("inlineCode",{parentName:"p"},"fetcher")," that consumes my API. The json looks something like this:"),mdx("pre",a({},{className:"language-json"}),mdx("code",a({parentName:"pre"},{className:"language-json code-highlight"}),mdx("span",a({parentName:"code"},{className:"code-line"}),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"{"),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"artists"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),mdx("span",a({parentName:"span"},{className:"token punctuation"}),","),` `),mdx("span",a({parentName:"code"},{className:"code-line"})," ",mdx("span",a({parentName:"span"},{className:"token property"}),'"tracks"'),mdx("span",a({parentName:"span"},{className:"token operator"}),":")," ",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"["),mdx("span",a({parentName:"span"},{className:"token punctuation"}),"]"),` `),mdx("span",a({parentName:"code"},{className:"code-line"}),"",mdx("span",a({parentName:"span"},{className:"token punctuation"}),"}"),` `))),mdx("p",null,"The page has no particular logic, just render the items and make things beautiful using ",mdx("inlineCode",{parentName:"p"},"tailwindcss")," classes."),mdx("hr",null),mdx("h2",a({},{id:"resources"}),"Resources"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://github.com/vercel/next.js"}),"https://github.com/vercel/next.js")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://github.com/facebook/react/"}),"https://github.com/facebook/react/")),mdx("li",{parentName:"ul"},mdx("a",a({parentName:"li"},{href:"https://github.com/tailwindlabs/tailwindcss"}),"https://github.com/tailwindlabs/tailwindcss"))))}MDXContent.isMDXComponent=!0;