feat(volume boost): add mode selection

Add 'global' and 'per video' modes for volume boost. 'Global' applies boost to all videos when enabled. 'Per video' allows enabling boost for each video individually.

public/locales/en-US.json.d.ts

@@ -194,11 +194,15 @@ interface EnUS {
 				title: "Scroll wheel volume control settings";
 			};
 			volumeBoost: {
-				enable: {
-					label: "Volume boost";
-					title: "Boosts the volume of the video you're watching";
+				boostAmount: { label: "Volume boost amount (dB)"; title: "The amount to boost the volume by" };
+				enable: { label: "Volume boost"; title: "Enable volume boost" };
+				mode: {
+					select: {
+						label: "Volume boost mode";
+						options: { global: "Global"; perVideo: "Per video" };
+						title: "Choose how volume boost is applied. 'Per video' allows enabling boost for each video individually in the feature menu. 'Global' applies boost to all videos when volume boost is enabled.";
+					};
 				};
-				number: { label: "Volume boost amount (dB)"; title: "The amount to boost the volume by" };
 				title: "Volume boost settings";
 			};
 		};

src/components/Settings/Settings.tsx

@@ -1,4 +1,4 @@
-import type { ModifierKey, configuration, configurationKeys } from "@/src/types";
+import type { ModifierKey, VolumeBoostMode, configuration, configurationKeys } from "@/src/types";
 import type EnUS from "public/locales/en-US.json";
 import type { ChangeEvent, ChangeEventHandler } from "react";
 
@@ -326,6 +326,16 @@ export default function Settings() {
 		{ label: file, value: "file" },
 		{ label: clipboard, value: "clipboard" }
 	];
