search

codeforcauseorg / edu-client

Product focuses on 100% education as well as upskilling developing countries and rural areas.
https://educlient.codeforcause.org/
MIT License
130 stars 150 forks source link

Create Hero for Course Detail Page #3

Closed Abhishek-kumar09 closed 3 years ago

Abhishek-kumar09 commented 3 years ago

Part 1 of #2

image

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

rizwan2000rm commented 3 years ago

Can I work on this issue @Abhishek-kumar09 ?

Abhishek-kumar09 commented 3 years ago

Yes, go on.

rizwan2000rm commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

@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 commented 3 years ago

Create a PR and I will look to it.