Create Hero for Course Detail Page

[Abhishek-kumar09]

Part 1 of #2

Compoenents are required to be made with material-ui: https://material-ui.com/

[rizwan2000rm]

Can I work on this issue @Abhishek-kumar09 ?

[Abhishek-kumar09]

Yes, go on.

[rizwan2000rm]

@KeenWarrior @Abhishek-kumar09 I have started working on this issue. The fonts and colors has not been added to the repo yet. For now I'm using the default fonts and colors from Material UI. Also can someone ellaborate on trailer section of hero like is it a embeded video or a custom component ?

[Abhishek-kumar09]

It's an embedded video, that should play once clicked. It's a good npm package for doing it: https://www.npmjs.com/package/video-react

[rizwan2000rm]

@Abhishek-kumar09 Looks like the video-react project is abandoned I found a better alternative called react-player:
https://github.com/cookpete/react-player
I have added it and works fine as we expect, it lazy loads the player on click plus has pip mode.
Also what about fonts and colors is someone going to add colors in Material UI Theme ? I'm just using secondary color for now also added a tag for Roboto font from Google Fonts.

[Abhishek-kumar09]

@Abhishek-kumar09 Looks like the video-react project is abandoned I found a better alternative called react-player:
cookpete/react-player
I have added it and works fine as we expect, it lazy loads the player on click plus has pip mode.
Also what about fonts and colors is someone going to add colors in Material UI Theme ? I'm just using secondary color for now also added a tag for Roboto font from Google Fonts.

Okay react-player is also good, we can play youtube videos right inside it. Does it have controls too.
I have added theme.

[rizwan2000rm]

@Abhishek-kumar09 Yes it does have all controls like volume, fullscreen and play/pause.
Here is what hero looks like now

@KeenWarrior
But after pulling the recent changes I'm having issues with scrolling. Even testing on different page, the issue still persists. I cannot figure out what caused scrolling to stop. Anything beyond the viewport is unreachable. Looks like it is something within common Layout wrapper. Please check it on your side and raise an issue if needed.

[Abhishek-kumar09]

Create a PR and I will look to it.