Dev

README.md

@@ -20,7 +20,7 @@ YouTube Enhancer is a browser extension that aims to improve your YouTube experi
 
 ### 1. Miscellaneous Settings
 
-- **Remember Last Volume:** This option remembers the last volume set and applies it to future videos.
+- Remember Last Volume: This option remembers the last volume set for Shorts and the Watch page separately, applying the appropriate volume when you revisit each type of video content.
 
 - **Enable Maximize Player Button:** Adds a button to the player to maximize the video player for a better viewing experience.
 

src/components/Settings/Settings.tsx

@@ -550,8 +550,8 @@ export default function Settings({
 								if (notificationToRemove) {
 									removeNotification(notificationToRemove);
 								}
-								Object.assign(localStorage, Object.assign(defaultSettings, { remembered_volume: settings.remembered_volume }));
-								chrome.storage.local.set(Object.assign(defaultSettings, { remembered_volume: settings.remembered_volume }));
+								Object.assign(localStorage, Object.assign(defaultSettings, { remembered_volumes: settings.remembered_volumes }));
+								chrome.storage.local.set(Object.assign(defaultSettings, { remembered_volumes: settings.remembered_volumes }));
 
 								addNotification("success", "Options saved");
 							}}

src/features/rememberVolume/index.ts

@@ -15,12 +15,13 @@ export default async function setRememberedVolume(): Promise<void> {
 		data: { options }
 	} = optionsData;
 	// Extract the necessary properties from the options object
-	const { remembered_volume: rememberedVolume, enable_remember_last_volume: enableRememberVolume } = options;
-
+	const { remembered_volumes: rememberedVolume, enable_remember_last_volume: enableRememberVolume } = options;
+	const IsWatchPage = isWatchPage();
+	const IsShortsPage = isShortsPage();
 	// Get the player container element
-	const playerContainer = isWatchPage()
+	const playerContainer = IsWatchPage
 		? (document.querySelector("div#movie_player") as YouTubePlayerDiv | null)
-		: isShortsPage()
+		: IsShortsPage
 		? (document.querySelector("div#shorts-player") as YouTubePlayerDiv | null)
 		: null;
 
@@ -30,11 +31,17 @@ export default async function setRememberedVolume(): Promise<void> {
 	// If setVolume method is not available in the player container, return
 	if (!playerContainer.setVolume) return;
 
-	// Log the message indicating whether the last volume is being restored or not
-	browserColorLog(`${enableRememberVolume ? "Restoring" : "Not restoring"} last volume ${rememberedVolume}`, "FgMagenta");
-
 	// If the remembered volume option is enabled, set the volume and draw the volume display
 	if (rememberedVolume && enableRememberVolume) {
-		await playerContainer.setVolume(rememberedVolume);
+		const { shortsPageVolume, watchPageVolume } = rememberedVolume ?? {};
+		if (IsWatchPage && watchPageVolume) {
+			// Log the message indicating whether the last volume is being restored or not
+			browserColorLog(`Restoring watch page volume to ${watchPageVolume}`, "FgMagenta");
+			await playerContainer.setVolume(watchPageVolume);
+		} else if (IsShortsPage && shortsPageVolume) {
+			// Log the message indicating whether the last volume is being restored or not
+			browserColorLog(`Restoring shorts page volume to ${shortsPageVolume}`, "FgMagenta");
+			await playerContainer.setVolume(shortsPageVolume);
+		}
 	}
 }

src/features/scrollWheelVolumeControl/index.ts

@@ -57,9 +57,13 @@ export default async function adjustVolumeOnScrollWheel(): Promise<void> {
 			displayHideTime: options.osd_display_hide_time,
 			volume: newVolume
 		});
-
-		// Send a "setVolume" message to the content script
-		sendContentOnlyMessage("setVolume", { volume: newVolume });
+		if (isWatchPage()) {
+			// Send a "setVolume" message to the content script
+			sendContentOnlyMessage("setRememberedVolume", { watchPageVolume: newVolume });
+		} else if (isShortsPage()) {
+			// Send a "setVolume" message to the content script
+			sendContentOnlyMessage("setRememberedVolume", { shortsPageVolume: newVolume });
+		}
 	};
 
 	// Set up the scroll wheel event listeners on the specified container selectors

src/pages/inject/index.tsx

