We want to add video courses to our site. The first thing we need is the video player page.
Here is the design:
Expected Behavior
Discussions don't need to be added for this part of the task, so ignore the area where a user can comment. This issue is about getting the designs right on mobile and desktop. We will use mock data.
The video should always retain a 16:9 ratio.
When there is a list of videos/course items (as can be seen on the right of the design), it should scroll when it overflows past the max width.
The page can use mock data. Create a file called mock.ts within the courses folder that you can import the data from to populate the course information and the users current course progress (this is so we can update this data to test functionality).
This page should be found in /courses/[slug]/[id]. Where slug will be the course slug, and id is the ID for the current part of the course they are on.
CarolinaCobo
commented
1 month ago
We are developing a course platform! 🎊
We want to add video courses to our site. The first thing we need is the video player page.
Here is the design:
Expected Behavior
Discussions don't need to be added for this part of the task, so ignore the area where a user can comment. This issue is about getting the designs right on mobile and desktop. We will use mock data. The video should always retain a 16:9 ratio. When there is a list of videos/course items (as can be seen on the right of the design), it should scroll when it overflows past the max width.
mock.tswithin thecoursesfolder that you can import the data from to populate the course information and the users current course progress (this is so we can update this data to test functionality)./courses/[slug]/[id]. Where slug will be the courseslug, andidis the ID for the current part of the course they are on."course-video". For an example of a feature flag see https://github.com/codu-code/codu/tree/develop/app/(app)/feature-flag-exampleThe video player/video list was inspired by Udemy/Egghead. So if you are looking for the responsive feel you can check out this free video on EggHead (and give them some love since they have some fantastic courses). https://egghead.io/lessons/next-js-set-up-a-next-14-project-with-create-next-app
Current Behavior
We do not have a course page
Screenshots
Additional info
Here is a link to a Figma. You will see the designs down the bottom of the page:
Figma link to see designs
Join the Discord if you have any questions. We have a Hacktoberfest channel where we are helping folks! 🤖