JS refactoring part 2: helper functions, poyfills #3084

AHOHNMYC · 2022-05-06T04:22:17Z

Added script _helpers.js which includes portion of polyfills for IE11, clamping function and handy wrappers for:

XHR (for GET/POST, with optional retries and good for Invidious default parameters)
storage (localStorage with fallback to cookie)

To improve code readability and complexity:

some condition were reversed to remove negation
some function were renamed
added bunch of comments
some constants are replaced with their names (4 is MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
complex conditions are taken out to variables with a speaking name

Added polyfills usage where it is possible to reduce code and improve readability

Removed redundant window and document usage. window is global object and some properties like location are doubled in document

Repeated pieces of code are moved to global variables in the beginning of files

Constructions like function (x) {otherFunction(x)} replaced with just otherFunction(x)

Removed useless try-catches (but added one useful)

Rewritten themes management

Added support for per-frame navigation with , and . keys #2113. But "honest per-frame" will work only for 29.97 FPS videos

Fixes #2412 using preventDefault()

All new code checked to work with IE11

AHOHNMYC · 2022-05-12T11:55:32Z

@SamantazFox please, deploy this PR on test.invidious.io 😸
I hope, this is the last monstrous PR with JS.

src/invidious/views/add_playlist_items.ecr

SamantazFox · 2022-05-15T12:00:09Z

@AHOHNMYC it's deployed!

Seems like a few things don't work, like player hotkeys. Maybe the trace below can help?

Uncaught ReferenceError: helpers is not defined
    remove_all_video_times https://test.invidious.io/js/player.js?v=059796c6:452
    <anonymous> https://test.invidious.io/js/player.js?v=059796c6:305
player.js:452:5
    remove_all_video_times https://test.invidious.io/js/player.js?v=059796c6:452
    <anonymous> https://test.invidious.io/js/player.js?v=059796c6:305

Uncaught ReferenceError: helpers is not defined
    setTheme https://test.invidious.io/js/themes.js?v=059796c6:30
    <anonymous> https://test.invidious.io/js/themes.js?v=059796c6:53
themes.js:30:9
    setTheme https://test.invidious.io/js/themes.js?v=059796c6:30
    <anonymous> https://test.invidious.io/js/themes.js?v=059796c6:53

Uncaught ReferenceError: helpers is not defined
    get_youtube_comments https://test.invidious.io/js/watch.js?v=059796c6:226
    <anonymous> https://test.invidious.io/js/watch.js?v=059796c6:339
watch.js:226:5
    get_youtube_comments https://test.invidious.io/js/watch.js?v=059796c6:226
    <anonymous> https://test.invidious.io/js/watch.js?v=059796c6:339

Uncaught ReferenceError: helpers is not defined
    <anonymous> https://test.invidious.io/js/notifications.js?v=059796c6:77
notifications.js:77:9
    <anonymous> https://test.invidious.io/js/notifications.js?v=059796c6:77

assets/js/embed.js

…etails-summary in IE11

AHOHNMYC · 2022-05-16T10:22:02Z

@SamantazFox after second applying _helpers.js was successfully loaded on page. But I've found bunch of bugs 🙀 :

keys for frame walking were reverted
JSON XHR in IE11 returned String instead of Object
Filters panel in IE11 didn't collapse
Theme changing unfortunately got recursive call

All this issues were fixed. Please, reapply this commit third time 😺

Optional {} and _helpers.js imports (one import in <head> would be enough, absolutely agree) are for next commits

SamantazFox · 2022-05-16T15:02:34Z

@AHOHNMYC Done, I've deployed your latest commit :)

AHOHNMYC · 2022-05-16T16:34:41Z

@SamantazFox thanks! I've tested almost everything.
Invidious in IE11 now looks usable. Comments are finally working! Filter panel is collapsing,
I think, it is really ready to review :)

SamantazFox

Overall, it looks very good to me! I've made some small remarks, in addition to unifox's comment.

assets/js/notifications.js

assets/js/player.js

Co-authored-by: Samantaz Fox <coding@samantaz.fr>

partial rewrite notifications.js innerText to textContent fixed bug with clamping

assets/js/notifications.js

extra spaces removed

AHOHNMYC · 2022-05-31T09:57:18Z

Added six strings fixes #3089

SamantazFox · 2022-06-04T20:26:35Z

@AHOHNMYC can you please put the <script> for _helpers.js in the template file rather than every .ecr file?

(Put it right before </head>:)

invidious/src/invidious/views/template.ecr

Lines 16 to 21 in f2f3f04

    
               <link rel="stylesheet" href="/css/pure-min.css?v=<%= ASSET_COMMIT %>"> 
        
               <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>"> 
        
               <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>"> 
        
               <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>"> 
        
           </head>

SamantazFox

Minor whitespace errors ^^

assets/js/_helpers.js

assets/js/community.js

assets/js/notifications.js

assets/js/player.js

assets/js/watch.js

assets/js/player.js

