JS code refreshment

[AHOHNMYC]

Is your enhancement request related to a problem? Please describe. Yeah, it is JS code heterogenity and smell by standards even from 2016 year (ES6).

Describe the solution you'd like I may lint code and fix some bugs. While glance examination I found quotes inconsistence, bunch of old code patterns which leads to javaisation (in terms of code length) of JS, strange regexp, and even one real bug.

Describe alternatives you've considered Grant me some freedom to fix JS part of this magnificent project. If there are offers and/or code guide styles, please, describe all in comments.

Additional context I want to use JShint and spam (by the first time) long commits. If you are ready to endure this and do some review, we all get more elegant product. Also, I think that the most beautiful in Invidious — simplixity and lightness. I want to use ES6 version of JS as its pieces already exists in code and ES6 is good compromise between syntax sugar and support of old devices right out of the box (~95% now) without using various *lators. Just code and run.

Crystal language (which I didn't saw in production before) pleasantly surprised me with this elegant little things, like Invidious at all. I want to do something good to project which I use every day.

• [x] Basic lint #3045
• [x] More accurate console usage (warn, info, assert instead of just log) #3045
• [ ] Move all most common constructions like XHR or repeating DOM manipulations into separate script #3084
• [ ] Do some nanoframework for very common tasks #3084
• [ ] Replace var to const and let
• [ ] Use localStorage to store player settings. PREFS cookie is inaccessible from JS as HttpOnly.
• [ ] More compatibility with IE11 (refactor Promise, URL, …)
• [ ] Replace SSE.js with EventSource SSE.js has some options in EEE-way. Need more investigation.

[unixfox]

Don't forget that we still want to support old browsers like IE11. If videojs support it then we should support it: https://videojs.com/html5-video-support/

People are even using invidious on their old playstation or smarttv. That's why everytime I write some JS code I tend to write it in the most legacy way.

[AHOHNMYC]

@unixfox got it. Are there any other project members to wait for their opinion?

[unixfox]

You don't necessarily have to wait for anything, we welcome any changes to the source code of invidious.

As long as the new code is not making the code hard to read, or intentionally introducing some bugs you can submit it in a new pull request.

I saw on caniuse, the link that you provided, that ES6 is partially supported by IE11 so I do think it's okay to change the JS code to use ES6 standard. videojs 7 doesn't support IE8, 9 and 10 so that's fine: https://videojs.com/blog/video-js-7-roadmap/#old-ie

By the way, I can also provide you with an account for browserstack if you need to test on old browsers or browsers you don't have access to: https://www.browserstack.com/

[SamantazFox]

That's a neat initiative :D

@unixfox got it. Are there any other project members to wait for their opinion?

You can start working on that part already ^^ @unixfox and I almost never do JS on Invidious, except when reviewing PRs or bumping VideoJS, and there are currently no open PR for the JS part. So don't worry about colliding with some other work :)

If you plan to rework URLs handlers in Javascript, please consider the following discussion: https://github.com/iv-org/invidious/issues/769. TL;DR: Imo, we should have a common place to register handlers/callbacks dynamically, and use data- attributes to store the name/parameters of the callback function (as it's already done in some places).

If you want a rough list of rules for JS inside Invidious:

• compatibility down to ~2016 browsers (Early ES6 / IE11, As mentioned by @unixfox)
• keep JS to a minimum: most stuff should work without it (e.g prefer HTML/CSS when possible)
• Avoid NPM and alike. If there are good reasons to use those, it'll be discussed.

And of course, if you have any questions, don't hesitate to ask them! There are no stupid questions, only unasked ones :)