Dev

.nvmrc

@@ -1 +1 @@
-16.13.0
+18.18.0

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-	"typescript.tsdk": "node_modules\\typescript\\lib"
+	"typescript.tsdk": "node_modules\\typescript\\lib",
+	"i18n-ally.localesPaths": ["src/locales"]
 }

nodemon.json

@@ -2,8 +2,8 @@
 	"env": {
 		"__DEV__": "true"
 	},
-	"watch": ["src", "utils", "vite.config.ts", "public"],
-	"ext": "ts,tsx,css,html",
-	"ignore": ["src/**/*.spec.ts"],
-	"exec": "vite build"
+	"watch": ["src", "utils", "vite.config.ts", "public", "public/locales"],
+	"ext": "ts,tsx,css,html,json",
+	"ignore": ["src/**/*.spec.ts", "public/locales/en-US.json.d.ts"],
+	"exec": "concurrently \"vite build\" -- \"ts-json-as-const public/locales/en-US.json\""
 }

package.json

@@ -19,50 +19,53 @@
   },
   "type": "module",
   "dependencies": {
-    "@formkit/auto-animate": "^0.7.0",
+    "@formkit/auto-animate": "^0.8.1",
+    "i18next": "^23.7.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite-plugin-css-injected-by-js": "^3.1.1",
+    "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.4.2",
-    "@types/archiver": "^5.3.2",
-    "@types/chrome": "^0.0.237",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@types/webextension-polyfill": "^0.10.0",
-    "@types/youtube-player": "^5.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "@vitejs/plugin-react-swc": "^3.0.1",
-    "archiver": "^6.0.0",
-    "autoprefixer": "^10.4.13",
+    "@total-typescript/ts-reset": "^0.5.1",
+    "@types/archiver": "^6.0.1",
+    "@types/chrome": "^0.0.251",
+    "@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",
-    "eslint": "^8.32.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "fs-extra": "^11.1.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-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "fs-extra": "^11.1.1",
     "get-installed-browsers": "^0.1.7",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.1",
     "postcss": "^8.4.31",
-    "prettier": "^2.8.8",
-    "semantic-release": "^21.1.1",
+    "prettier": "^3.0.3",
+    "semantic-release": "^22.0.7",
     "tailwind-merge": "^2.0.0",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.5",
+    "ts-json-as-const": "^1.0.7",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "vite": "^4.0.4",
-    "zod": "^3.22.3",
+    "vite": "^4.5.0",
+    "zod": "^3.22.4",
     "zod-error": "^1.5.0"
   }
-}
+}

public/locales/de-DE.json