@@ -24,7 +24,7 @@ document.documentElement.appendChild(script);
 	 * @type {configuration}
 	 */
 	const options: configuration = await new Promise((resolve) => {
-		chrome.storage?.local?.get((o) => {
+		chrome.storage.local.get((o) => {
 			resolve(JSON.parse(JSON.stringify(o), parseReviver) as configuration);
 		});
 	});
@@ -63,7 +63,7 @@ document.addEventListener("yte-message-from-youtube", async () => {
 			 * @type {configuration}
 			 */
 			const options: configuration = await new Promise((resolve) => {
-				chrome.storage?.local?.get((o) => {
+				chrome.storage.local.get((o) => {
 					resolve(JSON.parse(JSON.stringify(o), parseReviver) as configuration);
 				});
 			});
@@ -99,13 +99,13 @@ document.addEventListener("yte-message-from-youtube", async () => {
 			});
 			break;
 		}
-		case "setVolume": {
+		case "setRememberedVolume": {
 			/**
 			 * Sets the remembered volume in the local storage.
 			 *
 			 * @type {number}
 			 */
-			chrome.storage?.local?.set({ remembered_volume: message.data.volume });
+			chrome.storage.local.set({ remembered_volumes: { ...message.data } });
 			break;
 		}
 	}
@@ -132,7 +132,7 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 		};
 	};
 	const options: configuration = await new Promise((resolve) => {
-		chrome.storage?.local?.get((o) => {
+		chrome.storage.local.get((o) => {
 			resolve(JSON.parse(JSON.stringify(o), parseReviver) as configuration);
 		});
 	});

src/types.ts

@@ -1,5 +1,6 @@
 import z from "zod";
 import type { YouTubePlayer } from "node_modules/@types/youtube-player/dist/types";
+
 /* eslint-disable no-mixed-spaces-and-tabs */
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 export type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> };
@@ -55,9 +56,12 @@ export type configuration = {
 	osd_display_padding: number;
 	volume_adjustment_steps: number;
 	volume_boost_amount: number;
-	remembered_volume?: number;
 	player_quality: YoutubePlayerQualityLevel;
 	player_speed: number;
+	remembered_volumes?: {
+		shortsPageVolume: number;
+		watchPageVolume: number;
+	};
 };
 export type configurationKeys = keyof configuration;
 export type VideoHistoryStatus = "watched" | "watching";
@@ -74,21 +78,27 @@ export type BaseMessage<T extends MessageAction, S extends MessageSource> = {
 	action: T;
 	source: S;
 };
-export type SendDataMessage<T extends MessageAction, S extends MessageSource, Type extends string, D> = BaseMessage<T, S> & {
-	type: Type;
-	data: D;
-};
-export type DataResponseMessage<Type extends string, D> = BaseMessage<"data_response", "extension"> & {
-	type: Type;
-	data: D;
-};
+export type SendDataMessage<T extends MessageAction, S extends MessageSource, Type extends string, D> = Prettify<
+	BaseMessage<T, S> & {
+		type: Type;
+		data: D;
+	}
+>;
+export type DataResponseMessage<Type extends string, D> = Prettify<
+	BaseMessage<"data_response", "extension"> & {
+		type: Type;
+		data: D;
+	}
+>;
 
-export type RequestDataMessage<Type extends string, D> = BaseMessage<"request_data", "content"> & {
-	type: Type;
-	data: D;
-};
+export type RequestDataMessage<Type extends string, D> = Prettify<
+	BaseMessage<"request_data", "content"> & {
+		type: Type;
+		data: D;
+	}
+>;
 export type ContentSendOnlyMessageMappings = {
-	setVolume: SendDataMessage<"send_data", "content", "setVolume", { volume: number }>;
+	setRememberedVolume: SendDataMessage<"send_data", "content", "setRememberedVolume", { shortsPageVolume?: number; watchPageVolume?: number }>;
 };
 export type ExtensionSendOnlyMessageMappings = {
 	volumeBoostChange: DataResponseMessage<"volumeBoostChange", { volumeBoostEnabled: boolean; volumeBoostAmount?: number }>;
@@ -102,7 +112,7 @@ export type ExtensionSendOnlyMessageMappings = {
 export type FilterMessagesBySource<T extends Messages, S extends MessageSource> = {
 	[K in keyof T]: Extract<T[K], { source: S }>;
 };
-export type MessageMappings = {
+export type MessageMappings = Prettify<{
 	options: {
 		request: RequestDataMessage<"options", undefined>;
 		response: DataResponseMessage<"options", { options: configuration }>;
@@ -117,7 +127,7 @@ export type MessageMappings = {
 		request: RequestDataMessage<"videoHistoryAll", undefined>;
 		response: DataResponseMessage<"videoHistoryAll", { video_history_entries: VideoHistoryStorage }>;
 	};
-};
+}>;
 export type Messages = MessageMappings[keyof MessageMappings];
 export type YouTubePlayerDiv = YouTubePlayer & HTMLDivElement;
 export type Selector = string;
@@ -133,3 +143,6 @@ type TypeToZod<T> = {
 export type ConfigurationToZodSchema<T> = z.ZodObject<{
 	[K in keyof T]: T[K] extends object ? z.ZodObject<TypeToZod<T[K]>> : z.ZodType<T[K]>;
 }>;
+export type Prettify<T> = {
+	[K in keyof T]: T[K];
+};

src/utils/EventManager.ts

@@ -46,7 +46,6 @@ export const eventManager: EventManager = {
 
 	// Adds an event listener for the given target, eventName, and featureName
 	addEventListener: function (target, eventName, callback, featureName) {
-		this.removeEventListener(target, eventName, featureName);
 		// Get the map of target listeners for the given featureName
 		const targetListeners = this.listeners.get(featureName) || new Map();
 		// Store the event listener info object in the map