See attached

Example:
https://tafsir.institute/videos/%D8%AC%D9%85%D9%8A%D8%B9%20%D8%AF%D9%88%D8%B1%D8%A7%D8%AA%20%D8%A7%D9%84%D9%86%D8%AD%D9%88/%D8%A7%D9%84%D9%86%D8%AD%D9%88%20%D8%A7%D9%84%D9%88%D8%B8%D9%8A%D9%81%D9%8A

Only when you resize, the video thumbnail list shows up

Currently we are grabbing from Mahad al tafsir YT
We check what playlists should be taken from sheikh Ali's YT and update the playlists in the json file here:
https://github.com/ismaelrumzan/mahad-al-tafsir/blob/main/content/tafsir.json
First test whether existing API key works since both accounts are now connected

The playlist on the side of the video is supposed to match the video height when it first loads. However, the user needs to resize the the browser window in order for the correct height to register.

TODO: Look into integrating a YT playlist library, which may resolve this issue

Assignment 1:

Goal: Implement the html 5 video tag with React

Steps

1. From your own vercel.com account, deploy the Create React App from here
2. Build your own video component based on this code
3. Ask in the channel if you have any challenges
4. Load your video component in a page and try out

Assignment 2

Goal: Implement the video.js library with React

1. Review the following tutorial: https://videojs.com/guides/react/
2. From your own vercel.com account, deploy the Create React App from here
3. Use this code, to use as the source for the video
4. Load your component in a page. Make sure this page and the page in assignment 1 above use the same source
5. Compare the loading speed of this approach and the one in assignment 1

Discuss first before following up below

Create a custom video player using the video.js library and React

1. Review the following tutorial: https://dev.to/franciscomendes10866/how-to-create-a-video-player-in-react-40jj
2. 3. Ask in the mahad-al-tafsir slack channel if there is anything that does not make sense
3. 5. Implement the tutorial above in your project and ask in mahad-al-tafsir slack channel if you have any challenges

The search drop-down on the home page does not report any results

This link, https://mahad-al-tafsir.vercel.app/videos/%D8%AC%D9%85%D9%8A%D8%B9%20%D8%AF%D9%88%D8%B1%D8%A7%D8%AA%20%D8%A7%D9%84%D9%86%D8%AD%D9%88/%D8%B4%D8%B1%D9%88%D8%AD%20%D8%A7%D9%84%D8%A7%D9%93%D8%AC%D8%B1%20%D9%88%D9%85%D9%8A%D8%A9/%D8%A7%D9%84%D8%AA%D9%88%D8%B6%D9%8A%D8%AD%20%D8%B9%D9%84%D9%89%20%D8%A7%D9%84%D8%A7%D8%AC%D8%B1%D9%88%D9%85%D9%8A%D8%A9,
videos/جميع%20دورات%20النحو/شروح%20الآجر%20ومية/التوضيح%20على%20الاجرومية
does not work when clicked from card view on home (only when deployed on vercel)

But it works when clicked from the sidebar
https://mahad-al-tafsir.vercel.app/videos/%D8%AC%D9%85%D9%8A%D8%B9%20%D8%AF%D9%88%D8%B1%D8%A7%D8%AA%20%D8%A7%D9%84%D9%86%D8%AD%D9%88/%D8%B4%D8%B1%D9%88%D8%AD%20%D8%A7%D9%84%D8%A2%D8%AC%D8%B1%20%D9%88%D9%85%D9%8A%D8%A9/%D8%A7%D9%84%D8%AA%D9%88%D8%B6%D9%8A%D8%AD%20%D8%B9%D9%84%D9%89%20%D8%A7%D9%84%D8%A7%D8%AC%D8%B1%D9%88%D9%85%D9%8A%D8%A9

• Add user personalization and progress tracking to help people be focused and learn the content step by step

Overall Goal: Add google analytics tracking to all pages of the site

Let's break the task in pieces

Assignment 1

TASK: Implement a basic project with google analytics such as https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics

Steps

• Create your own account on vercel.com
• Create a google analytics tracking ID using your own gmail account
• Clone the above repo and deploy to Vercel - add your google analytics ID
• Create a few dummy pages under /pages
• See the tracking work

Assignment 2

TASK: Review the structure of the mahad-al-tafsir repo and brainstorm how you would implement the tracking ID in this repo. Create the key steps/tasks that would have to be done below (Just in text/stub code)

Goals

• understand how current students studying with sheikh Ali use online resources to help them with their current tafsir studies with him
• understand how people who only using online resources currently learn tafsir - what are their challenges? how does it fit in their lives?

Currently, the order is taken by arbitrary count which is not easy to control
Let's make the order be taken by the last number of the id for each level in the navigation

Create a custom video player design that fits the brand and logo

Implement a custom version of the YT player (possibly using the YT api) that removes the following elements from the player

• Watch on YT
• Share and Watch later

With the standard HTML 5 video player, for a video of around 50 minutes, it can take between 10-20 s for the video to be ready to play as shown below. Can we improve this experience? The pre-loader (that waits for the MP4 URL link to be fetched is pretty fast - sometimes less than 1s). Ideas

• are there mp4 players that can stream/ready to play faster
• other packages related to streaming videos