@@ -0,0 +1,218 @@
+{
+	"langCode": "de-DE",
+	"langName": "Deutsche",
+	"pages": {
+		"content": {
+			"features": {
+				"videoHistory": {
+					"resumePrompt": { "close": "Close" },
+					"resumeButton": "Resume"
+				},
+				"screenshotButton": {
+					"copiedToClipboard": "Screenshot copied to clipboard",
+					"label": "Screenshot"
+				},
+				"loopButton": {
+					"label": "Loop"
+				},
+				"maximizePlayerButton": {
+					"label": "Maximize"
+				},
+				"featureMenu": {
+					"label": "Feature menu"
+				}
+			}
+		},
+		"options": {
+			"notifications": {
+				"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."
+				}
+			}
+		}
+	},
+	"settings": {
+		"sections": {
+			"importExportSettings": {
+				"title": "Import/Export Settings",
+				"importButton": {
+					"error": {
+						"validation": "Error importing settings. Please check the file format.\n{{ERROR_MESSAGE}}",
+						"unknown": "Error importing settings. Please check the file format.\nAn unknown error occurred."
+					},
+					"success": "Settings imported successfully",
+					"title": "Import settings from a JSON file",
+					"value": "Import Settings"
+				},
+				"exportButton": {
+					"success": "Settings successfully exported",
+					"title": "Export settings to a JSON file",
+					"value": "Export Settings"
+				}
+			},
+			"miscellaneous": {
+				"title": "Miscellaneous settings",
+				"features": {
+					"rememberLastVolume": {
+						"title": "Remembers the volume you were watching at and sets it as the volume when you open a new video",
+						"label": "Remember last volume"
+					},
+					"maximizePlayerButton": {
+						"title": "Fills the video to the window size",
+						"label": "Enable maximize player button"
+					},
+					"videoHistory": {
+						"title": "Keeps track of where you left off on videos you were watching and asks if you want to resume when that video loads again",
+						"label": "Enable video history"
+					},
+					"remainingTime": {
+						"title": "Shows the remaining time of the video you're watching",
+						"label": "Enable remaining time"
+					},
+					"loopButton": {
+						"title": "Adds a button to the player to loop the video you're watching",
+						"label": "Enable loop button"
+					},
+					"hideScrollbar": {
+						"title": "Hides the pages scrollbar",
+						"label": "Enable hide scrollbar"
+					}
+				}
+			},
+			"scrollWheelVolumeControl": {
+				"title": "Scroll wheel volume control settings",
+				"enable": {
+					"title": "Lets you use the scroll wheel to control the volume of the video you're watching",
+					"label": "Enable scroll wheel volume control"
+				},
+				"osdColor": { "title": "The color of the On Screen Display", "label": "OSD color" },
+				"osdType": { "title": "The type of On Screen Display", "label": "OSD type" },
+				"osdPosition": { "title": "The position of the On Screen Display", "label": "OSD position" },
+				"osdOpacity": {
+					"title": "The opacity of the On Screen Display",
+					"label": "OSD opacity"
+				},
+				"osdVolumeAdjustmentSteps": { "title": "The amount to adjust volume per scroll", "label": "Amount to adjust" },
+				"osdHide": { "title": "The amount of milliseconds to wait before hiding the OSD", "label": "Time to hide" },
+				"osdPadding": { "title": "The amount of padding to add to the OSD (in pixels, only applies to corner OSD)", "label": "Padding" },
+				"onScreenDisplay": {
+					"colors": {
+						"red": "Red",
+						"green": "Green",
+						"blue": "Blue",
+						"yellow": "Yellow",
+						"orange": "Orange",
+						"purple": "Purple",
+						"pink": "Pink",
+						"white": "White"
+					},
+					"position": {
+						"top_left": "Top Left",
+						"top_right": "Top Right",
+						"bottom_left": "Bottom Left",
+						"bottom_right": "Bottom Right",
+						"center": "Center"
+					},
+					"type": {
+						"no_display": "No display",
+						"text": "Text",
+						"line": "Line",
+						"round": "Round"
+					}
+				}
+			},
+			"automaticQuality": {
+				"title": "Automatic quality settings",
+				"enable": {
+					"title": "Automatically adjusts the video quality to the selected level.",
+					"label": "Enable automatic quality adjustment"
+				},
+				"select": {
+					"label": "Player quality",
+					"title": "The quality to set the video to"
+				}
+			},
+			"playbackSpeed": {
+				"title": "Playback speed settings",
+				"enable": {
+					"title": "Sets the video speed to what you choose below",
+					"label": "Enable forced playback speed"
+				},
+				"select": {
+					"label": "Player speed",
+					"title": "The speed to set the video to"
+				}
+			},
+			"volumeBoost": {
+				"title": "Volume boost settings",
+				"enable": {
+					"title": "Boosts the volume of the video you're watching",
+					"label": "Enable volume boost"
+				},
+				"number": {
+					"label": "Volume boost amount (dB)",
+					"title": "The amount to boost the volume by"
+				}
+			},
+			"screenshotButton": {
+				"title": "Screenshot settings",
+				"enable": {
+					"title": "Adds a button to the player to take a screenshot of the video",
+					"label": "Enable screenshot button"
+				},
+				"selectSaveAs": {
+					"label": "Screenshot save type",
+					"title": "The screenshot save type"
+				},
+				"selectFormat": {
+					"label": "Screenshot format",
+					"title": "The format to save the screenshot in"
+				},
+				"format": {
+					"png": "PNG",
+					"jpeg": "JPEG",
+					"webp": "WebP"
+				},
+				"saveAs": {
+					"file": "File",
+					"clipboard": "Clipboard"
+				}
+			},
+			"bottomButtons": {
+				"confirm": {
+					"title": "Confirm setting reset",
+					"value": "Confirm"
+				},
+				"clear": {
+					"title": "Clears all data this extension has stored on your machine",
+					"value": "Clear Data"
+				},
+				"reset": {
+					"title": "Resets all settings to their defaults, Click the confirm button to save the changes",
+					"value": "Reset"
+				}
+			},
+			"language": {
+				"title": "Language",
+				"select": {
+					"label": "Language",
+					"title": "The language to use for the extension"
+				}
+			}
+		},
+		"clearData": {
+			"confirmAlert": "This will delete all extension data related to options. Continue?",
+			"allDataDeleted": "All data has been deleted."
+		}
+	},
+	"messages": {
+		"settingVolume": "Setting volume boost to {{VOLUME_BOOST_AMOUNT}}",
+		"resumingVideo": "Resuming video at {{VIDEO_TIME}}"
+	}
+}