feat: support subtitle translate

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>
+  );
+}