Add disable hold-to-play 2x feature and related UI/settings Issue #3066

[kalischuchhardt]

Hello! I added a feature in the extension player settings that allows users to disable hold (the spacebar and mouse) to play in 2x speed. I added the feature function in js&css/webaccessible/functions.js, and I added the UI in player.js located in the menu. Thank you!

[ImprovedTube]

thank you! @kalischuchhardt

did anything change in the manifest file? if nothing this PR need not change it

// LISTEN FOR STORAGE CHANGES TO UPDATE THE BEHAVIOR INSTANTLY
// CHECKS CHROME STORAGE ON CONTENT SCRIPT LOAD AND INITIALIZES

we don't need to monitor such for every feature

disable_hold_to_play_2x: {
component: 'switch',
text: 'disableHoldToPlay2x',
value: false,
},

code belonging to your feature can run conditionally, like:
if (ImprovedTube.storage.disable_hold_to_play_2x) { ImprovedTube.disable_hold_to_play_2x(); }

--

additionally (optionally) we got a section to immediately react on toggling off or on, without reloading youtube if any necessary or convenient, you can:

      if (message.key === "disable_hold_to_play_2x" )
        { if (ImprovedTube.storage.disable_hold_to_play_2x === false) { //anything to remove/undo/clean? 
        } else { //any introduction/animation to show?    
        }  
      }  

youtube/js&css/web-accessible/core.js

Lines 209 to 240 in c301a5d

	# Immediate reaction to any change of our extension storage (settings)
	While most of our features are chosen permanently (set and forget) and need to run with YouTube,
	we only started this section for feedback and reducing new user's misunderstandings.
	(For our simple CSS-only features this isn't necessary, since a loop is doing it and there could be a shared loop for many JS feature too)
	Yet doing this, it could also be used for big extra visual feedback pointing at or highlighing the immediate change on youtube.
	(to make it most intutive to the many new or visual users, bringing changes with simple css-transations or animation. Like an interactive tutorial.)
	--------------------------------------------------------------*/
	} else if (message.action === 'storage-changed') {
	let camelized_key = message.camelizedKey;
	ImprovedTube.storage[message.key] = message.value;
	if (['block_vp9', 'block_h264', 'block_av1'].includes(message.key)) {
	let atlas = { block_vp9: 'vp9|vp09', block_h264: 'avc1', block_av1: 'av01' }
	localStorage['it-codec'] = Object.keys(atlas).reduce(function (all, key) {
	return ImprovedTube.storage[key] ? ((all ? all + '|' : '') + atlas[key]) : all
	}, '');
	if (!localStorage['it-codec']) {
	localStorage.removeItem('it-codec');
	}
	}
	if (message.key === "player_60fps") {
	if (ImprovedTube.storage.player_60fps === false) {
	localStorage['it-player30fps'] = true;
	} else {
	localStorage.removeItem('it-player30fps');
	}
	}
	switch (camelized_key) {
	case 'blocklist':
	case 'blocklistActivate':
	ImprovedTube.blocklistInit();
	break