Build a Fullstack Music App with Next.js Player UI Container

Transcript from the "Player UI Container" Lesson

[00:00:00]
>> Now that that's out the way, we can start working on our player. And the player is gonna go down here where the obvious empty space is right here where it says player. And we already have a space carved out for it, everything is ready, all we have to do is build it out.

[00:00:13] So what we're gonna do is, make a new component inside of the components folder. We're gonna call that playerBar.tsx, actually looks like already created it so yeah. PlayerBar.tsx, and inside of it all we're gonna do is import a Box and a Flex from chakra layout like that. And I'm just gonna make a Hello World component, like I always do just to get this thing on a page so we can actually see it while we're designing it.

[00:00:50] Return a Box, Like so, and then we're gonna use this player bar inside of the player layout. Right where you see the word player that we typed in or whatever placeholder text you might have placed. It's just gonna go right underneath where we rendering the children, which is underneath the sidebar.

[00:01:10] So just gonna replace that with a player bar, so I'm gonna import my PlayerBar, and I'm gonna render it here. And now if I go back to my page I can see that now the player ball component is now actually been rendered, and we are good to go.

[00:01:32] We're ready to style this thing, so the PlayerBar's gonna be the container. It's not actually gonna have all the controls and the buttons we'll make another component of that cuz that components can be huge. Cuz there's so much state we have to keep track of and, animations and, there's a lot.

[00:01:46] So the player bars is gonna be a container for everything and it will make a sub component inside of it that does all the other cool stuff. So as far as the container goes, if we look at the design one more time. It just looks like a dark gray box with some padding in it, and it just lays out three different columns.

[00:02:03] We got one column on the left her, we got one column here in the middle, and then we have this one column on the right. So that's basically the job of this PlayerBar, containers is to do the right coloring background and get the columns right. And then each one of these columns will be like their own component basically, so let's do that.

[00:02:21] Let's head over to this PlayerBar here, and we'll get started. Because we are making those columns, we're gonna use flex here so, that's gotta be a thing. And we'll probably be getting started with that but before let's get the container set. I believe we carved out 100 pixels and margin for that space, so I'm just gonna just reinforce that.

[00:02:47] And make this box also have a height of 100 pixels just to be explicit, so it's hey you're 100 pixels. And then as far as the width, it's full width so we can say 100 view width, that'll give us a full width. Background we're gonna do gray.900, which is as close to black as we can get without actually, being black.

[00:03:09] And then padding is going to be about 10 pixels all around. And then because we have those three columns, it makes sense to just go ahead and do a flex immediately, like so. And then we wanna make sure that all those columns are even, and things like that.

[00:03:28] So we'll just say align, Center just to make sure it's all good. Maybe the padding may help, we might not need that, but we'll try that. And then once we get here, what we're gonna work on is the first column so the first column is gonna be, this information over here.

[00:03:49] So we'll do the song name, and the artist name, so we'll do that. So I'm just gonna go ahead and just make it inline right now, we could probably take this out and make another component later depending on how big it gets. But for now is gonna make it here, it's gonna be a box, and it's going to have some padding on it.

[00:04:08] Let's add some padding I don't know about 20 pixels something like that, we'll do some padding here. The text is gonna be white so I'm gonna say color white, Like that. And then like I said, we're not gonna do the album arts, we're just gonna do the song title and then the artist name.

[00:04:26] So we really just need to get the text component, and we'll just put two text things here. And they stack on top of each other by default, which is what we want, so we got one text, we got another one. And the first one would just be the name of the artists or I'm sorry, the name of the song.

[00:04:40] So I'm just gonna hard code something called song name here, and then the next one will just be the artists name. So then I'll say artists name here, I'll save that so we can see, how close we are as far as what it looks like. We'll go back we'll check it out, and you can see here we got the song name, we got the artist name, we need to adjust them.

[00:05:01] I think the song needs to be way bigger compared to the artist name. So, we'll go to this first text for the song name and we'll give it a font size of large. You could just spell it out like that and then for the artist name, we'll give it a fontSize of small which should just be sm, like that.

[00:05:19] So now I got those two I'm just gonna capitalize this, there we go. So we got the song name we got the artist name, looking a little better here. And then the next thing that we wanna do is we want to make a column for the the player like the actual controls, right?

[00:05:41] But before that we gotta think about like how big we want these columns to be. So, if all columns combined is 100%, what is the width of this section compared to, everything else? I mean if we look at the design, just roughly looking at it, I mean you have to account for the invisible space.

[00:06:00] I mean this thing is centered, I would say that, the column on the left and the column on the right are the same size and width. And obviously the one in the middle is bigger so, I would say something that seems about right is, making this 30%, making this 30%.

[00:06:15] Which makes this one 40%, so this one is 40% these two are 30, cuz if this one is leading on the left I mean this column actaully ends here, right? And then this one stops here, yeah so there actually bigger than they look they just dont have that much content in them.

[00:06:31] Or they have actually one, two, three, four, five columns and these two columns are just empty spaces, that could also be the fact. But, I'm not a fan of adding empty flex columns, I don't really like doing that. It's a tactic that people use it works but that's not something I do, I'm just gonna make these bigger so, I'm just gonna make this one a width of 30%.

[00:06:58] And then as far as the controls, that'll just be in its own box right underneath and that will have a width of 40%. And then I could put in like controls here, and we'll kind of see what that looks like. So I'll go back, we'll check it out yeah, that seems about right controls are gonna start right here.

[00:07:18] They'll come mostly to the middle and then something else that other controls will go here on the right. So, that seems about right if not we'll adjust the percentages of that.