shortcuts.js continue #2421 rewrite

[raszpl]

• modular design, shortcuts() separated into shortcutsInit() shortcutsHandler() shortcutsListeners()
• listeners installed only if there are shortcuts active
• removing all shortcuts unloads listeners
• removed player hover listener
• rewritten shortcutChapters shortcutTranscript, previously they only worked once because removeAttribute('visibility'); was breaking YT buttons. includes bruteforce fallback and appropriate error message
• renames 'Show chapters Sidebar' 'transcript' to 'Toggle sidebar Chapters' 'Toggle sidebar Transcript' Chapter (Sidebar) On/Off
• simplified shortcutNextVideo shortcutPrevVideo, removed weird language dependent no longer working loop forcing code, it had no business being there
• potentially more reliable shortcutLike shortcutDislike
• cancel keydown/wheel event before we call target handler, crashing handler wont keep 'cancelled' keys stuck
• pressed.keys and cancelled turned into Set() for better reliability, cant hold multiple of same key = will more reliably cancel missed keyups on second press/keyup

[ImprovedTube]

• removed player hover listener

why? ( ~ 862#issuecomment-813124694:~:text=hover )

---

• rewritten shortcutChapters shortcutTranscript

youtube's DOM names might change unlike clientHeight.
( /we can hoard code as a backup.)

---

• renames 'Show chapters Sidebar' 'transcript' to 'Toggle sidebar Chapters' 'Toggle sidebar Transcript'

Can be Transcript & Chapters or Chapter (Sidebar) (youtube might shows the chapters below the video too, but not the transcript), (while toggle enable show sidebar could be be tags or context, slightly)

• cant edit before merging

---

• simplified shortcutNextVideo shortcutPrevVideo, removed weird language dependent no longer working loop forcing code, it had no business being there

lol

• it's surprising that Youtube loses the Playlist-loop state by using the next / previous buttons. (there might be a request about this in our closed github issues) (however the code doesnt look like a solution.)

• BTW playlist.js (outdated/broken):
  Playlist loop bug: automatically turns on loop. #1768 (comment)

youtube/js&css/web-accessible/www.youtube.com/playlist.js

Lines 93 to 128 in 41280ef

	4.5.3 REPEAT
	------------------------------------------------------------------------------*/
	ImprovedTube.playlistRepeat = function () {
	if ( ImprovedTube.storage.playlist_repeat === true ) {
	setTimeout(function (){
	var option = ImprovedTube.storage.playlist_repeat,
	button = document.querySelector("#button.ytd-playlist-loop-button-renderer") || document.querySelector("ytd-playlist-loop-button-renderer button") || document.querySelector("ytd-playlist-loop-button-renderer");
	if (button && (option === true && button.querySelector("path").attributes.d.textContent.split(" ")[0].startsWith('M21')
	) && button.querySelector("#tooltip")?.textContent !== 'Loop video'
	&& button.firstElementChild?.firstElementChild?.attributes[2]?.textContent !== 'Loop video'
	&& button.querySelector("#tooltip")?.textContent !== 'Turn off loop'
	&& button.firstElementChild?.firstElementChild?.attributes[2]?.textContent !== 'Turn off loop'
	)
	{ button.click(); }
	}, 10000);
	}
	};
	/* https://github.com/code-charity/youtube/issues/1768#issuecomment-1720423923 */
	/*------------------------------------------------------------------------------
	4.5.4 SHUFFLE
	------------------------------------------------------------------------------*/
	ImprovedTube.playlistShuffle = function () {
	if ( ImprovedTube.storage.playlist_shuffle === true ) {
	setTimeout(function (){
	var button = ImprovedTube.elements.playlist.shuffle_button,
	option = ImprovedTube.storage.playlist_shuffle;
	button = document.querySelector('#playlist-actions #playlist-action-menu ytd-toggle-button-renderer');
	if (button && (option === true && button.querySelector("path").attributes.d.textContent.split(" ")[0].startsWith('M18.1')
	) )
	{ button.click(); }
	}, 10000);
	}
	};

language dependent

( At need English will cover a lot of users globally, so it could be a good backup & one could add the most common ones ( Korean for ImprovedTube) - or ALL youtube languages, at least #1752 started getting all of them before (for our _locales). Greetings @Lauviah0622 )

[raszpl]

• removed player hover listener

why? ( ~ 862#issuecomment-813124694:~:text=hover )

clunky and unreliable, easier to just check directly on every click
if (!ImprovedTube.elements.player.contains(event.target)) return;

• rewritten shortcutChapters shortcutTranscript

youtube's DOM names might change unlike clientHeight. ( /we can hoard code as a backup.)

previously they only worked once because removeAttribute('visibility'); was breaking YT buttons. So you could click once to show Chapters .. and that was it, neither clicking shortcut nor clicking X was closing it.

• renames 'Show chapters Sidebar' 'transcript' to 'Toggle sidebar Chapters' 'Toggle sidebar Transcript'

Can be Transcript & Chapters or Chapter (Sidebar) (youtube might shows the chapters below the video too, but not the transcript), (while toggle enable show sidebar could be be tags or context, slightly)

anything that lets user know this is switching on/off. Chapter (Sidebar) On/Off is also fine

• simplified shortcutNextVideo shortcutPrevVideo, removed weird language dependent no longer working loop forcing code, it had no business being there

lol

• it's surprising that Youtube loses the Playlist-loop state by using the next / previous buttons.

It comes back to user intent. User sets Looping, presses Play and lets YT take over = looping. User clicks NEXT manually forcing selection = YT disables autopilot and turns off looping. Just like Autopilot or ordinary car Cruise Control, automation until user interaction.

youtube/js&css/web-accessible/www.youtube.com/playlist.js

Lines 93 to 128 in 41280ef

	4.5.3 REPEAT
	------------------------------------------------------------------------------*/
	ImprovedTube.playlistRepeat = function () {
	if ( ImprovedTube.storage.playlist_repeat === true ) {
	setTimeout(function (){
	var option = ImprovedTube.storage.playlist_repeat,
	button = document.querySelector("#button.ytd-playlist-loop-button-renderer") || document.querySelector("ytd-playlist-loop-button-renderer button") || document.querySelector("ytd-playlist-loop-button-renderer");
	if (button && (option === true && button.querySelector("path").attributes.d.textContent.split(" ")[0].startsWith('M21')
	) && button.querySelector("#tooltip")?.textContent !== 'Loop video'
	&& button.firstElementChild?.firstElementChild?.attributes[2]?.textContent !== 'Loop video'
	&& button.querySelector("#tooltip")?.textContent !== 'Turn off loop'
	&& button.firstElementChild?.firstElementChild?.attributes[2]?.textContent !== 'Turn off loop'
	)
	{ button.click(); }
	}, 10000);
	}
	};
	/* https://github.com/code-charity/youtube/issues/1768#issuecomment-1720423923 */
	/*------------------------------------------------------------------------------
	4.5.4 SHUFFLE
	------------------------------------------------------------------------------*/
	ImprovedTube.playlistShuffle = function () {
	if ( ImprovedTube.storage.playlist_shuffle === true ) {
	setTimeout(function (){
	var button = ImprovedTube.elements.playlist.shuffle_button,
	option = ImprovedTube.storage.playlist_shuffle;
	button = document.querySelector('#playlist-actions #playlist-action-menu ytd-toggle-button-renderer');
	if (button && (option === true && button.querySelector("path").attributes.d.textContent.split(" ")[0].startsWith('M18.1')
	) )
	{ button.click(); }
	}, 10000);
	}
	};

language dependent

yep, I even got this issue link in comments on my local copy :D I was looking at it 4 days ago after I wrote #2276 (comment)

Speaking of Playlists, Playlist menu has those 4:

Reverse
Repeat
Shuffle
Popup player
but:
Reverse and Popup player are buttons we are adding
Repeat and Shuffle are toggles we are switching/forcing
Those should be in separate sub categories.

after investigating there is no way I can find of reading back status of Looping/Shuffle from YT API, only button aria text and by the icons :|
Whats more there is no way of programmatically setting those two modes in any way I can find, only Video Looping is easy with loop tag, but doing it this way wont be reflected by YT icons.
so when fixing this the only reliable way is indeed:
button.querySelector("path").attributes.d.textContent.startsWith('M20') off
button.querySelector("path").attributes.d.textContent.startsWith('M21') loop button.querySelector("path").attributes.d.textContent.startsWith('M13') loop with 1 in the middle, what does that even mean? :D

[ImprovedTube]

• removed player hover listener

why? ( ~ 862#issuecomment-813124694:~:text=hover )

clunky and unreliable, easier to just check directly on every click if (!ImprovedTube.elements.player.contains(event.target)) return;

i meant, many more future uses for "hover UIs" 862#issuecomment-813124694:~:text=hover.
+Scroll for volume did require hover on the player yet (vs. scrolling on the page)

[ImprovedTube]

• rewritten shortcutChapters shortcutTranscript

youtube's DOM names might change unlike clientHeight. ( /we can hoard code as a backup.)

previously they only worked once because removeAttribute('visibility'); was breaking YT buttons. So you could click once to show Chapters .. and that was it, neither clicking shortcut nor clicking X was closing it.

good point! 😅 (what about considering both of the above?)

• renames 'Show chapters Sidebar' 'transcript' to 'Toggle sidebar Chapters' 'Toggle sidebar Transcript'

Can be Transcript & Chapters or Chapter (Sidebar) (youtube might shows the chapters below the video too, but not the transcript), (while toggle enable show sidebar could be be tags or context, slightly)

anything that lets user know this is switching on/off. Chapter (Sidebar) On/Off is also fine

makes sense of course if you wanted to tell users bout the fix 💡
i meant it is education or a category name shortcuts(_hotkeys, mostly toggles, more to come_)

[ImprovedTube]

comes back to user intent.

( the loop button has two states. Playlist loop is a higher-level decision (for hours usually).
I guess a future feature of ImprovedTube can be: playlist: playlist-repeat if it is music. )

[ImprovedTube]

was looking at it 4 days ago after I wrote #2276 (comment)

yay

Those should be in separate sub categories.

yes.
Aand (said before:) if there was just a "list of Features" ordered by number of users, all of them can would appear somewhere down that list. (while most features, could use a button/icon (even if on-by-default), that should be able to appear below the player (like youtube enhancer), which equals a short "active features list"/dashboard. Which renders our current menu situation somewhere in between that & documentation (yet neither).

button.querySelector("path").attributes.d.textContent.startsWith('M13') loop with 1 in the middle, what does that even mean? :D

means only the current video.
(so it is redundant / equal to loop in the player.)

while 💭 our loop button was planned like:

• repeat
  • should be a 4- or 3-way toggle: (off | infinite or 5 times or custom duration or amount | only 1 time )
  • Right-click can result in adding a lock to the icon too, locking it (=always on, always the currently selected option) (and that code can be repurposed for more buttons sticky repeat button & sticky anything? #1491)
  • Refine our Repeat/Loop-feature ( Include popout player & Exclude ads?) #1504

[raszpl]

• removed player hover listener

why? ( ~ 862#issuecomment-813124694:~:text=hover )

clunky and unreliable, easier to just check directly on every click if (!ImprovedTube.elements.player.contains(event.target)) return;

i meant, many more future uses for "hover UIs" 862#issuecomment-813124694:~:text=hover. +Scroll for volume did require hover on the player yet (vs. scrolling on the page)

yes, and it still works, just not using Listener :) Scroll for volume works great.

youtube/js&css/web-accessible/www.youtube.com/shortcuts.js

Lines 122 to 124 in e828ff6

	wheel: function (event) {
	// shortcuts with wheel allowed ONLY inside player
	if (!ImprovedTube.elements.player.contains(event.target)) return;

previously they only worked once because removeAttribute('visibility'); was breaking YT buttons. So you could click once to show Chapters .. and that was it, neither clicking shortcut nor clicking X was closing it.

good point! 🥵 (what about considering both of the above?)

Yes, I thought about it, there can be fallback to "removeAttribute('visibility'); breaking close() button version" in case enable button cant be found. Edit: added shortcutChapters shortcutTranscript btureforce fallback, will try removeAttribute('visibility') if it cant find proper button + will emit error in console so user isnt totally confused why he cant close Chapters/Transcript

( the loop button has two states. Playlist loop is a higher-level decision (for hours usually).

YT cancels both after user clicks Next

I guess a future feature of ImprovedTube can be: playlist: playlist-repeat if it is music. )

that will need new code, what was in Next buttons didnt work even with English language.

Aand (said before:) if there was just a "list of Features" ordered by number of users

that will require telemetry. The only way this could pass the smell test is if maybe on first Settings open after update if showed "would you like to share blabla", but even that will be seen as annoying :( Hmm maybe if it was under the usual circle buttons and just over "please rate us", something like "Vote for favorite function, request missing functions" leading to a webform survey, with a popup when clicking asking "Would you like to share your anonymized settings so we can concentrate on polishing options you use the most?".

button.querySelector("path").attributes.d.textContent.startsWith('M13') loop with 1 in the middle, what does that even mean? :D

only the current video. but that's redundant (equal to loop in the player.)

good to know, so when fixing playlistRepeat() it will require callback to function updating other custom Loop button visibility states.

[ImprovedTube]

merged as #2461 @raszpl

---

https://developer.chrome.com/docs/extensions/reference/api/i18n

when translation wont change grammar,
we don't need to start need messages

instead of shortcuts_chapters the text can consist of three messages: {chapters} + "(" + {sidebar} + ")" + {toggle}
, same for shortcuts_transcript {transcript} "(" {sidebar} ")" {toggle}