From 6356ce2f4a770cced12647e52d97056ba62bc0ce Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 13 Feb 2022 01:08:29 -0500
Subject: [PATCH] translate more of the home page

---
 packages/fakeyou/src/_i18n/Translations.ts    | 21 +++++++++++++++++--
 .../fakeyou/src/v2/view/NewFooterNavFc.tsx    |  5 ++++-
 packages/fakeyou/src/v2/view/NewTopNavFc.tsx  | 10 ++++-----
 .../tts_model_list/MultiDropdownSearch.tsx    | 10 ++++++---
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/packages/fakeyou/src/_i18n/Translations.ts b/packages/fakeyou/src/_i18n/Translations.ts
index 2340f06659..dced075c76 100644
--- a/packages/fakeyou/src/_i18n/Translations.ts
+++ b/packages/fakeyou/src/_i18n/Translations.ts
@@ -1,3 +1,4 @@
+// Use \u{00a0} = &nbsp; character literal
 
 const TRANSLATIONS : any = {
   // English: 46.6% Twitch (#1), 30+% FakeYou (#1)
@@ -6,6 +7,7 @@ const TRANSLATIONS : any = {
       coreUi: {
         footerNav: {
           aboutUs: 'About Us',
+          builtBy: 'Built by <1>echelon</1> in Atlanta.',
           feed: 'Feed',
           leaderboard: 'Leaderboard',
           patrons: 'Patrons',
@@ -15,21 +17,28 @@ const TRANSLATIONS : any = {
           video: 'Video',
         },
         topNav: {
+          aboutUs: 'About Us',
           community: 'Community',
           contributeUpload: 'Contribute / Upload',
+          feed: 'Feed',
+          leaderboard: 'Leaderboard',
           logout: 'Logout',
           myData: 'My Data',
+          patrons: 'Patrons',
           signUpLogin: 'Sign up / Login',
+          terms: 'Terms of Use',
           video: 'Video',
         },
       },
       ttsListPage: {
+        by: 'by',
         categoryFilters: 'Category Filters', // "Category / Language" in other locales
         loading: 'Loading...',
         search: 'Search',
         searchTerm: 'Search Term',
         speakButton: 'Speak',
         clearButton: 'Clear',
+        voiceCount: 'Voice ({{count}} to choose from)',
       }
     }
   },
@@ -44,30 +53,38 @@ const TRANSLATIONS : any = {
       coreUi: {
         footerNav: {
           aboutUs: 'Sobre Nosotros',
+          builtBy: 'Construido por <1>echelon</1> en Atlanta.',
           feed: 'Transmisión en Vivo',
-          leaderboard: 'Tabla de Clasificación',
+          leaderboard: 'Tabla\u{00a0}de\u{00a0}Clasificación',
           patrons: 'Mecenas',
-          termsOfUse: 'Términos de Uso',
+          termsOfUse: 'Términos\u{00a0}de\u{00a0}Uso',
           textToSpeech: 'Texto a Voz',
           upload: 'Subir',
           video: 'Video', // NB: This *is* translated
         },
         topNav: {
+          aboutUs: 'Sobre Nosotros',
           community: 'Comunidad',
           contributeUpload: 'Contribuir / Subir',
+          feed: 'Transmisión en Vivo',
+          leaderboard: 'Tabla de Clasificación',
           logout: 'Cerrar sesión',
           myData: 'Mis datos',
+          patrons: 'Mecenas',
           signUpLogin: 'Registrate e inicia secion',
+          terms: 'Términos de Uso',
           video: 'Video', // NB: This *is* translated
         },
       },
       ttsListPage: {
+        by: 'de',
         categoryFilters: 'Categoría / Idioma',
         loading: 'Cargando...',
         search: 'Búsqueda',
         searchTerm: 'Término de búsqueda',
         speakButton: 'Hablar',
         clearButton: 'Claro',
+        voiceCount: 'Voz ({{count}} para elegir)',
       }
     }
   },
