Profile Information
Name: Vansh Baghel
Web Portfolio : https://vansh-baghel.github.io/Portfolio/
GitHub Profile : https://github.com/Vansh-Baghel
Resume (optional) : Resume Link
Location (country or state) : Mumbai, India
Time Zone: UTC+05:30
Typical working hours (include your timezone): 11 am to 1 am
(Open Resume to see my tech stack)
Synopsis
- VideoCutTool is an open-source, online video editing tool to edit videos in Wikimedia Commons. It is used to edit videos on the fly and re-upload back to commons with simple few clicks instead of downloading videos from commons and using external software to edit and re-upload. The goal of this tool is to make editing easier, reduce the steps of editing, and to avoid the quality drop after editing.
- Possible Mentor(s) - @Soda @Gopavasanth
Deliverables
- Improve the user experience of the tool.
- User experience top most priority must be the speed of website. It could be enhanced while editing by removing some unwanted dependencies.
- Could look forward to implement drag and adjust the video timings (could be done using react).
- To provide a heading about the steps on the left (as it looks like some button in first impression) which are Video URL, Video Settings and Result.
- Would need to increase the size of the video trim section for mobile devices.
- Jest and Jenkins
- We could definitely integrate the Jest test cases to get our expected output with the Jenkins-bot.
- I do have the experience of linking both through a few pre-entering commands into Jenkins-bot.
- Avoid bitrate drop (quality degrading) while editing videos
- Changing the crf in the issue have done the job.
- Could look into it if we get some bugs.
- Support to persist the edited video after the tab refresh
- Users would surely require this task, as being a developer and tester, I think it is a must.
- We could store the instance of the video into the backend and provide some hash into the frontend (which would decrease the load on the frontend and would be safer).
- Could provide a button as in to store the edited video as a checkpoint and then it would be saved in the backend and would be called in the frontend even after refresh OR we could save the video dynamically as every small change while editing (which might lead to little more pressure on the system).
- Additional suggestion (Optional but worth reading)
- For mobile devices, we would have to remove onTouchStart property as in the mobile phones, users don't expect an event trigger while misclicking button while scrolling scroll or any other activity. It could be an issue especially if the user misclicks the trim after finishing the trim (could lead to new progress, and lose previous).
| Period | Task | |
|---|---|---|
| May 4 to May 30 | Community bonding period. During this period, Starting priority would be to understand everything about the VideoCutTool codebase, and ask questions where ever required. I would set up my gerrit and developer accounts which would eventually help me submit a patch. I'll talk to mentors, and other experienced users about what would they feel about the website and what changes could we bring for a better experience for the website other than the points listed in this project. Here I'll try to get places to improve in terms of UI and user experience through existing tasks or would create new task if necessary. | |
| May 30 to June 10 | I have fixed #T333060, but due to some technical error, unable to create a patch, so will continue to fix this upload to commons issue. I actually have a second approach as well to handle the Upload video on Common which would be converting the video file into webm through ffmpeg behind the scenes once the uploading process starts which would be better for users as well. Could somewhat refer this issue.. After its done, would be Starting with the UI improvements. The reason to choose UI is that whenever we change the front-end, we get to know the maximum implementation of the code and will get familiar with the variables and logic along the way. | |
| June 10 to June 20 | Would fix the dragging of the video on the progress bar so that users on mobile could simply drag the bar and could play with the duration of it. Have done it in another project in the past : Check it out. Would try to finish all the above tasks before this deadline and would plan other approaches for the existing deliverables. | |
| June 21 to June 31 | In this period of time, I would start one of the most requested changes: To save edited video on screen refresh. There are 2 approaches in my mind and would also discuss it with the mentors. First approach would be to save the video into the local storage and then recall it whenever the screen is refreshed as local storage doesn't get erased. But this approach might slow down the website which might affect the optimization as discussed in this stackoverflow. Second approach is to store the video into the backend and pass a token into the frontend through which we could access the video. There are two approaches here: One is we can save the video at every small change (Using useEffect) or give a button for the user whenever they want to save their changes, kind of like a checkpoint which would lead to fewer function calls i.e. less pressure on the system. | |
| 1 July - 10 July | This period would be for finding a solution for the bitrate drop. There is an existing task where T262892 it has been improved. As the developers haven't closed the task yet, it is a clear message that it's expected to be handled with more research work and discussion. In any software, let's take it Adobe Media Encoder here, there's a threshold to the quality and size ratio. No software would keep the quality with lesser mb. We could reduce the mb after the edit has been done, the way Whatsapp share does, if it's possible to implement, then would be a good solution IMO. | |
| 11 July - 21 July | I would finish all the previous tasks up until now and clear any backlog if any exists. Planning to write few blogs about all my previous experiences with the organization this week. | |
| 22 July - 5 August | The major tasks would be finished up until now, so that I could focus more on overall changes on the website. I would try to find more ways in which the website could be enhanced, some which are in my mind are, removing unwanted dependencies, using react-toastify instead of current notification (it would be a big step) OR could improve the existing notification box as text is not clearly visible inside it, to show valid error message into the notification box, to think more about the editing functionalities like increasing video speed, adding text into the video, more control on volume increase/decrease, etc tasks which would increase the usage for the website leading to more users for multiple tasks. | |
| August 6 to August 16 | Would have to remove the onTouchStart function (if I am not wrong with the function work), which is leading to an automatic trigger of discarding the changes and adding more instances of trim. The problem with this occurs in mobile screens, where user misclicks those buttons during the scroll, and just would be bad if they lose the progress in such a way. I would be discussing the same with the mentors and I am open for suggestions for the same. I'll be making sure to finish all tasks or backlogs at the end of this week. | |
| August 18 to August 30 | This time would be alloted for writing the test cases using the Jest and Jenkins-bot. Jenkins bot is really a good option to automate all the test cases we would be creating using Jest. Test cases using Jest would help the developers to locate where does the error exist. I as developer would also have the better understanding while writing the tests for the project. I'll get suggestions from mentors about what all functions needed to be added into the test cases. | |
| September 1 to September 6 | Last minute changes (if any), Final results will be submitted. | |
Participation
- Would in contact with the mentors through the zulip community and could ask them personally the easier way of communicating with them.
- Would push daily progress on my forked repository and would create a PR once the subtask is done.
- Would maintain a weekly report (Through google docs) for all the work I've done for the project.
About Me
Tell us about a few:
- My name is Vansh Baghel, I am in the Second Year of my B.Tech in Information Technology. I am a Full-Stack developer, past experience of working in a web3 community management protocol company as a developer. I have been with another web3 company to learn how the business works internally (where they sell books using tokens), do open-source contributions, solve DSA using Java, web developer at Google Developer Students Club, create and maintain websites for 3 clubs of our university which are used by students on various events. Have been organizing events at IIT Bombay.
- Heard about the program through my peer as I've always been focused on technical stuff, then did the research and got various answers to many questions regarding the program. Specifically came to know about Wikimedia as it matches my skillset.
- There are no other commitments during this timeline, there would just be exams for the universities for which a couple of days of holiday would be enough.
- I would really be grateful if I could complete this project after dividing a large project into these number of simplified steps. Making it happen for the organization would be thrilling as the code written for VideoCutTool will be used by people across the country.
Past Experience
- I have done open-source contributions in various repositories which have also got merged, my (GitHub profile)[https://github.com/Vansh-Baghel].
- Have built these projects from scratch using various technologies: Advanced Calculator, Indian Tourism, IMDB Clone, etc.
- Have interned in a web3 company for building community management protocol systems. Their socials : LinkedIn, Twitter.
- I am a web developer in 3 clubs of our university, which are, Google Developers Student Club, Rotaract Club and Open-Source Club, where I've built around 4-6 websites from scratch and have been maintaining them now. The following websites have been used by students: Rotaract Club, GDSC web, ML hacks event, etc.
- Have been part of discussions, raised issues, and contributed to several orgs like developer.chrome.com, freeCodeCamp, nft marketplace, defi etc which got merged.
- Have been part of the Aakaar Club at IIT Bombay, and have organized various competitions for students all across the India and have got really positive response out of it. Working with a big team wasn't easy before being part of this club.
- Have helped in recognizing an ignored issue in VideoCutTool (this) repository, where a developer couldn't connect to the port if they have metamask into their browser.
- Have complete (T333060)[https://phabricator.wikimedia.org/T333060] on my local by giving an error message into the HTTP response, would create a patch as soon as I fix my authentication issue. Few Issues (Got merged) : VideoCutTool, developer.chrome.com, plone org , Few merged PRs : Nft Marketplace , DocTalk.
Any Other Info
- Could checkout various projects in my portfolio which matches the current technologies used in this project and could checkout resume for my known tech stack.