Profile Information
Name: Pranav Yadav
Gerrit: https://gerrit.wikimedia.org/r/q/TheRealPranav
Zulip Chat: Pranav Yadav | User ID: 605334
Location: India
Timezone: UTC+05:30
Typical working hours:
- Weekdays: 09:00 to 13:00 UTC+05:30 and 14:00 to 20:00 UTC+05:30
- Weekends (if necessary): 09:00 to 13:00 UTC+05:30 and 17:00 to 19:00 UTC+05:30
Synopsis
This project aims to improve the VideoCutTool, a tool for editing videos in Wikimedia Commons, with the following broad objectives:
- Fix all the bugs identified in the Phabricator task T327582 to improve the stability, and usability of the VideoCutTool.
- Add new functionalities to the tool to enhance the user experience, such as video filters, text, or annotations.
- Write and automate unit tests to ensure that the tool is functioning properly and that any changes made do not introduce new bugs.
- Collaborate with mentors (and team) to understand the root causes of the bugs and develop solutions to fix them and implement new features.
The project will benefit Wikimedia projects by making the VideoCutTool more user-friendly, reducing the need for external software applications to edit and re-upload videos to Wikimedia Commons.
- Possible Mentor(s): Gopa Vasanth (@Gopavasanth), Sohom Datta (@Soda)
- Have you contacted your mentors already? Yes
Deliverables
- The following table describes the timeline of my work with deadlines and milestones, broken down week by week, which is followed by the UI mockups which describe specifics about each specific task for new features.
- Also, it includes the time I am planning to allocate for investigation, coding, deploying, testing, and documentation for respective tasks.
| Period | Task |
|---|---|
| May 4-May 28 | Community bonding period: - Connect with community members, get to know each other, understand each other's expertise, and discuss potential approaches for new features. - Setup MediaWiki user page. - Start reading WikiMedia technical blogs. - Write bi-weekly progress reports and (or) blog posts and share with the community. - Exploring the use cases of VideoCutTool thoroughly, correlating the current interface and features with underlying code, and understanding the bugs. - Collect the development resources about the VideoCutTool, and its dependencies, and go through the related documentation. - Re-iterate on plans for tasks for both existing bug fixes and new features (Filters, Text Annotations); along with the mentors, team, and community. |
| May 29-June 11 | - Identify and fix existing bugs in VideoCutTool as per plans made in the past weeks. - Write initial tests for the same (along with respective patches). - Write progress reports and (or) blog posts and share with the community. |
| May 29-June 18 | - Collaborate with mentors, team, and community about optimal approaches and refactoring the code. - Write initial tests for the same (along with respective patches). - Thoroughly understand the code of existing (tools) implementations. - Correlate the implementations with VideoCutTool. - Proceed accordingly with implementations. - Write progress reports and (or) blog posts and share with the community. |
| June 19-June 22 | Tests Phase I - Write and automate tests for bugs under T327582 using Jest, react-testing-library, and Jenkins CI. - Iteratively write tests for files and features that are being refactored and if it is dependent on any feature. - Such that increasing the overall test coverage of the VideoCutTool codebase. |
| June 23-June 25 | Pre-Midterm Evaluation - Get the bug fixes reviewed and discuss optimizations with mentors, team, and community. - Brainstorm optimizations to implement the optimal approach possible. |
| June 26-June 30 | - Iterate on the feedback provided. - Ensure compatibility with devices and browsers. - Test VideoCutTool using tools like Browserstack and similar tools to ensure compatibility across devices and browsers. - Write progress reports and (or) blog posts and share with the community. |
| July 1-July 3 | - Discuss the impact of bug fixes and need/ideas around new features with all potential stakeholders. - Brainstorm approaches to optimize the implementations. |
| July 4-July 10 | - Identify and fix any bugs and code cleanup for Midterm Evaluation submission. - Run the tool and verify everything works as intended. - Check the bundle size and improve accordingly. - Submit for Midterm Evaluation. - Write progress reports and (or) blog posts and share with the community. |
| July 11-July 14 | Midterm Evaluation |
| July 15-July 20 | - Iterate on feedback provided. - Go through the feedback provided by mentors and fix, update, and (or) refactor the code if necessary. - Improve the UI for mobile devices (smaller screens). - Implement accessibility features like: 1. Volume Adjust buttons & sliders. 2. Aspect Ratio Guide Text Overlays and Presets (details under attached respective UI mockups). - Buffer to adjust the plans only if necessary after discussing with the mentors and stakeholders. |
| July 21-July 29 | 1. To keep the edited video visible after refreshing the tab, save its data in session storage. 2. Also, store the necessary data in an object and retrieve it after a page refresh. 3. Remember to clear the session storage data after the video has been saved. 4. Keep in contact with mentors throughout the implementation of this feature to make sure it's being properly implemented and no code structure issues occur. 5. Write progress reports and (or) blog posts and share with the community. |
| July 30-August 1 | Test Phase II - Write Tests for these new features (both frontend and backend, along with the respective patches): 1. Ensuring the video data is stored successfully. 2. We're able to retrieve it successfully. 3. It is retained after the page refresh. 4. It is cleared after the logout/session expires. 5. Progress is being retained/saved. |
| August 2-August 4 | Optimize and refactor the current approach for T262892 by utilizing FFmpeg's lossless editing capability to prevent a decrease in bitrate during video editing. - Thoroughly understand the FFmpeg's documentation for VideoCutTool's use-cases, understand the use of parameters, and how they affect performance. - Check for any device-specific optimizations and implement them. |
| August 5-August 12 | Implement New Features: 1. Basic Video Filters (B&W, Sepia). 2. Basic Text annotations/overlays. 3. Undo/redo Actions performed; (details under attached respective UI mockups). - With suggestions from the stakeholders. - Understand how these are implemented and used in existing tools. — The aim is to implement basic yet effective features - Document basic steps and guide for users. - Write progress reports and (or) blog posts and share with the community. |
| August 10 -August 13 | Test Phase III - Write Tests for the above new features; test cases (both frontend and backend, along with the respective patches): 1. A filter is being applied. 2. A filter is being changed. 3. A filter is being removed. 4. Text annotation is being added. 5. Text annotation is being removed. 6. Progress is being retained/saved. |
| August 14-August 16 | - Get the new feature implementations reviewed by mentors. - Ensure compatibility with devices and browsers. - Re-check the bundle size and improve accordingly if necessary, with discussions from mentors and community. - Write progress reports and (or) blog posts and share with the community. |
| August 17-August 20 | - Iterate over feedback. - Document changes made to the tool and write guide for users. - Fix new bugs if any occur. |
| August 21-August 28 | Final Week: - Add new minor yet important accessibility features: 1. Submit/Fetch/Check Button in the upload container. 2. Full Screen Mode. 3. Add proper ARIA roles (details under attached respective UI mockups). - Add tests for these features along with the respective patches. - Buffer; to fix any new bugs. - Re-check & verify VideoCutTool execution: 1. Run the tool and verify everything works as intended. - Write progress reports and (or) blog posts and share with the community. |
| August 29-September 3 | Add other Tests such as: 1. Smoke Tests for the VideoCutTool. 2. Fuzzing Tests. 3. Performance Tests. 4. Separate these tests (test-suits) from other tests (test-suits). - Discuss the respective results with mentors and community and optimize any code if necessary. Perform Final Checks: 1. Run the tool and verify everything works as intended. 2. Re-ensure compatibility with devices and browsers. - Finalize the work. - Submit the final work as per the guidelines from the GSoC website and mentors. |
| September 4 | Mentors submit final GSoC contributor evaluations. |
| September 5 | Initial Results of Google Summer of Code 2023 announced. |
UI Mockups
- Accessibility Features: (to follow the WAI-ARIA standards and specifications)
- Adding Submit/Fetch/Check button on the homepage inside the Upload Box to make sure it is accessible to everyone.
- Adding Media Seek (Forward/ Backward) Buttons in the video player.
- Adding Volume Slider button in the video player so that users can adjust the volume while playing (not for adjustment in video)
- Adding Full Screen button in the player so, users can view the video in Full Screen Mode.
- Adding Submit/Fetch/Check button on the homepage inside the Upload Box to make sure it is accessible to everyone.
- New Features:
- Adding Volume Adjust slider to adjust the volume of the edited video. Range 0 - 100%
- Adding Aspect Ratio Guide Text to show the aspect ratio of the video while cropping.
- Adding Aspect Ratio Preset buttons to choose from the standard aspect ratios.
- Adding Undo/Redo Buttons to allow user to undo or redo the actions performed. It'll also require storing user actions along with metadata about those actions in browser storage to perform these actions afterward.
- Adding Volume Adjust slider to adjust the volume of the edited video. Range 0 - 100%
Participation
- I will utilize Gerrit for all activities related to development. I will also ensure the main codebase is always stable and working as expected.
- I will be available to collaborate with my mentors during my working hours.
- Weekdays: 09:00 to 13:00 UTC+05:30 and 14:00 to 20:00 UTC+05:30
- Weekends (if necessary): 09:00 to 13:00 UTC+05:30 and 17:00 to 19:00 UTC+05:30
- I will use Zulip Chat to communicate with them and respond promptly to any messages or requests for updates.
- I will use Phabricator to manage bugs and subtasks for the project. I will create tasks for each bug or feature request and update their status regularly as I work on them. The Phabricator will help me keep track of my progress and ensure that all issues are addressed promptly.
- In addition to being available on Zulip Chat during my working hours, I will also be available via Gmail to be contacted during non-working hours. I will respond to any messages or requests as soon as possible, but I may be unable to provide immediate assistance outside my working hours.
About Me
I am a final-year student pursuing my Bachelor's degree in Computer Engineering, a four years degree spanning eight semesters, from St. Francis Institute of Technology (SFIT), University of Mumbai, Maharashtra, India. I have completed Data Structures and Algorithms, Cryptography and Cyber Security, Web Development, Databases, Software Engineering, Machine Learning, Blockchain, and other CSE courses.
This is the first time I'm applying for Google Summer of Code. I learned about the Google Summer of Code program through blogs and posts on the internet and in detail from remote mentors. They shared their experiences and motivated me to apply for it this year.
I plan to commit full-time to the Google Summer of Code program and will not have any other work or vacation commitments during the program duration. Apart from semester exams in early/mid-May, I will be free to work on the project. I will prioritize the project and work collaboratively with the mentors and Wikimedia team(s) to achieve the project objectives.
I am not planning to apply for both Outreachy and GSoC programs at the same time. Currently, I am only planning for Google Summer of Code. And after a little bit more research about Outreachy and according to my schedules and commitments, I will consider applying for Outreachy to organizations that align with my interests and skills, and if the projects have a significant social impact.
As a longtime user of Wikimedia Projects/Services, I understand the importance of having a user-friendly tool for editing videos on the platform. Participating in this project and contributing to the development of the VideoCutTool will enable me to make a meaningful impact on the Wikimedia community and empower users to create and edit high-quality videos on the platform. It will also help me enhance my technical skills and gain valuable experience working on an open-source project with experienced and diverse mentors and the team.
Past Experience
- Contributions (feature or bug fix) made by me for Wikimedia projects during the application phase:
- VideoCutTool Project:
- T333768: Boilerplate not modified/removed manifest.json and index.html basic SEO tags missing.
- VideoCutTool Project:
- Personal Projects:
- Covid19Helper (Prototype) - Online E-Commerce store for Medical Supplies. During Covid-19 pandemic the lack of Medical Supplies motivated me to build this prototype.
- Tech Stack: ReactJs, MongoDB, NodeJS, MaterialUI. Also effectively utilized JavaScript, HTML, and CSS.
- I learned state management in ReactJs and best practices for MongoDB for authentication.
- Educational Discussion Forum (Video Demo) - Full functional, feature rich Discussion Forum. (Group Project)
- Tech Stack: PHP, MySQL, Apache Tomcat. Also effectively utilized HTML and CSS.
- I learned PHP from scratch for this project, and I enjoyed the process. Today I see major frameworks shifting to PHP-like architecture.
- Weather App (PWA) - It is a Progressive Web Application (PWA) that provides Weather Information fetched from OpenWeatherMap API
- Code: https://github.com/Pranav-yadav/weatherapp-pwa
- Tech Stack: ReactJs, Express, NodeJs. Also effectively utilized JavaScript, HTML, and CSS.
- I learned API integration best practices during this project, and the enjoyed the process of utilizing JavaScript.
- Covid19Helper (Prototype) - Online E-Commerce store for Medical Supplies. During Covid-19 pandemic the lack of Medical Supplies motivated me to build this prototype.
- Open source projects that I have contributed to:
- @facebook/react-native: React Native is an open-source UI software framework created by Meta Platforms, Inc.
- I am actively contributing to the rewrite of the Parsers Modules; part of react-native-codegen, used by React Native to parse the ReactJs code into Native code for both IOS and Android. Over 12 PRs have been merged at the time of writing and currently working on a task of publishing an internal lib as a package on npm.
- @facebook/react-native: React Native is an open-source UI software framework created by Meta Platforms, Inc.
Below PRs are not directly merged on GitHub, rather managed on internal FB phabricator, hence GitHub shows as closed, instead look for Merged label and/or Squash commit comment added by the bot under the PR discussions.
- @sunflower-land/sunflower-land: Sunflowerland is a No. 1 Web3 Game on Polygon (Matic) Mainnet (Blockchain). I was an active contributor until the previous year. i.e. until the launch of the game. A huge number of PRs have been merged.
- Some of the major Merged PRs:
Learnings, and skills
According to me, one the best aspects of contributing to Open Source is one gets to learn something new with each new PR and from code-reviews, and knowing that your code is deployed and used by/serving millions and even billions of people.
- While contributing to significant projects like React-Native and many others, I learned and am learning a lot about JavaScript best practices, Code Quality, and Robust Error handling and importance of Unit Tests/Test-Suits.
- My main motive to contribute to Open Source is solving real-life problems with significant social impact toward better humanity and lifelong learning.
- My current tech stack includes mainly but is not limited to ReactJs, TypeScript, JavaScript, Express, NodeJs
- Databases: MongoDB, MySQL, Redis, and SQLite.
- CSS Frameworks: TailwindCSS, MaterialUI, and Bootstrap.
- I practice DSA and problem solving using C++ and Java
- I have been using Python extensively for Machine Learning (ML) and Deep Learning (DL) activities.
- In my free time; I love reading Tech/Engineering blogs, Swimming, and playing with our pet dog :)