Profile Information
Name: Punith
IRC: Punith Nayak
Web Profile: Github,LinkedIn,Profile
Timezone: IST (Indian Standard Time) (UTC + 5.30)
Location: India, Karnataka, Manipal
Typical working hours (include your timezone): 6:00 PM to 1:00 AM (IST) ~5 hours on weekdays, 8:00 AM to 8:00 PM ~ 11.5 hours on Sundays
Synopsis
Short summary describing your project and how it will benefit Wikimedia projects:
VideoCutTool is a video editing tool for videos which are on Wikimedia Commons. The Tool offers users the ability to edit their videos through various features, including cropping, trimming, disabling audio, and rotating. Before this tool, individuals who desired to edit their files would need to download them, perform the edits using editing software, and then re-upload the files to Wikimedia Commons. This process was manual, time-consuming, and necessitated expertise in editing. However, with this tool, users can now edit and re-upload files from Wikimedia Commons quickly and easily. The process is dependable and does not necessitate any prior editing knowledge
By the end of the coding period, I am planning to :
- Improve the user experience of the tool.
- Write unit test using Jest + React testing library and integrate it with Jenkins-bot/CI.
- Support to persist the edited video after the tab refresh.
- Add timed text to the newly generated video
- Fix deprecated npm packages and eslint errors. Keeping the code clean and error-free using JSDoc style type checking(T325926)
Possible Mentor(s) :
Have you contacted your mentors already :
Yes
Deliverables
Improve the user experience of the tool.
Allow users to save their work on the website's cloud storage. This will enable users to access their projects from anywhere and on any device. Here I am planning to take help from any cloud storage recommended by mentors and Wikimedia. I am planning to create a button on the home page that displays all unfinished video edits, allowing users to resume their work where they left off. Additionally, suppose there is an issue with uploading the video to Wikimedia Commons due to server load. In that case, the user can save their progress and attempt to upload the video again at a later time.
Add more editing features: VideCutTool should offer more advanced editing features, such as the ability to add special effects such as black and white, transitions between two trimmed sections of the video, text overlays blur effect and much more. This will give users more options and allow them to create more professional-looking videos. To make this happen I am using FFmpeg commands. For text overlay, I am planning to create an interface where users can enter the text adjust the size of the text and place it on video.Reference :Black and White,Text overlays,Transition,Blur
Keyboard Shortcuts: Adding keyboard shortcuts to the editing tool can help users speed up their editing process and reduce the time spent navigating the interface. Here I am talking about making a keyboard to participate in the operation of Videocuttool. For example: M will be used to enable/disable audio. Letter C will be enabling/disabling crop functionality and the letter T trim functionality letter R the rotate functionality. I am also planning to plan to include the navigation keys to adjust the crop size also trim the video length and also rotate the direction to play/pause the video via the space bar. Reference : JS-keyboard event handling
Undo and Redo Functionality: The editing tool should have an undo and redo functionality, allowing users to quickly undo any changes they have made or redo any actions they have undone. This can help users make changes with confidence and reduce the risk of accidentally losing work.
To enable undo and redo functionality, I need to keep track of the modifications made to the video. I can do this by storing the state of the video at different points in time, for example, after each modification.
I am planning to create undo and redo stacks. Every time a modification is made to the video, push the previous state of the video onto the undo stack. When the user clicks undo, pop the previous state from the undo stack and push it onto the redo stack. we will also implement undo and redo functions to revert to the previous state of the video. When the user clicks the undo button, pop the previous state from the undo stack and apply it to the video. Then push the current state onto the redo stack. Similarly, when the user clicks the redo button, pop the previous state from the redo stack and apply it to the video. Then push the current state onto the undo stack. And finally handle user input to trigger the undo and redo functions for that I can add buttons or keyboard shortcuts for the undo and redo functions, and handle the corresponding events to trigger the appropriate functionality
Write unit test using Jest + React testing library and integrate it with Jenkins-bot/CI.
API Test: Will test whether the VideoCutTool component interacts correctly with the Wikimedia Commons API by mocking the API calls and checking whether the correct data is returned. For example, we could test whether the component fetches the correct video clip data from the API when it mounts. To implement this I will create a mock API server using a library like msw or nock that returns mock video clip data
Error Test: Will whether the VideoCutTool component handles errors correctly. For example, we could test whether the component displays an error message when there is a problem fetching video clip data from the API. Similar to the first one I will create a mock API server that returns an error response. Write a test case that mounts the VideoCutTool component and checks whether the component displays an error message. Here I will use the [[react-responsive]] library to simulate different screen sizes
Internationalization Test: will test whether the VideoCutTool component supports internationalization and localization by using the react-i18next library. This test checks whether the component correctly translates text and messages for different languages and cultures
Cross-Browser Test: will test whether the VideoCutTool component works correctly on different browsers and operating systems by using the jest-puppeteer library. This test checks whether the component renders correctly and behaves consistently across different environments. Will use the jest-puppeteer library to simulate different browsers and operating system
And many more such tests integrating it with Jenkins-bot/CI.
Support to persist the edited video after the tab refresh.
one possible method is to store the modified video data in the local storage of the browser as soon as the user makes any alterations. This data may consist of the edited video's edited sections and any modifications made to its characteristics, such as trim or crop. Upon refreshing the tab, the modified video can be reconstructed by retrieving this stored data from the local storage. This process involves reading the stored data and applying the modifications made by the user to the original video file. The resulting video can then be displayed to the user for further editing or exporting.
Another effective approach to persist the edited video after a tab refresh in VideoCuttool Wikimedia is to utilize a server-side database to store the data. To save the state of the app on the server, we will need to implement a form of server-side storage. This can be achieved by creating a server-side database or file system that can store and retrieve the app's state. Firstly, we will need to serialize the app state into a format that can be stored on the server. Serialization is the process of converting the state into a standardized format that can be easily stored and retrieved. we can choose a serialization format such as JSON, XML, or Protocol Buffers, depending on our requirements. Next, we need to send the serialized state to the server. This can be done using an HTTP POST request, which sends the data to the server for storage.
Once the data has been received by the server, we need to store it in the chosen storage mechanism. For example, if you have opted for a database, you will need to create a table to store the data. To retrieve the saved state on tab refresh, we need to send an HTTP GET request to the server, which will return the serialized data.
Once we have retrieved the serialized data, we need to deserialize it back into the app state. Deserialization is the process of converting the serialized data back into the original app state format. This can be done using the same serialization format that was used to serialize the data. Finally, we can use the retrieved app state to restore the app to its previous state before the tab was refreshed.
Add timed text to newly generated video
Adding subtitles to a video can greatly improve its accessibility and usability for viewers who are deaf or hard of hearing, or who speak a different language. To achieve this, I am planning to use FFmpeg, a powerful multimedia framework that can handle video and audio processing tasks. Initially, I will extract the subtitles and title lines of the video and save them as a separate file. Then, after processing the video, I will create an interface for the user to add or edit the previously extracted subtitles. This will give the user more control over the subtitle content, timing, and appearance. Another aspect to consider is the format and style of the subtitles. I will research the best practices and standards for subtitle formatting, such as font size, colour, and position, to ensure that the subtitles are easy to read and visually appealing. Additionally, I will test the subtitle playback and synchronization across different devices and platforms to ensure that the subtitles are displayed correctly.Extracting subtitles,adding subtitles to the video
Fix npm packages and maintain error-free code using JS type checking
Here I am planning to prevent lintable/build errors from making it into production(T331364) and also implement JSdoc type checking to prevent run-time errors in production. Update required npm packages which are no longer supported or find other efficient packages
Timeline
Community Bonding Period (May 4, 2023 - May 28, 2023):
| Period | Week No | Timeline |
|---|---|---|
| May 4 - May 11 | Week 1 | I plan to gain familiarity with the video editing tools currently available on Wikimedia/Internet and identify areas where the current offerings fall short. Additionally, I intend to review the codebase of the VideoCutTool extension to gain a comprehensive understanding of its architecture. In addition, I also plan to educate myself on how videos are processed, including the video encoding and decoding process, video compression techniques, and how videos are transmitted over the internet. This knowledge will help me to better understand how the VideoCutTool can be improved and optimized for performance |
| May 11 - May 17 | Week 2 | During the second week of the project, I plan to focus on setting up the development environment for the VideoCutTool and familiarizing myself with Jest. Specifically, I will study the basics of Jest and the React Testing Library, and gain a deep understanding of how Jest's mocking functionality works. This will enable me to simulate various scenarios and test the behaviour of the VideoCutTool in different situations |
| May 18 - May 24 | Week 3 | I plan to gain a comprehensive understanding of FFmpeg and its various functionalities. I will dive deep into the FFmpeg documentation and familiarize myself with its command-line interface, command syntax, and various options for configuring and manipulating video files. Additionally, I will explore its support for different codecs, containers, and protocols, and its integration with other multimedia tools and frameworks |
| May 24 - May 28 | Week 4 | My primary focus will be to gain a deep understanding of the complete lifecycle of the VideoCutTool, from the initial download of video files to the processing and eventual upload of the edited videos. I will examine each component of the tool and identify their specific tasks and functionalities, with a focus on understanding how they work together to achieve the overall goal of video editing |
Coding Period (May 29, 2023 - August 28, 2023):
| Period | Week No | Timeline |
|---|---|---|
| May 29 - June 5 | Week 1 | Work on implementing keyboard shortcuts to VideoCutTool and make the tool user friendly |
| May 5 - May 12 | Week 2 | Work on new modification ideas including Blur, Transition, Text-overlays, BlackAndWhite etc. Extra modification buttons will be added for the user to perform this action |
| May 12 - May 19 | Week 3 | Discuss with my mentors and iron out the step-by-step implementation of functionality which allows users to save their work on the website's cloud storage. Along with that would start working on the interface where the user could access his/her previous works |
| May 19 - May 26 | Week 4 | Start working on the database and server-side logic on saving the work on cloud storage |
| May 26 - June 3 | Week 5 | Would conduct several tests to make sure that the functionality works perfectly fine. |
| June 3 - June 10 | Week 6 | Implement Undo & Redo functionality |
| June 10 - June 17 | Week 7 | Would finish work on implementing undo-redo functionality and would start discussion implementing persist on refresh page functionality. Alternatively would start working on the helper function required for this particular functionality |
| June 17 - June 24 | Week 8 | Would start working on the server logic which includes saving the state of the editing playground in the database. |
| June 24 - June 31 | Week 9 | Would Integrate jest tests mentioned in the "Deliverables" |
| June 31 - July 7 | Week 10 | Would complete any backlogs in the above-mentioned tasks before my Mid-term evaluation. |
| July 7 - July 14 | Mid Term Evaluation | Will show my progress on UX improvisation, Persist on refresh, test scripts |
| July 14 - July 21 | Week 1 | Start discussing adding timed text to newly generated video and start working on the client side logic and UI |
| July 21 - July 28 | Week 2 | Would start working on the server-side logic of this particular functionality and finish it. |
| July 28 - August 7 | Week 3 | Would start working on fixing npm deprecated packages, Build errors, and lint errors. And would implement JsDoc style type checking to reduce run time error |
| August 7 - August 14 | Week 4 | * |
| August 14 - August 21 | Week 5 | * |
| August 21 - August 28 | Final evaluation | Would show my progress on Adding timed text fixing npm packages and maintaining error-free code using JS type checking |
| August 28 - September 4 | Extended Coding period | I plan to incorporate a feature for users to provide feedback and report grievances on the result page after using the videoCutTool. This will involve adding a feedback button on the result page, which will lead to a small window containing a text area where users can share their experiences. The window will also include a submit button, which, when clicked, will send an email to the administrator. |
I intend to allocate a two-week buffer period at the end of the project to account for any unexpected spillages or unforeseen delays that may arise. If everything goes fine then I will work on unassigned phabricator tasks of VideoCuttool. This will serve as a contingency plan to ensure that the project is completed within the desired timeframe despite potential setbacks.
UI mockups
UI for extra added modification
UI for extracting saved progress
UI for Result Page
UI to add timed text
Participation
- My code will be committed to the branch with the task ID name in the video cut tool repository using Gerrit.
- I will be active on the general gsoc2023 VideoCutTool channel of the official Wikimedia Zulip channel where I will post my queries regarding the tool. Will reach out to mentors via phabricator or direct message them on Zulip during work hours
- During my working hours, I can be reached through Phabricator or via email at npunith125@gmail.com
- I will update my MediaWiki user page with information on my progress weekly
About Me
Tell us about a few:
Your education (completed or in progress)?
I am currently a second-year computer science engineering student at the Manipal Institute of technology. I finished junior and high school at Madhava Kripa English Nursery and
Higher Primary School. I have been doing web followed by full stack development since 2021 along with core computer subjects including data structure and algorithms, OOPs,
Database Management systems and operating systems.
How did you hear about this program?
I learned about the Google Summer of Code program through LinkedIn and subsequently connected with a former participant who educated me about open source and its potential for impact. I began my open-source journey with Wikimedia, feeling comfortable starting there. The supportive community and helpful mentors further fueled my interest.
Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
Between May 22nd and June 3rd, I will have exams, and then I will have a two-month holiday before my classes resume in mid-August. During this period, I will be able to contribute approximately 50 hours or more per week. I will keep in contact with my mentors and keep them updated on my progress.
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)?
No
What does making this project happen mean to you?
The Wikimedia organization has always been a vital source of knowledge for communities around the world. I find great joy in contributing to this organization, knowing that my efforts have a positive impact on millions of people. Even if my proposal for Google Summer of Code is not accepted, I plan to continue contributing and assisting the Wikimedia community by resolving technical challenges.
What after gsoc ?
After completing my GSOC, I plan to continue contributing to Wikimedia. I aim to explore and contribute to different repositories of Wikimedia while also guiding new contributors.
Past Experience
Wikimedia
I have been making contributions to Wikimedia (Wikimedia/core, Wikimedia/ports and VideoCutTools) since December 2022. As of now, I made have around 13 contributions 4 of which are still pending review:
- https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/888310/ merged Microtask
- https://gerrit.wikimedia.org/r/c/labs/tools/VideoCutTool/+/887006/ merged Microtask
Personal project:
I have no personal project but did participate in many hackathons till now:
Academia Industry conclave hackathon: Here I and my team build a web app using React as client and node as a server which could detect the number plate of the vehicle and would show information regarding the vehicle including the owner of the vehicle, phone number registered and much more. This app was built to prosecute Hit-and-run offenders in Indian traffic.
Github
Intracollege hackathon : Innovation centre of our college conducted a hackathon where we had to build a platform
which would bring budding entrepreneurs, investors and job seekers together. This was one of the most challenging hackathons.
Front-end :Github
Backend :Github
PPTS