Placeholder Image

Subtitles section Play video

  • Hello.

  • I'm excited to show you this course where we're going to use the wrecked hooks to create a video player on Thomas Veil on FARC And I will be your guide in this course.

  • So what are we going to build?

  • A.

  • We're going to build this video player.

  • It's full, responsive, and we're going to create this list of videos where we can select the video.

  • Andi also have a medicine kind of night mode here if you want to shift the color for a light beam to a dark theme and we're going to use style components for all the CSS styling here, and I'm going to show you how we can use different theming and stuff like that.

  • So I'm really excited for you to see this because I love this new hooks and I also think style components is great.

  • If we go to the react site, we can read a little bit of hooks here at the time of the recording off this course, they're fairly new, so they're not an official release yet, So you have to use this Alfa build, overreact to have access to the hooks.

  • But that's okay.

  • We'll go through that in a bit.

  • We're going to install it, so don't worry about it.

  • So we're going to use the state hook and the effect took.

  • There's a lot more hooks and you can read about them here at the site.

  • You can also create your own hooks.

  • I think the fake took and the state hook are the ones you're going to use in 95% of the cases when you code, so they the most important and they will kind of replace the state in the class component and the lifecycle methods.

  • So with this once, we can have stayed on kind of life cycle methods.

  • In are functional components, there's no need to use class components and has great.

  • They also say that it's great because if you kind of knew direct, you don't have to learn all about classes and things like that.

  • You can do your stuff.

  • We just functional components, so it should have ah, less learning curve as you don't have to go that deep into JavaScript classes.

  • Well, with that said, let's go through what we're going to need to create this application.

  • We are going to use ah library cold racked player.

  • It will give us some nice functionality, like cool backs when they're playing the video and callbacks when the video has played and things like that, we could do everything ourselves in on I frame.

  • But there's a lot more coding, so it's better to use this library and have all this for free.

  • So why created from scratch when he don't need to?

  • We're also going to use as a set of style components on the style.

  • Components is really great because it's almost like creating regular components interact.

  • But you create CSS components.

  • We'll get to that when we get there.

  • I'll show you that in a later video, and we're also going to use the React router for routing or videos because if you look up here, you can see we have a unique I D for each video.

  • So if we click another one, we have a not already and we use routing for that.

  • In that way, we can just copy this link and paste it somewhere, and we'll get directly to that video.

  • So it's great if you want to share a link or something like that.

  • That's why we're using wrecked router.

  • You could do this, play without the road and just change the video here, and it will still be at the main domain here and not change the route.

  • And, of course you can starless whatever you want later.

  • Maybe there is some few things that could be better here with styling.

  • And, yeah, you decide what tastes you having what you want to do with that later.

  • Let's get on with the installing over.

  • Dependence is we need for this.

  • If we go back to Ah, Terminal, we do a CD and we have to go into our starter file's directory.

  • So make sure you, diello the start of files, and it's the folded that's cold.

  • React Hooks Video player start attend So seedy into that folder.

  • It's really important that you're in this folder.

  • You can rename it if you want.

  • It doesn't matter, but do it no.

  • Before you start doing anything and make sure you're in that fuller and then we just do them in store as this is an intermediate course, I assume you know how to use the terminal and MPM and all this stuff.

  • So if you don't, you probably should take a story course before taking this course.

  • I actually have a start, Of course, where we create a move application so you can roll it.

  • Course, if you want to learn the wrecked stuff, The basic stuff before you do this one.

  • Well, my firm just went crazy here in the computer.

  • Hope it doesn't bother you too much, so you can hear what I'm saying.

  • Let's get on with it.

  • We have to install or reacts players.

  • So we write NPM, install miners s react hopes layer.

  • Then we need to install or wrecked router.

  • And we do that by MPM in store minus s react row their dome.

  • And lastly, we need our stunt components.

  • So MPM install the miners s style components like so and press enter.

  • And that should be it.

  • We should be good to go.

  • We just take a quick look at the package.

  • Dr.

  • Jason file in the folder.

  • As I told you before, we using the 16.7 Alfa version.

  • So that's what I want to show.

  • You know, it's really important to use this version of reactor waas.

  • The hooks won't be there and it's against sea or dependencies.

  • has been installed here also, So we should be able to just write MPM start.

  • They should fire up or application here at local host 3000.

  • It should open up automatically.

  • But if it don't to go to this address here and it says, start here as we see these here, we know that are up.

  • It's working so we can start building things.

  • We can also just take a quick look at the photo structure for a project.

  • So we have Ah, as usual, we have a public folder.

  • Where are in that's docked html fatherless.

  • I've only imported a frontier from Google that we're going to use for this one on.

  • I also created this turnoff input Hayden Input Field where this is a little trick you're going to use to get access to the videos in the player.

  • We will get back to this when we get there.

  • I'll show this trick later on and we'll have the source folder there.

  • We have our indexed Octavius file and we have our components folder.

  • I created these ones for you, so they are empty now and we're going to fill this one up with code.

  • We also have a fuller called hook.

  • We're going to create a high order component.

  • I'm going to show you how the you step and wherever Containers folder with our up.

  • And this one is just the start here that we see I created this one.

  • So it just started up something here and the playlist step is empty, the playlist items see something.

  • And this one is the main component for up where most of our logical girl and I also supplied the styles for you here because I think this is a react course and not to see it says course.

  • Hey, it's kind of boring seeing me creating.

  • I'm writing CSS.

  • Ah, long time here.

  • So we're going to create maybe one or two of these when we go through the style components and the other walls, I give you for free, so you don't have to do that by yourself.

  • So I think this is it.

  • We're good to go.

  • We have our local host up and running here, and we will start scaffolding out or application in the next video.

  • All right, we're going to start scaffolding out, or components and the structure of this application so We're going to create a lot of functional components here, and we just create some basic stuff in there now, So we're going to come back to all of them and finish them later on so we can start with the W B N player doctors.

  • W beyond is short for ve been.

  • They called me away because my name is Damon Fox.

  • So this is my player I'm doing.

  • So I selected to call it W B on player.

  • You can shake a name if you don't like it.

  • I don't care.

  • So do whatever you want.

  • So we're just going to create the regular components regular, functional components.

  • So we import react from react.

  • And in this world, we're also going to need a video and a playlist because the video is the kind of window ever play the video and the playlist is to play list to the right in the application.

  • It will look at it here, where I have it.

  • No, I have a deer.

  • Yeah, So this is the playlist.

  • And here we're going to have a night more component.

  • We're going to have a head a component, and this one is also container It's the playlist items container, and this is each a playlist component off these ones here, and this is the video component we are using here.

  • Let's go back to our application.

  • So import video from Dr Forwards last video.

  • And of course, we haven't created this one's yet, So it will give us an error if we save and tried to run her application right now.

  • So bear with me will fix this in a second, and we import a playlist from this one is going to be Dr Forrest last containers on playlist because this one is a container and the other ones are just presentational components and they go outside the containers folder.

  • Then we create the const.

  • W B on player props are a function like this and also make sure you have the casing right on everything we do in this course.

  • Because I know there's a lot of people having trouble sometimes, and it's in 90% of the case.

  • It's, ah, some type error or it's the casing here that's different, and it will throw in error if you don't have the casing exactly like I write it here in the video.

  • So make sure you have everything correct and shake it twice.

  • If you've got some error when it tried lead wrong and this one, we have to have a return statement and parentheses and we're going to return the video component on the playlist.

  • We're going to change this a lot in the future videos because this is the main component.

  • Most of a logic will go here so it will grow and have a lot more code on export.

  • The fault doubly.

  • Be a player like so we can save it also.

  • Whoops.

  • We have some error here, and that's because you can't return to components.

  • We can create direct fragment here and you can just use this.

  • This is shorthand for react fragment.

  • So you can just write it like this like so we can cook.

  • But all of these code, we can move into our playlist component paste it, we import react these ones we don't need.

  • But we are going to need the playlist header import that one from dot thought forward slash playlist header like so we're also going to need a playlist items and we grab that from Dr Forward slash containers lay least items and we're going to need our night mode.

  • Also, that one regret from the thought forward slash night mode like so And this one is only going to return JSX so we can commit this once and removed the return and make it nice like that.

  • First, we have our night mode component.

  • Then we have our play least Heather, and then we have our play list items.

  • Um, there's a typing error here.

  • It should say playlist items.

  • And of course we have to rename this one also, So we call it a playlist, and that's it would say that one on we concocted this one and go to play list items pasty Cody in.

  • We can remove this one.

  • We are going to import our play list item from Dr Forward Slash play list item.

  • We can remove the night mode, and we're also going to import the high order component in this one later on.

  • But we'll save that one for a special video about this.

  • Were named this one toe play list items and exported as playlist items, of course.

  • And in this one, we're just going to return a playlist item for now, like so Eric make little nicer.

  • That would save it.

  • So this is our container components we have are up.

  • We have our playlist or play list items.

  • We have our main component to W B on player, not taste.

  • So let's move on or high or component with, say, this one for later.

  • As I said So we go to our presentation or components.

  • We can face their code.

  • We can remove all of this and remove these ones here for now and rename it to night mode like So we can just create Dave for now.

  • Here.

  • Every right light mode.

  • Say this one actually can cook this one.

  • We go to a playlist header win in this one toe play.

  • Least header.

  • That's enough for this one.

  • Also fun.

  • Also say that one and move on to our play list.

  • Items pace to code and rename me too.

  • Play list items Play list item not witness.

  • Save it and we go to a last one.

  • The video.

  • Yes, Paste it on.

  • You probably know it by now.

  • We should rename it the video look so and for this one we can also import Iraq player So import react player from react player like this, and this should be it.

  • We have all our components scaffold up now and we're going to up that yes and import W B on player from this one is just going to be one daughter and four slash w b on player on.

  • We can return that component here like so, and we save it.

  • Go back to her application.

  • And as you can see, it's working because it's showing the text we wrote in the different components.

  • So we know that our structure of working in the application in the next video we're going to finish our upto Js and talk a little about routing and react.

  • Roeder.

  • It's time to start coding our application for real on.

  • We're going to start by creating our routes.

  • We're going to need for this one.

  • So we're going to be working in the AP Top Js file for this video.

  • We need a browse around her and the routes cause we want every individual video to have a unique link so we can go directly to it in our video player.

  • So that's why we use in routes for this one.

  • Let's start off by importing everything we need from the browser router.

  • So import, browse the router and we need the road and we need a switch.

  • I re grabbed them from react rather dome.

  • We can delete this one.

  • We won't need it.

  • Instead, we create a new component called Browse our order and we wrapped everything in that component and inside.

  • We create the switch and we can start creating our first road.

  • And it's going to be on exact match with a path to the route.

  • Our components are going to be the W B M player on.

  • What this will do is when we go to the root here.

  • In my case, it's ve been factored comes less react, underscore video player.

  • It would start application from scratch.

  • So in this case, now you see it's going to another road here.

  • That's because I played a bunch of videos here and it remembers that I was on the video.

  • Seven.

  • I'm going to show this in a later video, so don't worry how we do this rotting and how it remembers where we left off the last time.

  • So this is kind off the first time when you go to the video player and haven't played anything.

  • Then it's going to stay in the route and not forward you to another video.

  • Okay, let's create another out.

  • It also going to be on exact one on the path is going to be forward slash colon active video.

  • So you probably know this as this is an intermediate course on, not a starter course.

  • So what this will do is create kind of a variable for us.

  • We call it whatever we want.

  • In this case, it's active video, and it's this idea up here by calling this one in our application, we can grab this idea up here so the component will be, yes, what is going to be the exact same component for this one?

  • And why is that?

  • Yeah, that's course.

  • We don't want to change the view here.

  • We just want to go to different videos, but have the same view.

  • So we're just using this so we can get this I d and use it in our application.

  • Makes sense.

  • I hope so.

  • One thing you also could do here is to create kind of ah, not found component.

  • I haven't done this.

  • No.

  • So if we, for example, go into another director here?

  • It won't show us anything.

  • Or if you right the wrong i d.

  • It won't show us anything either.

  • So that's kind of an exercise you can do if you want.

  • Just create another route that will fall back to a not found component when the rats don't match.

  • Okay, this is actually it for this video.

  • It's a short one.

  • And in the next video, we're going to talk about style components and how it can use them to style or applications.

  • Okay, we're going to talk a little about style components in this video and also start coding with Starr components.

  • If we first go to the style components dot com, we can check out what start components are.

  • Yeah, it's visual primitives for the component age.

  • Yea used the best bits of ear six and CSS to Styler APS without stress.

  • That sounds wonderful.

  • You should also know that there's different opinions about start components and what you should use creating react applications for you.

  • Maybe should u CSS more jewels or regular CSS.

  • I happen to like start components, and I wanted to try using it in this course.

  • Hope you like it.

  • If you don't like it, you can, of course, implement another styling for your application.

  • You can read everything about it here, and I suggest you do it.

  • If you're interested in you, start components in the future.

  • The basic Adi here is that you create components with your style's so you can use the stars Justus Regular React components.

  • If we look at the basic instructions here, we have to import style for style components.

  • We've already installed style components.

  • We did that in the first video with the Empire in Stall Command.

  • And then you create these cons and call it whatever you like.

  • It will be a component to use for you later on, and then you create a stylus.

  • Regular CSS.

  • So the only thing you may be wondering about here that these back ticks and it's called a tag template literal.

  • You can basically invoke function with back ticks instead off parentheses, and they write all about it here.

  • And this is not, ah, star components specific.

  • It's in year six javascript.

  • So you have to look this up if you don't know what this is.

  • So I suggest you do that also, if you're interested in learning more about your six and JavaScript and as you see the writer style inside of these back ticks and it will create a component for us to use in our code.

  • And that's the basics of style components, and we're going to go to our code editor and start coding or first start component.

  • If we take a look at our starter files, you have a director court STAIs.

  • I choose to separate this out from the main components and have them in their own file, and there's also different opinions about this.

  • Some like to have them in their components directly, but I think it's nice to do like this to kind of separate them in their own files.

  • But if it's a large, application may be good to have it in their own components.

  • So you know exactly where you have the styles for your component.

  • As always, do as you want.

  • I choose to do it this way because I like it, and I think it's fitting for this application and this course, all right, you're going to work in the act of Js file this time also, and We're also going to work with a global style doctor.

  • Yes, in the Styles folder.

  • Because now we're first going to create the global stars for the whole application.

  • If we look at the global style dot Tess, I already provided these for you.

  • We're going to delete it now.

  • If you don't want to do this, if you don't want to create CSS and if you don't want to do all these things would start components.

  • You can just keep this because this way, you can just import these in the components later as we going to do.

  • And you don't have to write your CSS at all.

  • So they let these ones and we start writing some code here again.

  • So we import something called Create Global Styles from Styled components.

  • And this is something as it says we can use to create the global stars.

  • It's in the star components library.

  • So we use this one's when we want to create global styles.

  • Then we create the constant we can call it whatever we want, and I want to call it global style for this one.

  • Then we use create global style.

  • It shouldn't be s there it should just say create global Start.

  • Then we create back ticks on inside these back ticks.

  • Rewrite or CSS.

  • First, we want to set our box sizing to board a box in the whole application.

  • Then we have our body and we set a phone size to 10 pixels.

  • And with that, our front family too.

  • Hinde sounds serious.

  • And this is the one I imported in the index from the Google fonts.

  • And this is it for a global styling.

  • We just have to export this one export default global start like this.

  • Well, save it.

  • And as I said, this is take sack code as we just deleted.

  • I just wanted to provide you with these if you don't want to do all this so we go back to her act of gas, we have to import our global style that we just created Global Star from We grab that from Dr Forward Slash tiles Global style.

  • Now we can use it in this component.

  • And how do we apply the global style to our application?

  • Well, it's really easy, actually, In this case, we just create the component called Global Style like so and this will apply the global style to our application.

  • And as you can see, we have an arrow now.

  • And that's because, as it says, the road may well have won Charl element.

  • So we'll wrap this one's in fragment like So you see that the font size is less now, so we know that the global stars are kicking in and this is it.

  • This is how we apply global styling with Starr components.

  • In the next video, I'm going to show you how to do the styling for the individual components.

  • We've finished our global styling, and we're going to continue do some regular components starting in this video.

  • So if we go into the Styles folder and into the style playlist, we're going to create the style component for the playlist.

  • So as before, delete this one and we're going to write it from scratch.

  • First, we import style justice before from styled components.

  • Then we create a constant called styled playlist on an equal sign on style dot dave.

  • And if this, for example, should be an input books, we just write input like this, or if you can have what element you want here.

  • So in this case, it's going to be a div.

  • So we used to do it here and now.

  • It's just regular CSS here, So not that funny, but we have to do it.

  • So it was set of flicks 21 don't know if we need to have these vendor prefixes here, but to be sure I put them in.

  • So we're creating a flex box here just for centering things in a nice way.

  • If you're not familiar with flex books, I recommend looking it up.

  • It's really nice on you.

  • It's much easier to center things on the vertical center on horizontal center and lining your items.

  • And we have a color off white for that one.

  • And also, if you're going to have some other classes and things, maybe, for example, you want to have some styling for different view ports and some responsive styling.

  • You just write it below here, and you can have what classes you want.

  • It's just regular CSS, so you can name some class and you just do like this and write your CSS in here.

  • It just have to be inside his back ticks.

  • So, for example, you don't want to create a component for every little class you have.

  • In this case, we don't have other classes.

  • We have one media query that we're using for the responsive functionality.

  • So we write me the ah screen on DDE Max with off 1400 pixels.

  • We have a width of 100% on display block, and finally we just export this one.

  • Also, export default styled playlist like so And this is it.

  • This is the style for the playlist.

  • We saved this one on.

  • We go back into our playlist Doctor's file.

  • First we import our newly created styled playlist from Dr Ford Slash stars Child playlist like so And then, instead of this fragment here, we can just wrap it in the stalled playlist like so.

  • And if we take a look here, we can see that it's not showing the everyone's here, and that's because they want it.

  • Now we're using a white color in the playlist, but they're there, so don't worry.

  • It will look a lot better soon.

  • Right now it's looking Tragical is sad, but we're going to fix this, and we're going to do one more just to make some exercising this one.

  • So if we go into our style.

  • The playlist items in the styles folder Justice before delete this one.

  • I think it's good to repeat things because that where you learn a lot faster and maybe it's boring and you already have this code as a Stoller, you can just save it and let it be.

  • But I highly recommend that you do like this and repeat it and just write it because your brain will learn a lot more if you write it down yourself.

  • So imports style from style components.

  • Again, we create the CONST called Styled Play List items, and we write style dot Dave.

  • This is Dave also, and we do too back ticks, and we're going to write the CSS.

  • Between these back ticks on, we have a padding 0 20 pixels, zero and 20 pixels.

  • Actually, we can do like this like so that's the short term for that one.

  • We have an overflow.

  • Why order?

  • We have a height.

  • Oh, went eight v w max heart off 500 pixels.

  • Right?

  • Then we're going to do some Trixie to style or a scroll bar.

  • And we have to do some Web kid stuff here.

  • So Coghlan Coghlan Web Kid Gold Bar We want with Off five Pixels Coghlan, Coghlan, Web Kit, Scroll, Bar Trek and we set the Background too transparent on.

  • We have a Web kit scroll Bar Thumb where we want our background.

  • Toby 888 and our border radios.

  • Two pixels on the last one.

  • Coghlan Coghlan Web Kit Scroll bar Thumb on Over on.

  • We want a background to be a little darker.

  • Who was that?

  • That 1 to 555?

  • That's it, then export default styled latest items and we say this one.

  • So I hope you've got to flow here.

  • Now.

  • We just import start and we create the constant name it whatever you want.

  • This is not something specific to start components or reactor.

  • Anything you can call it whatever you want, and we create our CSS inside these back ticks here.

  • As I said before, this is the element you want to create a star component, for it can be whatever age Demel element you born.

  • So in this case, it's a deep.

  • We go into our play list items.

  • Doctor.

  • Yes, we import styled play list items from dot thought forward slash styles and styled playlist Islands like so And then we can wrap this component in or styled playlist items.

  • Then we save it and we have some error here.

  • Model not found.

  • Okay, there must be some mis spelling here from my side.

  • Off course.

  • This one shouldn't be there.

  • It should be right there instead.

  • Bad mistake by me, but alright, that's Cody.

  • You know, try help now or the time I know it should work again.

  • Still not showing anything exciting here, but it will soon get more exciting, I promise.

  • Okay, We can do one more thing here before we finish off this video, We're going to go into our play list item doctors, not items within us Play list item Doctor.

  • Yes, for this one, we're not going to create the whole CSS for this one.

  • We're just going to import it here.

  • Import styled play list Item from dot for a slash styles styled play list item like so.

  • And as you can see here, if we just check the CSS file playlist item.

  • You see, it's a lot off CSS code here, and we don't have to write all these now.

  • It's kind of a boring the one thing you can notice here is the special where we use props here to change different values on the properties of the CSS.

  • And we're going to talk this in the next video when we go through the theming with Starr components.

  • So don't worry.

  • So go back into our play list item and instead off the deal, we just wrap this with styled playlist Item like so and save it.

  • Still not showing up anything here.

  • But it will soon.

  • All right.

  • So far, so good.

  • This is the last video in setting up the style components to be used in our application.

  • We're going to talk a little about theming and how we can use it to have different themes in a rap.

  • So let's get started here.

  • We're going to be mostly in R W B M player Doc Js file, so make sure you navigate into that component style components have something called a theme provider, and we can use that to switch different themes in our application, and also we can use it to sort of set up different properties that we're going to re use somewhere in our styles.

  • It's really convenient if you're, for example, have some predefined colors.

  • Then you can just use those colors by fetching the props for your component, because the theme provider will make sure that the theme get passed down by props to your component.

  • So, first of all, make sure we import our theme providers, so import theme provider from style components.

  • So we're going to create our theme snow.

  • First of all, we'll have a regular theme.

  • We call that theme.

  • It's just a regular object here.

  • You can see we create the constant name theme, and it's a regular JavaScript object.

  • So have a beady color off.

  • 353535 We have a beady color item.

  • That one will be 414141 look.

  • So we have a beady color item active, and that one is going to be 45 c 63 whips.

  • There's something wrong here.

  • Of course there should be comas.

  • Hear us.

  • It's an object.

  • Beady color played.

  • That one is going to be 5 to 6 D for E.

  • On.

  • We have a border is going to be none on.

  • We have a border played and it's going to be Nun also, and we have a color that is going to be white.

  • So said that to F f f.

  • All right, that's our theme a bit.

  • And then we're going to create another theme or it's the object for the light theme so we can just cook to this one and right below it we paste it and we call that theme life on.

  • We're going to change some value.

  • See, So we set the beady color to FFF white.

  • We also said the BT colorize them to what we said to be the color item Active to 80 a seven b one.

  • We set our B.

  • Tikolo played to 79 979 really innovative numbers here and you can, of course, style it like whatever you like.

  • For this one, we're going to have a border or one picture solid on the collar off.

  • 3535 and 35 on border played.

  • It should say border played there, so make sure you change this in both of the themes border played and that should be none.

  • There on the color for this one should be 353535 like so So this is our objects with all the different theming styles.

  • And we have this thing provided that we imported from style components.

  • We can use this one.

  • Let's go down here to our return statement.

  • And first of all, we're going to wrap everything in our theme provided.

  • So make sure you move it inside the theme provider like so then we're going to send in our themes.

  • So we have the theme and we're going to set the theme based on our button.

  • If you look here, we have this night mode button here.

  • So our theme is going to be based on how we're set this button state.

  • So we grab that one from ST Night Mode and this is a Turner operating here.

  • So if the state night mode is true, we're going to grab the theme cause that's the night mode.

  • Otherwise, we're going to show the theme light like so And of course, this won't work.

  • No, cause we have no state yet and we haven't fixed all other things.

  • So it will throw narrow now and we're going to replace his fragment here with or w B on player Stiles first, of course, were too important, so we grabbed him from imports style W B M player from dot, dot forward slash styles styled W B and player like so and now we can use it.

  • So we replaced the fragment with style W B and player.

  • All right, we have wrapped everything we return, you know, theme provider, and we have provided the theme based on the state on our night mode bottom.

  • We also have created a style for the player component here.

  • So if we go into our styles folder and style w, B and player and this is so we can access the values in the two themes we created in the component so we can get again, delete all of this and we're going to create it from scratch on we import style from style components justice.

  • Before on we create the cost of style w B n player and were you styled that we imported?

  • And it's a deal this time also create to back ticks and we write our CSS inside of these back ticks destined before, So our background are going to be based on if we have the light or dark thing, and how do we access this well in or w B on player that, yes, we used these theme provider and supply the theme.

  • That means we now have a prop that's named Theme, and we can access all of these values in this prop.

  • So we go back to our style style w B and player doctor.

  • Yes, and for a background we grab or Prock, we do that by dollar sign and curly brackets.

  • We grab or props and we grab it from props dot theme beady color Justus.

  • We named it in these components here.

  • So this is the one we're grabbing.

  • Based on what theme we are using light or dark, we do the same with our border or perhaps arrow function.

  • We grab it from props, theme on border andare wants or just regular CSS.

  • So we have a max with off 1800 pixels.

  • We have a margon off Sierra and order We display it as a flex box Web kid box M s Flex Books on display Flex.

  • We have a flex direction over row A max height off 863 pixels.

  • We have a transition all syrup on five seconds and east, like so then we have a media career here for our responsiveness.

  • So we have media screen on DDE Max with off 1400 pixels we display look and max heart off 10,000 pixels.

  • Well, this is C.

  • S s.

  • So you have to You can try it yourself and see what all these values does to the app and rules have to export this one.

  • So export default styled w beyond player that so and save it And that's it.

  • That's so you use themes would start components.

  • One more thing we're going to do in these videos we're going to connect our different style sheets here with our components.

  • So we go through all of our components here in our app.

  • We've already all the starships we need Here we have the global style and the styles for the individual component in our play list.

  • We also have all styles, you know, play list items.

  • We also have our styles in our double B on player.

  • We have all our styles in the night mode, Doc.

  • Yes, we go into import or star sheet for that one.

  • So we import styled knight mode from 0.4 slash styles tiled night mode there.

  • Uh, we're up this one with the style night mode instead.

  • Like so.

  • And actually we can just finish this one.

  • As we hear we have a span and we write nice mode under cold on.

  • Then we have a label with a class name off switch.

  • Then we have an input with the type of shit books we set the shipped to night mode.

  • We've set the on change to a callback function that we call night mood Cool back.

  • And that's before these are not going to work now because we haven't created this one's yet.

  • We have another span with a class name off slider round.

  • We can just destructor to props here.

  • Also, we have a night mode cold back on.

  • We have a nice mode, and that's it for this component on.

  • We're going to create this one's in a later video.

  • So don't worry.

  • Save this one, okay?

  • We have a few more components left that we're going to import or styles for, So we're going to her place headed up J s and we import or styled playlist heather from dot forward slash stiles Stiles playlist header like so and then we import or styled journey from don't force last styles stalled during it and this is also quite a small components.

  • I think we can finish this off right now.

  • We have our style playlist header Wrap it in that one.

  • Then we have a p tag on grab that from a probe called active dot title.

  • Then we have our style journey and also from the active prop we grabbed a numb on.

  • We have a ford slash and we have a total look.

  • So and this is it for this one on these ones.

  • Here it is.

  • What you see here, This is the Dorner.

  • We have the active video and the total video.

  • And this is the title of the active video.

  • That's the ones who goes here.

  • Weaken destructive the props for this one.

  • Also the active and the total like so So it's nice and clean.

  • Then we go to your play list item no chaos.

  • We already have imported or stars for that one.

  • But we can finish this component off.

  • Also on for this one, you can see it was sending in some props to ascending the active on descend into played like.

  • So we destructed the props.

  • We have the video, we have the active and we have two played.

  • So if we go and check our starships with this one style play list item, you can see that the props with Sandy and we're using them here also, just as we did before with the theme ing.

  • So we have these props accessible for us, and we can change the CSS based on the props.

  • It works the same way as I showed you before you were the theme.

  • And here we also have the props that's called active and also the props that's called Played.

  • We're changing the visual over player based on the active video, and if it's played or not, that's this one here.

  • It's the green dot here that's going to show up.

  • You can check those CSS falls out.

  • As I said before, this is not the CSS course.

  • It's a react course, so I'm not going to go through all of the CSS.

  • The most important thing here is that you can use props like this with the style components, so I suggest you can go through them and see how I've done it.

  • here we go back to a place that item doctors and finish this one off.

  • Also, first we have a deal with the class.

  • Name off W B M Player on the score.

  • Underscore video minus number on We have the video and numb for that one can actually cook.

  • But this one here and this one is going to have class name of video name, and this one is going to have video time.

  • And here we grab the video title.

  • Honey, we grabbed the duration like so And this is, of course, these ones here in each item that we were setting up here.

  • So say that one and we have the last one to go.

  • And that's our video.

  • We imports tiled video rapper from not forward slash Styles style video rapper and we import style video from dot forward slash styles Styled video like so I actually think we're going to finish this one off also.

  • And we're going to talk more about these components later on when we are assembling the video player with these components so ever proper active, we have an order play, we haven't end call back, and we have a progress call back.

  • We changed this one to start video.

  • And inside of this one, we have a style video rapper, like so and or wrecked player goes inside these ones Direct player or the one that we imported here and also installed with an PM earlier.

  • So this one will take a few props.

  • We have a with 100%.

  • We have a height off 100%.

  • We do some inline styling here with this one.

  • It's just a small, small adjustment here.

  • We have a position.

  • Oh, absolute on Took off zero.

  • Then we have playing.

  • We're going to grab that from the prop out of play.

  • We have the controls set, the true.

  • We want to show the controllers in the video.

  • You can change these ones if you want.

  • We have a neural off active doc video on and did.

  • We're going to create on end call back, and we haven't on progress.

  • Call back also.

  • And these ones are defined in the react player.

  • So we're just using them as they say.

  • You should use them.

  • We have to close this one also.

  • And this is it for a video.

  • As I said, we're going to talk more about this later on, but I thought we could finish them as well already here now, First of all, we're going to correct some little type error idea in the last video.

  • Maybe it's so it already dance.

  • We have corrected it.

  • But in the playlist Header Dr Darius and where we destructive the props, it should say Total.

  • Not till told Toe talked is the Swedish word for Total.

  • So maybe it was that who made me misspell it.

  • So all right with that said, I thought we were going to create some hooks by now, but I think it's better if we in this video just finish off or components.

  • So when we start creating the hooks in the next videos, it's better to have a working app and not this kind of failed to compile thing here and a broken application.

  • So if we fix this once in this video, we are goingto at least have something showing here when we create the state hook in the next few videos.

  • So let's get on with it.

  • We can start.

  • We have the playlist on the playlist, items left, so in the playlist, go into the playlist, Doctor.

  • Yes, And first we can destructor the props we're going to need.

  • And we have some videos.

  • We have the active, we have the night mode call back and we had a night mode like so and four on night mode component we're going to send in the night mode.

  • Colback look so and we also have the night mode prop like so or Playlist Header are going to get the active prop and a total prop and we grabbed it from videos length, time warp.

  • Latest items are going to get the videos on active also like so and we're going to come back to these props on what they are.

  • So say this one and we continue on to our play list items.

  • Doctors first we destructed, props on.

  • We have videos on.

  • We have the active for this one on.

  • We can delete this one because in the style playlist items, we have this list off different videos.

  • So we have to look through this list and create all the items, and we do that by grab our videos and map through them.

  • We have a video and an arrow function that inside here we are going to return or play list item and it's going to have some props.

  • It's going to be the key.

  • We always had to have the key.

  • When we mapped through something, we had a video.

  • We have the active on here.

  • We're going to shek.

  • If the active idea is the same as the video I D.

  • And then we set active True.

  • Otherwise we'll set them to force that way we know which video that is active.

  • So we have the video I d and we check if that's equal to the active I d.

  • And then we said it's true.

  • Otherwise we'd said it.

  • The falls we set played to video dot played and we close it like so and this is it for this one on.

  • The last thing we have to do here is to kind of assemble everything in the w B on player dot Yes, and we're also going to create empty callback functions just so we don't get an arrow because they don't exist and then we're going to fill them out and create them in a later video.

  • If we go into our component, we can create a contest no mode.

  • Cool back.

  • And this is just an empty arrow function we doing here now?

  • Then we create another one that's cool and cool back.

  • Like so on.

  • The last one is going to be progress call back.

  • And for now, they at least exists.

  • So we don't get a narrow thrown at us.

  • And in our return statement here we are going to do some coding also.

  • So first, what we want to do is to shake if we have videos in our state, the state, we haven't created that yet.

  • We going to do that in the next videos.

  • So we're just preparing it here, so it will work for us later on.

  • So we checked the video.

  • Sory isn't No.

  • And if not, we're going to return all this right under here.

  • We create the closing parenthesis and no, we have videos.

  • We're going to return the player.

  • Otherwise we return nothing.

  • We return.

  • No.

  • Now you have a closing colon bracket there.

  • Also, we can do like this, and then we have to send in the props to the video on the playlist.

  • So in our video, we're going to send in an active prop we're going to grab that from or state that we're going to create later.

  • So we have a state of active video.

  • We have the order play prop on re grab that from ST Autoplay.

  • We have the end call back, and that's the one we've created up here, like so.

  • And we have our progress call back.

  • And us, of course.

  • Is this one like so on?

  • Of course, this shouldn't be there.

  • So remove this one.

  • We have it down here on our playlist are going to receive some props as well.

  • For this one, we have the videos.

  • We grabbed them from state or videos.

  • We have the active.

  • We grabbed it from ST Active video.

  • We have the night mode called back and that one we grabbing from off course not mode.

  • Colback and I spelled it wrong.

  • Also, this shouldn't be too cease to remove the seas and just have one in that one.

  • And we have the night mode and it's going to be from ST Night mode like so.

  • And this should be it.

  • We should be good to go.

  • What's happening here?

  • Well, we're going to create a state with hooks in this functional component, and we have our video.

  • That's this one, and we have a playlist components.

  • So in our video, we grabbed from our state the active video we grab.

  • If it's older playing and we grab or and call back on or progress call back, these ones are going to be sent into the video component.

  • So have the active order play and called back and progress call back here in our video, and we're using them to control the video.

  • Then we have our playlist.

  • And for a playlist, we have to have some videos, and we want to show if it's the active video and we also have a nice mode call back on a night mode if it's true or force.

  • And this one as a shoulder is the bottom for night mode, and here is our items in the list.

  • So in our playlist we have or props that was sent in from W.

  • B on player, and we use them in our playlist component with sending or call back for the night mode and the night mode.

  • If it's true or false on the playlist, Heather are receiving the active video, of course, It's the active video we're showing here.

  • It also receives the total amount of videos in our list.

  • Of course, we're going to need it here as we displaying the total and what video we're on in th

Hello.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it