Merge pull request #118 from VampireChicken12/dev

Dev
YouTube-Enhancer · Nov 26, 2023 · cc630ad · cc630ad
2 parents a312ef9 + 38a8565
commit cc630ad
Show file tree

Hide file tree

Showing 46 changed files with 1,054 additions and 864 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,21 +7,24 @@
 	"extends": [
 		"eslint:recommended",
 		"plugin:react/recommended",
-		"plugin:@typescript-eslint/recommended",
+		"plugin:@typescript-eslint/recommended-type-checked",
 		"plugin:import/recommended",
 		"plugin:import/typescript",
 		"plugin:tailwindcss/recommended",
 		"plugin:prettier/recommended",
 		"plugin:promise/recommended",
 		"plugin:perfectionist/recommended-natural"
 	],
+	"root": true,
 	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
 		"ecmaFeatures": {
 			"jsx": true
 		},
 		"ecmaVersion": "latest",
-		"sourceType": "module"
+		"sourceType": "module",
+		"project": "./tsconfig.json",
+		"tsconfigRootDir": "."
 	},
 	"plugins": ["react", "@typescript-eslint", "no-secrets"],
 	"rules": {
@@ -67,16 +70,27 @@
 			}
 		],
 		"import/no-unresolved": "off",
-		"tailwindcss/no-custom-classname": "off"
+		"tailwindcss/no-custom-classname": "off",
+		"tailwindcss/classnames-order": "error",
+		"@typescript-eslint/no-floating-promises": "error"
 	},
 	"globals": {
 		"chrome": "readonly"
 	},
-	"ignorePatterns": ["watch.js", "dist/**"],
+	"ignorePatterns": ["watch.js", "dist/**", "releases/**"],
 	"overrides": [
 		{
 			"files": ["*.ts", "*.tsx", "*.js"],
 			"parser": "@typescript-eslint/parser"
 		}
-	]
+	],
+	"settings": {
+		"tailwindcss": {
+			"callees": ["cn"],
+			"config": "./tailwind.config.ts"
+		},
+		"react": {
+			"version": "detect"
+		}
+	}
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,16 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "eslint",
+			"problemMatcher": ["$eslint-stylish"],
+			"label": "eslint: lint whole folder",
+			"options": {
+				"shell": {
+					"executable": "cmd.exe",
+					"args": ["/d", "/c"]
+				}
+			}
+		}
+	]
+}
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -28,9 +28,6 @@
 				"success": {
 					"saved": "Options saved."
 				},
-				"error": {
-					"playerQuality": "You must select a player quality if you want to enable the automatic quality feature."
-				},
 				"info": {
 					"reset": "All options have been reset to their default values.\nYou can now save the changes by clicking the \"Confirm\" button or discard them by closing this page or ignore this notification."
 				}

