Revisiting the Artistify Project

During the Weeks of Release 0.2, I have worked on a project called Artistify, which is a Music application which utilizes a npm package to work with the YouTube API and allow users to produce a music queue. This week, I revisited the project repository. And found out that there were huge differences than it was few weeks ago, the project that I forked was already behind by around 100 commits, the Project name has been changed, the application front-end has gone through a lot of updates as well.

I found this project very interesting ever since I started on working on it, since I usually like to listen to music when doing work, studying or playing games, I have actually used the application a couple times. The user experience was decent except for a few minor issues, but there was this one bug that I found very annoying which is when clicking the "remove song from queue" button that is included in the row that displays the song, the song is removed, but it also triggers the play song event on that song. Since I needed another PR for release 0.3, I decided to create this issue in the repository and tried to fix the bug myself, this was my very first time creating an issue on open source projects except for the lab issues in my classmates' repository.

Image below shows how a row looks like in the list:

After reading the component code, I realized that this bug happens because the 'X' icon is a part of the row "Grid", therefore clicking anything included in this grid tag will trigger the play song event.

My initial plan was to move the play song event to the play icon component, so that the play song event wouldn't apply to the 'X' icon, but doing so will disable clicking on the row which means the only clickable portion will be the play button and the 'X' icon, this is problematic because it seemed like they would like the keep the functionality of clicking the row to play the song rather than only allowing the play button to do this. Just when I was thinking of a solution, the repo owner replied to the issue and suggested to use "e.stopPropagation()", I have used this before but totally forgot about it, this saved me a lot of time trying to figure out a solution.

After I fixed that issue, upon checking the modifications I have made, I noticed that in the Queue List view (which does not display cover of the music) uses the name "onClickImage" for the row clicking event handler, this looked like a copy-pasting issue from Queue Grid view, since the Grid view contains music covers, so while I was at it, I decided to change the function name to better describe what it does. Below are the images for different queue views:

Grid:


List:








After I was done and submitted my PR, one of the project maintainer had a conversation with me and invited me to their Discord channel, we had a great conversation about the project including plans on how to expand on the current work, new functionality and improving user experience.

Comments

Post a Comment

Popular posts from this blog

Working on the Telescope Project

Image
Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project. In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick. The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook...
Read more

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more

Hacktoberfest -2

 Hacktoberfest is still ongoing, this week I have made my second contribution to real open source projects, I have decided to go with the same method I used last time to look for issues, which was applying the "hacktoberfest" label and sorting by the issue post date. After a bit of browsing, I decided to pick up an issue from a small project. It is a weekly calendar app developed using a JavaScript front-end frame work called Svelte, the issue indicates that the project could use a clipboard icon on their web app and an click event handler to allow users to copy contents to the clipboard. This project was easy to set up and configure for testing, since I already have most of the tools required to work with it, all I had to do was to install the dependencies and get it running locally by using the "npm run dev" command. Thanks to the project owner who posted the issue, he specified the exact file to add the feature to, which was very helpful, without the instructions...
Read more