From 32a853ecc0d0d70366811e6413e0fa42d474edbe Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 22 Jul 2023 20:59:07 +0800
Subject: [PATCH] Make auto inline translation as a setting, turned off by
default
---
src/pages/settings.css | 3 ++
src/pages/settings.jsx | 95 ++++++++++++++++++++++++++----------------
src/utils/states.js | 5 +++
3 files changed, 67 insertions(+), 36 deletions(-)
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 6c4428da..1a4d8230 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -59,6 +59,9 @@
#settings-container div {
vertical-align: middle;
}
+#settings-container section > ul > li .sub-section hr {
+ margin: 8px 0;
+}
#settings-container section select {
padding: 4px;
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 42592a8f..f54aedc3 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -255,42 +255,43 @@ function Settings({ onClose }) {
: ''
}`}
>
- <label>
- Translate to{' '}
- <select
- value={targetLanguage || ''}
- disabled={!snapStates.settings.contentTranslation}
- onChange={(e) => {
- states.settings.contentTranslationTargetLanguage =
- e.target.value || null;
- }}
- >
- <option value="">
- System language ({systemTargetLanguageText})
- </option>
- <option disabled>──────────</option>
- {targetLanguages.map((lang) => (
- <option value={lang.code}>{lang.name}</option>
- ))}
- </select>
- </label>
+ <div>
+ <label>
+ Translate to{' '}
+ <select
+ value={targetLanguage || ''}
+ disabled={!snapStates.settings.contentTranslation}
+ onChange={(e) => {
+ states.settings.contentTranslationTargetLanguage =
+ e.target.value || null;
+ }}
+ >
+ <option value="">
+ System language ({systemTargetLanguageText})
+ </option>
+ <option disabled>──────────</option>
+ {targetLanguages.map((lang) => (
+ <option value={lang.code}>{lang.name}</option>
+ ))}
+ </select>
+ </label>
+ </div>
+ <hr />
<p class="checkbox-fieldset">
- <small>
- Hide "Translate" button for
- {snapStates.settings.contentTranslationHideLanguages
- .length > 0 && (
- <>
- {' '}
- (
- {
- snapStates.settings.contentTranslationHideLanguages
- .length
- }
- )
- </>
- )}
- :
- </small>
+ Hide "Translate" button for
+ {snapStates.settings.contentTranslationHideLanguages.length >
+ 0 && (
+ <>
+ {' '}
+ (
+ {
+ snapStates.settings.contentTranslationHideLanguages
+ .length
+ }
+ )
+ </>
+ )}
+ :
<div class="checkbox-fields">
{targetLanguages.map((lang) => (
<label>
@@ -318,7 +319,7 @@ function Settings({ onClose }) {
))}
</div>
</p>
- <p>
+ <p class="insignificant">
<small>
Note: This feature uses an external API to translate,
powered by{' '}
@@ -331,6 +332,28 @@ function Settings({ onClose }) {
.
</small>
</p>
+ <hr />
+ <div>
+ <label>
+ <input
+ type="checkbox"
+ checked={snapStates.settings.contentTranslationAutoInline}
+ disabled={!snapStates.settings.contentTranslation}
+ onChange={(e) => {
+ states.settings.contentTranslationAutoInline =
+ e.target.checked;
+ }}
+ />{' '}
+ Auto inline translation
+ </label>
+ <p class="insignificant">
+ <small>
+ Automatically show translation for posts in timeline. Only
+ works for <b>short</b> posts without content warning,
+ media and poll.
+ </small>
+ </p>
+ </div>
</div>
</li>
<li>
diff --git a/src/utils/states.js b/src/utils/states.js
index fb76cc41..6b8e281a 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -52,6 +52,8 @@ const states = proxy({
store.account.get('settings-contentTranslationTargetLanguage') || null,
contentTranslationHideLanguages:
store.account.get('settings-contentTranslationHideLanguages') || [],
+ contentTranslationAutoInline:
+ store.account.get('settings-contentTranslationAutoInline') ?? false,
cloakMode: store.account.get('settings-cloakMode') ?? false,
},
});
@@ -80,6 +82,9 @@ subscribe(states, (changes) => {
if (path.join('.') === 'settings.contentTranslation') {
store.account.set('settings-contentTranslation', !!value);
}
+ if (path.join('.') === 'settings.contentTranslationAutoInline') {
+ store.account.set('settings-contentTranslationAutoInline', !!value);
+ }
if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
console.log('SET', value);
store.account.set('settings-contentTranslationTargetLanguage', value);