Add option to set text size (#365)

webcatalog · Dec 20, 2021 · b71a574 · b71a574
1 parent 0f92992
commit b71a574
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 14 deletions.
diff --git a/main-src/libs/locales/de/ui.json b/main-src/libs/locales/de/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Sprachgeschwindigkeit",
 	"slowest": "Langsamste",
 	"normal": "Normal",
-	"fastest": "Schnellste"
+	"fastest": "Schnellste",
+	"textSize": "Schriftgröße"
 }
diff --git a/main-src/libs/locales/en/ui.json b/main-src/libs/locales/en/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Voice speed",
 	"slowest": "Slowest",
 	"normal": "Normal",
-	"fastest": "Fastest"
+	"fastest": "Fastest",
+	"textSize": "Text size"
 }
diff --git a/main-src/libs/locales/es/ui.json b/main-src/libs/locales/es/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Velocidad de voz",
 	"slowest": "Muy lento",
 	"normal": "Normal",
-	"fastest": "Lo más rápido"
+	"fastest": "Lo más rápido",
+	"textSize": "Tamaño del texto"
 }
diff --git a/main-src/libs/locales/fr/ui.json b/main-src/libs/locales/fr/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Vitesse de la voix",
 	"slowest": "Le plus lent",
 	"normal": "Normale",
-	"fastest": "Le plus rapide"
+	"fastest": "Le plus rapide",
+	"textSize": "Taille du texte"
 }
diff --git a/main-src/libs/locales/it/ui.json b/main-src/libs/locales/it/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Velocità vocale",
 	"slowest": "Più lenta",
 	"normal": "Normali",
-	"fastest": "Più Veloce"
+	"fastest": "Più Veloce",
+	"textSize": "Dimensione testo"
 }
diff --git a/main-src/libs/locales/ja/ui.json b/main-src/libs/locales/ja/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "音声スピード",
 	"slowest": "最も低速",
 	"normal": "普通",
-	"fastest": "最速"
+	"fastest": "最速",
+	"textSize": "文字サイズ"
 }
diff --git a/main-src/libs/locales/ko/ui.json b/main-src/libs/locales/ko/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "음성 속도",
 	"slowest": "가장 느리게",
 	"normal": "보통",
-	"fastest": "가장 빠르게"
+	"fastest": "가장 빠르게",
+	"textSize": "글자 크기"
 }
diff --git a/main-src/libs/locales/pt-PT/ui.json b/main-src/libs/locales/pt-PT/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Velocidade de voz",
 	"slowest": "Mais lento",
 	"normal": "Normal",
-	"fastest": "Mais rápida"
+	"fastest": "Mais rápida",
+	"textSize": "Tamanho do texto"
 }
diff --git a/main-src/libs/locales/ru/ui.json b/main-src/libs/locales/ru/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Скорость голоса",
 	"slowest": "Медленнейш",
 	"normal": "Норм",
-	"fastest": "Минимум"
+	"fastest": "Минимум",
+	"textSize": "Размер текста"
 }
diff --git a/main-src/libs/locales/tr/ui.json b/main-src/libs/locales/tr/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Ses hızı",
 	"slowest": "En yavaş",
 	"normal": "Normal",
-	"fastest": "En Hızlı"
+	"fastest": "En Hızlı",
+	"textSize": "Metin boyutu"
 }
diff --git a/main-src/libs/locales/vi/ui.json b/main-src/libs/locales/vi/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "Tốc độ giọng nói",
 	"slowest": "Chậm nhất",
 	"normal": "Bình thường",
-	"fastest": "Nhanh nhất"
+	"fastest": "Nhanh nhất",
+	"textSize": "Cỡ chữ"
 }
diff --git a/main-src/libs/locales/zh-CN/ui.json b/main-src/libs/locales/zh-CN/ui.json
@@ -142,5 +142,6 @@
 	"voiceSpeed": "语音速度",
 	"slowest": "最慢",
 	"normal": "正常",
-	"fastest": "最快"
+	"fastest": "最快",
+	"textSize": "文本尺寸"
 }
