My Second Hacktoberfest PR

What I Worked On

I finished my second Hacktoberfest PR on reddit-image-viewer which allows users to brows reddit anonymously and purely viewing the post contents. I tried to tackle something a little more difficult this time, since my first PR was quite simple. The issue I decided to work on was to use hls.js for the video posts retrieved from reddit. Without using hls, the videos that were being retrieved did not have sound.

The Learning Curve

The project was created using NextJs, which I had not used before. While I do have experience creating projects in React, there were small differences with NextJs that were not familiar to me. After wrestling with getting my component to work properly, I had to then play around with the props being sent to it in order to get my video player functioning properly. I also needed to refresh myself on how video elements worked in HTML, since I had only learned how to use them and never used them in practice.

My Contribution

For my PR, I added a new module, created a new HlsPlayer component and integrated it into the existing Card component. The HlsPlayer component simply made use of the hls.js methods and created an hls video player with the incoming props. If the client's browser did not support hls, then a fallback video player and url are used instead.

Difficulties

It took me a few days to actually get my component to work, since it had been a while since I worked with React. I also had issues importing and installing the hls.js modules, since it was not entirely clear to me how it was supposed to be installed. At first I used a script tag, but that had issues with NextJs. Then I used the npm package for hls.js instead which got me closer to what was intended. It was also a problem getting the props to work properly with the video element, since different types of videos used different props.