Add option to show/hide transliteration

public/libs/locales/en.json

@@ -98,6 +98,7 @@
 	"attachToMenubar": "Attach to menubar",
 	"attachToTaskbar": "Attach to taskbar",
 	"translateWhenPressingEnter": "Translate when pressing Enter",
+	"showTransliteration": "Show transliteration",
 	"realtime": "Real-time translation",
 	"realtimeDesc": "This feature only works with text no longer than 280 characters.",
 	"rateMacAppStore": "Rate Translatium on Mac App Store",

public/libs/preferences.js

@@ -32,6 +32,7 @@ const defaultPreferences = {
   realtime: true,
   recentLanguages: ['en', 'zh'],
   registered: getDefaultRegistered(),
+  showTransliteration: true,
   themeSource: 'system',
   translateClipboardOnShortcut: false,
   translateWhenPressingEnter: true,

src/components/pages/home/index.js

@@ -271,6 +271,7 @@ class Home extends React.Component {
       onUpdateInputText,
       onUpdateOutputLang,
       output,
+      showTransliteration,
       textToSpeechPlaying,
     } = this.props;
 
@@ -340,7 +341,7 @@ class Home extends React.Component {
               { [classes.resultContainerHidden]: fullscreenInputBox },
             )}
           >
-            {output.inputRoman && (
+            {showTransliteration && output.inputRoman && (
               <Typography
                 variant="body2"
                 color="textSecondary"
@@ -359,7 +360,7 @@ class Home extends React.Component {
                   {output.outputText}
                 </Typography>
 
-                {output.outputRoman && (
+                {showTransliteration && output.outputRoman && (
                   <Typography variant="body2" color="textSecondary" className={classNames('text-selectable', classes.pos)}>
                     {output.outputRoman}
                   </Typography>
@@ -658,6 +659,7 @@ Home.propTypes = {
   output: PropTypes.object,
   outputLang: PropTypes.string.isRequired,
   registered: PropTypes.bool.isRequired,
+  showTransliteration: PropTypes.bool.isRequired,
   textToSpeechPlaying: PropTypes.bool.isRequired,
   translateWhenPressingEnter: PropTypes.bool.isRequired,
 };
@@ -669,6 +671,7 @@ const mapStateToProps = (state) => ({
   output: state.pages.home.output,
   outputLang: state.preferences.outputLang,
   registered: state.preferences.registered,
+  showTransliteration: state.preferences.showTransliteration,
   textToSpeechPlaying: state.pages.home.textToSpeech.textToSpeechPlaying,
   translateWhenPressingEnter: state.preferences.translateWhenPressingEnter,
 });

src/components/pages/preferences/index.js

@@ -118,6 +118,7 @@ const Preferences = (props) => {
     openAtLogin,
     openOnMenubarShortcut,
     realtime,
+    showTransliteration,
     themeSource,
     translateClipboardOnShortcut,
     translateWhenPressingEnter,
@@ -169,6 +170,18 @@ const Preferences = (props) => {
               </ListItemSecondaryAction>
             </ListItem>
             <Divider />
+            <ListItem>
+              <ListItemText primary={getLocale('showTransliteration')} />
+              <ListItemSecondaryAction>
+                <Switch
+                  edge="end"
+                  checked={showTransliteration}
+                  onChange={() => onToggleSetting('showTransliteration')}
+                  color="primary"
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText primary={getLocale('translateWhenPressingEnter')} />
               <ListItemSecondaryAction>
@@ -396,6 +409,7 @@ Preferences.propTypes = {
   openAtLogin: PropTypes.oneOf(['yes', 'yes-hidden', 'no']).isRequired,
   openOnMenubarShortcut: PropTypes.string,
   realtime: PropTypes.bool.isRequired,
+  showTransliteration: PropTypes.bool.isRequired,
   themeSource: PropTypes.string.isRequired,
   translateClipboardOnShortcut: PropTypes.bool.isRequired,
   translateWhenPressingEnter: PropTypes.bool.isRequired,
@@ -408,6 +422,7 @@ const mapStateToProps = (state) => ({
   openAtLogin: state.systemPreferences.openAtLogin,
   openOnMenubarShortcut: state.preferences.openOnMenubarShortcut,
   realtime: state.preferences.realtime,
+  showTransliteration: state.preferences.showTransliteration,
   themeSource: state.preferences.themeSource,
   translateClipboardOnShortcut: state.preferences.translateClipboardOnShortcut,
   translateWhenPressingEnter: state.preferences.translateWhenPressingEnter,