Merge pull request #185 from VampireChicken12/dev

Dev

.all-contributorsrc

@@ -0,0 +1,4 @@
+{
+	"projectName": "youtube-enhancer",
+	"projectOwner": "VampireChicken12"
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

README.md

@@ -11,6 +11,7 @@ The YouTube Enhancer Extension is a powerful browser extension designed to enhan
 ![Stars](https://img.shields.io/github/stars/VampireChicken12/youtube-enhancer.svg)
 [![Crowdin Translation Project Badge](https://badges.crowdin.net/youtube-enhancer/localized.svg)](https://crowdin.com/project/youtube-enhancer)
 [![Join our Discord server](https://img.shields.io/discord/1180688348675838132?label=Discord&logo=Discord)](https://discord.gg/VpdGFmuB4B)
+
 ## Table of Contents
 
 - [Introduction](#-introduction)

package.json

@@ -1,77 +1,77 @@
 {
-  "name": "youtube-enhancer",
-  "author": {
-    "name": "VampireChicken12"
-  },
-  "displayName": "YouTube Enhancer",
-  "version": "1.17.1",
-  "description": "YouTube Enhancer is a simple extension that adds some useful features to YouTube.",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/VampireChicken12/youtube-enhancer.git"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "nodemon",
-    "format": "prettier --write .",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "type": "module",
-  "dependencies": {
-    "@formkit/auto-animate": "^0.8.1",
-    "dotenv": "^16.3.1",
-    "i18next": "^23.7.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0",
-    "webextension-polyfill": "^0.10.0"
-  },
-  "devDependencies": {
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
-    "@total-typescript/ts-reset": "^0.5.1",
-    "@types/archiver": "^6.0.1",
-    "@types/chrome": "^0.0.254",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@types/webextension-polyfill": "^0.10.6",
-    "@types/youtube-player": "^5.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react-swc": "^3.4.1",
-    "archiver": "^6.0.1",
-    "autoprefixer": "^10.4.16",
-    "clsx": "^2.0.0",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-no-secrets": "^0.8.9",
-    "eslint-plugin-perfectionist": "^2.3.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-tailwindcss": "^3.13.0",
-    "fs-extra": "^11.1.1",
-    "get-installed-browsers": "^0.1.7",
-    "nodemon": "^3.0.1",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "semantic-release": "^22.0.7",
-    "tailwind-merge": "^2.0.0",
-    "tailwindcss": "^3.3.5",
-    "ts-json-as-const": "^1.0.7",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.1",
-    "zod": "^3.22.4",
-    "zod-error": "^1.5.0"
-  }
-}
+	"name": "youtube-enhancer",
+	"author": {
+		"name": "VampireChicken12"
+	},
+	"displayName": "YouTube Enhancer",
+	"version": "1.17.1",
+	"description": "YouTube Enhancer is a simple extension that adds some useful features to YouTube.",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/VampireChicken12/youtube-enhancer.git"
+	},
+	"scripts": {
+		"build": "vite build",
+		"dev": "nodemon",
+		"format": "prettier --write .",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix"
+	},
+	"type": "module",
+	"dependencies": {
+		"@formkit/auto-animate": "^0.8.1",
+		"dotenv": "^16.3.1",
+		"i18next": "^23.7.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"vite-plugin-css-injected-by-js": "^3.3.0",
+		"webextension-polyfill": "^0.10.0"
+	},
+	"devDependencies": {
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/exec": "^6.0.3",
+		"@semantic-release/git": "^10.0.1",
+		"@thedutchcoder/postcss-rem-to-px": "^0.0.2",
+		"@total-typescript/ts-reset": "^0.5.1",
+		"@types/archiver": "^6.0.1",
+		"@types/chrome": "^0.0.254",
+		"@types/node": "^20.9.0",
+		"@types/react": "^18.2.37",
+		"@types/react-dom": "^18.2.15",
+		"@types/webextension-polyfill": "^0.10.6",
+		"@types/youtube-player": "^5.5.10",
+		"@typescript-eslint/eslint-plugin": "^6.10.0",
+		"@typescript-eslint/parser": "^6.10.0",
+		"@vitejs/plugin-react-swc": "^3.4.1",
+		"archiver": "^6.0.1",
+		"autoprefixer": "^10.4.16",
+		"clsx": "^2.0.0",
+		"concurrently": "^8.2.2",
+		"eslint": "^8.53.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-import": "^2.29.0",
+		"eslint-plugin-jsx-a11y": "^6.8.0",
+		"eslint-plugin-no-secrets": "^0.8.9",
+		"eslint-plugin-perfectionist": "^2.3.0",
+		"eslint-plugin-prettier": "^5.0.1",
+		"eslint-plugin-promise": "^6.1.1",
+		"eslint-plugin-react": "^7.33.2",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-tailwindcss": "^3.13.0",
+		"fs-extra": "^11.1.1",
+		"get-installed-browsers": "^0.1.7",
+		"nodemon": "^3.0.1",
+		"postcss": "^8.4.31",
+		"prettier": "^3.0.3",
+		"semantic-release": "^22.0.7",
+		"tailwind-merge": "^2.0.0",
+		"tailwindcss": "^3.3.5",
+		"ts-json-as-const": "^1.0.7",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.2.2",
+		"vite": "^4.5.1",
+		"zod": "^3.22.4",
+		"zod-error": "^1.5.0"
+	}
+}

prettier.config.cjs

@@ -2,6 +2,7 @@
 module.exports = {
 	arrowParens: "always",
 	endOfLine: "crlf",
+	experimentalTernaries: true,
 	printWidth: 150,
 	semi: true,
 	singleQuote: false,

src/components/Inputs/Select/Select.tsx

@@ -67,24 +67,21 @@ const Select: React.FC<SelectProps> = ({ className, disabled = false, id, label,
 					onClick={toggleSelect}
 					type="button"
 				>
-					{selectedOption ? (
-						options.find((option) => option.value === selectedOption)?.element ? (
+					{selectedOption ?
+						options.find((option) => option.value === selectedOption)?.element ?
 							<div className="flex w-full items-center justify-between pr-4">
 								<span className={cn("text-black dark:text-white", disabledButtonClasses)}>
 									{options.find((option) => option.value === selectedOption)?.label}
 								</span>
 								{options.find((option) => option.value === selectedOption)?.element}
 							</div>
-						) : (
-							<div className="flex w-full items-center justify-between pr-2">
+						:	<div className="flex w-full items-center justify-between pr-2">
 								<span className={cn("text-black dark:text-white", disabledButtonClasses)}>
 									{options.find((option) => option.value === selectedOption)?.label}
 								</span>
 							</div>
-						)
-					) : (
-						<span className={cn("text-black dark:text-white", disabledButtonClasses)}>Select an option</span>
-					)}
+
+					:	<span className={cn("text-black dark:text-white", disabledButtonClasses)}>Select an option</span>}
 					<Arrow rotation={isSelectVisible ? "up" : "down"} />
 				</button>
 				{isSelectVisible && (

src/components/Settings/Settings.tsx

@@ -732,7 +732,7 @@ export default function Settings() {
 						type="button"
 						value={t("settings.sections.importExportSettings.exportButton.value")}
 					/>
-					{notifications.filter((n) => n.action === "reset_settings").length > 0 ? (
+					{notifications.filter((n) => n.action === "reset_settings").length > 0 ?
 						<input
 							className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 							id="confirm_button"
@@ -756,16 +756,15 @@ export default function Settings() {
 							type="button"
 							value={t("settings.sections.bottomButtons.confirm.value")}
 						/>
-					) : (
-						<input
+					:	<input
 							className="warning p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 							id="reset_button"
 							onClick={resetOptions}
 							title={t("settings.sections.bottomButtons.reset.title")}
 							type="button"
 							value={t("settings.sections.bottomButtons.reset.value")}
 						/>
-					)}
+					}
 				</div>
 				<SettingsNotifications />
 				<input accept=".json" hidden={true} id="import_settings_input" onChange={settingsImportChange} ref={settingsImportRef} type="file" />

src/components/Settings/components/SettingNotifications.tsx

@@ -24,8 +24,8 @@ export default function SettingsNotifications() {
 						})}
 						key={index}
 					>
-						{notification.action ? (
-							notification.action === "reset_settings" ? (
+						{notification.action ?
+							notification.action === "reset_settings" ?
 								<>
 									{message.split("\n").map((line, index) => (
 										<p key={index}>{line}</p>
@@ -34,15 +34,14 @@ export default function SettingsNotifications() {
 										&times;
 									</button>
 								</>
-							) : null
-						) : (
-							<>
+							:	null
+						:	<>
 								{message}
 								<button className="absolute right-[5px] top-[-1px] text-base font-normal" onClick={() => removeNotification(notification)}>
 									&times;
 								</button>
 							</>
-						)}
+						}
 						<div
 							className="absolute bottom-0 left-0 h-1 rounded-b bg-[#0086ff]"
 							id={`${notification.type}_notification_${message.split(/s /).join("_")}_progress_bar`}

src/features/featureMenu/index.ts

@@ -54,7 +54,10 @@ async function createFeatureMenuButton() {
 	// Get references to various elements and check their existence
 	const settingsButton = document.querySelector<HTMLButtonElement>("button.ytp-settings-button");
 	if (!settingsButton) return;
-	const playerContainer = isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : isShortsPage() ? null : null;
+	const playerContainer =
+		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
+		: isShortsPage() ? null
+		: null;
 	if (!playerContainer) return;
 	// Insert the feature menu button and feature menu itself
 	settingsButton.insertAdjacentElement("beforebegin", featureMenuButton);
@@ -106,7 +109,10 @@ function adjustAdsContainerStyles(featureMenuOpen: boolean) {
 export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuOpenType) {
 	const settingsButton = document.querySelector<HTMLButtonElement>("button.ytp-settings-button");
 	if (!settingsButton) return;
-	const playerContainer = isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : isShortsPage() ? null : null;
+	const playerContainer =
+		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
+		: isShortsPage() ? null
+		: null;
 	if (!playerContainer) return;
 	const bottomControls = document.querySelector<HTMLDivElement>("div.ytp-chrome-bottom");
 	if (!bottomControls) return;

src/features/playerQuality/index.ts

@@ -25,11 +25,10 @@ export default async function setPlayerQuality(): Promise<void> {
 	if (!player_quality) return;
 
 	// Get the player element
-	const playerContainer = isWatchPage()
-		? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-		: isShortsPage()
-		  ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
-		  : null;
+	const playerContainer =
+		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
+		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
+		: null;
 
 	// If player element is not available, return
 	if (!playerContainer) return;

src/features/playerSpeed/index.ts

@@ -38,11 +38,10 @@ export async function setPlayerSpeed(input?: number): Promise<void> {
 	// If forced playback speed option is disabled, return
 	if (!enablePlayerSpeed) return;
 	// Get the player element
-	const playerContainer = isWatchPage()
-		? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-		: isShortsPage()
-		  ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
-		  : null;
+	const playerContainer =
+		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
+		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
+		: null;
 	// If player element is not available, return
 	if (!playerContainer) return;
 	const video = document.querySelector<HTMLVideoElement>("video.html5-main-video");
@@ -67,11 +66,10 @@ export function restorePlayerSpeed() {
 	// If the player speed is not available, return
 	if (!playerSpeed) return;
 	// Get the player element
-	const playerContainer = isWatchPage()
-		? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-		: isShortsPage()
-		  ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
-		  : null;
+	const playerContainer =
+		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
+		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
+		: null;
 	const video = document.querySelector<HTMLVideoElement>("video.html5-main-video");
 	// If player element is not available, return
 	if (!playerContainer) return;