fix(scroll wheel volume control): Fix not being able to scroll when o…

…ver video

When disabling scroll wheel volume control

You couldn't scroll the page

Closes #62

src/features/scrollWheelVolumeControl/index.ts

@@ -11,6 +11,16 @@ import { adjustVolume, getScrollDirection, setupScrollListeners, drawVolumeDispl
  * @returns {Promise<void>} A promise that resolves once the volume adjustment is completed.
  */
 export default async function adjustVolumeOnScrollWheel(): Promise<void> {
+	// Wait for the "options" message from the content script
+	const optionsData = await waitForSpecificMessage("options", "request_data", "content");
+	if (!optionsData) return;
+	const {
+		data: { options }
+	} = optionsData;
+	// Extract the necessary properties from the options object
+	const { enable_scroll_wheel_volume_control: enableScrollWheelVolumeControl } = options;
+	// If scroll wheel volume control is disabled, return
+	if (!enableScrollWheelVolumeControl) return;
 	// Wait for the specified container selectors to be available on the page
 	const containerSelectors = await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
 
@@ -32,17 +42,6 @@ export default async function adjustVolumeOnScrollWheel(): Promise<void> {
 		// Adjust the volume based on the scroll direction
 		const scrollDelta = getScrollDirection(wheelEvent.deltaY);
 
-		// Wait for the "options" message from the extension
-		const optionsData = await waitForSpecificMessage("options", "request_data", "content");
-		if (!optionsData) return;
-		const {
-			data: { options }
-		} = optionsData;
-		// Extract the necessary properties from the options object
-		const { enable_scroll_wheel_volume_control: enableScrollWheelVolumeControl } = options;
-		// If scroll wheel volume control is disabled, return
-		if (!enableScrollWheelVolumeControl) return;
-
 		// Adjust the volume based on the scroll direction and options
 		const { newVolume } = await adjustVolume(scrollDelta, options.volume_adjustment_steps);
 

src/pages/content/index.tsx

@@ -200,6 +200,17 @@ window.onload = function () {
 				}
 				break;
 			}
+			case "scrollWheelVolumeControlChange": {
+				const {
+					data: { scrollWheelVolumeControlEnabled }
+				} = message;
+				if (scrollWheelVolumeControlEnabled) {
+					adjustVolumeOnScrollWheel();
+				} else {
+					eventManager.removeEventListeners("scrollWheelVolumeControl");
+				}
+				break;
+			}
 			default: {
 				return;
 			}

src/pages/inject/index.tsx

@@ -187,6 +187,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 			sendExtensionOnlyMessage("loopButtonChange", {
 				loopButtonEnabled: castedChanges.enable_loop_button.newValue
 			});
+		},
+		enable_scroll_wheel_volume_control: () => {
+			sendExtensionOnlyMessage("scrollWheelVolumeControlChange", {
+				scrollWheelVolumeControlEnabled: castedChanges.enable_scroll_wheel_volume_control.newValue
+			});
 		}
 	};
 	Object.entries(

src/types.ts

@@ -108,6 +108,7 @@ export type ExtensionSendOnlyMessageMappings = {
 	videoHistoryChange: DataResponseMessage<"videoHistoryChange", { videoHistoryEnabled: boolean }>;
 	remainingTimeChange: DataResponseMessage<"remainingTimeChange", { remainingTimeEnabled: boolean }>;
 	loopButtonChange: DataResponseMessage<"loopButtonChange", { loopButtonEnabled: boolean }>;
+	scrollWheelVolumeControlChange: DataResponseMessage<"scrollWheelVolumeControlChange", { scrollWheelVolumeControlEnabled: boolean }>;
 };
 export type FilterMessagesBySource<T extends Messages, S extends MessageSource> = {
 	[K in keyof T]: Extract<T[K], { source: S }>;