Merge pull request #451 from YouTube-Enhancer/dev

v1.24.2 release
YouTube-Enhancer · Apr 25, 2024 · 6203e09 · 6203e09
2 parents 6041a17 + 5cb5b78
commit 6203e09
Show file tree

Hide file tree

Showing 18 changed files with 197 additions and 156 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,43 +1,37 @@
 name: Release
-
-on:
+"on":
   push:
     branches:
       - main
-
 jobs:
   build-and-release:
     runs-on: ubuntu-latest
     permissions: write-all
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
-
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
           node-version: 20
-
       - name: Install dependencies
         run: npm ci
-
       - name: Run Semantic Release
         run: |
           touch .env
           echo CROWDIN_TOKEN=$CROWDIN_TOKEN >> .env
           npx semantic-release
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CROWDIN_TOKEN: ${{ secrets.CROWDIN_TOKEN }}
-
+          GH_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          CROWDIN_TOKEN: "${{ secrets.CROWDIN_TOKEN }}"
       - name: Push changes to main branch
         run: |
           # Ensure we are on the main branch
           git checkout main
-
+          git add ./src/i18n/index.ts
+          git commit -m "Update i18n"
           # Push local changes to the main branch
           git push origin main
-
       - name: Merge changes from main into dev
         run: |
           # Switch to the dev branch

diff --git a/bun.lockb b/bun.lockb
diff --git a/public/locales/it-IT.json b/public/locales/it-IT.json
@@ -258,8 +258,8 @@
 						"title": "Scorri automaticamente al prossimo blocco"
 					},
 					"skipContinueWatching": {
-						"label": "Skip \"Video is paused. Continue watching?\"",
-						"title": "Skips the idle dialog that pauses video playback"
+						"label": "Salta \"Video in pausa. Continuare a guardare?\"",
+						"title": "Salta la finestra che mette in pausa la riproduzione video"
 					}
 				},
 				"title": "Impostazioni varie"

diff --git a/public/locales/ja-JP.json b/public/locales/ja-JP.json
@@ -258,8 +258,8 @@
 						"title": "次のショートを自動にスクロールする"
 					},
 					"skipContinueWatching": {
-						"label": "Skip \"Video is paused. Continue watching?\"",
-						"title": "Skips the idle dialog that pauses video playback"
+						"label": "「動画が一時停止されました。続きを視聴しますか？」を抜かする",
+						"title": "動画一時休止する休眠メッセージを抜かされます"
 					}
 				},
 				"title": "他の設定"
@@ -306,7 +306,7 @@
 				"type": {
 					"label": "OSD型",
 					"options": {
-						"circle": "Circle",
+						"circle": "円形",
 						"line": "ライン",
 						"no_display": "見せない",
 						"text": "テキスト"

diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json
@@ -39,10 +39,10 @@
 				"playbackSpeedButtons": {
 					"buttons": {
 						"decreasePlaybackSpeedButton": {
-							"label": "降低 {{SPEED}} 播放速度"
+							"label": "降低播放速度至 {{SPEED}}"
 						},
 						"increasePlaybackSpeedButton": {
-							"label": "增加 {{SPEED}} 播放速度"
+							"label": "增加播放速度至 {{SPEED}}"
 						}
 					}
 				},

diff --git a/public/locales/zh-TW.json b/public/locales/zh-TW.json
@@ -15,10 +15,10 @@
 				},
 				"loopButton": {
 					"button": {
-						"label": "Loop",
+						"label": "循環播放",
 						"toggle": {
-							"off": "Loop off",
-							"on": "Loop on"
+							"off": "關閉循環播放",
+							"on": "開啟循環播放"
 						}
 					}
 				},
@@ -48,7 +48,7 @@
 				},
 				"screenshotButton": {
 					"button": {
-						"label": "Screenshot"
+						"label": "螢幕截圖"
 					},
 					"copiedToClipboard": "螢幕截圖已複製剪貼簿"
 				},

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -12,6 +12,7 @@ import { deepDarkPreset } from "@/src/deepDarkPresets";
 import { availableLocales, type i18nInstanceType, i18nService, localeDirection, localePercentages } from "@/src/i18n";
 import { buttonNames, youtubePlaybackSpeedButtonsRates, youtubePlayerSpeedRates } from "@/src/types";
 import { configurationImportSchema, defaultConfiguration as defaultSettings } from "@/src/utils/constants";
+import { updateStoredSettings } from "@/src/utils/updateStoredSettings";
 import { cn, deepMerge, formatDateForFileName, getPathValue, parseStoredValue } from "@/src/utils/utilities";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Suspense, createContext, useContext, useEffect, useRef, useState } from "react";
