add center text positioning

package.json

@@ -11,9 +11,9 @@
 	"private": true,
 	"devDependencies": {
 		"@parcel/config-webextension": "^2.8.3",
-		"@types/chrome": "^0.0.258",
-		"@typescript-eslint/eslint-plugin": "^6.12.0",
-		"@typescript-eslint/parser": "^6.12.0",
+		"@types/chrome": "^0.0.260",
+		"@typescript-eslint/eslint-plugin": "^7.0.1",
+		"@typescript-eslint/parser": "^7.0.1",
 		"cpy-cli": "^5.0.0",
 		"eslint": "^8.41.0",
 		"eslint-config-prettier": "^9.0.0",

src/_locales/en/messages.json

@@ -6,7 +6,7 @@
 		"message": "Advanced"
 	},
 	"headerInfo": {
-		"message": "You can also access this menu by using the \"advanced\" button in YouTube's subtitle options menu in the player, unless it is overriden by other addons. Hover over option labels to learn more. Preview below is approximate."
+		"message": "You can also access this menu by clicking the \"advanced\" button in YouTube's subtitle options menu in the player, unless it is overriden by other addons. Hover over option labels to learn more. The preview below is an approximation."
 	},
 	"previewText": {
 		"message": "The subtitles will look more or less like this."
@@ -98,6 +98,9 @@
 	"effectTextPositionTop": {
 		"message": "Top"
 	},
+	"effectTextPositionCenter": {
+		"message": "Center"
+	},
 	"effectTextPositionBottom": {
 		"message": "Bottom"
 	},

src/_locales/pl/messages.json

@@ -98,6 +98,9 @@
 	"effectTextPositionTop": {
 		"message": "Góra"
 	},
+	"effectTextPositionCenter": {
+		"message": "Środek"
+	},
 	"effectTextPositionBottom": {
 		"message": "Dół"
 	},

src/components/calculateStyles.ts

@@ -69,6 +69,10 @@ const calculateStyles = async () => {
 		captionWindowStyles.push(
 			`top: 2% !important; bottom: unset !important; height: min-content !important;`
 		);
+	else if (options.effectTextPosition === "center")
+		captionWindowStyles.push(
+			`top: 50% !important; bottom: unset !important; height: min-content !important;`
+		);
 	else if (options.effectTextPosition === "bottom")
 		captionWindowStyles.push(
 			`bottom: 2% !important; top: unset !important; height: min-content !important;`

src/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
 	"name": "Better YouTube Subtitles",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"description": "__MSG_extText__",
 	"manifest_version": 3,
 	"default_locale": "en",

src/manifest-firefox.json

@@ -1,6 +1,6 @@
 {
 	"name": "Better YouTube Subtitles",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"description": "__MSG_extText__",
 	"manifest_version": 2,
 	"default_locale": "en",

src/options.html

@@ -181,6 +181,7 @@ <h3>Better YouTube Subtitles <span id="version" /></h3>
 						<select class="option" id="effectTextPosition">
 							<option id="effectTextPositionDefault" value="default" />
 							<option id="effectTextPositionTop" value="top" />
+							<option id="effectTextPositionCenter" value="center" />
 							<option id="effectTextPositionBottom" value="bottom" />
 						</select>
 					</td>