diff --git a/main-src/libs/preferences.js b/main-src/libs/preferences.js
@@ -56,6 +56,7 @@ const defaultPreferences = {
   useHardwareAcceleration: true,
   // 10 => 1x (speed goes from 0.1x to 10x, we multiple by 10 to avoid using decimals)
   voiceSpeed: 10,
+  textSize: 1,
 };
 
 const initCachedPreferences = () => {

diff --git a/src/components/pages/home/index.js b/src/components/pages/home/index.js
@@ -184,6 +184,18 @@ const styles = (theme) => ({
   },
 });
 
+const textSizeToVariant = (textSize) => {
+  switch (textSize) {
+    case 7: return 'h1';
+    case 6: return 'h2';
+    case 5: return 'h3';
+    case 4: return 'h4';
+    case 3: return 'h5';
+    case 2: return 'h6';
+    default: return 'body1';
+  }
+};
+
 const Home = ({
   classes,
   fullscreenInputBox,
@@ -206,6 +218,7 @@ const Home = ({
   output,
   outputLang,
   showTransliteration,
+  textSize,
   textToSpeechPlaying,
   translateWhenPressingEnter,
 }) => {
@@ -307,7 +320,7 @@ const Home = ({
             <Card elevation={0} square className={classes.card}>
               <CardContent className="text-selectable">
                 <Typography
-                  variant="body1"
+                  variant={textSizeToVariant(textSize)}
                   lang={output.outputLang}
                   className={classNames('text-selectable', classes.outputText)}
                 >
@@ -355,6 +368,7 @@ const Home = ({
     onUpdateOutputLang,
     output,
     showTransliteration,
+    textSize,
     textToSpeechPlaying,
   ]);
 
@@ -702,6 +716,7 @@ Home.propTypes = {
   output: PropTypes.object,
   outputLang: PropTypes.string.isRequired,
   showTransliteration: PropTypes.bool.isRequired,
+  textSize: PropTypes.number.isRequired,
   textToSpeechPlaying: PropTypes.bool.isRequired,
   translateWhenPressingEnter: PropTypes.bool.isRequired,
 };
@@ -714,6 +729,7 @@ const mapStateToProps = (state) => ({
   output: state.pages.home.output,
   outputLang: state.preferences.outputLang,
   showTransliteration: state.preferences.showTransliteration,
+  textSize: state.preferences.textSize,
   textToSpeechPlaying: state.pages.home.textToSpeech.textToSpeechPlaying,
   translateWhenPressingEnter: state.preferences.translateWhenPressingEnter,
 });

diff --git a/src/components/pages/preferences/list-item-sliders.js b/src/components/pages/preferences/list-item-sliders.js
@@ -47,12 +47,13 @@ const convertPreferenceValToSliderVal = (val) => {
 const ListItemSliders = ({
   classes,
   voiceSpeed,
+  textSize,
 }) => (
   <ListItem>
     <ListItemText className={classes.sliderContainer}>
       <Grid container spacing={2}>
         <Grid classes={{ item: classes.sliderTitleContainer }} item>
-          <Typography id="brightness-slider" variant="body2" gutterBottom={false}>
+          <Typography id="voice-speed-slider" variant="body2" gutterBottom={false}>
             {getLocale('voiceSpeed')}
           </Typography>
         </Grid>
@@ -91,17 +92,46 @@ const ListItemSliders = ({
           />
         </Grid>
       </Grid>
+      <Grid container spacing={2}>
+        <Grid classes={{ item: classes.sliderTitleContainer }} item>
+          <Typography id="text-size-slider" variant="body2" gutterBottom={false}>
+            {getLocale('textSize')}
+          </Typography>
+        </Grid>
+        <Grid item xs>
+          <Slider
+            classes={{ markLabel: classes.sliderMarkLabel }}
+            value={textSize}
+            aria-labelledby="text-size-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            min={1}
+            max={7}
+            marks={[
+              {
+                value: 1,
+                label: getLocale('normal'),
+              },
+            ]}
+            onChange={(e, value) => {
+              requestSetPreference('textSize', value);
+            }}
+          />
+        </Grid>
+      </Grid>
     </ListItemText>
   </ListItem>
 );
 
 ListItemSliders.propTypes = {
   classes: PropTypes.object.isRequired,
   voiceSpeed: PropTypes.number.isRequired,
+  textSize: PropTypes.number.isRequired,
 };
 
 const mapStateToProps = (state) => ({
   voiceSpeed: state.preferences.voiceSpeed,
+  textSize: state.preferences.textSize,
 });
 
 export default connectComponent(