Hacktoberfest #3

In third week of Hacktoberfest, I have choose very interesting open source project and PR. The VXPlayer is a fully custom media player made with only JavaScript, HTML and CSS. The issue is user only allow to control the video skipping backward and forward with button on the video player. Therefore, VXPlayer requires the feature that skips the video forward and backward with keyboard control.

Before I start the code to add this feature, I should know how to VXPlayer accept the keyboard control. Mozilia MDN Web Docs provides a document for controlling with keyboard. Basically, the each key on the keyboard has unique key code. For example, right arrow key has 39 key code and left arrow key has 37 key code.

I realized that the functionalities for skipping backward and forward already defined after I have reviewed the code. The animations have also defined. Therefore, I do not have to repeat to code again. The function called forwardTenSeconds and 'backwardTenSeconds' has own its functionality for forwarding 10 seconds and backwarding 10 seconds respectively. I have created functions arrowBackwardTenSeconds and arrowForwardTenSecondsthat receive keyboard event as parameter and compare the keycode from keyboard event on the function body. Then, I execute the corresponding
defined function.

Now I have to add event listener for keyboard control. The other event listeners are chained with the button but controlling with keyboard should chained with window object. so that, user can skip the video with keyboard on the window browser. This is the code for skipping 10 second forward with right arrow key on the keyboard

function arrowForwardTenSeconds(e) {
  if (e.keyCode == 39)
    forwardTenSeconds(e);
}
window.addEventListener('keydown',arrowForwardTenSeconds);

After I had completed the feature, I realized that it would be better to have a feature that allows to user pause and play control with space bar on the keyboard. I asked project maintainer to have approval that I can add extra feature. This feature has done very easily because it is very similar to previous implementation.

This issue was done very straightforward. This is because I defined what the problem is and how to approach the problem before I write the code. I wish I keep this habit for further Hacktoberfest and project.