**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
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. Choose 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. Add video scrubbing: Video scrubbing 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. Make 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. 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:** Using a colour change to highlight specific segments or portions
To show the status of a cut or paste operation, a progress bar or loading symbol is displayed.
Using animation to demonstrate the cutting, copying, or pasting of a clip or chunk
After an activity is done successfully, a confirmation message or symbol is displayed.
**Providing Feedback:** 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 editing tools 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, 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.
The following are some advantages of employing keyboard shortcuts in a video editing tool:
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:
This test case uses the render function from React Testing Library to render the VideoPlayer component and then checks if the component is in the document
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, you can create a Jenkins job that runs the npm test or yarn test command on each push to the code repository.
Unit Testing: For a video cut tool project, 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: For a video cut tool project, 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: For a video cut tool project, 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: For a video cut tool project, 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:For a video cut tool project, 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) Store the edited video: Whenever a user performs any edits on the video, you should save the edited video in a persistent storage such as a server, cloud storage, or browser's local storage. This step will ensure that the edited video remains available even if the user refreshes the tab or closes the browser.
2) Save the current state: In addition to saving the edited video, you should also save the current state of the editor. This can include the current position of the video, the start and end times of the edited clips, and any other relevant settings or configurations. This step will ensure that the user can resume editing from where they left off if they come back to the video later.
3) Restore the state on page load: When the user reloads the page or comes back to the video later, you should check if there is a saved state available. If there is, you should restore the state of the editor to the saved state, including the edited video and any other relevant settings or configurations. This step will ensure that the user can continue editing the video without losing any progress.
4) Provide feedback to the user: To ensure a smooth user experience, you should provide feedback to the user when the state of the editor is being saved or restored. This can include showing a progress bar or spinner to indicate that the video is being saved or restored, or displaying a message to inform the user that their changes have been saved.
**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)**
Identify the bugs: Start by reviewing user feedback, error logs, and any other sources of information that can help you identify the bugs in your video cut tool project. Make a list of all the bugs you find and prioritize them based on severity.
Reproduce the bugs: Once you have identified the bugs, try to reproduce them in a controlled environment. This will help you isolate the issues and determine their root causes.
Determine the root causes: Once you have isolated the issues, determine the root causes of each bug. This may involve reviewing the code, logs, and other relevant information.
Develop fixes: Once you have determined the root causes of the bugs, develop fixes for each issue. Be sure to test the fixes thoroughly to ensure they address the issues and do not introduce new bugs.
Test the fixes: Test the fixes in a controlled environment to ensure they work as intended and do not introduce new issues.
Deploy the fixes: Once you have tested the fixes and are confident they work as intended, deploy them to your video cut tool project.
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 29 - June 5 | 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 29 - June 5 | 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 29 - June 5 | Week 4 | Begin working on the database and server-side logic for cloud storage.|
| May 29 - June 5 | Week 5 | I'd do multiple tests to ensure that the functionality works flawlessly.|
| May 29 - June 5 | Week 6 | Implement undo and redo functionality.|
| May 29 - June 5 | 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.|
| May 29 - June 5 | Week 8 | Would begin working on server logic, which would entail preserving the state of the editing playground in the database.|
| May 29 - June 5 | Week 9 | Would Integrate jest tests mentioned in the "Deliverables".|
| May 29 - June 5 | Week 10 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|
| May 29 - June 5 | Week 10 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|
| May 29 - June 5 | Week 10 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|
| May 29 - June 5 | Week 10 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|
| May 29 - June 5 | Week 10 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|
| May 29 - June 5 | Week 10 | I'd finish any backlogs in the aforementioned tasks before my mid-term appraisal.|