Stage 1: Refactor codebase (re) (re)

CONTRIBUTING.md

@@ -0,0 +1,83 @@
+# Contributing
+
+## Table of Contents
+
+- [Glossary](#📚-glossary)
+- [Getting Started](#🎉-getting-started)
+- [Commits, Issues, and Pull Requests](#✏-commits-issues-and-pull-requests)
+- [Contributor Workflow](#🗃-contributor-workflow)
+- [Internationalization](#🌐-internationalization-i18n)
+- [Code Quality](#🔧-code-quality)
+
+## 📚 Glossary
+
+Here are some terms that we interchangeably refer to in this document:
+
+- **Pull Request** (PR): Pull requests let you tell others about changes you've pushed to a branch in the repository. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before your changes are merged into the base branch.
+- **Continuous Integration** (CI): A development practice where developers frequently integrate their code changes into a shared repository. Each integration triggers automated tests to ensure that the new code doesn't break existing functionality. CI aims to detect and fix integration errors quickly, promoting collaboration and maintaining a consistent codebase.
+- **Continuous Development** (CD): An extension of Continuous Integration (CI) that focuses on automating the deployment of code changes to the production environment.
+
+## 🎉 Getting Started
+
+- Because our release CI/CD workflow is automated, we rely on commit messages that follow a format convention for semantic versioning[^1].
+  As such, we use the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) spec in commit messages.
+
+## ✏ Commits, Issues, and Pull Requests
+
+There are a few guidelines that we follow in order to maintain the quality of the codebase:
+
+- Make sure that commit messages are meaningful, and describe the commit itself.
+- When creating [Bug Report Issues](https://github.com/YouTube-Enhancer/extension/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=), make sure to follow the template and explain the issue in a clear and straightforward manner.
+- Although we do not strictly enforce the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) spec in pull requests, it is preferred over other ways of creating PR titles.
+- In the description of the pull request, briefly describe the goal of the PR and the changes it will bring to the codebase.
+
+## 🗃 Contributor Workflow
+
+We use the "contributor workflow" to manage the code. Everyone suggests changes by making pull requests. This helps people contribute, make tests easier, and get feedback from others.
+
+To contribute to the codebase, the workflow is as follows:
+
+1. Fork the repository
+2. Commit changes to the fork (using the `dev` branch)
+3. Create a pull request (on the `dev` branch)
+
+_It is ill-advised to create pull requests against the `main` branch as `dev` changes are merged to the main branch in batches by the core maintainers._
+
+> Read more about forking and making pull requests [here](https://docs.github.com/get-started/exploring-projects-on-github/contributing-to-a-project).
+
+## 🌐 Internationalization (i18n)
+
+### Crowdin Translation Project
+
+Our YouTube Enhancer extension supports multiple languages to provide a more inclusive experience for users around the world. We use Crowdin for managing translations.
+
+### Contributing Translations
+
+We welcome contributions to improve translations and make the extension accessible to a wider audience. If you'd like to contribute translations or suggest improvements, follow these steps:
+
+1. Visit our [Crowdin project](https://crowdin.com/project/youtube-enhancer).
+2. Select your language and start translating.
+3. If your language is not listed, feel free to request its addition.
+
+## 🔧 Code Quality
+
+Before new code gets merged into the repository, we do automated lint tests to verify the format of the code.
+
+It is recommended to test your code before committing by running the following commands:
+
+1. Lint check: `npm run lint`
+2. Fix lint errors: `npm run lint:fix`
+
+> You won't need to do this if you use a supported editor[^2], as the process is automated.
+
+While we don't yet have a strict guideline on what kind of code should be in the repository, here are a few principles we loosely follow to maintain the general consistency of the code:
+
+- [DRY principle](https://en.wikipedia.org/wiki/Don't_repeat_yourself)
+- [Rule of three](<https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)>)
+- [Single source of truth](https://en.wikipedia.org/wiki/Single_source_of_truth)
+
+---
+
+[^1]: [Why Use Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#why-use-conventional-commits)
+
+[^2]: [ESLint: A List of Editor Integrations](https://eslint.org/docs/latest/use/integrations#editors)

src/defaults.ts

@@ -28,14 +28,13 @@ function setDefaultValues() {
 					JSON.parse(storedValueString)
 				:	storedValueString;
 			// Check if the parsed value is an object and has properties
-			if (typeof storedValue === "object" && storedValue !== null) {
-				// Deep merge missing keys with their default values
-				const updatedValue = deepMerge(defaultValue as Record<string, unknown>, storedValue as Record<string, unknown>);
-				// Set the updated value in localStorage
-				localStorage.setItem(option, JSON.stringify(updatedValue));
-				// Set the updated value in chrome storage
-				void chrome.storage.local.set({ [option]: updatedValue });
-			}
+			if (typeof storedValue !== "object" || storedValue === null) continue;
+			// Deep merge missing keys with their default values
+			const updatedValue = deepMerge(defaultValue as Record<string, unknown>, storedValue as Record<string, unknown>);
+			// Set the updated value in localStorage
+			localStorage.setItem(option, JSON.stringify(updatedValue));
+			// Set the updated value in chrome storage
+			void chrome.storage.local.set({ [option]: updatedValue });
 		} catch (error) {
 			// Handle errors during JSON parsing
 			console.error(`Error parsing stored value for option ${option}:`, error);

src/features/automaticTheaterMode/index.ts

@@ -3,6 +3,7 @@ import type { YouTubePlayerDiv } from "@/src/types";
 import { isLivePage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
 
 export async function enableAutomaticTheaterMode() {
+	if (!isWatchPage()) return;
 	// Wait for the "options" message from the content script
 	const {
 		data: {
@@ -16,10 +17,7 @@ export async function enableAutomaticTheaterMode() {
 	// If player element is not available, return
 	if (!playerContainer) return;
 	const { width } = await playerContainer.getSize();
-	const {
-		body: { clientWidth }
-	} = document;
-	const isTheaterMode = width === clientWidth;
+	const isTheaterMode = document.body.clientWidth === width;
 	// Get the size button
 	const sizeButton = document.querySelector<HTMLButtonElement>("button.ytp-size-button");
 	// If the size button is not available return

src/features/buttonPlacement/utils.ts

@@ -31,8 +31,8 @@ export function makeFeatureButton<Name extends AllButtonNames, Placement extends
 	isToggle: boolean,
 	initialChecked: boolean = false
 ) {
-	const featureName = findKeyByValue(buttonName as MultiButtonNames) ?? (buttonName as SingleButtonFeatureNames);
 	if (placement === "feature_menu") throw new Error("Cannot make a feature button for the feature menu");
+	const featureName = findKeyByValue(buttonName as MultiButtonNames) ?? (buttonName as SingleButtonFeatureNames);
 	const buttonExists = document.querySelector(`button#${getFeatureButtonId(buttonName)}`) !== null;
 	const button = createStyledElement({
 		classlist: ["ytp-button"],
@@ -72,18 +72,12 @@ export function makeFeatureButton<Name extends AllButtonNames, Placement extends
 		return button;
 	}
 
+	const isIconToggle = typeof icon === "object" && "off" in icon && "on" in icon;
 	if (isToggle) {
 		button.ariaChecked = initialChecked ? "true" : "false";
-		if (typeof icon === "object" && "off" in icon && "on" in icon) {
-			button.append(initialChecked ? icon.on : icon.off);
-		} else if (icon instanceof SVGSVGElement) {
-			button.append(icon);
-		}
-	} else {
-		if (icon instanceof SVGSVGElement) {
-			button.append(icon);
-		}
+		if (isIconToggle) button.append(icon.off);
 	}
+	if (!isIconToggle && icon instanceof SVGSVGElement) button.append(icon);
 
 	eventManager.addEventListener(button, "mouseover", tooltipListener, featureName);
 	eventManager.addEventListener(
@@ -98,9 +92,7 @@ export function makeFeatureButton<Name extends AllButtonNames, Placement extends
 	return button;
 }
 export function updateFeatureButtonIcon(button: HTMLButtonElement, icon: SVGElement) {
-	if (button.firstChild) {
-		button.firstChild.replaceWith(icon);
-	}
+	button.firstChild?.replaceWith(icon);
 }
 export function updateFeatureButtonTitle(buttonName: AllButtonNames, title: string) {
 	const button = document.querySelector<HTMLButtonElement>(`#${getFeatureButtonId(buttonName)}`);
@@ -166,7 +158,7 @@ export function checkIfFeatureButtonExists(buttonName: AllButtonNames, placement
 		}
 	}
 }
-export function getFeatureButtonId(buttonName: AllButtonNames) {
+export function getFeatureButtonId<ButtonName extends AllButtonNames>(buttonName: ButtonName) {
 	return `yte-feature-${buttonName}-button` as const;
 }
 export function getFeatureButton(buttonName: AllButtonNames) {

src/features/customCSS/index.ts

@@ -11,24 +11,15 @@ export async function enableCustomCSS() {
 	} = await waitForSpecificMessage("options", "request_data", "content");
 	// Check if custom CSS is enabled
 	if (!enable_custom_css) return;
-	if (customCSSExists()) {
-		updateCustomCSS({
-			custom_css_code
-		});
-		return;
-	}
+	if (customCSSExists()) return updateCustomCSS({ custom_css_code });
 	// Create the custom CSS style element
-	const customCSSStyleElement = createCustomCSSElement({
-		custom_css_code
-	});
+	const customCSSStyleElement = createCustomCSSElement({ custom_css_code });
 	// Insert the custom CSS style element
 	document.head.appendChild(customCSSStyleElement);
 }
 export function disableCustomCSS() {
 	// Get the custom CSS style element
 	const customCSSStyleElement = document.querySelector<HTMLStyleElement>(`#${customCssID}`);
-	// Check if the custom CSS style element exists
-	if (!customCSSStyleElement) return;
 	// Remove the custom CSS style element
-	customCSSStyleElement.remove();
+	customCSSStyleElement?.remove();
 }

src/features/customCSS/utils.ts

@@ -5,9 +5,7 @@ import { customCssID } from "@/src/features/customCSS";
 export function updateCustomCSS({ custom_css_code }: Pick<configuration, "custom_css_code">) {
 	// Get the custom CSS style element
 	const customCSSStyleElement = document.querySelector<HTMLStyleElement>(`#${customCssID}`);
-	// Check if the custom CSS style element exists
-	if (!customCSSStyleElement) return;
-	customCSSStyleElement.replaceWith(createCustomCSSElement({ custom_css_code }));
+	customCSSStyleElement?.replaceWith(createCustomCSSElement({ custom_css_code }));
 }
 export function createCustomCSSElement({ custom_css_code }: Pick<configuration, "custom_css_code">) {
 	// Create the custom CSS style element
@@ -20,6 +18,5 @@ export function customCSSExists() {
 	// Get the custom CSS style element
 	const customCSSStyleElement = document.querySelector<HTMLStyleElement>(`#${customCssID}`);
 	// Check if the custom CSS style element exists
-	if (!customCSSStyleElement) return false;
-	return true;
+	return customCSSStyleElement !== null;
 }

src/features/deepDarkCSS/index.ts

@@ -13,8 +13,9 @@ export async function enableDeepDarkCSS() {
 	// Check if deep dark theme is enabled
 	if (!enable_deep_dark_theme) return;
 	if (deepDarkCSSExists()) {
-		updateDeepDarkCSS(deep_dark_preset === "Custom" ? getDeepDarkCustomThemeStyle(deep_dark_custom_theme_colors) : deepDarkPresets[deep_dark_preset]);
-		return;
+		return updateDeepDarkCSS(
+			deep_dark_preset === "Custom" ? getDeepDarkCustomThemeStyle(deep_dark_custom_theme_colors) : deepDarkPresets[deep_dark_preset]
+		);
 	}
 	// Create the deep dark theme style element
 	const deepDarkThemeStyleElement = createDeepDarkCSSElement(
@@ -27,8 +28,6 @@ export async function enableDeepDarkCSS() {
 export function disableDeepDarkCSS() {
 	// Get the deep dark theme style element
 	const deepDarkThemeStyleElement = document.querySelector<HTMLStyleElement>(`#${deepDarkCssID}`);
-	// Check if the deep dark theme style element exists
-	if (!deepDarkThemeStyleElement) return;
 	// Remove the deep dark theme style element
-	deepDarkThemeStyleElement.remove();
+	deepDarkThemeStyleElement?.remove();
 }

src/features/deepDarkCSS/utils.ts

@@ -6,9 +6,7 @@ import { deepDarkCssID } from "@/src/features/deepDarkCSS";
 export function updateDeepDarkCSS(css_code: string) {
 	// Get the custom CSS style element
 	const customCSSStyleElement = document.querySelector<HTMLStyleElement>(`#${deepDarkCssID}`);
-	// Check if the custom CSS style element exists
-	if (!customCSSStyleElement) return;
-	customCSSStyleElement.replaceWith(createDeepDarkCSSElement(css_code));
+	customCSSStyleElement?.replaceWith(createDeepDarkCSSElement(css_code));
 }
 export function createDeepDarkCSSElement(css_code: string) {
 	// Create the custom CSS style element
@@ -21,8 +19,7 @@ export function deepDarkCSSExists() {
 	// Get the custom CSS style element
 	const customCSSStyleElement = document.querySelector<HTMLStyleElement>(`#${deepDarkCssID}`);
 	// Check if the custom CSS style element exists
-	if (!customCSSStyleElement) return false;
-	return true;
+	return customCSSStyleElement !== null;
 }
 
 export function getDeepDarkCustomThemeStyle({

src/features/featureMenu/index.ts

@@ -227,8 +227,5 @@ export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuO
 		});
 	}
 	const observer = new MutationObserver(handleMutation);
-	observer.observe(playerContainer, {
-		childList: true,
-		subtree: true
-	});
+	observer.observe(playerContainer, { childList: true, subtree: true });
 }

src/features/featureMenu/utils.ts

@@ -81,19 +81,15 @@ export async function addFeatureItemToMenu<Name extends AllButtonNames, Toggle e
 	eventManager.addEventListener(menuItem, "click", () => featureMenuClickListener(menuItem, listener, isToggle), featureName);
 	menuItem.appendChild(menuItemLabel);
 	// If it's a toggle item, create the toggle elements
+	const menuItemContent = document.createElement("div");
+	menuItemContent.classList.add("ytp-menuitem-content");
 	if (isToggle) {
-		const menuItemContent = document.createElement("div");
-		menuItemContent.classList.add("ytp-menuitem-content");
 		const menuItemToggle = document.createElement("div");
 		menuItemToggle.classList.add("ytp-menuitem-toggle-checkbox");
 		menuItemContent.appendChild(menuItemToggle);
-		menuItem.appendChild(menuItemContent);
 		menuItem.ariaChecked = initialChecked ? "true" : "false";
-	} else {
-		const menuItemContent = document.createElement("div");
-		menuItemContent.classList.add("ytp-menuitem-content");
-		menuItem.appendChild(menuItemContent);
 	}
+	menuItem.appendChild(menuItemContent);
 	// Add the item to the feature menu panel
 	featureMenuPanel.appendChild(menuItem);
 	// Adjust the height and width of the feature menu
@@ -164,14 +160,10 @@ export function updateFeatureMenuTitle(title: string) {
  * @param buttonName the name of the button
  * @returns { featureMenuItemIconId, featureMenuItemId, featureMenuItemLabelId}
  */
-export function getFeatureIds(buttonName: AllButtonNames): {
-	featureMenuItemIconId: FeatureMenuItemIconId;
-	featureMenuItemId: FeatureMenuItemId;
-	featureMenuItemLabelId: FeatureMenuItemLabelId;
-} {
-	const featureMenuItemIconId: FeatureMenuItemIconId = `yte-${buttonName}-icon`;
-	const featureMenuItemId: FeatureMenuItemId = `yte-feature-${buttonName}-menuitem`;
-	const featureMenuItemLabelId: FeatureMenuItemLabelId = `yte-${buttonName}-label`;
+export function getFeatureIds<ButtonName extends AllButtonNames>(buttonName: ButtonName) {
+	const featureMenuItemIconId = `yte-${buttonName}-icon` as const;
+	const featureMenuItemId = `yte-feature-${buttonName}-menuitem` as const;
+	const featureMenuItemLabelId = `yte-${buttonName}-label` as const;
 	return {
 		featureMenuItemIconId,
 		featureMenuItemId,

src/features/hideLiveStreamChat/index.ts

@@ -14,8 +14,7 @@ export async function enableHideLiveStreamChat() {
 	await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
 	const player = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 	if (!player) return;
-	const playerData = await player.getVideoData();
-	if (!playerData.isLive) return;
+	if (!(await player.getVideoData()).isLive) return;
 	modifyElementsClassList("add", [
 		{
 			className: "yte-hide-live-stream-chat",
@@ -35,8 +34,7 @@ export async function enableHideLiveStreamChat() {
 export async function disableHideLiveStreamChat() {
 	const player = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 	if (!player) return;
-	const playerData = await player.getVideoData();
-	if (!playerData.isLive) return;
+	if (!(await player.getVideoData()).isLive) return;
 	modifyElementsClassList("remove", [
 		{
 			className: "yte-hide-live-stream-chat",

src/features/hideShorts/index.ts

@@ -19,8 +19,6 @@ export async function enableHideShorts() {
 export function disableHideShorts() {
 	showShorts();
 	// Disconnect the observer
-	if (shortsObserver) {
-		shortsObserver.disconnect();
-		shortsObserver = null;
-	}
+	shortsObserver?.disconnect();
+	shortsObserver = null;
 }

src/features/hideShorts/utils.ts

@@ -10,7 +10,6 @@ type ElementVisibilityAction = (element: HTMLElement) => void;
 
 function toggleElementVisibility(selector: string, action: ElementVisibilityAction) {
 	const elements = document.querySelectorAll<HTMLDivElement>(selector);
-	if (elements.length === 0) return;
 	elements.forEach((element) => action(element));
 }
 
@@ -117,9 +116,7 @@ export function observeShortsElements() {
 		});
 
 		// Only call hideShorts if one of the mutations contains one of the selectors
-		if (containsShortsSelector) {
-			hideShorts();
-		}
+		if (containsShortsSelector) hideShorts();
 	});
 
 	observer.observe(document.body, observerOptions);