comparing the new-unfinished & old version (any missing code to migrate?)

[ImprovedTube]

1. Sep-2021 : 105kb JS + 22kb CSS

2. Now it is more CSS, less JS. Yet unfinished. This goes in hand with all known bugs:

( what we use live is from ImprovedTube 3.945 August 2022) - None of the bugs appeared before.
(+ 2.1. just removed an old color-picker code, without reviewing changes: f416701 )

8 bugs introduced in the live version: #3

• Custom Shortcuts Issues youtube#1446 + Extension Instant Search & Completition youtube#1171

history manager has a version from May 2021 with the mark up working! ( & <textarea> ?)

• Yet only 72 & 28 kb https://github.com/code-charity/History-Manager-with-indexedDB/tree/main/assets/satus
  so we just got to compare this too.
  ( text markup also works in https://github.com/code-charity/ultimate-REGEX-extension/blob/master/satus.js from september 2021, but there it is minified ...)

---

More:

satus July18 from ImprovedTube Beta 3.1001.zip

• possible this has a relevant/most recent edit, if we compare

---

( Inbetween, still almost the same as current / 2023):

( 2. Jan-2022 87kb JS + 37kb CSS Jan2022.zip )

Finally: [oct2022 but again MINIFIED unfortunately.zip] (https://github.com/code-for-charity/SATUS/files/11045240/oct2022.but.MINIFIED.zip) - possibly could also have any good edit, but yet we need an automated way to compared, despite minified. how?

[raszpl]

holy 100KB batman
some of the stuff in satus is redundant, like https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2879
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2861
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L3056
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2870
https://github.com/search?q=repo%3Acode-charity%2Fyoutube+camelize+&type=code
why even camelize anything?

or unneeded https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2861
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL2926C22-L2926C22
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2907
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL3086C22-L3086C22
https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#LL3065C21-L3065C21

etc etc

missing mime types YT is specifically testing for when loading player https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2966
AV1 "video/mp4; codecs=av01.0.05M.08"
H.264 "video/mp4; codecs="avc1.640028"; framerate=30"

How to decode H.264 name from numbers: Profile Level
Constrained Baseline 2.1 avc1.42c015
Constrained Baseline 3.0 avc1.42c01e
Main 3.0 avc1.4d401e
Main 3.1 avc1.4d401f
High 3.0 avc1.64001e
High 3.1 avc1.64001f
High 3.2 avc1.640020
High 4.0 avc1.640028

audio https://github.com/code-charity/youtube/blob/73cbd813f4db2b283343e23ef664ae07fff6afe4/js%26css/satus.js#L2939
AAC low complexity (AAC-LC) "audio/mp4; codecs="mp4a.40.2""
opus "audio/webm; codecs="opus""
"audio/webm; codecs="opus"; channels=2"
"audio/webm; codecs="opus"; channels=99"

a lot of fat to trim and stuff to update. After reading the code I dont see ability to manipulate settings by other settings :( So its impossible to program one button to automatically switch another option off :(. Ill look into how easy it would be to add this functionality (maybe needed for overriding codecs).

[raszpl]

Two days of staring at this code and its starting to make sense :) Its actually quite logical and pleasant to work with.

I dont see ability to manipulate settings by other settings

I found an indirect way by sending events, calling functions directly or directly manipulating .dataset.value/.storage.value

I also found few bugs:

1. https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L1177

            this.modalProvider.dispatchEvent(new CustomEvent('cancel'));
            this.modalProvider.close();

this doesnt seem to work, looks like despite settimeout element is removed() before Event has a chance to reach it. I already have a patch for this almost ready.

2. Too many verbose click listeners. Modal dialog (those with ok/cancel) has 3 simultaneous ones with two bubbling events per click screwing things up. Im testing the fix.

3. https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L491

satus.events.trigger = function(type, data) {
  var handlers = this.data[type];

  if (handlers) {
    for (var i = 0, l = handlers.length; i < l; i++) {
    try {handlers[i](data);} 
	   catch(err){console.log(err);}
    }
  }
};

the reason for try/catch here is a bug where this function is being called with type = storage-set and data=unknown here https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#LL1004C1-L1004C45
try {satus.events.trigger('storage-set');}
and this.data actually having bogus undefined storage-set element. Fix pending.
EDIT: Ha, found it https://github.com/code-charity/youtube/blob/94bd68583408e5b20dba0315a9edefeb168723d2/menu/index.js#L49
satus.events.on('storage-set', extension.attributes);
this is never used anywhere and causes this problem together with satus.events.trigger('storage-set'); I think maybe someone was in the process of implementing new feature and didnt finish?

4. https://github.com/code-charity/youtube/blob/7e56c0c0005240da1bc2f9b5aa2a31e527410eeb/js%26css/satus.js#L968 satus.storage.set overwrites whole config (chrome.storage.local.set) even if only one option is being changed. Not really a bug, but a weird undesirable action.

[raszpl]

bug 3 fix code-charity/youtube#1676 Still no idea why this functionality is there (why call extension.attributes() every time some option is changed?) :) but at least now its working as it was intended.

[ImprovedTube]

dont see ability to manipulate settings by other settings :(

check (yes, only this:
code-charity/youtube@76c91d4 )

[ImprovedTube]

why camelize

just answered in #1634

[ImprovedTube]

I think maybe someone was in the process of implementing new feature and didnt finish?

mostlikely, includes some unfinished plans worth noticing.
Dont know if/when the architect will be back, all we have is public.
Please make comments in code.
Your effort can be our documentation. (Somebody can help also turn it into wiki pages etc. as said.)

[raszpl]

why camelize

just answered in #1634

If you really want smaller js files (meaningless in case of menu for an extension) you can always minify the release package. Mixing naming conventions just makes code less readable. It adds noise for no gain whatsoever. This code doesnt live in a hot loop of some performance sensitive function, its extension menu - gets executed only when user wants to change options.

dont see ability to manipulate settings by other settings :(

check code-charity/youtube@76c91d4

1 "need 1ms since JS executes faster than firefox storage"

Patch comment is not entirely accurate, settimeout is not a proper fix for race conditions. What is happening here is using async storage function (chrome.storage.local.set in onclick event) and expecting it to take immediate action (satus.storage.get('transcript')). settimeout will help in that case, but not the way one might expect. Its not that you need to wait some magic number of milliseconds for slow storage, its emptying event loop so async functions can complete
What the heck is the event loop anyway? | Philip Roberts | JSConf EU https://www.youtube.com/watch?v=8aGhZQkoFbQ

The problem here is how Satus gui library handles clicking on elements in separate event. Here Appearance/Sidebar/Transcript element has two onclick handlers simultaneously (what I mentioned earlier as "2. Too many verbose click listeners")
One is https://github.com/code-charity/youtube/blob/76c91d43875737de1e2f6802b102b3ee681d7ff5/menu/skeleton-parts/appearance.js#L814
and the other https://github.com/code-charity/youtube/blob/76c91d43875737de1e2f6802b102b3ee681d7ff5/js%26css/satus.js#L2476

Im thinking on ways to rework whole thing into something less convoluted.

2 nextSibling.click() is fragile code. Its meant to target "To the side! (No page margin)" and will break next time someone decides to move options around. Better to call by name.

[ImprovedTube]

a lot of fat to trim

yes, besides it could be an unlimited ordered collection, when a build script could generally include removal of unused functions.

One original thought/reason for Satus was to keep different extension features & GUI maintainable efficiently.
& keep moving code from all extensions to Satus. ( + then could add a template extension here with everything)
For example it makes no sense that Frame by frame & Looper are standalone extensions, gotta copy them into ImprovedTube too with (optional) global permission.

Thank you again @raszpl. Looking forward / excited. You probably already solved something else pending since #1439 🤩

[ImprovedTube]

If you really want smaller js files

sorry, the cause was human eyes, not cpu. See here. (The idea there was just to make collaborated code as short as possible. To reduce our (contributor's) time it takes to read it. Increasing cognitive efficency, decreasing overhead. (Underscores are considered overhead by a majority of JS developers. (Yet not for translators maybe. Thats why one could maybe reason to have both. But we dont need to )

Patch comment is not entirely accurate,

👍 good info. (just a hotfix & the intentional UX advantage (250ms delay) could rather be animated.)

Im thinking on ways to rework whole thing into something less convoluted.

🥳🎉 *hyperventilates*

2 nextSibling.click() is fragile code. Its meant to target "To the side! (No page margin)" and will break next time someone decides to move options around. Better to call by name.

👍 just to make sure you saw the current way this before possibly implementing it well. (Sometimes instead of "check" i should say "btw, just incase...)