FreeTube Contribution Questions: Where Are The Keyboard Shortcuts Code(s), Vue Version, and Why yarn and npm?

[WeiJian123-tech]

Hello FreeTube community! 👋

I want to contribute to FreeTube by trying to implement keyboard configuration settings from my feature request #5285 and feature request #251. I believe that this is a highly requested feature that would improve the user experience for many people. While I only have beginner knowledge of Vue.js and have not programmed a program this large before, I do have better knowledge with Vanilla JavaScript, HTML, and CSS.

After I git cloned and installed the node modules for FreeTube development, I got overwhelmed/lost by the sheer amount of folders and files in the directory. I tried looking for a map of the FreeTube directory from the Wiki but I was not able to find one.

May someone guide me to where the code for FreeTube's keyboard shortcuts are? Which file(s) from which line numbers? I was only able to find two pieces of code relating to a keyboard shortcut at /src/App.js from lines 332 - 353 (the 'D' and 'L' key) with no other keyboard shortcuts to be found.

Is FreeTube's Vue.js version Vue2 or Vue3? I read the Getting Started page and its Useful Links and Information referenced Vue2 which has approached end of life and now Vue3 is getting supported.

Why does FreeTube use yarn and npm? Could FreeTube use one or the other?

I don't know how long it would take me to finish this feature or if I would be able to implement a keyboard configuration settings at all. I feel like I may need help with implementing this feature. I would like to try my best at this challenge and give it my all.

Thank you in advance! 😄

[absidue]

There is no central file with all the keyboard shortcuts or hotkeys, each component that has some, handles them itself. The easiest way to find all components that have them would be to do a project wide search for document.addEventListener('keydown'.

As for which Vue version that FreeTube uses, it's Vue 2 at the moment (if you want to know the version of any of the dependencies you can look at the package.json file), as we haven't had time to do the migration to Vue 3 yet, because as you noticed it's not a small project and we've also been busy with other things like adding support for user/local playlists and the currently on-going player migration.

As for the package manager, FreeTube uses yarn because that is the one that electron-builder recommends (https://www.electron.build/#installation).

[WeiJian123-tech]

Thank you for providing such helpful information. If I do manage to create a new keyboard configuration settings, I'll submit a pull request.