===Profile Information
**Name : ** Mohd. Afzal Khan
**Email :** ak341668@gmail.com
**Zulip Chat (nick): **AFZL210
**Resume :** {F36937044}
**Location: ** Delhi, India
**Timezone: IST (India)
**Typical working hours :
11:30-13:30, 15:00-19:00, 22:00-05:00 ( IST ) 6:00-8:00, 9:30-13:30, 16:30-23:30 (UTC)
===Synopsis
VideoCutTool is a video editing tool for Wikimedia Commons. It is a simple tool that allows for quick video editing without the need to download any third-party software. we can just paste the video link or upload the video and edit it within the tool. It is not resource-intensive and runs smoothly on all modern browsers and mobile devices.
This Proposal aims to complete the following goals :
**Goal of the project:**
- **Fix Bugs: ** Fix existing bugs related to frontend and backend some of them are
- Improve keyboard navigation T333564
- upload to commons throwing error T333060
- **Improve Mobile View**
- since mobile widths are not very large, accessing the timeline and trim feature becomes difficult. Improving the landscape view would enhance the workflow and overall experience of the tool.
- I will fix the mobile landscape view **(max-width: 740px)**. Currently, when switching to landscape mode, the video takes up the full height of the device. To access the options, we have to scroll and then go back to the top to see the changes, which is not very convenient
- **Design (Mobile Landscape)**
{F36937045}
- Add more useful features
- write unit and end-to-end tests
- currently, VideoCutTool only have unit test for UrlBox.jsx, Home.jsx and Notification.jsx
- write unit and end-to-end tests for all other remaining components
I strongly believe that as this tool is used by volunteers, so it must have a **Good user-friendly UI** and all the necessary features that can help create more informative and engaging videos, some of the features I would like to work on are :
- take a screenshot of the video frame
- video speed control (at least 4 levels: .25x, .5x, .75x)
- redo/undo changes
- brightness control: add a brightness control slider or a set of predefined values to control the brightness
**Features Designs (i will update them after discussion with the mentor in the community bonding period)**
- **Speed control** : add fixed slider state (.25x, .75x, .5x and 1x)
{F36937047}
- Possible Mentor(s) : Gopa Vasanth (@Gopavasanth), Sohom Datta (@Soda)
- Have you contacted your mentors already? Yes
===Deliverables
==== Mid Term Evaluation
By the midterm evaluation, the tool will be having:
- Improved UI for Desktop and Mobile (Potrait + Landscape Orientation)
- Reduced build time and bundle size
- persist video even after tab refresh
- Fix Bitrate drop (quality degrading) while editing videos.
====Final Evaluation
Most of the goals will be completed by midterm evaluation after that i will be adding some additional features :
- unit and end-to-end test for frontend and backend using Jest, React-testing library, and integrating with Jenkins/CI.
- Updating the libraries/dependencies to avoid deprecation warnings during build time.
- Add static type checking using JSDoc.
- fix uploading to commons issue (converting other file type to .webm)
- color filter and speed control
==**Timeline**
====**Community Bonding Period **
**May 4 to May 15: Planning**
In the initial phase of the program, I will share some designs I have in mind regarding the mobile view, as mentioned above. For the desktop, I have some ideas similar to T315143 and will finalize the UI after discussing it with the mentors. I will also explain and discuss all possible approaches to solve future issues. I plan to divide the timeline into four parts. In the first part, I will focus on fixing the existing bugs in the tool and improving its UI/UX. In the second part, I will work on development-related issues, including **reducing the bundle size of the project** and resolving the issue of **running development(client and backend) on the same port** (T332517). In the third part, my highest priority will be fixing existing issues in the backend, improving performance, and adding additional features after discussing them with the mentors. and I will finish the project by writing unit and end-to-end tests for the frontend and backend.
====**Part-1: Client/Frontend Improvements**
=====**May 16-May 28 : UI Improvement**
as VideoCutTool is mostly used for sharing videos on Wikimedia commons and not by professional video editors, the tool must be easy to use, and the learning curve should be minimal. Firstly, I would implement the UI changes as discussed with mentors, and the most important UI change would be the mobile landscape orientation because when editing video in portrait the options and timeline are present on the same page, but as we go in landscape orientation the video takes the full height of app and the trim timeline and options are shifted to next page which makes it inconvenient to see changes.
a design something like this will definitely improve the user experience and overall workflow
{F36937049}
**Keyboard Navigation Improvement**
Currently, in VideoCutTool we can only navigate through the options with arrow keys, I will be adding some other keyboard navigations as mentioned in T333564
- play/pause the video on the spacebar click
- control video timeline with left and right arrow keys
**Fix Video Player Window Size** I would like to fix the video player window size in VideoCutTool. Currently, when we upload any video, the size of the video player is dependent on the ratio/dimensions of the uploaded video. I intend to standardize the player window size to 16:9 or 16:10, whichever works best.
currently,when i upload a **4:3** video the video takes full screen height and shift other feature to next page even though i am on desktop.
{F36937054}
**Fix**
something similar to this design
{F36937058}
=====**May 29 - June 15**
====**Part-2: Performace/Dev environment Improvements**
The VideoCutTool uses **react-bootstrap** and **react-icons** to render Buttons and icons, which is not very light instead of using this we can shift to **react-icons** which has a bundle size of only **6kB** whereas the bundle size of **react-bootstrap-icons** is **3MB** which is a lot, and considering this is only used to render Buttons and icons, instead of this we can create a custom component and shift to react-icons, this will help to reduce the bundle size and build time while development. and to reduce it even more we can avoid using **Axios** and use react **fetch** (if necessary) and we can also avoid using **Toast** from **react-bootstrap** instead create custom component for it, this will help use get rid of whole react-bootstrap package and give more space and freedom to work.
reference: https://bundlephobia.com/
When we run the development server, the frontend code is available on port 3000 and the API is live on port 4000, we can use Nginx to run both on the single port as mentioned in T332517, to do so we have two different approaches :
- write a command to build the client code and server it statically on the same port
- use hot-reloading to do the same
the second approach is definitely better for development because the changes will be reflected as we change the code and the first approach is good for manual end-to-end testing and deployment because in production we most probably deploy the final build.
====**Part-3: Backend/new features Improvements**
=====**June 16 - July 9: Fixing existing issues**
The first priority will be fixing existing issues in the backend and then I will focus on adding new features to the tool. first, I will fix the bitrate drop issue mentioned in T262892, to solve this issue first I have to identify the reason for this drop, most probably the root cause for this issue could be.
- drop in bitrate while copying the file ( while downloading video to server)
- upload different files and try varying the **-b:v** parameter which is responsible for changing the output video's bitrate
=====**Midterm Evaluation (July 10 - July 14 )**
I Will present the completed task to mentors and take feedback and discuss/plan for future goals.
=====**July 15 - July 20: Working on Feedback**
Here, I will work on the feedback given by the mentors, and while solving it, I will complete any remaining tasks until now. I will also prepare UI designs for additional features and get reviews on them, making changes accordingly.
====**Part-4: Adding New Feature to tool**
=====**July 21 - August 10**
I will be adding the following additional features to VideoCutTool :
- take a screenshot of the video frame
- video speed control (at least 4 levels: .25x, .5x, .75x)
- redo/undo changes
- brightness control: add a brightness control slider or a set of predefined values to control the brightness
There are two ways to achieve this:
1 - Create a slider in the frontend that ranges from (-1 to 1 for brightness) and (0 to 3 for saturation).
2 - Create a predefined selector in the frontend (with only a few allowed values or simple 3-4 states).
Although approach 2 is better because the video filter layer processing is done on the server side, not on the client machine. therefore, it is better to create states like 0%, 25%, 50%, 75%, and 100% for these color filters.
=====**August 11 - August 20**
We have almost finished fixing bugs, improving UI/UX, and enhancing performance/development workflow. Now, I am planning to use JSDoc, which will be useful for developers, as rewriting the whole project with TypeScript in this time frame is not practical.
=====**August 21 - August 27: Testing**
In the final week, I will be addressing any remaining backlog and finishing the project by writing unit and end-to-end tests for both the frontend and backend. This will include testing API endpoints as well.
===Past Experience
I have been contributing to open source for the last 2-3 months. I have contributed to Backpack, Mojo-community, and recently started contributing to VideoCutTool.
- Contributions made in the VideoCutTool by me :
- T332988: allow user to paste video from clipboard
- https://gerrit.wikimedia.org/r/c/904603 !!In-Review!!
- T333736: Fixed alignment of icons in trim container
- https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/904601/ !!Merged!!
**contribution made by me in backpack**
- !!#3412!! : add support for pasting images from clipboard
- https://github.com/coral-xyz/backpack/pull/3412/ !!Merged!!
- !!#3309!! : clicking reply should auto focus the messaging input field
- https://github.com/coral-xyz/backpack/pull/3309 !!Merged!!
- !!#3333!! : fix : notification profile pic should opens user profile page
- https://github.com/coral-xyz/backpack/pull/3333 !!Active!!
- !!#3437!! : only accept video/image file type in chat file upload
- https://github.com/coral-xyz/backpack/pull/3437 !!Merged!!
- !!#3179!! : Fix : checkbox not visible in darkmode
- https://github.com/coral-xyz/backpack/pull/3179 !!Merged!!
- !!#3141!! : fix : Send button on contact profile page is not functional
- https://github.com/coral-xyz/backpack/pull/3141 !!Merged!!
== **Personal Projects**
=====[[ https://github.com/AFZL210/FitMon-app | Fitmon]]
I have created a live Yoga Trainer in a 48 Hours Hackathon using Mediapipe. This trainer uses the MediaPipe Pose Model to track the human body in real time and allocates points to 32 different joints. With the help of these points, I have calculated various angles for a particular Yoga pose. These angles are then compared with the standard/correct set of angles. If there is any discrepancy, the trainer guides the user with voice commands.
This Yoga Trainer provides real-time feedback to the user and helps them to maintain the correct posture while performing Yoga. The use of MediaPipe Pose Model makes it more accurate and efficient as it tracks the human body movements precisely. With the integration of voice commands, it becomes easier for the user to follow the instructions without constantly looking at the screen.
**This project also secured 2nd position HTC 2.0 Hackathon organized by BPIT-ISTE**
===About Me
I am currently pursuing B.Tech in Information Technology from Maharaja Agrasen Institute of Technology. I started my open-source journey with Hacktoberfest 2021, and since then, I have enjoyed working on open-source projects. I have contributed to **coral-xyz/Backpack**, and by far, this is the best feeling because I use Backpack myself, and seeing my changes in the app feels great. This is my first participation in GSoC, and during the summer, GSoC will be my first priority since I won't have any other commitments during this period.
and in this time frame im only planning to contribute to open-source projects and GSoC and I'm not applying for any internship or any other program
Recently, I also started contributing to VideoCutTool, and I am looking forward to improving the tool and making it easier to use.
====Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
No, I have my mid-semester exams starting from April 20, 2023, which will end on April 28, 2023. After that, I don't have any exams, and my college also doesn't have a strict attendance policy. Additionally, I'm not applying for any internships.
====What does making this project happen mean to you?
the project is both exciting and challenging. additionally, I am grateful to the Wikimedia Foundation for their invaluable work in supporting the community. Contributing to VideoCutTool is a way for me to give back to the community while also enhancing my skills as a developer.
===Participation
I am active on Zulip, Phabricator and email. i'll be using Gerrit to push my code and will work on suggestions given by mentors on both Phabricator and Gerrit comment section.