+	const VolumeBoostModeOptions: SelectOption[] = [
+		{
+			label: t("settings.sections.volumeBoost.mode.select.options.global"),
+			value: "global"
+		},
+		{
+			label: t("settings.sections.volumeBoost.mode.select.options.perVideo"),
+			value: "per_video"
+		}
+	] as { label: string; value: VolumeBoostMode }[] as SelectOption[];
 	const settingsImportChange: ChangeEventHandler<HTMLInputElement> = (event): void => {
 		void (async () => {
 			const { target } = event;
@@ -664,14 +674,24 @@ export default function Settings() {
 						title={t("settings.sections.volumeBoost.enable.title")}
 						type="checkbox"
 					/>
+					<Setting
+						disabled={settings.enable_volume_boost?.toString() !== "true"}
+						id="volume_boost_mode"
+						label={t("settings.sections.volumeBoost.mode.select.label")}
+						onChange={setValueOption("volume_boost_mode")}
+						options={VolumeBoostModeOptions}
+						selectedOption={getSelectedOption("volume_boost_mode")}
+						title={t("settings.sections.volumeBoost.mode.select.title")}
+						type="select"
+					/>
 					<Setting
 						disabled={settings.enable_volume_boost?.toString() !== "true"}
 						id="volume_boost_amount"
-						label={t("settings.sections.volumeBoost.number.label")}
+						label={t("settings.sections.volumeBoost.boostAmount.label")}
 						max={100}
 						min={1}
 						onChange={setValueOption("volume_boost_amount")}
-						title={t("settings.sections.volumeBoost.number.title")}
+						title={t("settings.sections.volumeBoost.boostAmount.title")}
 						type="number"
 						value={settings.volume_boost_amount}
 					/>

src/features/volumeBoost/index.ts

@@ -20,18 +20,20 @@ function makeVolumeBoostIcon() {
 	return volumeBoostIconSvg;
 }
 export default async function volumeBoost() {
+	setupVolumeBoost();
 	const optionsData = await waitForSpecificMessage("options", "request_data", "content");
 	if (!optionsData) return;
 
 	const {
 		data: { options }
 	} = optionsData;
 
-	const { enable_volume_boost } = options;
-
-	if (!enable_volume_boost) return;
-	await addVolumeBoostButton();
-	setupVolumeBoost();
+	const { volume_boost_amount, volume_boost_mode } = options;
+	if (volume_boost_mode === "per_video") {
+		await addVolumeBoostButton();
+	} else if (volume_boost_mode === "global") {
+		applyVolumeBoost(volume_boost_amount);
+	}
 }
 export async function enableVolumeBoost() {
 	setupVolumeBoost();
@@ -43,9 +45,7 @@ export async function enableVolumeBoost() {
 	} = optionsData;
 
 	const { volume_boost_amount } = options;
-
 	applyVolumeBoost(volume_boost_amount);
-	await addVolumeBoostButton();
 }
 function setupVolumeBoost() {
 	if (!window.audioCtx || !window.gainNode) {

src/pages/content/index.tsx

@@ -16,7 +16,7 @@ import enableRememberVolume from "@/src/features/rememberVolume";
 import { addScreenshotButton, removeScreenshotButton } from "@/src/features/screenshotButton";
 import adjustVolumeOnScrollWheel from "@/src/features/scrollWheelVolumeControl";
 import { promptUserToResumeVideo, setupVideoHistory } from "@/src/features/videoHistory";
-import volumeBoost, { disableVolumeBoost, enableVolumeBoost, removeVolumeBoostButton } from "@/src/features/volumeBoost";
+import volumeBoost, { addVolumeBoostButton, disableVolumeBoost, enableVolumeBoost, removeVolumeBoostButton } from "@/src/features/volumeBoost";
 import { i18nService } from "@/src/i18n";
 import eventManager from "@/utils/EventManager";
 import {
@@ -138,13 +138,21 @@ window.addEventListener("DOMContentLoaded", function () {
 				switch (message.type) {
 					case "volumeBoostChange": {
 						const {
-							data: { volumeBoostEnabled }
+							data: { volumeBoostEnabled, volumeBoostMode }
 						} = message;
 						if (volumeBoostEnabled) {
-							await enableVolumeBoost();
+							if (volumeBoostMode === "global") {
+								removeVolumeBoostButton();
+								await enableVolumeBoost();
+							} else {
+								disableVolumeBoost();
+								await addVolumeBoostButton();
+							}
 						} else {
 							disableVolumeBoost();
-							removeVolumeBoostButton();
+							if (volumeBoostMode === "per_video") {
+								removeVolumeBoostButton();
+							}
 						}
 						break;
 					}

src/pages/inject/index.tsx

@@ -248,7 +248,8 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 		enable_volume_boost: (newValue) => {
 			sendExtensionOnlyMessage("volumeBoostChange", {
 				volumeBoostAmount: options.volume_boost_amount,
-				volumeBoostEnabled: newValue
+				volumeBoostEnabled: newValue,
+				volumeBoostMode: options.volume_boost_mode
 			});
 		},
 		feature_menu_open_type: (newValue) => {
@@ -270,7 +271,15 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 		volume_boost_amount: (newValue) => {
 			sendExtensionOnlyMessage("volumeBoostChange", {
 				volumeBoostAmount: newValue,
-				volumeBoostEnabled: options.enable_volume_boost
+				volumeBoostEnabled: options.enable_volume_boost,
+				volumeBoostMode: options.volume_boost_mode
+			});
+		},
+		volume_boost_mode: (newValue) => {
+			sendExtensionOnlyMessage("volumeBoostChange", {
+				volumeBoostAmount: options.volume_boost_amount,
+				volumeBoostEnabled: options.enable_volume_boost,
+				volumeBoostMode: newValue
 			});
 		}
 	};

src/types/index.ts

@@ -40,6 +40,8 @@ export type ScreenshotFormat = (typeof screenshotFormat)[number];
 export const modifierKey = ["altKey", "ctrlKey", "shiftKey"] as const;
 export type ModifierKey = (typeof modifierKey)[number];
 export type RememberedVolumes = { shortsPageVolume?: number; watchPageVolume?: number };
+export const volumeBoostMode = ["global", "per_video"] as const;
+export type VolumeBoostMode = (typeof volumeBoostMode)[number];
 export type configuration = {
 	enable_automatic_theater_mode: boolean;
 	enable_automatically_set_quality: boolean;
@@ -72,6 +74,7 @@ export type configuration = {
 	scroll_wheel_volume_control_modifier_key: ModifierKey;
 	volume_adjustment_steps: number;
 	volume_boost_amount: number;
+	volume_boost_mode: VolumeBoostMode;
 };
 export type configurationKeys = keyof configuration;
 export type configurationId = configurationKeys;
@@ -126,7 +129,10 @@ export type ExtensionSendOnlyMessageMappings = {
 	screenshotButtonChange: DataResponseMessage<"screenshotButtonChange", { screenshotButtonEnabled: boolean }>;
 	scrollWheelVolumeControlChange: DataResponseMessage<"scrollWheelVolumeControlChange", { scrollWheelVolumeControlEnabled: boolean }>;
 	videoHistoryChange: DataResponseMessage<"videoHistoryChange", { videoHistoryEnabled: boolean }>;
-	volumeBoostChange: DataResponseMessage<"volumeBoostChange", { volumeBoostAmount?: number; volumeBoostEnabled: boolean }>;
+	volumeBoostChange: DataResponseMessage<
+		"volumeBoostChange",
+		{ volumeBoostAmount?: number; volumeBoostEnabled: boolean; volumeBoostMode: VolumeBoostMode }
+	>;
 };
 export type FilterMessagesBySource<T extends Messages, S extends MessageSource> = {
 	[K in keyof T]: Extract<T[K], { source: S }>;

src/utils/constants.ts

@@ -11,6 +11,7 @@ import {
 	onScreenDisplayType,
 	screenshotFormat,
 	screenshotType,
+	volumeBoostMode,
 	youtubePlayerQualityLevel
 } from "../types";
 export const outputFolderName = "dist";
@@ -48,7 +49,8 @@ export const defaultConfiguration = {
 	screenshot_save_as: "file",
 	scroll_wheel_volume_control_modifier_key: "ctrlKey",
 	volume_adjustment_steps: 5,
-	volume_boost_amount: 1
+	volume_boost_amount: 1,
+	volume_boost_mode: "global"
 } satisfies configuration;
 export const configurationImportSchema: TypeToPartialZodSchema<configuration> = z.object({
 	enable_automatic_theater_mode: z.boolean().optional(),
@@ -86,5 +88,6 @@ export const configurationImportSchema: TypeToPartialZodSchema<configuration> =
 	screenshot_save_as: z.enum(screenshotType).optional(),
 	scroll_wheel_volume_control_modifier_key: z.enum(modifierKey).optional(),
 	volume_adjustment_steps: z.number().min(1).max(100).optional(),
-	volume_boost_amount: z.number().optional()
+	volume_boost_amount: z.number().optional(),
+	volume_boost_mode: z.enum(volumeBoostMode).optional()
 });