Profile Information

Name: Aditi Ganvir
IRC nickname on libera.chat IRC NA
Web Profile (optional)
Github: https://github.com/aditiganvir28
LinkedIn: https://www.linkedin.com/in/aditi-ganvir-216336232/
Email: ganviraditi28@gmail.com
Resume (optional)
Location (country or state): Nagpur, India
Time Zone: UTC+05:30
Typical working hours:
During Semester Break : 1.00 p.m. - 7.00 p.m. and 10.00 p.m. - 1.00 p.m.
After Semester Break : 6.30 p.m. - 8.30 p.m. and 10.00 p.m. - 2.00 p.m.

Synopsis

• VideoCutTool is a video editing tool that allows you to edit video files on Wikimedia Commons. It provides users with the ability to crop, trim, disable audio, and rotate videos. The goal of this project is to improve the functionality of VideoCutTool that allows users to easily edit videos that are uploaded to Wikimedia Commons. Earlier, users have to use third-party software or complex command-line tools to perform these tasks, which can be intimidating for some users and deter them from contributing to Wikimedia.The VideoCutTool makes it easier for users to edit videos on Wikimedia Commons and upload them again.

• The goal of this project is :
  • Improve the user experience of tool
  • Fix existing bugs
  • Add new features and functionality to the tool
  • Add text to video at any position and for any interval of time.
  • Support to persist the edited video after the tab refresh.
  • Avoid bitrate drop (quality degrading) while editing videos (T262892).
  • Fixing the edited video back to commons.
  • Write unit test using Jest + React testing library and integrating it with jenkins-bot/CI.

• Possible Mentor(s): @Gopavasanth @Soda

• Have you contacted your mentors already? Yes

Deliverable

New Features To be Added

• Add text, captions, and subtitles to videos at any point and timeline:
  • For this we can make use of drawtext filter in FFmpeg . Here is the code snippet of how we can add text in a video. {F36937562} This is just an example of how we can add text in a video, we can modify it on the basis of our codebase. In the above example, drawtext filter is used to add text to a video. The fontfile, fontsize, fontcolor, x, y, enable_bold, enable_italic, and enable_underline options are used to customize the appearance of the text. The box, boxcolor, and boxborderw options are used to add a black semi-transparent box behind the text for better visibility. Start time and end time specify the start and end times (in seconds) for the text overlay.
    
    Why is it Required?
    • Users can add text for specific time intervals if they want to add some information that isn't provided in the video.
    • Secondly, we can also add subtitles in a video.
    • As an example, if we want users to know what year a historical video belongs to, we can add a text at the top of the video indicating the year.

• Adding speed factor
  • Here is the basic example of how we can add speed factor to a video using FFmpeg {F36937602} This is just an example of how we can add speed factor. We can divide speed factor in 0.5x, 0.75x, 1x, 1.25x, 1.5x, 1.75x and 2x and provide a dropdown for it. We can also add speed factor for specific intervals of time. For this we can provide input box for start and end time.

• Improving the UI/UX of the tool
  • We can shift the sidebar to top navbar
  • We can modify the steps to a progress bar as shown below.
  • We can take the following inputs from the user for adding a text in video.Italics, bolds, time, positions, etc will appear only when a user adds a text.
  • I have also added the buttons for undo/redo.

• Undo - Redo Function: We can also implement an undo redo function. This can be done by maintaining two arrays, history array and future array. Whenever a change occurs, push a copy of the previous state to the history array. To undo, simply pop the last state from the history array and push it to the future array. To redo, pop the last state from the future array and push it to the history array.

Existing Issues

• Fixing the edited video back to commons: Sometimes, video fails to get uploaded to commons. I will go through the code again and analyze what is happening at each step to find out the reason for video not getting uploaded. Secondly, if the video fails to upload we can preserve the edited video until it is successfully uploaded back to commons. I will discuss this issue with mentors and get suggestions of how we can prevent this.
• Support to persist the edited video after tab refresh:To persist the edited video after the tab refresh, we can make use of local storage to store all the changes the user made in the local storage and delete it from the local storage as soon as the video is uploaded successfully to commons. This is one approach, will discuss with the mentors and implement accordingly.
• Avoid bitrate drop (quality degrading) while editing videos:One approach to address this issue is to set the target bitrate for the output file. This will ensure that the bitrate is consistent throughout the video, even after editing. I will do more research on how this issue can be fixed and discuss it with mentors.
• Fixing React and Node package warnings:For this we have to go through each and every warning and find the root cause. Mostly, there will be the chances that the package got updated. To accomplish this, we need to download the updated version and modify our code accordingly. If the cause of the React Node package warnings is something other than outdated packages, such as deprecated features or breaking changes, it may be necessary to modify the code in our application to resolve the issue.
• Writing unit tests using Jest + React testing library and integrating it with Jenkins-bot: Currently, Home, Notification and Authentication have their test cases being written. We have to write a test case for the rest of the components in frontend using Jest and React Testing Library. We will be using Jest for end-to-end testing of the backend of a Node.js application to ensure that all functions are working correctly, and that all API requests are properly fetched and processed.