@@ -423,8 +424,10 @@ export default function Settings() {
 								void chrome.storage.local.set({ [key]: castSettings[key] as string });
 							}
 						}
+						await updateStoredSettings();
+						const storedSettings = await getSettings();
 						// Set the imported settings in your state.
-						settingsMutate.mutate(castSettings);
+						settingsMutate.mutate(storedSettings);
 						// Show a success notification.
 						addNotification("success", "settings.sections.importExportSettings.importButton.success");
 					}
@@ -957,7 +960,7 @@ export default function Settings() {
 						type="select"
 					/>
 					<Setting
-						disabled={settings.enable_screenshot_button?.toString() !== "true"}
+						disabled={settings.enable_screenshot_button?.toString() !== "true" || settings.screenshot_save_as?.toString() === "clipboard"}
 						id="screenshot_format"
 						label={t("settings.sections.screenshotButton.selectFormat.label")}
 						onChange={setValueOption("screenshot_format")}
@@ -967,27 +970,6 @@ export default function Settings() {
 						type="select"
 					/>
 				</SettingSection>
-				<SettingSection>
-					<SettingTitle title={t("settings.sections.customCSS.title")} />
-					<Setting
-						checked={settings.enable_custom_css?.toString() === "true"}
-						id="enable_custom_css"
-						label={t("settings.sections.customCSS.enable.label")}
-						onChange={setCheckboxOption("enable_custom_css")}
-						title={t("settings.sections.customCSS.enable.title")}
-						type="checkbox"
-					/>
-					<Setting
-						id="custom_css_code"
-						onChange={(value) => {
-							if (value !== undefined) {
-								setValueOption("custom_css_code")({ currentTarget: { value } } as ChangeEvent<HTMLInputElement>);
-							}
-						}}
-						type="css-editor"
-						value={settings.custom_css_code}
-					/>
-				</SettingSection>
 				<SettingSection>
 					<SettingTitle title={t("settings.sections.youtubeDeepDark.title")} />
 					<SettingSection className="flex flex-row gap-1">
@@ -1082,17 +1064,38 @@ export default function Settings() {
 						value={settings.deep_dark_custom_theme_colors.colorShadow}
 					/>
 				</SettingSection>
+				<SettingSection>
+					<SettingTitle title={t("settings.sections.customCSS.title")} />
+					<Setting
+						checked={settings.enable_custom_css?.toString() === "true"}
+						id="enable_custom_css"
+						label={t("settings.sections.customCSS.enable.label")}
+						onChange={setCheckboxOption("enable_custom_css")}
+						title={t("settings.sections.customCSS.enable.title")}
+						type="checkbox"
+					/>
+					<Setting
+						id="custom_css_code"
+						onChange={(value) => {
+							if (value !== undefined) {
+								setValueOption("custom_css_code")({ currentTarget: { value } } as ChangeEvent<HTMLInputElement>);
+							}
+						}}
+						type="css-editor"
+						value={settings.custom_css_code}
+					/>
+				</SettingSection>
 				<div className="sticky bottom-0 left-0 z-10 flex justify-between gap-1 bg-[#f5f5f5] p-2 dark:bg-[#181a1b]">
 					<input
-						className="danger p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
+						className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 						id="clear_data_button"
 						onClick={clearData}
 						title={t("settings.sections.bottomButtons.clear.title")}
 						type="button"
 						value={t("settings.sections.bottomButtons.clear.value")}
 					/>
 					<input
-						className="accent p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
+						className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 						id="import_settings_button"
 						onClick={importSettings}
 						title={t("settings.sections.importExportSettings.importButton.title")}
@@ -1101,7 +1104,7 @@ export default function Settings() {
 					/>
 					{isPopup && (
 						<button
-							className="accent flex items-center justify-center p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
+							className="accent flex items-center justify-center p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 							id="openinnewtab_button"
 							onClick={() => openInNewTab("src/pages/options/index.html")}
 							title={t("settings.sections.bottomButtons.openTab.title")}
@@ -1111,7 +1114,7 @@ export default function Settings() {
 						</button>
 					)}
 					<input
-						className="accent p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
+						className="accent p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 						id="export_settings_button"
 						onClick={exportSettings}
 						title={t("settings.sections.importExportSettings.exportButton.title")}
@@ -1120,7 +1123,7 @@ export default function Settings() {
 					/>
 					{notifications.filter((n) => n.action === "reset_settings").length > 0 ?
 						<input
-							className="danger p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
+							className="danger p-2 text-sm dark:hover:bg-[rgba(24,26,27,0.5)] sm:text-base md:text-lg"
 							id="confirm_button"
 							onClick={() => {
 								const notificationToRemove = notifications.find((n) => n.action === "reset_settings");
@@ -1143,7 +1146,7 @@ export default function Settings() {
 							value={t("settings.sections.bottomButtons.confirm.value")}
 						/>
 					:	<input
-							className="warning p-2 text-sm sm:text-base md:text-lg dark:hover:bg-[rgba(24,26,27,0.5)]"
+							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")}

diff --git a/src/features/screenshotButton/index.ts b/src/features/screenshotButton/index.ts
@@ -29,10 +29,6 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
 				options: { screenshot_format, screenshot_save_as }
 			}
 		} = optionsData;
-		const format = `image/${screenshot_format}`;
-
-		// Get the data URL of the canvas and create a blob from it
-		const dataUrl = canvas.toDataURL(format);
 		const blob = await new Promise<Nullable<Blob>>((resolve) => canvas.toBlob(resolve, "image/png"));
 		if (!blob) return;
 
@@ -50,7 +46,6 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
 				listener();
 				const clipboardImage = new ClipboardItem({ "image/png": blob });
 				void navigator.clipboard.write([clipboardImage]);
-				void navigator.clipboard.writeText(dataUrl);
 				setTimeout(() => {
 					remove();
 				}, 1200);

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -2,46 +2,46 @@ import { type Resource, createInstance } from "i18next";
 
 import { waitForSpecificMessage } from "../utils/utilities";
 export const availableLocales = [
-	"ca-ES",
-	"cs-CZ",
-	"de-DE",
-	"en-GB",
-	"en-US",
-	"es-ES",
-	"fa-IR",
-	"fr-FR",
-	"he-IL",
-	"hi-IN",
-	"it-IT",
-	"ja-JP",
-	"pl-PL",
-	"pt-BR",
-	"ru-RU",
-	"sv-SE",
-	"tr-TR",
-	"zh-CN",
-	"zh-TW"
+  "ca-ES",
+  "cs-CZ",
+  "de-DE",
+  "en-GB",
+  "en-US",
+  "es-ES",
+  "fa-IR",
+  "fr-FR",
+  "he-IL",
+  "hi-IN",
+  "it-IT",
+  "ja-JP",
+  "pl-PL",
+  "pt-BR",
+  "ru-RU",
+  "sv-SE",
+  "tr-TR",
+  "zh-CN",
+  "zh-TW"
 ] as const;
 export const localePercentages: Record<AvailableLocales, number> = {
-	"ca-ES": 0,
-	"cs-CZ": 0,
-	"de-DE": 36,
-	"en-GB": 2,
-	"en-US": 100,
-	"es-ES": 63,
-	"fa-IR": 0,
-	"fr-FR": 67,
-	"he-IL": 0,
-	"hi-IN": 0,
-	"it-IT": 98,
-	"ja-JP": 98,
-	"pl-PL": 0,
-	"pt-BR": 74,
-	"ru-RU": 100,
-	"sv-SE": 98,
-	"tr-TR": 75,
-	"zh-CN": 100,
-	"zh-TW": 94
+  "en-US": 100,
+  "ca-ES": 0,
+  "cs-CZ": 0,
+  "de-DE": 36,
+  "en-GB": 2,
+  "es-ES": 63,
+  "fa-IR": 0,
+  "fr-FR": 67,
+  "he-IL": 0,
+  "hi-IN": 0,
+  "it-IT": 100,
+  "ja-JP": 100,
+  "pl-PL": 0,
+  "pt-BR": 74,
+  "ru-RU": 100,
+  "sv-SE": 98,
+  "tr-TR": 75,
+  "zh-CN": 100,
+  "zh-TW": 95
 };
 export const localeDirection: Record<AvailableLocales, "ltr" | "rtl"> = {
 	"ca-ES": "ltr",

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -60,7 +60,7 @@ const manifestV3: Manifest.WebExtensionManifest = {
 const manifestV2: Manifest.WebExtensionManifest = {
 	author: pkg.author.name,
 	background: {
-		scripts: ["src/pages/background/index.js"]
+		page: "src/pages/background/index.html"
 	},
 	browser_action: action,
 	browser_specific_settings: {

diff --git a/src/pages/background/index.html b/src/pages/background/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>YouTube Enhancer Background</title>
+		<script src="./index.ts" type="module"></script>
+	</head>
+
+</html>