A second version of this course released using Next 13+, but this course is great if you want to see another example fullstack project. We now recommend you take the Build a Fullstack App with Next.js, v2 course.
Transcript from the "Playlist Page UI" Lesson
[00:00:00]
>> We're gonna continue working on the playlist page, by using the gradient layout that we have. And then creating a songs table, where we have all of our songs and, hopefully it looks amazing, and then we can get the songs playing later. So what we'll do is we'll head over to our code, and we'll start working on this playlist page.
[00:00:18] So I'm gonna get rid of this div which is super gross and I'm gonna use this gradient layout that we made, which is super awesome. And we can start filling out all the things that have to go into this gradient layout. So we know that there's a color that needs to go in here, I kind of want the playlist to be different colors for different pages.
[00:00:41] So I'm gonna create like a little generic random color generator, so I'm going to do the outside of the component. So, I'm just gonna call it get background color like that, and it's just gonna be a function that takes in a playlist ID. So I can be like deterministic or somewhat deterministic, I'm not gonna write some deterministic algorithm.
[00:01:02] To generate an index for an array to get a color that's too much so, we'll just say colors, and that's just gonna be an array of colors. And I'll put all the colors that I know that Chakra has which is red, green, blue, orange. Purple, gray, what else do they have?
[00:01:28] I feel I'm missing something, other ones they have teal, yellow, that's fine. So we have all those, and then what I'm gonna do is I'm just gonna return colors. Whatever the ID that you passed me, minus 1, because no ID starts with 0 but the array starts with 0.
[00:01:46] So we'll never see red in this case unless I do minus 1, or if the ID is greater than anything in here. And this is where the randomness comes in, we'll just say colors, we'll do you math.floor, math.random, Times color.length. So just give us a random color if the ID doesn't exist, so this way we can have a somewhat deterministic color for our playlists.
[00:02:17] And they'll all be different enough to what we switch between them, we won't see the same color. So that'll be our get background color, so then for our GradientLayout, go back down here. I can just say const color = getGBColor(playlist.id), that could pass this in as a prop.
[00:02:46] So now I can to say color, it's going to be 'color' like that, and I'll just put it in a div right here, so it just stays there for a minute, oops, not like that. Like that there we go, and I think the imports no I already imported GradientLayout it's just freaking out cuz I didn't put all the props in, but that's totally fine.
[00:03:09] So once we have that I'm just gonna to go see what it looks like, once I go through all the playlists and make sure the colors are switching. So let's check it out, npm run dev, Refresh this thing, and there we go, that's Playlist ID of 8, and playlist ID of 10, there we go.
[00:03:35] So now it's switching colors, depending on what playlists you click on, pretty cool. Okay, so now we got to color switching our playlists, we got the GradientLayout. Now we need to fill out the top section just like we did with the homepage, and then we can worry about the song table, afterwards.
[00:03:57] So let's do that, so the other prompts for this GradientLayout included, if it was a round image or not. So I mean by default it's false, but we'll just be explicit, false on the round image cuz it's square. We need a title, that's gotta be the playlist.name, we need a subtitle, that's just gonna be called playlists.
[00:04:23] Literally the word playlist, we need a description, so we'll put a description in here. And for the description, we'll say, how many songs there are, so we'll say description will be, {playlist.songs.length}, songs. So that'll sum number of songs, and that'll be the description, so I'll save that, format it.
[00:04:57] And then for the image, cuz playlists don't have images right now, cuz we just don't upload images and things like like that. And because this is the client side Spotify experience, which assumes that the songs and stuff was already there. We'll just hard code some placeholder image I have we can use https://, there's this thing called picsum.photos, and we'll just say /400.
[00:05:24] And then you can do a query string of random, and then to make sure it's deterministically random, we can use the playlist, .id, so we'll do that. Now, it'll just give us like a random image for every single playlist. But the same playlist will always have the same image, until you refresh.
[00:05:49] So once we have that, we can go back to our playlists and there we go, we got our nice playlists, we have our image here. We got the name of the playlist, we have our title, we have our description. And if we click on a different one, and go to different playlists with a different image.
[00:06:11] And if you look at the design, that's pretty close, I mean there's a lot more description going on here information that we don't have. But we got our square image, we have our title, we have the subtitle, we got our gradients. And next thing we need is our sound, or our songs table is what I've been calling it.