Future Improvements:

With the conclusion of the proposal, I wish to propose an idea of using Typescript and Vite app:

• It is beneficial to consider converting the entire project from JavaScript to TypeScript for long-term evolution. One approach to this conversion could be to start by converting only a small portion of the codebase to TypeScript, rather than attempting to convert the entire codebase all at once.
• Benefits of converting to TypeScript:
  • TypeScript provides optional static type checking, which can help catch errors at compile-time and prevent runtime errors caused by type mismatches.
  • Its type information can be used by IDEs and code editors to provide enhanced code completion, error checking, and refactoring capabilities.
  • The use of TypeScript can make large codebases more maintainable and scalable by providing stronger code organization and clearer documentation.
  • It is a superset of JavaScript, which means that existing JavaScript code can be gradually migrated to TypeScript without breaking changes.
  • It is actively developed and maintained by Microsoft and has a large and growing community of developers.
• After we complete the task of converting to TypeScript, we can convert the project from CRA to Vite keeping in mind for long term evolution and as per the recent news that create-react-app has been deprecated.
• Benefits of converting to Vite:
  • Vite offers a faster development experience by using ES modules and providing instant reloading without the need for a full rebuild. Thus, it reduces the build time.
  • Unlike CRA, Vite does not build your entire application before serving, instead, it builds the application on demand. It also leverages the power of native ES modules, esbuild, and Rollup to improve development and build time.
  • Because Vite uses ES modules and builds code on the fly, it can result in faster build times and better runtime performance compared to CRA
  • Vite offers a simpler and more flexible configuration compared to CRA.
  • It supports advanced tooling features such as code splitting, CSS preprocessing, and TypeScript support out of the box.

References:
https://www.geeksforgeeks.org/advantages-and-disadvantages-of-typescript-over-javascript/
https://semaphoreci.com/blog/vite
https://muzammilbilwani.medium.com/why-you-should-prefer-vite-over-create-react-app-cra-5adf3e71771f

Participation

Describe how you plan to communicate progress and ask for help, where you plan to publish your source code, etc

• When I need assistance or want to discuss, I will use Zulip to contact mentors.
• I will provide weekly reports of my work and get feedback from the mentors.
• Once I have completed one task, I will publish my code to Gerrit for code review and also maintain the source code.

About Me:

I am pursuing BTech in Computer Science Engineering (CSE) in Indian Institute of Technology, Indore. Currently, I am in 4th semester (2nd year) out of my 8 semester program.
How did you hear about this program?

• I heard about this program through my friends and seniors and searched it online.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?

• I have my semester breaks from 9 May, 2023 to July 10, 2023 during which I can give 6-7 hours per day, 6/7 days per week as per workload.
• After that my classes will be there so I can give 3-4 hrs per day, 6/7 days per week as per workload.

We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?

• I am not planning to apply for both programs.

What does making this project happen mean to you?

• Working on this project would provide me with a chance to gain real-world experience and work on a project that has the potential to make a meaningful impact on the community. t would allow me to apply the knowledge and skills that I've learned in my coursework to a practical project, while also giving me the chance to gain experience with open source tools and technologies, as well as development practices such as version control, testing, and documentation.

Past Experience

Open Source Contibution

• Currently I am working on a task (T332517) on VideoCuttool and have uploaded the patch for review on Gerrit.
• I will be contributing more to Videocuttool.

Projects

• IIT INDORE Yearbook Portal: It is a full stack project which is developed on React Js, Node Js, Express and MongoDb. In the yearbook portal of IIT Indore, graduating students can make their profile , after which they will recieve mail and sms for verifiction. Anyone who is a part of IITI community can comment on graduating students and graduating student have the right to approve or reject the comment. In this project I am the main contributor in the backend part on Node Js and MongoDb. This project helped me to get familiar with Mongodb and Node Js.
• Loan repayment predictor website: It is an AI/ML project which was developed on React JS. This project was part of the Enosium competition. In this user can give their input in form data and in return they get a probability of chances that they will repay the loan. In this project I did the development part on react js and integrating the ML model to backend.
• Article Search Engine and Database Management System:This is a static website developed on tech stacks React Js, Bootstrap, NodeJs, Express and MySql. In this project a user can search articles related to keyword or any topic, a list of all the articles related to that keyword or topic would be displayed. This was a team project and I contributed in the backend part. I learned JWT authentication and how to make an optimized search engine and also to reduce the search time. This project helped me to get familiar with React Js hooks and states, Node Js and MySql.
• Meeting Scheduler: This web development project was a part of IITISoc competition. This project aims at scheduling the meetings and inviting team members. It was developed on tech stacks HTML, CSS, JS, Node Js, Express and MongoDb and I worked in the frontend and backend both. I got more familiar with HTML, CSS, JS, NodeJs , Express and MongoDb.