diff --git a/packages/fakeyou/src/v2/view/NewFooterNavFc.tsx b/packages/fakeyou/src/v2/view/NewFooterNavFc.tsx
index 76aa12fb4b..a66fd9bb25 100644
--- a/packages/fakeyou/src/v2/view/NewFooterNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewFooterNavFc.tsx
@@ -6,6 +6,7 @@ import './_css/footer.scss'
 import { ModerationIcon } from './_icons/ModerationIcon';
 import { FrontendUrlConfig } from '../../common/FrontendUrlConfig';
 import { t } from 'i18next';
+import { Trans } from 'react-i18next';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -56,7 +57,9 @@ function NewFooterNavFc(props: Props) {
         </div>
 
         <p>
-          Built by <Link to="/profile/echelon">@echelon</Link> in Atlanta.
+          <Trans i18nKey="coreUi.footerNav.builtBy">
+            Built by <Link to="/profile/echelon">@echelon</Link> in Atlanta.
+          </Trans>
         </p>
 
       </div>
diff --git a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
index 3ae54b9043..0a3a827c9e 100644
--- a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -81,17 +81,17 @@ function NewTopNavFc(props: Props) {
                 <Link to="/leaderboard"
                   className="navbar-item"
                   onClick={() => closeHamburger()}
-                  ><FontAwesomeIcon icon={faTrophy} />&nbsp;&nbsp;Leaderboard</Link>
+                  ><FontAwesomeIcon icon={faTrophy} />&nbsp;&nbsp;{t('coreUi.topNav.leaderboard')}</Link>
 
                 <Link to={FrontendUrlConfig.patronsPage()}
                   className="navbar-item"
                   onClick={() => closeHamburger()}
-                  ><FontAwesomeIcon icon={faPatreon}/>&nbsp;&nbsp;Patrons</Link>
+                  ><FontAwesomeIcon icon={faPatreon}/>&nbsp;&nbsp;{t('coreUi.topNav.patrons')}</Link>
 
                 <Link to="/firehose"
                   className="navbar-item"
                   onClick={() => closeHamburger()}
-                  ><FontAwesomeIcon icon={faList} />&nbsp;&nbsp;Feed</Link>
+                  ><FontAwesomeIcon icon={faList} />&nbsp;&nbsp;{t('coreUi.topNav.feed')}</Link>
 
                 <hr className="navbar-divider" />
 
@@ -105,12 +105,12 @@ function NewTopNavFc(props: Props) {
                 <Link to={FrontendUrlConfig.aboutUsPage()}
                   className="navbar-item"
                   onClick={() => closeHamburger()}
-                  ><FontAwesomeIcon icon={faGrinBeamSweat} />&nbsp;&nbsp;About Us</Link>
+                  ><FontAwesomeIcon icon={faGrinBeamSweat} />&nbsp;&nbsp;{t('coreUi.topNav.aboutUs')}</Link>
 
                 <Link to={FrontendUrlConfig.termsPage()}
                   className="navbar-item"
                   onClick={() => closeHamburger()}
-                  ><FontAwesomeIcon icon={faGavel} />&nbsp;&nbsp;Terms</Link>
+                  ><FontAwesomeIcon icon={faGavel} />&nbsp;&nbsp;{t('coreUi.topNav.terms')}</Link>
 
               </div>
             </div>
diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx
index 7916ad53f1..cd7f9d1ec4 100644
--- a/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx
+++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight, faHeadphonesAlt, faTags, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
 import { TtsCategoryType } from '../../../../AppWrapper';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 interface Props {
   allTtsCategories: TtsCategoryType[],
@@ -272,7 +272,11 @@ export function MultiDropdownSearch(props: Props) {
       {categoryFieldGroups}
 
       {/* Model Dropdown */}
-      <strong>Voice ({voiceCount} to choose from)</strong>
+      <strong>
+        <Trans i18nKey="ttsListPage.voiceCount" count={voiceCount}>
+        Voice ({voiceCount} to choose from)
+        </Trans>
+      </strong>
       <br />
       <div className="control has-icons-left">
         <div className={selectClasses}>
@@ -286,7 +290,7 @@ export function MultiDropdownSearch(props: Props) {
                 <option
                   key={model.model_token}
                   value={model.model_token}
-                  >{model.title} (by {model.creator_display_name})</option>
+                  >{model.title} ({t('ttsListPage.by')} {model.creator_display_name})</option>
               );
             })}
           </select>