…ead` tag

SamantazFox · 2022-06-08T22:42:54Z

Thanks a lot for your contribution to invidious! The JS rewrite is giving a ton of fresh air to the project ^^

meow added 4 commits May 6, 2022 04:46

js code rewrite. Created _helpers.js with XHR and storage wrapper

7dd6993

fix helpers

8352373

fix helpers storage

fd890f9

jsdoc type fix

f06d5b9

AHOHNMYC changed the title ~~Js helpers polyfills~~ JS refactoring part 2: helper functions, poyfills May 6, 2022

AHOHNMYC marked this pull request as ready for review May 12, 2022 11:50

AHOHNMYC requested a review from a team as a code owner May 12, 2022 11:50

AHOHNMYC requested review from unixfox and removed request for a team May 12, 2022 11:50

AHOHNMYC mentioned this pull request May 12, 2022

JS code refreshment #3042

Open

8 tasks

TheFrenchGhosty requested a review from SamantazFox May 14, 2022 22:10

js code rewrite. Themes rewritten, bugs fixed

fd66084

SamantazFox reviewed May 15, 2022

View reviewed changes

src/invidious/views/add_playlist_items.ecr Outdated Show resolved Hide resolved

unixfox reviewed May 15, 2022

View reviewed changes

assets/js/embed.js Show resolved Hide resolved

JS fixes: recursion in themes, keys for frame walking, JSON XHR and d…

e18b102

…etails-summary in IE11

JS theme switching simplified

2dead1a

meow added 3 commits May 17, 2022 09:43

Share video regression. Single quotes are required

2ea4230

Less player reload timeout

17e6213

Fix HTML validation. This is how browser really split tags

1097648

SamantazFox requested changes May 18, 2022

View reviewed changes

assets/js/notifications.js Outdated Show resolved Hide resolved

assets/js/notifications.js Outdated Show resolved Hide resolved

assets/js/player.js Outdated Show resolved Hide resolved

assets/js/player.js Outdated Show resolved Hide resolved

assets/js/player.js Show resolved Hide resolved

AHOHNMYC and others added 2 commits May 19, 2022 07:15

JS code minor formatting

319bbd2

Co-authored-by: Samantaz Fox <coding@samantaz.fr>

handled invalid values in storage

b72b917

partial rewrite notifications.js innerText to textContent fixed bug with clamping

SamantazFox reviewed May 21, 2022

View reviewed changes

assets/js/notifications.js Outdated Show resolved Hide resolved

assets/js/notifications.js Outdated Show resolved Hide resolved

comment changed

b729597

extra spaces removed

AHOHNMYC requested a review from SamantazFox May 30, 2022 07:46

meow added 2 commits May 31, 2022 11:58

Save time during redirection on another instance

b12149b

fix time adding dirung redirection

f2f3f04

unixfox approved these changes Jun 2, 2022

View reviewed changes

SamantazFox requested changes Jun 5, 2022

View reviewed changes

meow added 2 commits June 5, 2022 20:54

JS. Trailing spaces removed

d3ab4a5

Move _helpers.js include from various .ecr's into template.ecr `h…

a402128

…ead` tag

SamantazFox approved these changes Jun 6, 2022

View reviewed changes

SamantazFox merged commit 2313ca8 into iv-org:master Jun 8, 2022

TheFrenchGhosty mentioned this pull request Jun 9, 2022

[Bug] Regression - Local storage key for dark mode changed #3146

Closed

TheFrenchGhosty mentioned this pull request Jun 26, 2022

javascript:void constantly displayed #465

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS refactoring part 2: helper functions, poyfills #3084

JS refactoring part 2: helper functions, poyfills #3084

AHOHNMYC commented May 6, 2022 •

edited

Loading

AHOHNMYC commented May 12, 2022

SamantazFox commented May 15, 2022

AHOHNMYC commented May 16, 2022

SamantazFox commented May 16, 2022

AHOHNMYC commented May 16, 2022

SamantazFox left a comment

AHOHNMYC commented May 31, 2022 •

edited

Loading

SamantazFox commented Jun 4, 2022 •

edited

Loading

SamantazFox left a comment

SamantazFox commented Jun 8, 2022

JS refactoring part 2: helper functions, poyfills #3084

JS refactoring part 2: helper functions, poyfills #3084

Conversation

AHOHNMYC commented May 6, 2022 • edited Loading

AHOHNMYC commented May 12, 2022

SamantazFox commented May 15, 2022

AHOHNMYC commented May 16, 2022

SamantazFox commented May 16, 2022

AHOHNMYC commented May 16, 2022

SamantazFox left a comment

Choose a reason for hiding this comment

AHOHNMYC commented May 31, 2022 • edited Loading

SamantazFox commented Jun 4, 2022 • edited Loading

SamantazFox left a comment

Choose a reason for hiding this comment

SamantazFox commented Jun 8, 2022

AHOHNMYC commented May 6, 2022 •

edited

Loading

AHOHNMYC commented May 31, 2022 •

edited

Loading

SamantazFox commented Jun 4, 2022 •

edited

Loading