This is my 3rd and final series of the release 0.4 blog post. If you have not read previous ones or want to refresh your memory, here is the plan and the progress I made so far regarding this issue
In my last blog, I talked about my research and now we are going to put those research into code. The guideline I used to make the structure is how the queue look like when it has song in it:
Creating Placeholder object for first row
The first row has 5 components in it:
- Typography with text
- PlayQueueButton
- ShuffleButton
- DisplayModeButton
- ClearButton
In the placeholder objects, we have to put these components but without any action available in it. The whole purpose is to give viewer an idea of the appearance. To do so, first I import those components and skeleton inside QueueSection.js file and dealt with each one by one.
For first one, I used Skeleton inside typography component where it will give a text box appearance.
For other 4 components, I passed the disabled property which disable any user action and show the button in a row at the same time.
After making these changes, this is how no queue page look like for the first row:
Creating Placeholder object for queue
Now, it is time to make a placeholder object for list of songs. This part has 4 components in it:
- 2 Typography: one for song title, other for timestamp
- DragHandleIcon
- PlayArrowIcon
For typography, I did the same as before: used skeleton component, used same height but increased the width for song title.
For other 2 components, I put them where they are supposed to be and passed disable parameter to IconButton component.
Now, the only problem is that it will only create one row for the queue section. We need to show list of songs in queue. The easy solution is using an array to do so and here we go, we finished creating the queue section.
Adding Instruction
The last piece of this issue was adding an instruction of how to add song to the queue. First, I was going to write an essay like I am doing now lol. Then I came to my senses and wrote a one line instruction because simple is better and no user even me won’t like to spend 5 min to read the instruction. I put the icon in my text message so that user can clearly know which button to click to add a song to the queue.
WE DONE 💃 Here is the comparison of before and after look of “queue” page:
BEFORE:
AFTER:
Sweet Taste of Journey
As I was satisfied with my result, I send my PR and again got pretty quick response and it got merged 😍. My contribution is now available in their official Qasong website.
I am proud of myself with what I did. I worked on the full page and I achieved the goals I set for release 0.4:
✅ try something new, exciting and out of my comfort zone
✅ learn more about react and sharpen my skills
✅ work with Material-UI
✅ work with audio media
✅ contribute in a larger scope
This blog concludes my journey on open source course but not on open source community. Before taking this course, I had no clue what even open source is!! This course introduces me to a new world: a world where I fit, where I can contribute, where I can share my knowledge and learn from others. As a shy introvert person, this course was a big step for me and I successfully reach the end of the course. I am proud I did not quit no matter how intimidating it was. If someone asks me which pro option they should take, I would suggest DPS909 without any second thought. You won’t regret a bit!
A huge thank you to my professor, David, who is one of the best professor I had. If I start talking about his teaching style and how excellent teacher he is, I will need a separate blog for that 😆 Looking forward to take more courses with him in future.
