**Profile Information**
Name: Tarun Bisht
GitHub: [[ https://github.com/tarunbisht-24 | tarunbisht-24 ]]
Linkedin: [[ https://www.linkedin.com/in/tarun-bisht-38724b201/ | tarunbisht ]]
Phabricator: [[ https://phabricator.wikimedia.org/p/tarunbisht24/ | tarunbisht24 ]]
Location: India
Typical Working Hours: 14:00 (UTC + 5:30) to 20:00 (UTC + 5:30) on Weekdays and 4:30 (UTC + 5:30) to 17:30 (UTC + 5:30) on Sundays
Time zone: UTC +5:30 (Indian Standard Time)
**Synopsis**
VideoCutTool is video editing tool for videos which are on Wikimedia Commans. The Tool offers users the ability to edit their videos through various features, including cropping, trimming, disabling audio, and rotating. Prior to 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.
I intend to do the following tasks by the end of coding duration :
- Improving the user experience by adding new features to the tool and upgrading current ones.
- Create unit tests with the Jest + it tests with the Jest + React testing libraries and integrate them with Jenkins-bot/CI.
- Capability for retaining the altered video after tab refresh.
- Insert timed text into the freshly created video.
- Delete or fix any outstanding issues (if any).
**Possible Mentor(s)**
Sohom Datta (@Soda), Vasanth Gopa ( @Gopavasanth )
**Have you contacted your mentors already?**
Yes
**Deliverables**
**Enhance the tool's user experience.**
**Preview Window:** A preview window in a video cut tool can improve the user experience by allowing users to observe their video clips in real-time while they are edited. These are some things to think about while putting in a preview window which I am thinking to implement for eg:-
a) **Set the size and position of the preview window:** The preview window should be large enough to clearly display the video clip while not taking up too much screen space. It should also be placed in such a way that users may easily see it when editing.
b) **Choosing the proper playback controls:** The preview window should have playback options that allow users to play, pause, rewind, and fast-forward the video clip. These controls should be simple to use and easily accessible.
c) **Video scrubbing:** It is a feature that allows users to easily move among video clips by dragging the playback head down the timeline. Adding video scrubbing can help users discover specific areas of a video clip that they wish to alter. Consider using zooming and panning: Depending on the size of the video clip and the quality of the preview window, zooming and panning functions may be required to allow users to examine select areas of the video clip in more detail.
d) **Making sure the video clip plays smoothly and without lag or stuttering: **The preview window should be built to make sure the video clip plays smoothly and without lag or stuttering. This is accomplished by optimising the software and hardware resources to offer the processing power required to play the video clip smoothly.
e) **Test the preview window:** Before releasing the video cut tool, it is critical to extensively test the preview window to ensure that it is functioning properly and giving users with a good experience.
**Visual Cues:** Here I am thinking to implement visual cues in the video cut tool project by the following:-
a) Using a colour change to highlight specific segments or portions
b) To show the status of a cut or paste operation, a progress bar or loading symbol is displayed.
c) Using animation to demonstrate the cutting, copying, or pasting of a clip or chunk
d) After an activity is done successfully, a confirmation message or symbol is displayed.
**Providing Feedback:** I think Giving feedback is an important part of enhancing the user experience of a video editing tool. Every answer that the tool provides to the user's activities is referred to as feedback. Visual or audible signals, alerts, progress indicators, or confirmation messages are all examples of feedback. Feedback is essential in video cut tool because it gives users a sense of control and confidence. When users execute an action, they expect the tool to respond. Users may be unsure if their activity was effective or not if the tool does not offer feedback.
For example, I am thinking to imply When a user selects a video clip to edit, for example, the tool should give visual feedback, such as highlighting the selected region or displaying a progress bar indicating the cut's progress. When the cut is finished, the tool should offer feedback to indicate that it was successful.
**Keyboard Shortcuts:** Keyboard shortcuts enable you to conduct activities in a video editing application by hitting one or more keys on your keyboard. They are intended to make ordinary operations faster and more efficient for users by eliminating the need to use the mouse to go through menus and buttons. Keyboard shortcuts are frequently represented by a key combination, such as Ctrl + C for copying or Ctrl + V for pasting. Although distinct tools may have different keyboard shortcuts, many basic shortcuts are shared by all software programmes and I am thinking to contribute mainly into new keyboard shortcuts which leads to user feasibility of running the video cut tool application.
**By implementing Keyboard Shortcuts in our video cut tool project these things will be affected:-**
Speed: Using keyboard shortcuts to browse through menus and buttons may be significantly faster than using the mouse. When completing repetitive operations, this can save users a significant amount of time.
Efficiency: Keyboard shortcuts can help users do activities more efficiently since they don't have to move between the mouse and keyboard as frequently.
Precision: Since keystrokes are more exact than mouse clicks, keyboard shortcuts can help users be more precise when executing activities.
Accessibility: Keyboard shortcuts can be especially useful for persons with limited mobility or who struggle to operate a mouse.
**Create unit tests with the Jest + React testing libraries and integrate them with Jenkins-bot/CI**
Here are my thoughts to implementing this task in step by step:
1) ** Install Jest:** Jest is a testing framework for JavaScript. You can install it as a dev dependency using npm or yarn.
2) **Create a __tests__ folder:** Create a folder called __tests__ in the root directory of your project. This is where Jest will look for your test files.
3) ** Write test cases:** Write test cases for each component or function that needs to be tested. Tests can be written in separate files or within the same file as the component or function being tested. For example, if you want to test the VideoPlayer component, create a file called VideoPlayer.test.js in the __tests__ folder. Here's an example test case:
4) **Run tests locally:** Run tests locally using the Jest CLI by running the "npm test" or "yarn test" command. This will run all the test cases in the __tests__ folder.
5) **Refactor your code based on test results:** If any of your test cases fail, you can use the test results to help you identify and fix any issues in your code.
6) **Integrate with Jenkins:** To integrate Jest with Jenkins, I will create a Jenkins job that runs the npm test or yarn test command on each push to the code repository and Jenkins will report any test failures or errors in the build log and notify you accordingly.
{F36939396}
Fig1: Creating the test
{F36939398}
Fig2: For ex if we want to test a button to perform some action then creating it.
{F36939401}
Fig3: Performing the test on the button as OnClick
{F36939403}
Fig4: Integrating with Jenkins, building a pipeline and then creating a job
Different kind of testing that we can implement in the project
Unit Testing: Here unit tests could be used to test individual functions or components such as the video player, the video cutter, or the preview window.
Integration testing: Integration testing could be used to ensure that different parts of the tool, such as the video player and the video cutter, work together correctly.
Acceptance testing: Also acceptance testing could be used to ensure that the tool meets the user's requirements, such as being able to cut a video into segments of a specific length or format.
End-to-end testing: I suggest end-to-end testing could be used to ensure that the tool can correctly import and export video files, and that it works correctly on different platforms and devices.
Performance testing: I think performance testing could be used to ensure that the tool can handle large video files or multiple users simultaneously.
**Capability for retaining the altered video after tab refresh.**
To support persisting the edited video after a tab refresh in a video cut tool project.
1) **Save the edits in the browser's local storage:** One way to persist the edited video after a tab refresh is to save the edits in the browser's local storage. When the user returns to the page, the video cut tool can retrieve the edits from the local storage and reapply them to the video. However, local storage has size limitations, so this approach may not work for very large video files or extensive edits.
2) **Save the edited video on the server:** Another option is to save the edited video on the server. When the user returns to the page, the video cut tool can retrieve the edited video from the server and display it. This approach requires server-side programming and storage, but it ensures that the edited video is available across multiple devices and browsers not just limited to wikimedia.
3) **Use a web worker: **A web worker is a script that runs in the background, separate from the main thread of the browser. By using a web worker, the video cut tool can continue to process the video even if the user refreshes the page. The edits can be saved periodically to ensure that the user's progress is not lost.
4) **Use a cookie:** A cookie is a small piece of data that a website can store on a user's computer. The video cut tool can save the edits in a cookie, which can be retrieved when the user returns to the page. However, cookies have size limitations, so this approach may not work for very large video files or extensive edits.
5) **Use a browser extension:** If the video cut tool is part of a browser extension, the extension can save the edits and apply them to the video when the user returns to the page. This approach requires users to install the extension, but it ensures that the edits are available across multiple devices and browsers.
The solution I came up with is for retaining the edited video after a tab refresh in VideoCuttool Wikipedia is to keep the data in a server-side database. To preserve the app's state on the server, we'll need to construct some kind of server-side storage. This may be accomplished by developing a server-side database or file system capable of storing and retrieving the app's state. To begin, we must serialise the app state into a format that can be saved on the server. The process of transforming the state into a uniform format that can be conveniently saved and retrieved is known as serialisation. We can use JSON, XML, or Protocol Buffers as serialisation formats
based on what we need. The serialised state must then be sent to the server. This is accomplished through the use of an HTTP POST request, which transmits the data to the server for storage.
Once the data has been received by the server, it must be stored in the appropriate storage mechanism. If you choose a database, for example, 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 serialised data.
After retrieving the serialised data, we must deserialize it and return it to the app state.
The process of turning serialised data back into the original app state format is known as deserialization. This may be accomplished by employing the same serialisation format that was used to serialise the data. Lastly, we can utilise the obtained app state to return the programme to its former state prior to refreshing the tab.
**Insert timed text into the freshly created video.**
Subtitles can improve a video's accessibility and usability for viewers who are deaf or hard of hearing, or who speak a different language. To do this, I want to employ FFPMEG, a strong multimedia framework capable of handling video and audio processing operations. First, I will extract the video's subtitles and title line and save them as a separate file. After that, I'll design an interface for the user to add or update the already extracted subtitles. This gives the user more control over the content, timing, and look of the subtitles. Another thing to think about is the structure and design of the subtitles. I plan to investigate the best practises and standards for subtitle formatting, font size, colour, and location to ensure that the subtitles are legible and visually appealing. In addition, I will test subtitle playback and synchronisation across various devices and platforms to guarantee that the subtitles are properly shown. Subtitles are extracted and added to the video.
**Delete or fix any outstanding issues (if any)**
1) **Identify the bugs:** Start by reviewing user feedback, error logs, and any other sources of information that can help to identify the bugs in the video cut tool project. Make a list of all the bugs, find and prioritize them based on severity.
2) **Reproduce the bugs:** Once identifying the bugs, try to reproduce them in a controlled environment. This will help to isolate the issues and determine their root causes.
3) **Determine the root causes:** After isolating the issues, determine the root causes of each bug. This may involve reviewing the code, logs, and other relevant information.
4) **Develop fixes:** Once determining the root causes of the bugs, develop fixes for each issue. Being sure to test the fixes thoroughly to ensure they address the issues and do not introduce new bugs.
5) **Test the fixes:** Test the fixes in a controlled environment to ensure they work as intended and do not introduce new issues.
6) **Deploy the fixes:** Once testing the fixes and are confident they work as intended, deploy them to the video cut tool project.
7) **Monitor for new bugs:** Keep an eye on user feedback, error logs, and other sources of information to ensure that the fixes are working as intended and to identify any new bugs that may arise.
**Timeline**
**Community Bonding Period (May 4, 2023 - May 28 , 2023):**
| Period | Week No | Timeline |
| ----- | ----- | ----- | ----- |
| May 4 - May 11 | Week 1 | I intend to become acquainted with the video editing tools already accessible on Wikimedia/the Internet, as well as to identify areas where the existing options fall short. In addition, I aim to examine the VideoCutTool extension's source to acquire a thorough grasp of its design. In addition, I intend to educate myself on how videos are processed, including the video encoding and decoding process, video compression techniques, and video transmission over the internet. This insight will assist me in better understanding how to improve and optimise the VideoCutTool's performance.|
| May 11 - May 17 | Week 2 | For the second week of the project, I intend to concentrate on configuring the development environment for the VideoCutTool and becoming acquainted with Jest. I will specifically study the fundamentals of Jest and the React Testing Library, as well as obtain a thorough grasp of Jest's mocking capability. This will allow me to replicate numerous scenarios and evaluate the VideoCutTool's behaviour in various conditions. |
| May 18 - May 24 | Week 3 | I intend to obtain a thorough grasp of FFmpeg and its different features. I'll go deep into the FFmpeg documentation to become acquainted with its command-line interface, command syntax, and many options for setting and handling video files. I'll also look into its support for various codecs, containers, and protocols, as well as its interface with other multimedia tools and frameworks.|
| May 24 - May 28 | Week 4 | My major goal will be to obtain a thorough grasp of the VideoCutTool's whole lifetime, from the initial download of video files through the processing and final upload of the edited films. I'll look at each component of the programme and define their distinct jobs and functions, with an emphasis on how they all work together to achieve the ultimate aim of video editing.|
**Coding Period (May 29,2023 - August 28,2023):**
| Period | Week No | Timeline |
| ----- | ----- | ----- | -----|
| May 29 - June 5 | Week 1 | Work on adding keyboard shortcuts to VideoCutTool to make it more user-friendly.|
| May 5 - May 12 | Week 2 | Work on new modification concepts such as blur, transition, text-overlays, black-and-white, and so on. Further modification buttons will be provided to allow the user to carry out this activity.|
| May 12 - May 19 | Week 3 | Discuss with my mentors how to create functionality that allows users to store their work on the website's cloud storage. Together with it, development would begin on an interface via which the user could access his or her prior efforts.|
| May 19 - May 26 | Week 4 | Begin working on the database and server-side logic for cloud storage.|
| May 26 - June 3 | Week 5 | I'd do multiple tests to ensure that the functionality works flawlessly.|
| June 3 - June 10 | Week 6 | Implement undo and redo functionality.|
| June 10 - June 17 | Week 7 | Would complete work on providing undo/redo capability and begin discussions on introducing persist on page refresh feature. Instead, I would begin development on the assistance function necessary for this specific capability.|
| June 17 - June 24 | Week 8 | Would begin working on server logic, which would entail preserving 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 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|
| July 7 - July 14 | **Mid Term Evaluation** | Will demonstrate my progress on: UX improvisation, Persistence on refresh, and test scripts|
| July 14 - July 21 | Week 1 | Begin debating the addition of timed text to newly created video and begin working on client-side logic and Interface.|
| July 21 - July 28 | Week 2 | I'd start and finish the server-side logic for this specific capability.|
| July 28 - August 7 | Week 3 | I'd want to get started on correcting npm deprecated packages, build issues, and lint errors. In addition, JsDoc-style type checking would be used to decrease run-time errors.|
| August 7 - August 14 | Week 4 | Backlog|
| August 14 - August 21 | Week 5 | Backlog|
| August 21 - August 28 | **Final evaluation** | I'd want to highlight my work on adding timed text and repairing npm packages, as well as maintaining error-free code using JS type checking.|
I plan to set up a two-week buffer period at the conclusion of the project to cater for any unexpected spillages or delays. This will act as a backup plan to guarantee that the project is finished on schedule, despite probable obstacles.
**Participation**
Using Gerrit, I will commit my work to the branch with the task ID name in the videocuttool repository.
I'll be active in the general gsoc2023 VideoCutTool channel of the official wikimedia Zulip channel, where I'll post any questions I have about the tool. During work hours, I will contact mentors via phabricator or direct message them on Zulip.
During business hours, I may be reached through Phabricator or via email at bishttarun2002@gmail.com.
Weekly updates on my progress will be posted to my MediaWiki user page.
**About Me**
**Tell us about a few:**
**Your education (completed or in progress)?**
At the Chandigarh University, I am a third-year computer science engineering student. Govt.Model.Senior.Secondary School is where I finished junior and high school. From 2020, I've been performing web programming, followed by full stack development, as well as essential computing disciplines including data structure and algorithms, OOPs, database management systems, and operating systems. From past I've been performing in various open-source programs like Hacktoberfest, GSSoC, SWOC etc. since I've joined the open-source community in my 1st year of college and actively participating.
**How did you hear about this program?**
I discovered the Google Summer of Code programme on LinkedIn and then connected with a prior participant who educated me on open source and its potential for influence. I started my personal open source adventure with Wikipedia because it seemed safe. The encouraging community and excellent mentors piqued my curiosity even further.
**Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?**
My exams will be held between May 04th and May 30th, followed by a two-month break until school resume in mid-August. At this time, I will be able to devote 50 hours or more every week. I'll stay in touch with my mentors and keep them up to speed 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 Wikipedia Foundation has long been an important source of information for communities all around the world. I enjoy giving to this organisation because I know my efforts will benefit millions of individuals. Even if my Google Summer of Code application is rejected, I want to continue contributing to and aiding the Wikipedia community by tackling technical difficulties.
**What after gsoc ?**
I intend to continue contributing to Wikipedia after completing my GSOC. I hope to discover and contribute to various Wikipedia repositories while also mentoring new authors.
**Other Projects:**
Apart from contributing to Wikimedia, I have also worked on some personal and group projects, which have tech stacks related to the tech stack of this project.
**[[ https://github.com/tarunbisht-24 | ChatGen ]]** **(Still Working)**
This app is a chat application that uses an AI language model called GPT for generating responses. It's built with React, Node.js, Express, and MongoDB. Users can log in, send messages to GPT, and view conversation history. The app uses JWT token authentication and will be hosted on Netlify. Build a better version of ChatGpt which gives accurate results of your query with the help of Open AI API’s using React for frontend. User can establish its own features and a custom version of the AI in the ChatGPT model with access to create new chats. Designed refine prompts that will perform a better task as a coding prompt will only be used to generate coding responses.
**[[ https://github.com/tarunbisht-24/Online-Voting-System | Online Voting System ]]**
It is an online voting system with face recognition and two factor authentication, developed in django framework. Digital voting has admin login which will be handled by election commission and voter login which will be handled by voter. Voters can login through their voter ID number and password after a successful registration. The system will allows voters to view a list of candidates in their area, voters can get to know the candidates background (like income, works, etc.) and choose wisely. Once the election is started voter have to login into the account, select a candidate and have to give face id with webcam or front camera, if the face matches with the face given at the time of registration then voter will be promoted for two factor authentication, if two factor authentication is successful then the vote will be submitted and one voter can vote for a candidate only once per election.
**[[ https://github.com/tarunbisht-24/Weather-App | Weather-App ]] **
This is a simple web application where it fetches the weahter data using API call to openweather server and after fetching it displays the temperature and a pictorial description of that location. If the entered place is wrong then it throws a error message. The Weather App is a simple project developed using JavaScript, CSS, and HTML. This project is an interesting project for simply weather forecasting. The user can check the condition of the present-day climate probability and predict whether the day is a cloudy or sunny day.
**Coding Capabilities**
I'm fluent in Python and JavaScript, and I've developed projects in both to become more familiar with the languages.
I've worked with the backend frameworks Express/Node/Flask and the frontend framework React.
Have worked with various languages such as TypeScript, C/C++, Java, and so on.
Have experience working with databases such as MongoDB, SQL, SQLite, and PostgreSQL.
Have experience with cloud computing.