feat: add an option to show/hide original text in translation, also closes #1492 (#1511)

apps/readest-app/src/app/reader/components/settings/ControlPanel.tsx

@@ -4,12 +4,12 @@ import { useReaderStore } from '@/store/readerStore';
 import { useDeviceControlStore } from '@/store/deviceStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useBookDataStore } from '@/store/bookDataStore';
+import { useResetViewSettings } from '../../hooks/useResetSettings';
 import { getStyles } from '@/utils/style';
+import { saveAndReload } from '@/utils/reload';
 import { getMaxInlineSize } from '@/utils/config';
 import { saveViewSettings } from '../../utils/viewSettingsHelper';
-import { RELOAD_BEFREE_SAVED_TIMEOUT_MS } from '@/services/constants';
 import { SettingsPanelPanelProp } from './SettingsDialog';
-import { useResetViewSettings } from '../../hooks/useResetSettings';
 import NumberInput from './NumberInput';
 
 const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset }) => {
@@ -108,7 +108,7 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
   useEffect(() => {
     if (viewSettings.allowScript === allowScript) return;
     saveViewSettings(envConfig, bookKey, 'allowScript', allowScript, true, false);
-    setTimeout(() => window.location.reload(), RELOAD_BEFREE_SAVED_TIMEOUT_MS);
+    saveAndReload();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allowScript]);
 

apps/readest-app/src/app/reader/components/settings/LangPanel.tsx

@@ -10,6 +10,7 @@ import { getTranslators } from '@/services/translators';
 import { TRANSLATED_LANGS } from '@/services/constants';
 import { SettingsPanelPanelProp } from './SettingsDialog';
 import { useResetViewSettings } from '../../hooks/useResetSettings';
+import { saveAndReload } from '@/utils/reload';
 import { initDayjs } from '@/utils/time';
 import Select from '@/components/Select';
 
@@ -24,6 +25,7 @@ const LangPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
   const [translationEnabled, setTranslationEnabled] = useState(viewSettings.translationEnabled!);
   const [translationProvider, setTranslationProvider] = useState(viewSettings.translationProvider!);
   const [translateTargetLang, setTranslateTargetLang] = useState(viewSettings.translateTargetLang!);
+  const [showTranslateSource, setShowTranslateSource] = useState(viewSettings.showTranslateSource!);
 
   const resetToDefaults = useResetViewSettings();
 
@@ -127,9 +129,19 @@ const LangPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
     saveViewSettings(envConfig, bookKey, 'translationEnabled', translationEnabled, true, false);
     viewSettings.translationEnabled = translationEnabled;
     setViewSettings(bookKey, { ...viewSettings });
+    if (!showTranslateSource && !translationEnabled) {
+      saveAndReload();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [translationEnabled]);
 
+  useEffect(() => {
+    if (showTranslateSource === viewSettings.showTranslateSource) return;
+    saveViewSettings(envConfig, bookKey, 'showTranslateSource', showTranslateSource, false, false);
+    saveAndReload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showTranslateSource]);
+
   return (
     <div className={clsx('my-4 w-full space-y-6')}>
       <div className='w-full'>
@@ -162,6 +174,17 @@ const LangPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
               />
             </div>
 
+            <div className='config-item'>
+              <span className=''>{_('Show Source Text')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={showTranslateSource}
+                disabled={!translationEnabled}
+                onChange={() => setShowTranslateSource(!showTranslateSource)}
+              />
+            </div>
+
             <div className='config-item'>
               <span className=''>{_('Translation Service')}</span>
               <Select

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -11,11 +11,12 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useResetViewSettings } from '../../hooks/useResetSettings';
 import { isCJKEnv } from '@/utils/misc';
 import { getStyles } from '@/utils/style';
+import { saveAndReload } from '@/utils/reload';
 import { getMaxInlineSize } from '@/utils/config';
 import { lockScreenOrientation } from '@/utils/bridge';
-import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
-import { MIGHT_BE_RTL_LANGS, RELOAD_BEFREE_SAVED_TIMEOUT_MS } from '@/services/constants';
 import { saveViewSettings } from '../../utils/viewSettingsHelper';
+import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
+import { MIGHT_BE_RTL_LANGS } from '@/services/constants';
 import { SettingsPanelPanelProp } from './SettingsDialog';
 import NumberInput from './NumberInput';
 
@@ -280,7 +281,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
       (['horizontal-rl', 'vertical-rl'].includes(writingMode) ||
         ['horizontal-rl', 'vertical-rl'].includes(prevWritingMode))
     ) {
-      setTimeout(() => window.location.reload(), RELOAD_BEFREE_SAVED_TIMEOUT_MS);
+      saveAndReload();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [writingMode]);