feat: support subtitle translate

src/views/Options/Navigator.js

@@ -15,6 +15,7 @@ import InputIcon from "@mui/icons-material/Input";
 import SelectAllIcon from "@mui/icons-material/SelectAll";
 import EventNoteIcon from "@mui/icons-material/EventNote";
 import MouseIcon from "@mui/icons-material/Mouse";
+import SubtitlesIcon from "@mui/icons-material/Subtitles";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -59,6 +60,12 @@ export default function Navigator(props) {
       url: "/mousehover",
       icon: <MouseIcon />,
     },
+    {
+      id: "subtitle_translate",
+      label: i18n("subtitle_translate"),
+      url: "/subtitle",
+      icon: <SubtitlesIcon />,
+    },
     {
       id: "apis_setting",
       label: i18n("apis_setting"),

src/views/Options/Subtitle.js

@@ -0,0 +1,140 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import Grid from "@mui/material/Grid";
+import { useI18n } from "../../hooks/I18n";
+import { OPT_LANGS_TO } from "../../config";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import { useSubtitle } from "../../hooks/Subtitle";
+import { useApiList } from "../../hooks/Api";
+
+export default function SubtitleSetting() {
+  const i18n = useI18n();
+  const { subtitleSetting, updateSubtitle } = useSubtitle();
+  const { enabledApis } = useApiList();
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    let { name, value } = e.target;
+    updateSubtitle({
+      [name]: value,
+    });
+  };
+
+  const {
+    enabled,
+    apiSlug,
+    toLang,
+    isBilingual,
+    windowStyle,
+    originStyle,
+    translationStyle,
+  } = subtitleSetting;
+
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <FormControlLabel
+          control={
+            <Switch
+              size="small"
+              name="enabled"
+              checked={enabled}
+              onChange={() => {
+                updateSubtitle({ enabled: !enabled });
+              }}
+            />
+          }
+          label={i18n("toggle_subtitle_translate")}
+        />
+
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                select
+                fullWidth
+                size="small"
+                name="apiSlug"
+                value={apiSlug}
+                label={i18n("translate_service")}
+                onChange={handleChange}
+              >
+                {enabledApis.map((api) => (
+                  <MenuItem key={api.apiSlug} value={api.apiSlug}>
+                    {api.apiName}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="toLang"
+                value={toLang}
+                label={i18n("to_lang")}
+                onChange={handleChange}
+              >
+                {OPT_LANGS_TO.map(([lang, name]) => (
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="isBilingual"
+                value={isBilingual}
+                label={i18n("is_bilingual_view")}
+                onChange={handleChange}
+              >
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+              </TextField>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <TextField
+          size="small"
+          label={i18n("background_styles")}
+          name="windowStyle"
+          value={windowStyle}
+          onChange={handleChange}
+          maxRows={10}
+          multiline
+          fullWidth
+        />
+        <TextField
+          size="small"
+          label={i18n("origin_styles")}
+          name="originStyle"
+          value={originStyle}
+          onChange={handleChange}
+          maxRows={10}
+          multiline
+          fullWidth
+        />
+        <TextField
+          size="small"
+          label={i18n("translation_styles")}
+          name="translationStyle"
+          value={translationStyle}
+          onChange={handleChange}
+          maxRows={10}
+          multiline
+          fullWidth
+        />
+      </Stack>
+    </Box>
+  );
+}

src/views/Options/index.js

@@ -23,6 +23,7 @@ import Tranbox from "./Tranbox";
 import FavWords from "./FavWords";
 import Playgound from "./Playground";
 import MouseHoverSetting from "./MouseHover";
+import SubtitleSetting from "./Subtitle";
 import Loading from "../../hooks/Loading";
 
 export default function Options() {
@@ -109,6 +110,7 @@ export default function Options() {
                   <Route path="input" element={<InputSetting />} />
                   <Route path="tranbox" element={<Tranbox />} />
                   <Route path="mousehover" element={<MouseHoverSetting />} />
+                  <Route path="subtitle" element={<SubtitleSetting />} />
                   <Route path="apis" element={<Apis />} />
                   <Route path="sync" element={<SyncSetting />} />
                   <Route path="words" element={<FavWords />} />