feat: support subtitle translate

src/config/i18n.js

@@ -1538,4 +1538,34 @@ export const I18N = {
     en: `Detect result`,
     zh_TW: `檢測結果`,
   },
+  subtitle_translate: {
+    zh: `字幕翻译`,
+    en: `Subtitle translate`,
+    zh_TW: `字幕翻譯`,
+  },
+  toggle_subtitle_translate: {
+    zh: `启用字幕翻译`,
+    en: `Enable subtitle translation`,
+    zh_TW: `啟用字幕翻譯`,
+  },
+  is_bilingual_view: {
+    zh: `启用双语显示`,
+    en: `DEnable bilingual display`,
+    zh_TW: `啟用雙語顯示`,
+  },
+  background_styles: {
+    zh: `背景样式`,
+    en: `DBackground Style`,
+    zh_TW: `背景樣式`,
+  },
+  origin_styles: {
+    zh: `原文样式`,
+    en: `Original style`,
+    zh_TW: `原文樣式`,
+  },
+  translation_styles: {
+    zh: `译文样式`,
+    en: `Translation style`,
+    zh_TW: `譯文樣式`,
+  },
 };

src/config/msg.js

@@ -24,3 +24,7 @@ export const MSG_INJECT_CSS = "inject_css";
 export const MSG_UPDATE_CSP = "update_csp";
 export const MSG_BUILTINAI_DETECT = "builtinai_detect";
 export const MSG_BUILTINAI_TRANSLATE = "builtinai_translte";
+
+export const MSG_XHR_DATA_YOUTUBE = "KISS_XHR_DATA_YOUTUBE";
+export const MSG_GLOBAL_VAR_FETCH = "KISS_GLOBAL_VAR_FETCH";
+export const MSG_GLOBAL_VAR_BACK = "KISS_GLOBAL_VAR_BACK";

src/config/rules.js

@@ -190,6 +190,7 @@ const RULES_MAP = {
   },
   "www.youtube.com": {
     rootsSelector: `ytd-page-manager`,
+    ignoreSelector: `aside, button, footer, form, header, pre, mark, nav, #ytp-caption-window-container`,
     transEndHook: `({ parentNode }) => {parentNode.parentElement.style.cssText += "-webkit-line-clamp: unset; max-height: none; height: auto;";}`,
     textStyle: OPT_STYLE_DASHBOX,
   },

src/config/setting.js

@@ -95,6 +95,45 @@ export const DEFAULT_TRANBOX_SETTING = {
   enSug: OPT_SUG_YOUDAO, // 英文建议
 };
 
+const SUBTITLE_WINDOW_STYLE = `container-type: inline-size;
+position: absolute;
+bottom: 10%;
+left: 50%;
+transform: translateX(-50%);
+width: 80%;
+padding: 10px;
+background-color: rgba(0, 0, 0, 0.7);
+color: white;
+text-align: center;
+line-height: 1.2;
+text-shadow: 1px 1px 2px black;
+pointer-events: none;
+z-index: 2147483647;
+opacity: 0;
+cursor: grab;
+transition: opacity 0.2s ease-in-out;`;
+
+const SUBTITLE_ORIGIN_STYLE = `margin:0;
+padding: 0;
+opacity: 0.8;
+font-size: clamp(2rem, 4cqw, 4rem);`;
+
+const SUBTITLE_TRANSLATION_STYLE = `margin:0;
+padding: 0;
+opacity: 1;
+font-size: clamp(2rem, 4.5cqw, 4rem);`;
+
+export const DEFAULT_SUBTITLE_SETTING = {
+  enabled: true, // 是否开启
+  apiSlug: OPT_TRANS_MICROSOFT,
+  // fromLang: "en",
+  toLang: "zh-CN",
+  isBilingual: true, // 是否双语显示
+  windowStyle: SUBTITLE_WINDOW_STYLE, // 背景样式
+  originStyle: SUBTITLE_ORIGIN_STYLE, // 原文样式
+  translationStyle: SUBTITLE_TRANSLATION_STYLE, // 译文样式
+};
+
 // 订阅列表
 export const DEFAULT_SUBRULES_LIST = [
   {
@@ -154,4 +193,5 @@ export const DEFAULT_SETTING = {
   mouseHoverSetting: DEFAULT_MOUSE_HOVER_SETTING, // 鼠标悬停翻译
   preInit: true, // 是否预加载脚本
   transAllnow: false, // 是否立即全部翻译
+  subtitleSetting: DEFAULT_SUBTITLE_SETTING, // 字幕设置
 };