From 230d07f512f938f9e8c22ed527cc0c3594f99cba Mon Sep 17 00:00:00 2001
From: VampireChicken12 <Johnbrown51@yahoo.com>
Date: Wed, 25 Oct 2023 01:34:54 -0400
Subject: [PATCH] fix(scroll wheel volume control): Fix not being able to
 scroll when over video

When disabling scroll wheel volume control

You couldn't scroll the page

Closes #62
---
 .../scrollWheelVolumeControl/index.ts         | 21 +++++++++----------
 src/pages/content/index.tsx                   | 11 ++++++++++
 src/pages/inject/index.tsx                    |  5 +++++
 src/types.ts                                  |  1 +
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/features/scrollWheelVolumeControl/index.ts b/src/features/scrollWheelVolumeControl/index.ts
index b17b98c8..7460311a 100644
--- a/src/features/scrollWheelVolumeControl/index.ts
+++ b/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);
 
diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx
index 5eaf3fe1..95e75cd7 100644
--- a/src/pages/content/index.tsx
+++ b/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;
 			}
diff --git a/src/pages/inject/index.tsx b/src/pages/inject/index.tsx
index cb831092..855e131a 100644
--- a/src/pages/inject/index.tsx
+++ b/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(
diff --git a/src/types.ts b/src/types.ts
index 45e8cdef..06c3697b 100644
--- a/src/types.ts
+++ b/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 }>;