diff --git a/public/locales/en-US.json.d.ts b/public/locales/en-US.json.d.ts
@@ -17,9 +17,6 @@ interface EnUS {
 		};
 		options: {
 			notifications: {
-				error: {
-					playerQuality: "You must select a player quality if you want to enable the automatic quality feature.";
-				};
 				info: {
 					reset: 'All options have been reset to their default values.\nYou can now save the changes by clicking the "Confirm" button or discard them by closing this page or ignore this notification.';
 				};

diff --git a/src/components/Inputs/Number/Arrow.tsx b/src/components/Inputs/Number/Arrow.tsx
@@ -4,7 +4,7 @@ type RotationDirection = "down" | "left" | "right" | "up";
 export default function Arrow({ rotation }: { rotation: RotationDirection }) {
 	return (
 		<svg
-			className={cn("h-4 w-4 transition-transform duration-300 transform", {
+			className={cn("h-4 w-4 transition-transform duration-300", {
 				"rotate-0": rotation === "down",
 				"rotate-90": rotation === "left",
 				"rotate-180": rotation === "up",

diff --git a/src/components/Inputs/Number/Number.tsx b/src/components/Inputs/Number/Number.tsx
@@ -52,18 +52,19 @@ const NumberInput: React.FC<NumberInputProps> = ({ className, disabled, id, labe
 		"text-[#4b5563]": disabled
 	} satisfies ClassValue;
 	return (
-		<div className={cn("relative flex gap-4 items-baseline justify-between flex-row", className)} ref={inputDiv}>
+		<div className={cn("relative flex flex-row items-baseline justify-between gap-4", className)} ref={inputDiv}>
 			<label className="mb-1" htmlFor={id}>
 				{label}
 			</label>
 			<div className="relative flex flex-row">
 				<input
 					aria-hidden={true}
 					className={cn(
-						"number border border-gray-300 bg-white text-black px-2 py-2 rounded-md flex items-center justify-between w-40 h-10 focus:outline-none dark:bg-[#23272a] dark:text-white dark:border-gray-700",
+						"number flex h-10 w-40 items-center justify-between rounded-md border border-gray-300 bg-white p-2 text-black focus:outline-none dark:border-gray-700 dark:bg-[#23272a] dark:text-white",
 						{ "dark:text-[#4b5563]": disabled, "text-[#4b5563]": disabled }
 					)}
 					disabled={disabled}
+					id={id}
 					max={max}
 					min={min}
 					onChange={(e) => handleChange(e.currentTarget.value)}
@@ -83,7 +84,7 @@ const NumberInput: React.FC<NumberInputProps> = ({ className, disabled, id, labe
 						aria-hidden={true}
 						aria-label="Add one"
 						className={cn(
-							"flex text-black dark:text-white round-r dark:bg-[#23272a] dark:hover:bg-[rgba(24,26,27,0.5)] w-full h-1/2 p-1 justify-center cursor-default",
+							"round-r flex h-1/2 w-full cursor-default justify-center p-1 text-black dark:bg-[#23272a] dark:text-white dark:hover:bg-[rgba(24,26,27,0.5)]",
 							disabledButtonClasses
 						)}
 						disabled={disabled}
@@ -100,7 +101,7 @@ const NumberInput: React.FC<NumberInputProps> = ({ className, disabled, id, labe
 						aria-hidden={true}
 						aria-label="Subtract one"
 						className={cn(
-							"flex text-black dark:text-white round-r dark:bg-[#23272a] dark:hover:bg-[rgba(24,26,27,0.5)] w-full h-1/2 p-1 justify-center cursor-default",
+							"round-r flex h-1/2 w-full cursor-default justify-center p-1 text-black dark:bg-[#23272a] dark:text-white dark:hover:bg-[rgba(24,26,27,0.5)]",
 							disabledButtonClasses
 						)}
 						disabled={disabled}

diff --git a/src/components/Inputs/Select/Select.tsx b/src/components/Inputs/Select/Select.tsx
@@ -51,12 +51,17 @@ const Select: React.FC<SelectProps> = ({ className, disabled, id, label, onChang
 
 	const disabledButtonClasses = { "dark:text-[#4b5563]": disabled, "text-[#4b5563]": disabled } satisfies ClassValue;
 	return (
-		<div className={cn("relative flex gap-4 flex-row items-baseline justify-between", className)} id={id} ref={selectRef}>
+		<div
+			aria-valuetext={selectedOption}
+			className={cn("relative flex flex-row items-baseline justify-between gap-4", className)}
+			id={id}
+			ref={selectRef}
+		>
 			<label htmlFor={id}>{label}</label>
 			<div className="relative inline-block">
 				<button
 					className={cn(
-						"border border-gray-300 bg-white text-black px-2 py-2 rounded-md flex items-center justify-between w-40 h-10 focus:outline-none dark:bg-[#23272a] dark:text-white dark:border-gray-700",
+						"flex h-10 w-40 items-center justify-between rounded-md border border-gray-300 bg-white p-2 text-black focus:outline-none dark:border-gray-700 dark:bg-[#23272a] dark:text-white",
 						disabledButtonClasses
 					)}
 					disabled={disabled}
@@ -88,8 +93,9 @@ const Select: React.FC<SelectProps> = ({ className, disabled, id, label, onChang
 					<div className="absolute z-10 mt-2 w-40 rounded-md border border-gray-300 bg-white shadow-lg dark:border-gray-700 dark:bg-[#23272a]">
 						{options.map((option, index) => (
 							<div
+								aria-valuetext={option.value}
 								className={cn(
-									"px-2 py-2 hover:bg-gray-100 dark:hover:bg-[rgba(24,26,27,0.5)] cursor-pointer flex items-center justify-between w-40 focus:outline-none",
+									"flex w-40 cursor-pointer items-center justify-between p-2 hover:bg-gray-100 focus:outline-none dark:hover:bg-[rgba(24,26,27,0.5)]",
 									{
 										"bg-gray-100 dark:bg-[#2c2f33]": selectedOption === option.value,
 										"rounded-b-md": index === options.length - 1,