hello i'm excited to show you this
course where we're going to use the
react hooks to create a video player i'm
thomas webenfalk and i will be your
guide in this course
so what are we going to build here we're
going to build this video player it's
fully responsive and we're going to
create this list of videos where we can
select the video and also
i made this kind of night mode here if
you want to shift the color for a light
theme 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 you can use different theming and
stuff like that so i'm really excited
for you to see this because i love these
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
of this
course they're fairly new so they're not
in the official release yet so we have
to use this alpha build of react to have
access to the hooks
but that's okay we'll go through that in
a bit we're going to install this so
don't worry about it
so we're going to use the state hook and
the effect hook 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 effect hook and the state
hook are the ones you're going to use in
95 of the cases when you code so
they're the most important and they will
kind of replace the state in the class
component and the life cycle methods so
with this ones we can have state and
kind of life cycle methods in our
functional components there's no need to
use class components and that's great
they also say that it's great because if
you're kind of new to react you don't
have to learn all about classes and
things like that you can do your stuff
with just functional components
so it should have a 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 a
library called react player it will give
us some nice functionality like
callbacks when playing the video and
callbacks when the video has played and
things like that we could do everything
ourselves in an iframe but there's a lot
more coding so it's better to use this
library and we have all this for free so
why create it from scratch when you
don't need to
we're also going to use as i said the
style components and the style
components is really great because it's
almost like creating regular components
in react but you create like 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 our videos
because if you look up here you can see
we have a unique id for each video so if
we click another one we have another id
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 react router you
could do this player without the router
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 style this whatever you want
later maybe there is some few things
that could be better here with the
styling and yeah you decide what taste
you have and what you want to do with
that later
let's get on with the installing of our
dependencies we need for this if we go
back to our
terminal we do a cd and we have to go
into our starter files directory so make
sure you download the starter files and
it's the folder that's called react
hooks video player start at the end
so cd
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 now
before you start doing anything and make
sure you're in that folder and then we
just do an npm install
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
starter course before taking this course
i actually have a starter course where
we create a movie application so you can
enroll that course if you want to learn
the react stuff the basic stuff before
you do this one
well my fan just went crazy here on the
computer i hope it doesn't bother you
too much so you can hear what i'm saying
well let's get on with it we have to
install our react player so we write npm
install
minus s react
oops player
then we need to install our react router
and we do that by mpm install minus s
react
router
dom
and lastly we need our stun components
so npm install minus 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.json file in the folder
as i told you before we're using the
16.7 alpha version so that's what i want
to show you know it's really important
to use this version of react otherwise
the hooks won't be there
and as you can see our dependencies has
been installed here also
so we should be able to just write npm
start
and this should fire up our application
here at localhost 3000
it should open up automatically but if
you don't so go to this address here
and it says start here as we see this
here we know that our app is working so
we can start building things so we can
also just take a quick look at the
folder structure for our project so we
have as usual we have a public folder
where our index.html file is i've only
imported a frontier from google that
we're going to use for this one
and i've also created this kind of input
hidden 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'll get
there i'll show you this trick later on
and we also have the source folder there
we have our index.js file and we have
our components folder i've created these
ones for you so they are empty now and
we're going to fill these ones up with
code we also have a folder called hook
we're going to create a high order
component i'm going to show you how to
use that
and we have a containers folder with our
app 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 stamp is empty the playlist
items is empty and this one is the main
component for the app where most of our
logic will go
and i also supplied the styles for you
here because i think this is a react
course and not the css course it's kind
of boring seeing me creating i'm writing
css a 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 ones i'll 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 can start scaffolding out
our application in the next video
all right we're going to start
scaffolding out our components and the
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 wbn player.js
wbn is short for weben they call me
vegan because my name is bayman falk so
this is my player i'm doing so i
selected to call it wbn player you can
change the name if you don't like it i
don't care so do whatever you want
so we're just going to create regular
components regular functional components
so we import react
from react
and in this one we're also going to need
a video and a playlist because the video
is the kind of window where we play the
video and the playlist is the playlist
to the right in the application if we
look at it here
where do i have it
no i have it there
yeah so this is the playlist and here
we're going to have a night mode
component we're going to have a header
component and this one is also container
it's the playlist items container and
this is each a playlist component of
these ones here and this is the video
component we are using here let's go
back to our application
so we import
video from
dot dot forward slash video and of
course we haven't created these ones yet
so it will give us an error if we save
and try to run our application right now
so bear with me we'll fix this in a
second
and we import the playlist
from and this one is going to be dot dot
forward slash containers
and 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 wb and player
props
on our 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 ninety
percent of the case it's uh some type
error or it's the casing here
that's different and it will throw an
error if you don't have a casing exactly
like i write it here in the video so
make sure you have everything correct
and check it twice if you got some error
when you try it later on
and this one we have to have a return
statement and parenthesis
and we're going to return the video
component
and the playlist
we're going to change this a lot in the
future videos because this is the main
component most of our logic will go here
so it will grow and have a lot more code
and we export
default
wb and player like so
and we can save it also
whoops we have some error here
and that's because you can't return two
components we can create a react
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 copy all of this code
we can move into our playlist component
we paste it we import react
these ones we don't need but we are
going to need the
playlist header
and we import that one from dot dot
forward slash playlist header
like so
we're also going to need a playlist
items
and we grab that from dot dot forward
slash containers
play list items
and we're going to need our knight mode
also
and that one we grab from dot dot
forward slash night mode like so
and this one is only going to return jsx
so we can
omit these ones and remove
the return
and make it nice like that
first we have our night mode component
then we have our play list header
and then we have our play list items
and there's a typing arrow here it
should say playlist items and of course
we have to rename this one also
so we call it playlist
and that's it we save that one
and we can copy this one
and go to playlist items
paste the code in we can remove this one
we are going to import our playlist item
from
dot dot forward slash playlist item we
can remove the night mode and we 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
we rename this one to play list items
and export it as playlist items of
course
and in this one we're just going to
return a playlist item for now
like so
and we can make a little nicer
then we save it so this is our container
components we have our app we have our
playlist our playlist items we have our
main component to wb and player.js so
let's move on or high order component we
save this one for later as i said so we
go to our presentational components
we can paste our code we can remove all
of this
and remove these ones here for now
and rename it to night mode
like so and we can just create
a div for now here and we write night
mode
save this one and actually we can copy
this one we go to our playlist header
rename this one
to play
list header
and that's enough for this one also for
now so save that one and move on to our
playlist items
paste the code
and rename it to
play list items
playlist item
not with an s
save it
and we go to our last one the video.js
paste it and
you probably know it by now we should
rename it to video
like so
and for this one we can also import our
react player so import
react player from
react player like this
and this should be it we have all our
components scaffold out now
and if we go into our app.js
and import
wbn player
from and this one is just going to be
one dot and forward slash
wb and player
and we can return that component here
like so and we save it
go back to our 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 are working in the application
in the next video we're going to finish
our app.js and talk a little about
routing and react router
it's time to start coding our
application for real and 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 app.js file for this
video we need a browser router and the
routes because 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're using routes for this
one
let's start off by importing everything
we need from the browser router so
import
browser router and we need the road and
we need a switch
and we grab them from
react router dom
we can delete this one we won't need it
instead we create a new component called
browser router and we wrap everything in
that component
and inside we create a switch
and we can start creating our first
route and it's going to be an exact
match with a path
to the route
our component
are going to be the wbn
player
and what this will do is when we go to
the root here
in my case it's vapenfuck.com react
underscore video player it will start
the application from scratch so in this
case now you see it's going to another
route here that's because i played a
bunch of videos here and it remembers
that i was on the video 7. i'm going to
show you this in a later video so don't
worry how we do this routing and how it
remembers where we left off the last
time
so this is kind of the first time when
you go to the video player and haven't
played anything then it's going to stay
in the root and not forward you to
another video
okay
let's create another route it's also
going to be an exact one and the path is
going to be forward slash colon
active video so you probably know this
as this is an intermediate course and
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 id up
here
by calling this one in our application
we can grab this id up here
so the component
will be guess what it's going to be the
exact same component for this one and
why is that yeah of 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 id and use it in our
application
make sense i hope so
one thing you also could do here is to
create kind of a not found component i
haven't done this now so if we for
example go into another directory here
it won't show us anything or if you
write the wrong id 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 rods
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 we can use them to
style our applications
ok we're going to talk a little about
style components in this video and also
start coding with style components
if we first go to the
stylecomponents.com we can check out
what star components are and yeah it's
visual primitives for the component age
yeah
use the best bits of es6 and css to
style your apps without stress that
sounds wonderful you should also know
that there's different opinions about
style components and what you should use
creating react application or you maybe
should use css modules or regular css i
happen to like star components and i
wanted to try using it in this course i
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 your style components in the future
the basic idea here is that you create
components with your styles so you can
use the styles just as regular react
components
if we look at the basic instructions
here we have to import style from style
components we've already installed style
components we did that in the first
video with the mpm install command and
then you create
this cons and call it whatever you like
it will be a component to use for you
later on
and then you create your style as
regular css
so the only thing you may be wondering
about here that these backticks and it's
called a tagged template literal you can
basically invoke function with backticks
instead of parentheses and they write
all about it here and this is not a
star component specific it's in es6
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 es6
and javascript
and as you see we write a style inside
of these backticks 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 our first style
component
if we take a look at our starter files
you have a directory called styles i
chose 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 component 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 it 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 we're going to work in the
app.js file this time also
and we're also going to work with a
globalstyle.js
in the styles folder because now we're
first going to create the global styles
for the whole application
if we look at the globalstyle.js 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 with star components you
can just keep this because this way you
can just import these in the components
later as we're going to do and you don't
have to write your css at all
so delete 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 a global styles it's in
the star components library
so we use these ones when we want to
create global styles
then we create the const 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 an s there it should just
say create global style
then we create backticks
and inside these backticks we write our
css
first
we want to set our box sizing
to border box in the whole application
then we have our body
and we set our font size to 10 pixels
and we set our font family to
hindsense serif
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 style like this
we save it and as i said this is the
exact 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 our app.js
we have to import our global style that
we just created
globalstar from we grab that from dot
dot forward slash
tiles
global style
and now we can use it in this component
and how do we apply the global style to
our application well it's fairly 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 error now
and that's because as it says the rotor
may only have one shell element so we'll
wrap this once in a
fragment
like so
you see that the font size is less now
so we know that the global styles are
kicking in
and this is it this is how we apply
global styling with style 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 to do some
regular component styling in this video
so if we go into the styles folder and
into the styled 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 just as before
from styled components
then we create a const called styled
playlist
and an equal sign and style.div
and if this for example should be an
input box
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 use the div here
and now it's just regular css here so
not that funny but we have to do it
so we set a flex
to one
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 flexbox i
recommend looking it up it's really nice
and you it's much easier to center
things and vertical center and
horizontal center and aligning your
items
and we have a color of 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 viewports 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 these backticks 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 media
screen
and
max width
of 1400 pixels
and we have a width of 100 percent
and display
block
and finally we just export this one also
export default
style playlist like so and this is it
this is the style for the playlist
we save this one and we go back into our
playlist.js file
first we import our newly created styled
playlist
from
dot dot forward slash styles
style the playlist like so
and then instead of this fragment here
we can just wrap it in
the styled playlist
like so
and if we take a look here we can see
that it's not showing the other ones
here and that's because they're white
now
we're using a white color in the
playlist but they dear so don't worry it
will look a lot better soon right now
it's looking tragically sad but we're
going to fix this
and we're going to do one more just to
make some exercise in this one so if we
go into our styled playlist items in the
styles folder
just as before delete this one
i think it's good to repeat things
because that way you learn a lot faster
and maybe it's boring and you already
have this code as i told you 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 import style from
style components again
we create the const called styled play
list items
and we write styled dot div this is a
div also and we do two backticks
and we're going to write a css between
these backticks and we have a padding
0 20 pixels 0 and 20 pixels actually we
can do like this
like so that's the short term for that
one
we have an overflow
y of order we have a height
of 28
vw
a max height
of 500 pixels
right then we're going to do some tricks
here to style our scroll bar and we have
to do some webkit stuff here so colon
colon
webkit
scroll bar
we want a width
of 5 pixels
colon colon
webkit
scroll bar track
and we set the background
to transparent
and we have a webkit
scroll bar thumb
where we want our background
to be
888
and or border radius
2 pixels
and the last one colon colon
webkit
scroll bar
thumb
and hover
and we want a background to be a little
darker so we set that one to five five
five
that's it then we export
default styled playlist items
and we save this one so i hope you got
the flow here now we just import styled
and we create the const we name it
whatever you want this is not something
specific to style components or react or
anything you can call it whatever you
want and we create our css inside these
backticks
here as i said before this is the
element you want to create the style
component for it can be whatever html
element you want so in this case it's a
div we go into our playlist items.js
we import
styled play list
items from
dot dot forward slash styles
and styled playlist items
like so
and then we can wrap this component in
our
styled playlist items
and we save it
and we have some error here module not
found okay there must be some
misspelling here from my side
of course this one shouldn't be there it
should be right there instead
bad mistake by me but all right that's
coding you know trial and error all the
time and now 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 playlist
item.js not items with an s playlist
item.js
and for this one we're not going to
create the whole css for this one we're
just going to import it here
import style play list item from dot
forward slash styles styled playlist
item
like so
and as you can see here if we just check
the css file playlist item you see it's
a lot of
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 this
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 style
components so don't worry so go back
into our playlist item
and instead of a div we just wrap this
with
styled playlist item like so and save it
still not showing up anything here but
it will soon
alright so far so good this is the last
video in setting up the styled
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 our app so let's get
started here we're going to be mostly in
our wbn player.js file so make sure you
navigate in to 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
reuse somewhere in our styles it's
really convenient if you 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 provider so import
theme provider
from
style components
we're going to create our themes now
first of all we have a regular theme we
call that theme
it's just a regular object here you can
see we create a const named theme and
it's a regular javascript object so we
have a bd color
of three five three five three five
we have a bd color
item
that one will be four one four one four
one like so
we have a bd color item active
and that one is going to be
45 c63
whoops there's something wrong here of
course there should
be comas here as it's an object
bd color played and that one is going to
be 5 2
6 d 4e and we have a border it's going
to be none and we have a border played
and it's going to be none also
and we have a color
that is going to be white
so set that to fff
all right that's our theme object and
then we're going to create another theme
object it's the object for the light
theme so we can just copy this one
and right below it we paste it and we
call that
theme light and we're going to change
some values here so we set the bd color
to fff white
we also set the bd color item to white
we set to be the color item active to
80a
7b1 we set our video color played to 7d
9979
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 of one pixel solid
and a color of three five three five and
three five
and border played
it should say border plate there so make
sure you change this
in both of the themes border plate and
that should be none there
and the color for this one should be
three five three five three
five like so
so this is our objects with all the
different theming styles and we have
this theme provided that we imported
from style components so 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 provider
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
have set this button state
so we grab that one from state night
mode
and this is a ternary operator here so
if the state night mode is true
we're going to grab the theme because
that's the night mode otherwise we're
going to show the theme light
like so and of course this won't work
now because we have no state yet and we
haven't fixed all other things so it
will throw an error now and we're going
to replace this fragment here with our
wb and player styles first of course we
have to import them
so we grab them from import style wbn
player
from dot dot forward slash styles styled
wb and player like so
and now we can use it so we replace the
fragment with styled wb and player
alright we have wrapped everything we
return in our theme provider and we have
provided the theme based on the state on
our night mode button
we also have created a style for the
player component here so if we go into
our styles folder and style wb and
player and this is how we can access the
values in the two themes we created in
the component
so we can yet again delete all of this
and we're going to create it from
scratch and we import styled from style
components just as before
and we create a const of style wbn
player
and we use style that we imported and
it's a div this time also create two
backticks
and we write our css inside of these
backticks just as before so our
background are going to be based on if
we have the light or dark theme and how
do we access this well in our
wbnplayer.js we use this 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 styled
wbnplayer.js and for our background we
grab our prop we do that by a dollar
sign and curly brackets we grab our
props and we grab it from props dot
theme
bd color just as we named it in this
component 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 props
arrow function we grab it from props
theme
and border
and other ones are just regular css so
we have a max width of 1800 pixels we
have a margin of 0 and auto
we display it as a flexbox
webkit
box
ms flexbox and display flex
we have a flex direction
of row a max height of
863 pixels
we have a transition
all 0.5 seconds and an ease like so then
we have a media query here for our
responsiveness
so we have media screen
and
max
of 1400 pixels
we display
block
and max height
of 10 000 pixels well this is css so you
have to you can try it yourself and see
what all these values does to the app
and we also have to export this one so
export default
styled
wbn player
like so
and save it and that's it that's how you
use themes with style components one
more thing we're going to do in this
video is 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 style sheets we need here we
have the global style and the styles for
the individual component
in our playlist we also have all our
styles
in our playlist items we also have our
styles
in our wbn player
we have all our styles
in the night mode dot js
we're going to import a style sheet for
that one so we import
styled night mode
from
dot forward slash styles tiled night
mode
here
and we wrap this one with the styled
night mode instead
like so
and actually we can just finish this one
as we hear we have a span
and we write night mode
and a colon
then we have a label with a class name
of
switch
then we have an input
with a type of checkbox
we set the checked to night mode
we've set the unchange
to a callback function that we call
knight mode callback
and as before these are not going to
work now because we haven't created
these ones yet
we have another span with a class name
of slider
round
we can just destructure the props here
also
we have a night mode callback
and we have a nice mode
and that's it for this component and
we're going to create these ones in a
later video so don't worry
say this one
okay we have a few more components left
that we're going to import our styles
for so we go into our playlist header.js
and we import our styled playlist header
from
dot forward slash styles style playlist
header like so
and then we import our styled journey
from
dot forward slash styles
styled journey
and this is also quite a small component
so i think we can finish this off right
now
we have our styled playlist header we
wrap it in that one then we have a p tag
and we grab that from a prop called
active.title
then we have our styled journey
and also from the active prop we grab
the num and we have a forward slash
and we have a total
like so and this is it for this one and
these ones here it is what you see here
this is the journey 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
we can distract you the props for this
one also the active and the total like
so so it's nice and clean then we go to
our playlist item.js
we already have imported our styles for
that one
but we can finish this component off
also and for this one you can see we're
sending in some props so we're sending
the active and we send in the plate like
so
and we distracted the props
we have the video
we have the active and we have the
played
so if we go and check our style sheet
for this one style playlist item you can
see that the props we send in we're
using them here also just as we did
before with the theming 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
here we have 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 of our player
based on the active video and if it's
played or not that's
this one here
is the green dot here that's going to
show up
you can check those css files out as i
said before this is not a css course
it's a react course so i'm not going to
go through all of this 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
our playlist item dot yes and finish
this one off also
first we have a div with the class name
of wb and player underscore underscore
video minus number
and we have the video and num for that
one you can actually copy this one here
and this one is going to have class name
of video name and this one is going to
have
a video time
and here we grab the video title
and here we grab the duration like so
and this is of course
these ones here in each item that we are
setting up here
so say that one and we have the last one
to go
and that's our video we import styled
video wrapper
from
dot forward slash
styles
style video wrapper
and we import styled video
from
dot forward slash styles
style 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 we have
a proper active we have an autoplay
we have an end callback
and we have a progress callback
we change this one to styled video
and inside of this one we have a styled
video wrapper
like so and our react player goes inside
these ones
orac player are the one that we imported
here and also installed with an pm
earlier so this one will take a few
props
we have a width
of 100 percent we have a height of 100
percent
we do some in-line styling here with
this one it's just a small small
adjustment here we have a position
of absolute
and top of zero
then we have playing
we're going to grab that from the prop
auto play
we have the controls set to true we want
to show the controllers in the video you
can change these ones if you want we
have an url of active dot video
on ended
we're going to create an end callback
and we have an on
progress callback 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 we're already here now
first of all we're going to correct some
little type error i did in the last
video maybe you saw it already done so
you have corrected it but in the
playlist header.js
and where with the structure the props
it should say total not totaled totaled
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 our 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 these ones in
this video we are going to 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 and the playlist items
left so in the playlist go into the
playlist.js and first we can the
structure the props we're going to need
and we have some videos we have the
active we have the night mode callback
and we had a night mode
like so
and for our night mode component we're
going to send in the night mode callback
like so
and we also have the night mode prop
like so
our playlist header are going to get the
active prop
and the total prop
and we grab that from video's length
and our playlist items are going to get
the videos
and active also
like so and we're going to come back to
these props and what they are
so say this one
and we continue on to our playlist
items.js
first we destructed the props
and we have the videos and we have the
active for this one and we can delete
this one because in this styled playlist
items we have this list of different
videos so we have to loop 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
and inside here we are going to return
our playlist item
and it's going to have some props it's
going to be the key we always have to
have the key when we map through
something
we had a video
we have the active
and here we're going to check if the
active id is the same as the video id
and then we set the active to true
otherwise we set them to false that way
we know which video that is active so we
have the video id and we check if that's
equal to the active id and then we set
it to true
otherwise we set it to false
we set played
to video dot played
and we close it like so and this is it
for this one
and the last thing we have to do here is
to kind of assemble everything in the wb
and player.js 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 const
night
mode callback
and this is just an empty error function
we're doing here now
then we create another one that's called
end callback
like so and the last one is going to be
progress callback
and for now they at least exist so we
don't get an error 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 check if we
have videos in our state
the state we haven't created that yet
we're 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 check that the videos array isn't
null
and if not we're going to return all
this
right under here
we create the closing parenthesis
and then
no
if we have videos we're going to return
the player otherwise we return nothing
we return null
and we have a closing curly bracket
there also
and we can do like this and then we have
to send in the props to the video and
the playlist
so in our video we're going to send in
an active prop
we're going to grab that from our
state that we're going to create later
so we have a state of active video
we have the order play prop
and we grab that from state
auto play
we have the end callback
and that's the one we've created up here
like so and we have our progress
callback
and that's of course is this one
like so
and of course this shouldn't be there so
remove this one
we have it down here
and our playlists are going to receive
some props as well and for this one we
have the videos
we grab them from state.videos
we have the active
we grab that from state active video
we have the night mode callback
and that one we're grabbing from of
course night mode callback
and i spell that wrong also this
shouldn't be two c's so remove the c's
and just have one in that one
and we have the night mode and it's
going to be from state
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 grab from our state
the active video we grab if it's auto
playing and we grab our end callback and
our progress callback these ones are
going to be sent into
the video component
so we have the active autoplay and
callback and progress callback here in
our video and we're using them to
control the video
then we have our playlist and for our
playlist we have to have some videos and
we want to show if it's the active video
and we also have a night mode callback
and a night mode if it's true or false
and this one as i showed you is the
button for night mode and here is our
items in the list so in our playlist
we have our props that we sent in from
wb and player
and we use them in our playlist
component we send in our callback for
the night mode and the night mode if
it's true or false
and the playlist header are receiving
the active video because it's the active
video we're showing here
it also receives the total amount of
videos in our list because we're going
to need it here as we're displaying the
total and what video we're on in the
journey section here
and we have a playlist items that's
going to of course need a video so we
send in all the videos all the videos
from the array and we also send in the
active one because we want to highlight
the active video somehow here
the playlist items are going to loop
through the list of videos in this array
and create the playlist item for each
video in the array
so i hope this is clear for you if you
want to get the feeling you can click
through the components and start with
this one as this is the kind of main
component for application and from there
we send out props to different
components down the tree this is it for
this video we should be good to go when
we create the state hook and in the next
video i'm going to show you another
example of react hooks and how they work
before we start actually coding our
hooks
take a deep breath and lean back in your
chair because now you can relax you
won't have to code anything in this
video we're going to step away from the
original application we're building and
i'm going to show you some basic
concepts of the react hooks in this
video so i created this special little
application here or it's really an input
field where you can write some text in
that i'm going to use to show you how
you can use the hooks instead of class
components and keeping state in a
controlled component
so if we look at the code here it's just
a regular input field that i've styled
with the style components and this one
is the new ones here it's the the hooks
here that i'm going to explain a little
short before we create our own hooks so
as you can see here it's just a
functional component and i'm creating
the state here with the use state hook
so the benefit here is that you don't
need to have a class component to have
state in your component
and we import them from a use state and
use effect from react and as i said
before you have to have the alpha build
of react
that's called 16.7
alpha for the hooks to work
when you create a state you do it like
this and for now i'm just going to show
you we're not going to write anything in
the next video we're going to create our
own state and then i explain it more in
detail so hold on we'll get there soon
enough
the basic concept is that you create
whatever name you want for your state
and you also have a second one that sets
the state here
and this value here is the default value
so it can for example be
testing
we save that one
and you see it says testing here in the
input box
and for now we just want it to be
nothing
this is the placeholder text in the
input field that i specified here
well so how do we use these well if you
look at this style input
we have a name of test we have a value
of state the state is this one so we set
the value to state just as we do in a
regular controlled component in a
regular class and we have an unchanged
function here that's called update value
so in this update value i just set the
state to e dot target dot value it's the
value that you write in the input field
and then in turn the use effect will
trigger when the state updates
and for this one i just got an console
log now that console log out the state
so if we for example are going to write
star wars here i love star wars so i
have to use that as an example so we
write the star wars you can see here
it's console logging out the state so
there's nothing special about that it
works like a regular state here you just
have to initialize it a bit different
with this i also created the effect
state because in this use effect
we are now going to set another state
so you can have how many hooks you want
here you can have how many states you
want and your state can of course also
be an object just like your regular
state in a class component but in this
case it's just this string and we'll
talk more about this later when we
create the state in the next video but
for now we have these kind of two
different states here
so in the use effect we are going to set
the effect state with the state we use
the set effect state to set the value
that we have in this state and we do it
here you just call this as a regular
function and send in the value you want
to set the state with
and then we console log the effect state
just to show what's happening here so we
save this one
and we try to write star wars as you can
see here now what's happening here whoa
it's going crazy and why is that i have
to break this
let's do it like this now and save it
why did it go and set the state that
many times like in an infinite loop well
there's nothing strange going on
actually because when we set the effect
here in the use effect it's going to
trigger the use effect again and of
course it will set the effect state
again and it will trigger it again so it
goes into an infinity loop here and
that's not good so how can we control
this
if we do like this i have comment out
but we'll make this active in this array
here you can specify what this use
effect should be dependent on if we
write state inside this array it will
check if state has changed so that means
in other words if we have the state here
it won't do anything if we haven't
changed the state with a set state
because in the next loop here it will
see that the state haven't changed and
it will skip this use effect so we say
this one now
and as you see it's working just as
before
if we look at the state here it says
star but it only says sta in the effects
it's always one character behind and
that's because it's a sync
when we set the effect state here it
hasn't update this state when we console
log it out
instead we can have another use effect
here if we copy this one
like so you can have as many as you want
and we want this to be dependent on the
effect state instead
and in this one we console log out the
effects state so we remove this one here
and if we save and try this now
we write star
and as you see it's always the same now
and it's not
like behind with one character all the
time and that's because
this one will trigger when the state has
been set so we make sure that this is
finished before we console log it
and we also make sure to not go into
this infinity loop by using this one
here
and actually this won't go into an
infinity loop because we're not setting
any new state in this one it will
trigger when we update this state also
so it will run kind of double
yeah as you see it runs it two times
and that's no good so we wanted to just
show the console log when we update the
effect state like so
and this is kind of neat because you
don't need that class component
many people find the class components
more complicated than the regular
functional components and we use this
use effect instead of the life cycle
methods that's on the class component i
think it's great because you just have
to think of this one and you can control
it by specifying what should affect this
one
it's kind of new when filming this video
so it would be fun to see what people
will do with the hooks in the future
here i hope this gave you some little
idea before we go through and creating
our own hooks we're going to do that in
the next video and we're going to start
with a used tail hook for our
application
all right it's time to start creating
some hooks finally that you've been
waiting for this as my motivation for
this whole course was to show you the
newly announced hooks in react as of
recording this video so in this video
we're going to be in the
wbnplayer.js file and we're going to
create the state hook and if we go to
the homepage for react.js.org and read
about the hook i just wanted to show you
some small things here before we start
you noticed in the previous video that i
was using this syntax when we created
the state maybe you know about this
already because this is es6 syntax how
we destructure an array you can read
about it here also they're showing a
great example here of why we can do like
this when we create the state and u
state returns an array with two elements
and when we do like this we can name
these elements so this is the same as
these three rows here you first create
one variable with the use state and you
send in your initial value
and this one will return a pair and this
is just a regular array so we can access
the values by the zero and one to get
the first and the second value
respectively yeah they're using the
fruit example here so they're assigning
to variables called fruit and set fruit
and you can call these ones whatever you
want i don't think i explained that in
the previous video with the set thing
here it don't have to be named set but
it's very practical to have it like this
naming convention so you know that this
is the one that you set the state with
but you can call them whatever you want
so enough said about that go back to our
coding editor and we're going to start
this on coding here and i just want to
show you i promised you in an early
video that i was going to show you a
neat trick on how we can get the videos
into our react player if we look at our
index.html file in the public folder
and inside here you can see i've created
a hidden input field here and the nice
about this is that we can create a value
on this hidden input field and this is
like a json syntax here we can write all
our videos here and we can grab them in
our react player so we don't have to
hard code them in as we don't have a
backend to upload we don't have a
database to grab our videos from for our
react player so we can just create this
hidden input field and you can do this
in whatever html file you are going to
apply this player to
just be careful here because you can't
just create space and things and quotes
you have to use these special characters
here otherwise it won't work so this is
simply the videos here i wanted to have
an id of each playlist because when we
save it to local storage it's good to
know what the playlist we have saved
there then i have the actual playlist
that's an array with objects in it we
have the video number we have the title
we have the video id after the title
we have the duration and lastly we have
the video link
so you can add whatever you want here
and this is kind of neat trick to get
the videos for a player kind of a
hackish maybe but it works and as i said
before if the things work and this easy
to do it
they're sometimes not bad doing things
like this you don't have to build a
complete backend a complete admin system
for this just to get some videos into
your player so let's go back into our
wbnplayer.js
file and we're going to add these videos
to our state
first we have to import our state hook
so we do that up here we write the coma
and curly brackets and we have use state
and we can also import use effect right
now because we're going to use that
later on
all right
let's go into our component here and
create the const that's called
videos like so and we grab our videos
with the json
and we want to parse it we have a
parenthesis
we grab it from document query selector
and we have a new parenthesis and a tick
we have a bracket
name equals
videos like so and we have an n bracket
and then
dot value at the end and this one will
give us all the videos in this const
here so we just had to create our state
now
we do that with the new const brackets
we call it state and set state
like so and as i said many times now
they don't have to be called this that's
cause i choose to call them this you can
call them whatever you want
and we call the use state function
and we're going to set our initial state
with an object inside here
so we have our videos we grab them from
videos.playlist
we have an active video and that one
we're grabbing from
videos.playlist
and it's an array so we're using the
first video if you haven't watched any
video we're going to set it to the first
one
we have a night mode
i'll set that to true because i want the
dark theme you can set it to false and
it'll show you the light theme so it's
up to you what you want there
we have a playlist
id
and we grab that one from videos
playlist id
and we have an autoplay that we're going
to set to false to start with
and this is really all there is to it
it's just these two here one that we
save the stadium and one that we can set
the state with we will do that in the
next video when we use the use effect
hook also if we say this one it should
work now
and of course we have an error here
playlist items we go back here and check
that one
okay
nothing wrong here so we're going to our
playlist.js
and yeah of course i forgot an s here so
make sure in your playlist.js file in
your playlist items
the prop there should be called videos
not video
it should be plural so put an s on that
one and save it and it should hopefully
work now yeah we see it here now the
first time we see our player it's
actually not working now you can of
course play the video if you want but we
can't change the videos for now because
we're going to create these links here
when we do the high order component and
also the night mode won't work now
because we haven't created our callback
functions
but the player is there and as you can
see it's fully responsive and it's
working and looking
great here now and that's good in the
next video we're going to check the use
effect hooks
okay welcome back you can see that i
have a little bit of different colors
here in my editor and that's because i'm
re-recording this video because the
rules of hooks have changed a little bit
since i recorded this course i recorded
it when the hooks wasn't officially
released so now they have some special
rules here we have to take into
consideration and that is in the use
effect we have to define all the
dependencies and that's what we're going
to do also now in this video if you see
something in the videos after this one
that's yeah maybe not look the same as
this one i created here that's because i
have re-recorded this one and this is
the one that it should look like so this
is the correct video here all right
first of all we can go to react home
page and check out the hooks api and
there you can see that they've got some
basic hooks and additional hooks there's
actually a lot of hooks here and you can
create your own hooks also we are only
going to use the use state and the use
effect in this course because that's the
only ones we need but i highly suggest
that you read more about the hooks api
here and also if you like the hooks i'm
going to work with them in your future
work i suggest that you also
read about creating your own custom
hooks because it's very useful i use
them a lot in my projects so that's the
key i think with hooks that you can
compose your own hooks and it's very
composable if you use hook throughout
your whole application okay that said
we're going to create our use effect in
this video so let's go back into our
code editor and into our wbn player.js
file it's in your containers folder so
we create the use effect we've already
imported it up here and as you can see i
also done some destruction here now in
this component that's also one thing i
didn't do in the previous video so we
have the match and the history and the
location prop so you can just structure
them out like this
all right then we create
our use effect
parenthesis and we create an inline
arrow function here
we're going to have our
dependency array so we can create that
right now
all right and the first thing we have to
do is to get our video id and if you
remember in our app.js file in our route
we created this param and that means
that we can grab this id with this param
so if we look at the finished app here
you can see that we have this id here
and this is the one that we're going to
grab and that's the one we call active
video
so first we create the const
we can call it video id
and we grab that from match
dot params dot
active
video like so
and that's because we destructure it
here otherwise we have to
put props in front of it but we don't
have to do that now
so here we grab the video id from the
url and then we have to do some if
statement here because if this value is
undefined we know that we're not on a
video and we're going to rock back to
the first video in the video list when
you open the video player for the first
time then we don't have any saved state
in local storage so we're just going to
wrap back to the first video and we're
setting that as a default here in the
active video it's the 0 that's our first
video
so we create an if
video id
not equals to undefined
then we're going to do something and
we're going to have an else and inside
of this
if it's not undefined we have to find
the current video in our videos array
and we can do that by
creating a new const first that's called
new active video
we have our state or videos and we can
find index
we have a parenthesis
and inside here it will iterate through
every element in our array so we can do
some comparing here and find the index
of that video so we have an inline
function
the video we compare the video the
current video we're on in the loop the
id of that one
if that equals to our video id
like so and that will give us the index
for this video that we get from our
params
all right and then we have our video we
know what video it is so we can set our
state
and we're going to use an update the
function inside of the state for this
one and that's because we don't want to
specify this state as a dependency in
our use effect because that will create
an infinite loop in our use effect every
time our state updates it will run the
use effect and as we set the state in
the use effect it will create this
infinite loop but if we grab the
previous value in an updated function
inside of set state it will just live
inside of here and we don't have to
specify it in the use effect and we get
the previous state by this parameter
here
so we spread the previous state that's
really important when we're using hooks
the set state will not merge the old
state so you always have if we want to
keep it should be three dots there if
you want to keep the state as it was
before you always have to spread it out
otherwise it will wipe out the state and
just to create the new values for you
but if we spread it here we keep the
state and we can set our new properties
here
so we have our active video and of
course we also want to have parentheses
here
like so and we have our active video we
grab that from prev videos
and we set a new active video so we
change the video to the one we got here
and the auto play
we grab that from location because we're
sending this order play with our route
so we can grab that from props dot
location
auto play
like so and that's it if the video id
isn't undefined we change the video to
the value we have up here so we grab
this value and set it in the state and
this will trigger an update so we change
the video in our list all right but if
the video id is undefined we know that
we're going to route back to the first
video and we can do that by push to our
history prop
that we get from the router so history
push
paranthesis and we have an object we
have a path name
we have backtick
forward slash and a dollar sign
and from our state active video we grab
the id
and we end with another backtick
and we're also going to set the order
play to false because we don't want the
first video to start playing by itself
all right
and as you can see here now the linting
rule are complaining that we're not
specifying any dependencies so i guess
we can just order format it like so this
one depends on what linting rules you
set up for yourself so maybe
this one won't work for you maybe you
have to specify this yourself depending
on your linkedin rules so it tells us
that we need a history we're using that
inside of here we have a location auto
play we're also using that inside of
here we have our match params active
video we're using it inside of the use
effect and we have the state active
video dot id that we use here and we
have the state videos so they are now
specified in our dependencies for the
use effect and this was the new thing
when they released the hooks officially
so
if we save this one
and go back to our application
and if we
go to the localhost 3000 and not using a
video id
it should route us to the first video
and it does so that's great
and we can't click these once now
because that one we're going to do in
the next video where we create the high
order component and attach this kind of
linked functionality to our list items i
hope this made sense for you well it may
seem a little much but i think if you
take a look at this one or two or three
more times it will come clear to you i
think it's not that difficult what we're
doing here
okay we're getting somewhere here now
and we're going to create our high order
component so we can get these links to
work so we can change the videos in the
video list
so let's go into our hoc folder or hook
folder and or with link.js file and to
be honest we actually don't need this
high order component for this to work we
could just go into our playlist item and
we could create the link here on the
name but i thought that i wanted to show
you how to create the high order
component as this is an intermediate
course and high order components are
useful when you want to reuse your logic
for different components so my thought
was maybe you build another application
where you just want to show your video
titles or something and don't want them
to be clickable then you can create a
high order component where you can apply
the link instead and then you can use
your playlist item component for another
course without the link so this is the
truth you don't have to have this i
thought it would be great to show you
how high order component works a high
order component is a component that
either takes in a component as a
parameter or returns a component or both
of them in this case we're going to send
in our playlist item component and we're
going to create a new component with the
link function applied to it so it kind
of boosts the other component with new
functionality
but we never modify the original
component we're sending in as a
parameter we're just returning a new one
because you shouldn't do that in a high
order component you should always return
a new one all right
enough said in our with link.js let's
start with import react
from react
then we import a link
from
react router dom
then we create const with link
wrapped component
that's the component we're sending in
here
we have our props
and curly brackets
and how this is going to work is we're
going to take in the props and we're
going to modify these props and apply
the link to the name
so we create the const
with new props
like so
we clone our props
and we modify our video
so this is not an array in this one this
is only one single video so we have the
video and all the data about the video
in the video object this is not an array
it's an object this time
so we yet again
clone the video object
and we modify the title
inside the title we create a link
we link it to
and for this one we have curly brackets
and another curly brackets because it's
an object inside here so we change the
path name
to
backticks forward slash dollar
curly brackets props
video id
and an ending backtick there
then we set our auto play
to true because we wanted to play when
we clicked the video
and we closed that one
and we have a link an inside or link
we grab our props dot video dot title
so we have wrapped our title inside this
link now
then we just need to return or wrap
component
with our new props
so we spread them out like that with es6
syntax
and of course we export default
or with link
like so
then we need to use this component and
if we go into our playlist items.js
for now we're just returning the
playlist item but we want to return the
modified playlist item
so first of all we import our newly
created high order component
from
dot dot forward slash hawk
with link
we create a const
playlist
item
with link
make sure that i don't have an s too
much or something it should be playlist
item with link yeah
and we use a weed link and send in our
playlist item
so this one will give us the modify the
booster component to use for us inside
here
and now we can just change this one
to playlist item with link
and it should work if we save this
so we go back into our application
but they won't work and why is that yeah
and that's because we should of course
return our new props here not the old
props go back to your weedlink.js
and change this one to new props
otherwise we're just passing by the
props and we're doing nothing with them
so it should say new props and save that
one
and now we can click the links as you
can see here
nice it's working great actually
and as you can see the id is changing up
here because we're rolling it and we're
changing this id with our router
so this is how you do it with a high
order component if you don't want to use
this you can just apply the link
in your playlist item instead in a much
simpler way but in this way you can
reduce this component and we have just
added functionality with this with
link.js file with this high order
component in the next video we're going
to create the callback functions that we
set up here so we get our full
functionality of the player
okay there's not much left to do here
now with our player but we have some few
things left in this video we're going to
create the callback functions that we
need for the player we have one when we
switch the night mode on and off and we
have also one when the video has ended
when it's here and going to change to
another video and we're also going to
have a callback that sets the status to
watched on the video that means it's
going to indicate here with a little
green dot that we have watched this
video and we want to do this when we
have played a video 10 seconds so you
just don't click it and then it will say
that you have played it we want to know
that the user actually have watched at
some of the video at least so let's go
back into our wbn.js
file
and first we create the callback for the
night mode and that's fairly easy
actually we have already created these
kind of empty functions here so in this
one we just have to check a boolean if
the night mode is on or off and we have
our night mode in our state here
for now it's true and we should change
it to false or true when we click the
button in our player
so in this one we actually just have to
set the state
first we clone the state
and then we set the night mode to the
opposite of state
night mode like so
and that's all we have to do with that
one based on that boolean we are setting
our theme here and selecting the light
or the dark theme
so we save that one
and we should be able to try it now
yeah as you can see we're changing the
theme here now when our callback
function working
and that's really nice so now you can
select if you want a light theme or a
dark theme and of course as usual you
can style them as whatever you want you
can have a
orange team or a green theme or whatever
you want
all right and then if you just look in
our video.js file we have two callbacks
on our video and these callbacks are
integrated in the react player so we
just use them as they are intended to do
in the instructions from the rex player
we have one prop that is called on ended
and one prop that is called on progress
on handed is when the video has stopped
playing and what we should do then so
every time a video has reached the end
we get the callback from this component
react player
also we have this on progress it's given
us a callback call every second i think
so we can do some stuff
on progress callback here and we're
going to use that to check when we have
played the video for at least 10 seconds
go back into our wbnplayer.js
and we can start with the end callback
here and there's a few things we have to
do here first of all we have to know the
index in the video arrays of the video
we're currently playing because we have
this array here in a state with videos
and we're going to go to the next video
or if we're at the last video down here
we're going to jump to the first video
and how do we do this well if we go to
our public index.html file we have this
num here so we num we give each video a
number so that would be fairly easy to
just grab this number and take minus one
on the numbers because the array starts
at zero and this one starts at one then
we know what position in the array we're
at but we can't be sure that the user
always are going to have these numbers
in this file it can actually say
whatever you want here so that's not a
safe way for us to decide where in the
array the current video are what we do
also have is this kind of unique ideas
they should be unique
you could of course have the same here
but then it won't work so the thought
here is that we have unique ids for
every video and we can use this to find
the index in the array
so let's go back to wbmplayer.js
and in our end callback
first just as before we grab
the video id
from props match
params
active video
and that'll give us this id up here
then we have a method that we can use
that's called find index on the array so
if we use find index in our state dot
videos array we can find the index of
the current video so we create the const
current video index
and we have the array in state dot
videos
and then we use the find index method so
parenthesis
and now we have to do some comparing
here because we have our video id and
we're going to look for that one in the
array so we have the video
we have an arrow function we have a
video dot id
and we just check if it's equal to our
video id that we grabbed up here
so this one will iterate through every
element in our array and compare the
video id for each item with this item
here because we know this one is the
active video so
when it find this one when this is equal
it will return the index for us in the
array all right i hope that was clear
for you then we have to do some more
checking here and see what our next
video will be so we have this const
called
next video
if our current video index equals to
state
dot video's length
minus 1
we are going to jump to the video 0 the
first element in our array and we're
doing this minus one here because as i
said the array starts at zero and our
videos starts at one
otherwise
we just set our current video index
to plus one
we jump to the next video and this is a
ternary operator here as you can see
maybe we can just do like
this so it's a bit nicer
so we know now what the next video will
be so we can push that into our url with
the index of our next video and we push
programmatically
by props history
push
we have on parentheses and we have curly
brackets we have a path name
backticks we have a dollar sign curly
brackets again
state dot videos
and we use our next video that we got
here and our id for that video
and we end with another backtick
so this one will go into our state array
with the videos and use the index we got
here in the next video for the array and
grab the id and we push that to the url
so we change video
and this one should of course be a coma
and we set the order play to false we
don't want it to autoplay when it's
changed the video we just want to order
play when we actively click a video
ourselves and this should be it we could
save this one so if we try it we can
take one video here
whatever and we go to the end
so we're at video 2 now oh it's kind of
slow here we play it
and as you can see it jumped to the
video 3 and it stopped there because we
didn't set it to order play
so we know that that one is working
and now we have our progress callback
left to do
and as i said before what this will do
is we'll set our video to played after
10 seconds
so first of all we have to check if we
played it 10 seconds so we create an if
statement
if and of course here we have our event
and it's only one parameter here so we
can omit the parenthesis so we do like
this
and we write if e dot played
seconds we get this one from the video
from the react player so we can check
how many seconds we played so we're just
grabbing that one from the event we get
to this callback function
if it's greater than 10 and we also want
to check that it's actually not greater
than 11 because we don't want this to
fire off all the time when we play the
video so yet again we grab e dot played
seconds
and set it to less than 11
and there we have our if statement
and now yet again we have to find the
correct video to apply this played value
to so you can do this in a couple of
different ways one way of doing it is
set the state and then we can just loop
over the videos and when we find the
correct id we just set that to true so
i'm going to show you this one now
so we set
state
parenthesis curly brackets
we clone our state
we have our videos array we want to
update this whole array here so what we
can do here is we can map through all
the videos and we can update the element
that we want to apply the plate value to
so we just write state dot videos dot
map we have an element
an arrow function
curly brackets and inside this map we
want to return something and we create a
ternary operator here we check if our
element
dot id
equals to
state active
video dot id
if it does we know that this is the
video we want to change because we're
playing this active video now and we
want to change our videos array and set
that this video has been played all
right
and if this is true
we update this element so we clone the
element first
we always have to clone it
and then we set the plate property to
true for that element otherwise we just
return the element because we don't want
to modify that one and this should work
now so we go back to our video you can
see here this it's this green little dot
here that will get applied when we have
played a video more than 10 seconds
so if we for example grab the second
video here and we let it play for over
10 seconds
then it will apply this green little dot
here and as you see if we change before
the 10 seconds nothing will happen
it kind of tells us that we have been
visiting this video before and played it
and of course you can have more than 10
seconds you can have less than 10
seconds it's up to you what you want
there
stop this one
and i can also just show you another way
of doing this if you want if you don't
want to do this map thing here
take this one comment it out
you can just create a const with videos
equals
dot state videos we clone our state here
with the videos
we have a const played video
that equals
videos find
and here we can now find the correct
video so we have a video on our function
video dot id equals state active video
dot id so here we grabbing the video in
our array that's equal to the video that
we're actively playing now then we can
just apply the played value to this one
so we have the played video dot played
and set that to true and then we can
just set the state
dot dot state
and videos so
we created this copy we cloned
the videos here and we looked for the
video that we want to set the play to
true we apply that one and then we set
the state with the complete new videos
array and it will replace the other one
so save this one
and it should work just as good so if we
take this video for example
and let it play for about 10 seconds
yeah we're getting there all right and
10 11 12 just to be safe
and you see it applies the green dot
so it's really up to you there's
probably even more ways to doing this
but now you have two ways you can do it
here and um i hope this was helpful for
you and this is actually our complete
player we just have to create our local
storage so we can persist this data of
what we have played and our list with
videos
okay we're almost finished with this one
and in this video we're going to learn
how to persist or state in local storage
the first thing we have to do is to have
a function that will trigger when we
have updated our state in the player and
for that one we can use the use effect
hook as we did before so we need a use
effect hook that triggers every time the
state updates so if we go into our file
wbnplayer.js
yet again and below our state we create
a new use effect hook
use effect parenthesis then we have this
arrow function inside
like so
and we will access the local storage and
write to it here so we write local
storage dot set item parenthesis then we
need a backtick dollar sign curly
brackets and we want to grab state play
list id we want to save different states
in the local storage if we have more
than one player with different playlists
so we identify it with a playlist id
another backtick coma and then we do a
json
stringify of course you can only write a
string to the local storage so we have
to convert this one to a string before
we write it
parenthesis and we have our state object
so we clone that one like so as we
learned before we also have to make this
use effect dependent on something and in
this case we want it to only update when
the state changes so we go down here
write the
comma create our state like so and this
will make it only fire when the state
changes so we say this one
we go back to our player and into our
console we can check our application and
inside there we have a local storage
oops just going to delete my old ones
here
so i reload it and as you can see we
have this playlist called wbn rdx and we
have our state here as you see so every
time we change something here it will
also update the state
as you can see now it's the active video
it's number three here
and now it's number four so it's working
it's updating the local storage and sync
it with the state
what we have left to do is when we
initialize the player we want to check
if we have something saved in local
storage and use that state instead
so we create a new const up here called
saved state
and we get to undo a json we parse it
back to json format
local storage
get item
parenthesis backticks
dollar sign curly brackets
and we use the videos
this one here we just playlist id we
grab the playlist id from this one here
in our json object in the index.html
file so we have another backtick to end
this one
like so
whoops we have an error here
yeah i misspell this one it should say
parse like so
so hopefully we'll have our local
storage saved in the saved state const
here
so what we have to do now is to modify
our state or initial state here we have
to check if we actually have this one or
if not we're going to use the videos so
we use a ternary operator here on every
property in the state so we check if we
have a saved state
if we have a save state we grab the
values from the save state instead
otherwise we grab it from the videos
const
say state
save state active video like so
a bit repetitive here but we have to do
it
save state
say state dot night mode
otherwise we can set it to true as
before and we have a save state
say it's the
dot
playlist
id like so
just making sure that i spelled
everything correctly here
it looked like so so save this one
and if we remove this one we clear out
the local storage we make a reload
and we change to video yeah 3 and we can
also wait for 10 seconds here to see
if it will save this one for us so we
change
to video 5
we can change the night mode
and if we look here it should be saved
now number five not more false and or
video so if we reload this one
yeah it's working so we've learned how
to persist a state it was fairly easy in
this application it's not that much code
to persist the state in local storage
in the next video we're just going to
learn how to deploy this one
we only have to learn where to deploy
this sucker so in this video we'll do
that
if we start in our app.js file you have
to think about the url where you want to
host your application and for example
where i host it
i have it at the
react underscore
video player like so so i have it in a
sub folder here and that's very
important because we have to tell the
router in react that we have our
application in a subfolder so if we go
into our app.js file
and inside your browser router component
tag here you create the base name
equals and then forward slash and your
subfolder
and the forward slash again and this is
only important if you're going to use a
subfolder if you have it hosted at the
root you don't need to do this it's only
if you have a subfolder
but it's likely that you're going to
have that i think
so say this one then we have to go into
our
package.json file
you have a property called homepage and
inside here you can just write the whole
complete url to your application so in
my case it will be
webenfalc.com react video player so put
in your own url there and also be sure
that you don't have a typing arrow here
you have to have a coma because this is
a new property in this object here
save this one and this is really all
there is to it now we have to go into
our console
we have to break our application here
with control and c and then we just run
npm run build
and press enter and create direct app
will create this build folder for us
as you can see here it has built some
files for us here we go into our finder
and you see we have this new build
folder so these are the files that you
just copied to your server so grab this
file and upload them to your hosting
server and it should work
and there's also one more thing you have
to think of and that's the dot ht access
file and this is really
where it can look very different
depending on the hosting company your
server and where you're going to host
this one but i can just show you what
works in my case so i create a new file
here and i copy and paste this one
this one here goes in the dot htaccess
file in the folder where you host your
application what this will do is it will
always route back to the index.html on
the server because we want our react
application to do the routing and this
is really important course if you don't
have this i've i've had a lot of
headache with these things a lot of
times and if you don't have this one it
will not work it will probably show you
the start page but if you click another
video here it will throw you an error
because it won't find this one here as
it's in a subfolder and we also have
this id here and it won't work because
it's trying to route this on the server
and we want to do this routing in the
application that's why we fall back to
the index.html file
so this is the end of this course i hope
you learned something and i have had a
blast creating this one and showing this
for you hopefully i see you in my future
courses i intend to do a lot more of
them and i wish you all a great time and
happy coding thanks
hi guys hope you're enjoying the react
hooks course i thought i could show you
how to use the use callback hook in this
little bonus video today so what i've
done here i set up a really simple react
app here it's just this button that
generates a random number here and as
you can see in my code here i just have
the app component and the button
component and of course the index so
what's going on here yeah in our app
we're using the hooks in a functional
component just as in the course and i
created a callback for the button so
when the button is clicked this callback
is invoked the button that receives the
callback and i also console log what's
happening here so
if we start looking at the application
and press the button here you can see i
console log out when i click and i also
cancel log if the button is rendered so
first of all we can just google use
callback and go to the react home page
and we have it down here
and as you can see it returns a
memorized callback and this is because
in the functional components when you
render the component it renders
everything again and if we look in our
code for example or app.js or app
component when this one re-renders it
will go through all of this code again
and create the callback over and over
again and there's also many that's using
inline functions here for the callback
like so and you do something here inside
this and this anonymous function will
get recreated every time you click so
there will be a lot of these ones and
that's no good if you have a really
large application to be honest react is
a pretty good and optimized library so
you don't have to worry about this
really but there's a lot of people out
there worrying about recreating
functions and callback functions so what
we do in a regular class component we
can remove this one
and just go back to what it was before
here
and we just call the function up here
instead and then it will not get
recreated every time but that's in the
class components and they work different
from the functional components so we
have to do something else here for this
one to not get recreated every time and
if we read a little about the use
callback hook here pass an inline
callback and an array of inputs
use callback will return a memoized
version of the callback that only
changes if one of the inputs has changed
so you can kind of send in this array
here just like we did with the use
effect hook and
this one will control when the callback
function will renew itself and if you
don't want to renew it just like with
usefx you can just send in an empty
array so this is useful when passing
callback to optimize child components
that rely on reference equality to
prevent unnecessary renders eg should
component update so when this one
creates a new callback on every render
even if the callback haven't changed the
shell components will think that it's a
new prop that's being sent in and will
re-render and of course you have to do
something to control also what props are
being sent to your component but i'll
show you that in a second so what can we
do here because this one is being
recreated every time
we click on this one it creates a new
one
so we can firstly import the use
callback
hook like so use callback and then it is
as simple as just wrapping this one
like so and we also want to pass in an
empty array for this one because we're
not going to need to recreate this one
we just have this new state here that's
creating a random number when we click
this one
so it should look the same all the time
we don't have to recreate it so we just
create this callback function once and
we do that by sending in an empty array
so if we save this one
and we click and we can see that nothing
has really changed here the callback
function itself is just created once but
we can't really see it now so
we can test this one by go into our
button.js file there's also one new
thing in react they call react.memo
and this one if you use the react memo
it will make this functional component
to check the props and if the props
aren't changed it won't re-render itself
and this one you don't have to import
anything special you just write react
dot memo and you wrap your component in
that one like so so if we click this one
you can see that we're not re-rendering
the component now and that's good
because before we had this react memo
say this one again you can see i have
this console log here
every time the app is re-rendered the
button component also gets re-rendered
but by using the memo here
like so we are making sure that this
component will check the props before it
decides if it should re-render or not
and because we use the use callback hook
here we are not recreating this one in
each render so this will work now and as
i said there's not a lot of performance
issues here so you don't really have to
do it and that's why i didn't show this
one also in the course where we create
the video player because you're not need
to do this in this kind of small
applications but it could be good to
know what the use callback is and now
you know what it is and what you can use
it for so hope this little bonus video
was worth something to you and you
learned something i also hope you enjoy
my react hooked course and that it's
going great you can also hook me up on
twitter at web and funk if you want to i
started to share small code tips there
especially in react but also other
things so this is it i hope you enjoyed
it see you