Video player page for courses

[NiallJoeMaher]

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.

1. 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).
2. 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.
3. This page should be feature flagged with a flag called "course-video". For an example of a feature flag see https://github.com/codu-code/codu/tree/develop/app/(app)/feature-flag-example
4. The design should work on desktop and mobile as shown in the Figma (below)
5. The page should look as shown in the designs
6. The styling should remain consistent with the rest of the site.

The 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! 🤖

[CarolinaCobo]

I'm taking this one