First Time Contributing to a Public Repo (Hacktoberfest Week 1)

Finding an "issue" to work on

Following the spirit of Hacktober, we are required to attempt 4 Pull Requests for our OSD600 Release 0.2.

Admittedly, I was a little stressed at the beginning (and sort of still am), because I didn't realize how many people would be participating in Hacktoberfest. Every interesting/ manageable "issue" I would find, would already have multiple people working on it/ already submitted PRs.

I decided to expand my search to repositories/ issues that weren't tagged with the "hacktoberfest" tag, as my main goal was to just find an issue that I could work on.

In doing so, I discovered the "Video Hub App", which is essentially a cross-platform video library manager that is built on Angular and Electron.

I worked on Issue #726 - filter "folder does not have". Essentially, as "Video Hub App" is used as a way to search for videos, it gives the user the ability to specify filters (folders that include a key word, files that include a key word, resolution based filters, size based filters, etc.). However, the user requested the ability to filter out folders that have some key word in the search.

Learning New Things

I noticed that the maintainer had made a comment on the issue saying that a similar filter exists for files (to exclude files that have a specific key term), so I figured I could base my changes off of something that already exists.

However, once I started looking at the codebase I started to get a little overwhelmed, because my Angular skills were super basic and I had never used/ learned about the Electron platform before (although I knew it existed). So, the first thing I decided to do was to run through the Electron Tutorial, where I was able to get a basic understanding of how Electron works.

Implementing Fix

Once I had a basic understanding of Electron, I decided to run through the workflow of how the app works. Once I had the repo forked, cloned, and branched, I simply ran npm install and then npm start to start up the app. I then played around with it, and read the user guide until I got a basic understanding of what the application does. Then, using the Developer Tools, I tried to figure out how the filters are working.

I ended up realizing that the maintainer had created the project in such a modular way, that I really did not have to do much coding at all to implement this feature. First, they had many "language" JSON files where essentially all the app text is stored (for buttons, settings, information, etc.), and is how the application is able to dynamically change the language presented in it's ui. So I first modified this file to include the extra placeholder, settings, information, etc. text that would be required by this new feature.

I then had to specify a new filter for "folderExclusion" in the filters.ts file, and I followed the way the other filters had been done. I had to reorganize the layout here, since I wanted this new folder filter to be grouped with the other folder filter. The problem I ran into is that these filters are defined in an array, and I didn't realize that this array was being referenced in the home.component of the app. So essentially, because I changed the order of this array, in the app when a user was entering information for the various filters, the wrong filter would be applied. This then meant I had to manually update the index references of all the filters that were affected in home.component.html.

Overall, I think I was able to get the feature working (PR here), and it was definitely a great learning experience. I was honestly a little inspired by how the maintainer had developed the codebase to make it so modular and easily upgradeably, and this really makes me want to fix up the Static Site Generator that I had been working on this class.

Functionality Demo

To test the newly developed feature, I downloaded some stock videos from the internet (found here).

And then created the following folder structure:

• main folder/
  • buckbunny video/
    • test/
      • BigBuckBunny.mp4 (short movie about a rabbit)
  • even more videos/
    • ForBiggerFun.mp4 (chromecast commercial)
    • Sintel.mp4 (short fantasy movie)
  • other demo videos/
    • ElephantsDream.mp4 (creepy short movie)
    • ForBiggerBlazes.mp4 (another chromecast commercial)

As shown in the screenshots below, when I filter for a keyword in the folder that contains the video, the videos won't search up.

No Filter

Filtering "test" - (BigBuckBunny.mp4 should be excluded)

Filtering "demo" - (ElephantsDream.mp4 and ForBiggerBlazes.mp4 should be excluded)

Filtering "more" - (ForBiggerFun.mp4 and Sintel.mp4 should be excluded)

Comments

[naveennamani]

Glad to know you're learning more during hacktoberfest. If you want to contribute low-code contributions you can visit my GitHub repo github.com/naveennamani/offline-docs. This is a collection of scripts to generate offline documentations.

As you've already gone through the electronjs.org docs, you may contribute the script for the same. Keep hacking :)

[Rohan Kaicker]

Hey! Thanks for the recommendation, I'll definitely check this out today!