feat: automatically disable closed captions #371

public/locales/en-US.json

@@ -264,6 +264,10 @@
 						"label": "Automatic theater mode",
 						"title": "Automatically enables theater mode when you load a video"
 					},
+					"automaticallyDisableClosedCaptions": {
+						"label": "Automatically disable closed captions",
+						"title": "Automatically disables closed captions when you load a video"
+					},
 					"copyTimestampUrlButton": {
 						"label": "Copy video URL with timestamp button",
 						"title": "Copies video URL with timestamp (?t=123)"

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

@@ -183,6 +183,10 @@ interface EnUS {
 						label: "Automatic theater mode";
 						title: "Automatically enables theater mode when you load a video";
 					};
+					automaticallyDisableClosedCaptions: {
+						label: "Automatically disable closed captions";
+						title: "Automatically disables closed captions when you load a video";
+					};
 					copyTimestampUrlButton: {
 						label: "Copy video URL with timestamp button";
 						title: "Copies video URL with timestamp (?t=123)";

src/components/Settings/Settings.tsx

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

src/features/automaticallyDisableClosedCaptions/index.ts

@@ -0,0 +1,31 @@
+import type { YouTubePlayerDiv } from "@/src/types";
+import { isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+let captionsWhereEnabled = false;
+export async function enableAutomaticallyDisableClosedCaptions() {
+	const {
+		data: {
+			options: { enable_automatically_disable_closed_captions }
+		}
+	} = await waitForSpecificMessage("options", "request_data", "content");
+	if (!enable_automatically_disable_closed_captions) return;
+	await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+	// Get the player element
+	const playerContainer = isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
+	const subtitlesButton = document.querySelector("button.ytp-subtitles-button");
+	// If player element is not available, return
+	if (!playerContainer || !subtitlesButton) return;
+	captionsWhereEnabled = subtitlesButton.getAttribute("aria-pressed") === "true";
+	// Disable captions
+	playerContainer.unloadModule("captions");
+}
+export async function disableAutomaticallyDisableClosedCaptions() {
+	await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+	// Get the player element
+	const playerContainer = isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
+	// If player element is not available, return
+	if (!playerContainer) return;
+	// If captions weren't enabled, return
+	if (!captionsWhereEnabled) return;
+	// Re-enable captions
+	playerContainer.loadModule("captions");
+}

src/global.d.ts

@@ -55,6 +55,8 @@ declare module "node_modules/@types/youtube-player/dist/types" {
 		viewerLivestreamJoinMediaTime: number;
 	}
 	interface YouTubePlayer {
+		unloadModule(moduleName: string): void;
+		loadModule(moduleName: string): void;
 		getProgressState(): ProgressState;
 		getVideoBytesLoaded(): Promise<number>;
 		getVideoData(): Promise<VideoData>;

src/i18n/constants.ts

@@ -1,50 +1,50 @@
 export const availableLocales = [
-  "ca-ES",
-  "cs-CZ",
-  "de-DE",
-  "en-GB",
-  "en-US",
-  "es-ES",
-  "fa-IR",
-  "fr-FR",
-  "he-IL",
-  "hi-IN",
-  "it-IT",
-  "ja-JP",
-  "ko-KR",
-  "pl-PL",
-  "pt-BR",
-  "ru-RU",
-  "sv-SE",
-  "tr-TR",
-  "uk-UA",
-  "vi-VN",
-  "zh-CN",
-  "zh-TW"
+	"ca-ES",
+	"cs-CZ",
+	"de-DE",
+	"en-GB",
+	"en-US",
+	"es-ES",
+	"fa-IR",
+	"fr-FR",
+	"he-IL",
+	"hi-IN",
+	"it-IT",
+	"ja-JP",
+	"ko-KR",
+	"pl-PL",
+	"pt-BR",
+	"ru-RU",
+	"sv-SE",
+	"tr-TR",
+	"uk-UA",
+	"vi-VN",
+	"zh-CN",
+	"zh-TW"
 ] as const;
 export const localePercentages: Record<AvailableLocales, number> = {
-  "en-US": 100,
-  "ca-ES": 0,
-  "cs-CZ": 0,
-  "de-DE": 27,
-  "en-GB": 1,
-  "es-ES": 48,
-  "fa-IR": 0,
-  "fr-FR": 51,
-  "he-IL": 0,
-  "hi-IN": 0,
-  "it-IT": 100,
-  "ja-JP": 92,
-  "ko-KR": 99,
-  "pl-PL": 0,
-  "pt-BR": 56,
-  "ru-RU": 90,
-  "sv-SE": 99,
-  "tr-TR": 63,
-  "uk-UA": 18,
-  "vi-VN": 0,
-  "zh-CN": 100,
-  "zh-TW": 97
+	"en-US": 100,
+	"ca-ES": 0,
+	"cs-CZ": 0,
+	"de-DE": 27,
+	"en-GB": 1,
+	"es-ES": 48,
+	"fa-IR": 0,
+	"fr-FR": 51,
+	"he-IL": 0,
+	"hi-IN": 0,
+	"it-IT": 100,
+	"ja-JP": 92,
+	"ko-KR": 99,
+	"pl-PL": 0,
+	"pt-BR": 56,
+	"ru-RU": 90,
+	"sv-SE": 99,
+	"tr-TR": 63,
+	"uk-UA": 18,
+	"vi-VN": 0,
+	"zh-CN": 100,
+	"zh-TW": 97
 };
 export const localeDirection: Record<AvailableLocales, "ltr" | "rtl"> = {
 	"ca-ES": "ltr",

src/pages/content/index.ts

@@ -407,6 +407,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 				scrollWheelSpeedControlEnabled: newValue
 			});
 		},
+		enable_automatically_disable_closed_captions: (__oldValue, newValue) => {
+			sendExtensionOnlyMessage("automaticallyDisableClosedCaptionsChange", {
+				automaticallyDisableClosedCaptionsEnabled: newValue
+			});
+		},
 		enable_scroll_wheel_volume_control: (__oldValue, newValue) => {
 			sendExtensionOnlyMessage("scrollWheelVolumeControlChange", {
 				scrollWheelVolumeControlEnabled: newValue

src/pages/embedded/index.ts

@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 import { deepDarkPresets } from "@/src/deepDarkPresets";
 import { type FeatureFuncRecord, featureButtonFunctions } from "@/src/features";
+import {
+	disableAutomaticallyDisableClosedCaptions,
+	enableAutomaticallyDisableClosedCaptions
+} from "@/src/features/automaticallyDisableClosedCaptions";
 import { enableAutomaticTheaterMode } from "@/src/features/automaticTheaterMode";
 import { featuresInControls } from "@/src/features/buttonPlacement";
 import { getFeatureButton, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
@@ -186,7 +190,8 @@ const enableFeatures = () => {
 			adjustSpeedOnScrollWheel(),
 			enableHideTranslateComment(),
 			enableHideEndScreenCards(),
-			enablePlaylistLength()
+			enablePlaylistLength(),
+			enableAutomaticallyDisableClosedCaptions()
 		]);
 		// Enable feature menu before calling button functions
 		await enableFeatureMenu();
@@ -650,6 +655,17 @@ window.addEventListener("DOMContentLoaded", function () {
 						else await removeHideEndScreenCardsButton();
 						break;
 					}
+					case "automaticallyDisableClosedCaptionsChange": {
+						const {
+							data: { automaticallyDisableClosedCaptionsEnabled }
+						} = message;
+						if (automaticallyDisableClosedCaptionsEnabled) {
+							await enableAutomaticallyDisableClosedCaptions();
+						} else {
+							await disableAutomaticallyDisableClosedCaptions();
+						}
+						break;
+					}
 					case "hideLiveStreamChatChange": {
 						const {
 							data: { hideLiveStreamChatEnabled }

src/types/index.ts

@@ -416,6 +416,10 @@ export type ExtensionSendOnlyMessageMappings = {
 		{ volumeBoostAmount: number; volumeBoostEnabled: boolean; volumeBoostMode: VolumeBoostMode }
 	>;
 	volumeBoostChange: DataResponseMessage<"volumeBoostChange", { volumeBoostEnabled: boolean; volumeBoostMode: VolumeBoostMode }>;
+	automaticallyDisableClosedCaptionsChange: DataResponseMessage<
+		"automaticallyDisableClosedCaptionsChange",
+		{ automaticallyDisableClosedCaptionsEnabled: boolean }
+	>;
 };
 export type FilterMessagesBySource<T extends Messages, S extends MessageSource> = {
 	[K in keyof T]: Extract<T[K], { source: S }>;
@@ -455,6 +459,7 @@ export type configuration = {
 	enable_automatic_theater_mode: boolean;
 	enable_automatically_set_quality: boolean;
 	enable_copy_timestamp_url_button: boolean;
+	enable_automatically_disable_closed_captions: boolean;
 	enable_custom_css: boolean;
 	enable_deep_dark_theme: boolean;
 	enable_forced_playback_speed: boolean;

src/utils/constants.ts

@@ -111,7 +111,8 @@ export const defaultConfiguration = {
 	volume_adjustment_steps: 5,
 	volume_boost_amount: 5,
 	volume_boost_mode: "global",
-	youtube_data_api_v3_key: ""
+	youtube_data_api_v3_key: "",
+	enable_automatically_disable_closed_captions: false
 } satisfies configuration;
 export const configurationImportSchema: TypeToPartialZodSchema<
 	configuration,
@@ -207,7 +208,8 @@ export const configurationImportSchema: TypeToPartialZodSchema<
 	volume_adjustment_steps: z.number().min(1).max(100).optional(),
 	volume_boost_amount: z.number().optional(),
 	volume_boost_mode: z.enum(volumeBoostModes).optional(),
-	youtube_data_api_v3_key: z.string().optional()
+	youtube_data_api_v3_key: z.string().optional(),
+	enable_automatically_disable_closed_captions: z.boolean().optional()
 });
 export const DEV_MODE = process.env.__DEV__ === "true";
 export const ENABLE_SOURCE_MAP = DEV_MODE === true ? "inline" : false;