feat: automatically disable ambient mode #708

Author: VampireChicken12

Diff for: assets/translation context screenshots/Miscellaneous Settings/Automatically_Disable_Ambient_Mode.png

@@ -264,6 +264,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"automaticallyDisableAmbientMode": {
+						"label": "Automatically disable ambient mode",
+						"title": "Automatically disables ambient mode when you load a video"
+					},
 					"automaticallyDisableClosedCaptions": {
 						"label": "Automatically disable closed captions",
 						"title": "Automatically disables closed captions when you load a video"

Diff for: public/locales/en-US.json

@@ -179,6 +179,10 @@ interface EnUS {
 			};
 			miscellaneous: {
 				features: {
+					automaticallyDisableAmbientMode: {
+						label: "Automatically disable ambient mode";
+						title: "Automatically disables ambient mode when you load a video";
+					};
 					automaticallyDisableClosedCaptions: {
 						label: "Automatically disable closed captions";
 						title: "Automatically disables closed captions when you load a video";

Diff for: public/locales/en-US.json.d.ts

@@ -765,6 +765,14 @@ export default function Settings() {
 						title={t("settings.sections.miscellaneous.features.automaticallyDisableClosedCaptions.title")}
 						type="checkbox"
 					/>
+					<Setting
+						checked={settings.enable_automatically_disable_ambient_mode?.toString() === "true"}
+						id="enable_automatically_disable_ambient_mode"
+						label={t("settings.sections.miscellaneous.features.automaticallyDisableAmbientMode.label")}
+						onChange={setCheckboxOption("enable_automatically_disable_ambient_mode")}
+						title={t("settings.sections.miscellaneous.features.automaticallyDisableAmbientMode.title")}
+						type="checkbox"
+					/>
 				</SettingSection>
 				<SettingSection title={t("settings.sections.videoHistory.title")}>
 					<SettingTitle />

Diff for: src/components/Settings/Settings.tsx

@@ -0,0 +1,76 @@
+import { isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+let ambientModeWasEnabled = false;
+
+export async function enableAutomaticallyDisableAmbientMode() {
+	const {
+		data: {
+			options: { enable_automatically_disable_ambient_mode }
+		}
+	} = await waitForSpecificMessage("options", "request_data", "content");
+	if (!enable_automatically_disable_ambient_mode) return;
+	if (!isWatchPage()) return;
+	await waitForAllElements([
+		"div#player",
+		"div#player-wide-container",
+		"div#video-container",
+		"div#player-container",
+		"div.ytp-settings-menu:not(#yte-feature-menu)"
+	]);
+	const settingsButton = document.querySelector<HTMLButtonElement>("button.ytp-settings-button");
+	const settingsMenu = document.querySelector<HTMLDivElement>("div.ytp-settings-menu:not(#yte-feature-menu)");
+	const settingsPanelMenu = settingsMenu?.querySelector<HTMLDivElement>("div.ytp-panel-menu");
+	if (!settingsButton || !settingsMenu || !settingsPanelMenu) return;
+	// If the settings panel menu is empty, emulate a click on the settings button to hydrate the settings menu with the necessary elements
+	if (!settingsPanelMenu.hasChildNodes()) {
+		// Hide the settings menu temporarily
+		settingsMenu.classList.add("hidden");
+		// Click on the settings button to open the settings menu
+		settingsButton.click();
+		// Click on the settings button again to close the settings menu
+		settingsButton.click();
+	}
+	// Get the ambient mode menu item element
+	const ambientModeMenuItem = settingsPanelMenu.querySelector<HTMLDivElement>(
+		".ytp-menuitem:has(.ytp-menuitem-icon svg path[d='M21 7v10H3V7h18m1-1H2v12h20V6zM11.5 2v3h1V2h-1zm1 17h-1v3h1v-3zM3.79 3 6 5.21l.71-.71L4.5 2.29 3.79 3zm2.92 16.5L6 18.79 3.79 21l.71.71 2.21-2.21zM19.5 2.29 17.29 4.5l.71.71L20.21 3l-.71-.71zm0 19.42.71-.71L18 18.79l-.71.71 2.21 2.21z'])"
+	);
+	// If ambient mode menu item is not available, return
+	if (!ambientModeMenuItem) return settingsMenu.classList.remove("hidden");
+	const ambientModeEnabled = ambientModeMenuItem.getAttribute("aria-checked") === "true";
+	// If ambient mode was not enabled, return
+	if (!ambientModeEnabled) return settingsMenu.classList.remove("hidden");
+	ambientModeWasEnabled = ambientModeEnabled;
+	// Disable ambient mode
+	ambientModeMenuItem.click();
+	settingsMenu.classList.remove("hidden");
+}
+
+export async function disableAutomaticallyDisableAmbientMode() {
+	// If ambient mode wasn't enabled, return
+	if (!ambientModeWasEnabled) return;
+	await waitForAllElements([
+		"div#player",
+		"div#player-wide-container",
+		"div#video-container",
+		"div#player-container",
+		"div.ytp-settings-menu:not(#yte-feature-menu)"
+	]);
+	const settingsButton = document.querySelector<HTMLButtonElement>("button.ytp-settings-button");
+	const settingsMenu = document.querySelector<HTMLDivElement>("div.ytp-settings-menu:not(#yte-feature-menu)");
+	const settingsPanelMenu = settingsMenu?.querySelector<HTMLDivElement>("div.ytp-panel-menu");
+	if (!settingsButton || !settingsMenu || !settingsPanelMenu) return;
+	// If the settings panel menu is empty, emulate a click on the settings button to hydrate the settings menu with the necessary elements
+	if (!settingsPanelMenu.hasChildNodes()) {
+		settingsMenu.classList.add("hidden");
+		// Click on the settings button to open the settings menu in a hidden state
+		settingsButton.click();
+		// Click on the settings button again to close the settings menu
+		settingsButton.click();
+	}
+	const ambientModeMenuItem = settingsPanelMenu.querySelector<HTMLDivElement>(
+		".ytp-menuitem:has(.ytp-menuitem-icon svg path[d='M21 7v10H3V7h18m1-1H2v12h20V6zM11.5 2v3h1V2h-1zm1 17h-1v3h1v-3zM3.79 3 6 5.21l.71-.71L4.5 2.29 3.79 3zm2.92 16.5L6 18.79 3.79 21l.71.71 2.21-2.21zM19.5 2.29 17.29 4.5l.71.71L20.21 3l-.71-.71zm0 19.42.71-.71L18 18.79l-.71.71 2.21 2.21z'])"
+	);
+	// If ambient mode menu item is not available, return
+	if (!ambientModeMenuItem) return settingsMenu.classList.remove("hidden");
+	// Enable ambient mode
+	ambientModeMenuItem.click();
+}

Diff for: src/features/automaticallyDisableAmbientMode/index.ts

@@ -271,6 +271,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 				automaticTheaterModeEnabled: newValue
 			});
 		},
+		enable_automatically_disable_ambient_mode: (__oldValue, newValue) => {
+			sendExtensionOnlyMessage("automaticallyDisableAmbientModeChange", {
+				automaticallyDisableAmbientModeEnabled: newValue
+			});
+		},
 		enable_automatically_disable_closed_captions: (__oldValue, newValue) => {
 			sendExtensionOnlyMessage("automaticallyDisableClosedCaptionsChange", {
 				automaticallyDisableClosedCaptionsEnabled: newValue

Diff for: src/pages/content/index.ts

@@ -1,5 +1,6 @@
 import { deepDarkPresets } from "@/src/deepDarkPresets";
 import { featureButtonFunctions, type FeatureFuncRecord } from "@/src/features";
+import { disableAutomaticallyDisableAmbientMode, enableAutomaticallyDisableAmbientMode } from "@/src/features/automaticallyDisableAmbientMode";
 import {
 	disableAutomaticallyDisableClosedCaptions,
 	enableAutomaticallyDisableClosedCaptions
@@ -191,7 +192,8 @@ const enableFeatures = () => {
 			enableHideTranslateComment(),
 			enableHideEndScreenCards(),
 			enablePlaylistLength(),
-			enableAutomaticallyDisableClosedCaptions()
+			enableAutomaticallyDisableClosedCaptions(),
+			enableAutomaticallyDisableAmbientMode()
 		]);
 		// Enable feature menu before calling button functions
 		await enableFeatureMenu();
@@ -299,6 +301,17 @@ window.addEventListener("DOMContentLoaded", function () {
 				}
 				if (!message) return;
 				switch (message.type) {
+					case "automaticallyDisableAmbientModeChange": {
+						const {
+							data: { automaticallyDisableAmbientModeEnabled }
+						} = message;
+						if (automaticallyDisableAmbientModeEnabled) {
+							await enableAutomaticallyDisableAmbientMode();
+						} else {
+							await disableAutomaticallyDisableAmbientMode();
+						}
+						break;
+					}
 					case "automaticallyDisableClosedCaptionsChange": {
 						const {
 							data: { automaticallyDisableClosedCaptionsEnabled }

Diff for: src/pages/embedded/index.ts

@@ -353,6 +353,10 @@ export type ContentToBackgroundSendOnlyMessageMappings = {
 	pauseBackgroundPlayers: ActionMessage<"pauseBackgroundPlayers">;
 };
 export type ExtensionSendOnlyMessageMappings = {
+	automaticallyDisableAmbientModeChange: DataResponseMessage<
+		"automaticallyDisableAmbientModeChange",
+		{ automaticallyDisableAmbientModeEnabled: boolean }
+	>;
 	automaticallyDisableClosedCaptionsChange: DataResponseMessage<
 		"automaticallyDisableClosedCaptionsChange",
 		{ automaticallyDisableClosedCaptionsEnabled: boolean }
@@ -458,6 +462,7 @@ export type configuration = {
 	deep_dark_custom_theme_colors: DeepDarkCustomThemeColors;
 	deep_dark_preset: DeepDarkPreset;
 	enable_automatic_theater_mode: boolean;
+	enable_automatically_disable_ambient_mode: boolean;
 	enable_automatically_disable_closed_captions: boolean;
 	enable_automatically_set_quality: boolean;
 	enable_copy_timestamp_url_button: boolean;

Diff for: src/types/index.ts

@@ -51,6 +51,7 @@ export const defaultConfiguration = {
 	},
 	deep_dark_preset: "Deep-Dark",
 	enable_automatic_theater_mode: false,
+	enable_automatically_disable_ambient_mode: false,
 	enable_automatically_disable_closed_captions: false,
 	enable_automatically_set_quality: false,
 	enable_copy_timestamp_url_button: false,
@@ -147,6 +148,7 @@ export const configurationImportSchema: TypeToPartialZodSchema<
 		.optional(),
 	deep_dark_preset: z.enum(deepDarkPreset).optional(),
 	enable_automatic_theater_mode: z.boolean().optional(),
+	enable_automatically_disable_ambient_mode: z.boolean().optional(),
 	enable_automatically_disable_closed_captions: z.boolean().optional(),
 	enable_automatically_set_quality: z.boolean().optional(),
 	enable_copy_timestamp_url_button: z.boolean().optional(),