feat: changing the playback speed and volume with the mouse wheel / scroll (fixes #3388)

_locales/en/messages.json

@@ -1552,6 +1552,12 @@
   "volume": {
     "message": "Volume"
   },
+  "ctrlWheelVolume": {
+    "message": "Mouse wheel for changing volume"
+  },
+  "wheelPlaybackSpeed": {
+    "message": "Mouse wheel for changing playback speed"
+  },
   "watchedVideos": {
     "message": "Watched videos"
   },

js&css/web-accessible/core.js

@@ -528,7 +528,12 @@ document.addEventListener('it-message-from-extension', function () {
 			}
 
 			// dont trigger shortcuts on config change, reinitialize handler instead
-			if (message.key.startsWith('shortcut_')) camelized_key = 'shortcuts';
+			if (message.key.startsWith('shortcut_') || message.key === 'shortcuts_volume_wheel_ctrl' || message.key === 'shortcuts_playback_speed_wheel') {
+				camelized_key = 'shortcuts';
+				if (typeof ImprovedTube.shortcutsInit === 'function') {
+					ImprovedTube.shortcutsInit();
+				}
+			}
 			if (ImprovedTube[camelized_key]) {
 				try { ImprovedTube[camelized_key]() } catch { };
 			}

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

@@ -10,11 +10,15 @@ ImprovedTube.shortcutsInit = function () {
 	// those four are _references_ to source Objects, not copies
 	const listening = ImprovedTube.input.listening,
 		listeners = ImprovedTube.input.listeners;
+	const volumeWheelEnabled = this.storage.shortcuts_volume_wheel_ctrl === true;
+	const playbackSpeedWheelEnabled = this.storage.shortcuts_playback_speed_wheel === true;
 
 	// reset 'listening' shortcuts
 	for (var key in listening) delete listening[key];
 	// extract shortcuts from User Settings and initialize 'listening'
 	for (const [name, keys] of Object.entries(this.storage).filter(v => v[0].startsWith('shortcut_'))) {
+		if (!volumeWheelEnabled && name.includes('_volume_wheel_')) continue;
+		if (!playbackSpeedWheelEnabled && name.includes('_playback_speed_wheel_')) continue;
 		if (!keys) continue;
 		// camelCase(name)
 		const camelName = name.replace(/_(.)/g, (m, l) => l.toUpperCase());
@@ -365,6 +369,58 @@ ImprovedTube.shortcutDecreaseVolume = function () {
 	ImprovedTube.shortcutIncreaseVolume(true);
 };
 /*------------------------------------------------------------------------------
+CTRL + WHEEL VOLUME
+------------------------------------------------------------------------------*/
+ImprovedTube.shortcutIncreaseVolumeWheelCtrl = function () {
+	ImprovedTube.shortcutIncreaseVolume(false);
+};
+
+ImprovedTube.shortcutDecreaseVolumeWheelCtrl = function () {
+	ImprovedTube.shortcutIncreaseVolume(true);
+};
+
+ImprovedTube.shortcutIncreaseVolumeWheelAlt = function () {
+	ImprovedTube.shortcutIncreaseVolume(false);
+};
+
+ImprovedTube.shortcutDecreaseVolumeWheelAlt = function () {
+	ImprovedTube.shortcutIncreaseVolume(true);
+};
+
+ImprovedTube.shortcutIncreaseVolumeWheelShift = function () {
+	ImprovedTube.shortcutIncreaseVolume(false);
+};
+
+ImprovedTube.shortcutDecreaseVolumeWheelShift = function () {
+	ImprovedTube.shortcutIncreaseVolume(true);
+};
+/*------------------------------------------------------------------------------
+PLAYBACK SPEED + WHEEL
+------------------------------------------------------------------------------*/
+ImprovedTube.shortcutIncreasePlaybackSpeedWheelCtrl = function () {
+	ImprovedTube.shortcutIncreasePlaybackSpeed(false);
+};
+
+ImprovedTube.shortcutDecreasePlaybackSpeedWheelCtrl = function () {
+	ImprovedTube.shortcutIncreasePlaybackSpeed(true);
+};
+
+ImprovedTube.shortcutIncreasePlaybackSpeedWheelAlt = function () {
+	ImprovedTube.shortcutIncreasePlaybackSpeed(false);
+};
+
+ImprovedTube.shortcutDecreasePlaybackSpeedWheelAlt = function () {
+	ImprovedTube.shortcutIncreasePlaybackSpeed(true);
+};
+
+ImprovedTube.shortcutIncreasePlaybackSpeedWheelShift = function () {
+	ImprovedTube.shortcutIncreasePlaybackSpeed(false);
+};
+
+ImprovedTube.shortcutDecreasePlaybackSpeedWheelShift = function () {
+	ImprovedTube.shortcutIncreasePlaybackSpeed(true);
+};
+/*------------------------------------------------------------------------------
 4.7.15 SCREENSHOT
 ------------------------------------------------------------------------------*/
 ImprovedTube.shortcutScreenshot = ImprovedTube.screenshot;

menu/skeleton-parts/shortcuts.js

@@ -83,6 +83,11 @@ extension.skeleton.main.layers.section.shortcuts = {
 									max: 25,
 									step: 1,
 									value: 5
+								},
+								shortcuts_volume_wheel_ctrl: {
+									component: 'checkbox',
+									text: 'ctrlWheelVolume',
+									value: false
 								}
 							},
 
@@ -111,7 +116,17 @@ extension.skeleton.main.layers.section.shortcuts = {
 											}
 										}
 									}
-								}
+								},
+								shortcut_increase_volume_wheel_ctrl: {
+									component: 'shortcut',
+									text: 'increaseVolume',
+									value: {}
+								},
+								shortcut_decrease_volume_wheel_ctrl: {
+									component: 'shortcut',
+									text: 'decreaseVolume',
+									value: {}
+								},
 							}
 						}
 					}
@@ -132,6 +147,11 @@ extension.skeleton.main.layers.section.shortcuts = {
 									max: 2,
 									step: .05,
 									value: .05
+								},
+								shortcuts_playback_speed_wheel: {
+									component: 'checkbox',
+									text: 'wheelPlaybackSpeed',
+									value: false
 								}
 							},
 
@@ -161,6 +181,16 @@ extension.skeleton.main.layers.section.shortcuts = {
 										}
 									}
 								},
+								shortcut_increase_playback_speed_wheel_ctrl: {
+									component: 'shortcut',
+									text: 'increasePlaybackSpeed',
+									value: {}
+								},
+								shortcut_decrease_playback_speed_wheel_ctrl: {
+									component: 'shortcut',
+									text: 'decreasePlaybackSpeed',
+									value: {}
+								},
 								shortcut_reset_playback_speed: {
 									component: 'shortcut',
 									text: 'reset'