Notices to bootstrap new languages - core react/i18n

packages/fakeyou/src/App.tsx

@@ -101,6 +101,9 @@ interface State {
   isShowingTwitchTtsNotice: boolean;
   isShowingPleaseFollowNotice: boolean;
 
+  // An improved notice for "new" languages asking users to help.
+  isShowingBootstrapLanguageNotice: boolean;
+
   // Jobs enqueued during this browser session.
   ttsInferenceJobs: Array<TtsInferenceJob>;
   w2lInferenceJobs: Array<W2lInferenceJob>;
@@ -149,14 +152,13 @@ class App extends React.Component<Props, State> {
 
       isShowingVocodesNotice: props.flashVocodesNotice,
 
-      //localeLanguageCodes: [],
-      //localeFullLanguageTags: [],
       isShowingLanguageNotice: false,
       displayLanguage: Language.English,
       primaryLanguageCode: "en",
 
       isShowingTwitchTtsNotice: showTwitchNotice,
       isShowingPleaseFollowNotice: showPleaseFollowNotice,
+      isShowingBootstrapLanguageNotice: false,
 
       ttsInferenceJobs: [],
       w2lInferenceJobs: [],
@@ -224,21 +226,16 @@ class App extends React.Component<Props, State> {
       const hasHindi= locale.language_codes.indexOf("hi") > -1;
       const hasChineseSimplified = locale.language_codes.indexOf("zh") > -1;
       const hasKorean = locale.language_codes.indexOf("ko") > -1;
-      const showNotice = hasSpanish || hasPortuguese || hasTurkish; //|| hasIndonesian || hasGerman || hasJapanese;
 
       let displayLanguage = Language.English;
       let languageCode = "en";
 
-      let showPleaseFollowNotice = false;
-
       if (hasSpanish) {
         displayLanguage = Language.Spanish;
         languageCode = "es";
-        showPleaseFollowNotice = true;
       } else if (hasPortuguese) {
         displayLanguage = Language.Portuguese;
         languageCode = "pt";
-        showPleaseFollowNotice = true;
       } else if (hasTurkish) {
         displayLanguage = Language.Turkish;
         languageCode = "tr";
@@ -268,11 +265,28 @@ class App extends React.Component<Props, State> {
         languageCode = "zh";
       }
 
+      const showNotice = hasSpanish || hasPortuguese || hasTurkish;
+      const showPleaseFollowNotice = hasSpanish || hasPortuguese;
+
+      const showBootstrapLanguageNotice = (
+        hasJapanese 
+        || hasKorean 
+        || hasFrench 
+        || hasTurkish 
+        || hasIndonesian 
+        || hasGerman 
+        || hasVietnamese 
+        || hasHindi 
+        || hasChineseSimplified
+        || true
+      );
+
       this.setState({
         isShowingLanguageNotice: showNotice,
         displayLanguage: displayLanguage,
         primaryLanguageCode: languageCode,
         isShowingPleaseFollowNotice: showPleaseFollowNotice,
+        isShowingBootstrapLanguageNotice: showBootstrapLanguageNotice,
       });
 
       i18n.changeLanguage(languageCode);
@@ -314,6 +328,10 @@ class App extends React.Component<Props, State> {
     this.setState({ isShowingPleaseFollowNotice: false });
   };
 
+  clearBootstrapLanguageNotice = () => {
+    this.setState({ isShowingBootstrapLanguageNotice: false });
+  };
+
   enqueueTtsJob = (jobToken: string) => {
     const newJob = new TtsInferenceJob(jobToken);
     let inferenceJobs = this.state.ttsInferenceJobs.concat([newJob]);
@@ -599,6 +617,10 @@ class App extends React.Component<Props, State> {
                       this.state.isShowingPleaseFollowNotice
                     }
                     clearPleaseFollowNotice={this.clearPleaseFollowNotice}
+                    isShowingBootstrapLanguageNotice={
+                      this.state.isShowingBootstrapLanguageNotice
+                    }
+                    clearBootstrapLanguageNotice={this.clearBootstrapLanguageNotice}
                     enqueueTtsJob={this.enqueueTtsJob}
                     ttsInferenceJobs={this.state.ttsInferenceJobs}
                     enqueueW2lJob={this.enqueueW2lJob}

packages/fakeyou/src/_i18n/locales/en/index.ts

@@ -1,8 +1,11 @@
 // "en" - English
 // 1.1 billion speakers (worldwide #1)
 // Twitch #1 (1.1m concurrent viewers, 52k concurrent streamers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

packages/fakeyou/src/_i18n/locales/en/notices/HelpBootstrapLanguage.json

@@ -0,0 +1,4 @@
+{
+    "title": "We'll pay you to help us build voices!",
+    "body": "We don't have enough voices in this language yet. Please help us build your favorite characters. Join our <1 /> and we'll teach you how. We'll pay you <3 /> per voice, too!"
+}

packages/fakeyou/src/_i18n/locales/en/notices/index.ts

@@ -0,0 +1,5 @@
+import * as HelpBootstrapLanguage from './HelpBootstrapLanguage.json';
+
+export {
+    HelpBootstrapLanguage,
+}

packages/fakeyou/src/v2/view/NewVocodesContainer.tsx

@@ -72,6 +72,9 @@ interface Props {
   isShowingPleaseFollowNotice: boolean,
   clearPleaseFollowNotice: () => void,
 
+  isShowingBootstrapLanguageNotice: boolean,
+  clearBootstrapLanguageNotice: () => void,
+
   enqueueTtsJob: (jobToken: string) => void,
   ttsInferenceJobs: Array<TtsInferenceJob>,
 
@@ -419,6 +422,8 @@ class NewVocodesContainer extends React.Component<Props, State> {
                 clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
                 isShowingPleaseFollowNotice={this.props.isShowingPleaseFollowNotice}
                 clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
+                isShowingBootstrapLanguageNotice={this.props.isShowingBootstrapLanguageNotice}
+                clearBootstrapLanguageNotice={this.props.clearBootstrapLanguageNotice}
                 enqueueTtsJob={this.props.enqueueTtsJob}
                 ttsInferenceJobs={this.props.ttsInferenceJobs}
                 ttsModelUploadJobs={this.props.ttsModelUploadJobs}

packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx

@@ -43,6 +43,9 @@ import {
   faVolumeHigh,
   faVolumeUp,
 } from "@fortawesome/free-solid-svg-icons";
+import { GenericNotice } from "./notices/GenericNotice";
+import { DiscordLink } from "@storyteller/components/src/elements/DiscordLink";
+import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
 
 const Fade = require("react-reveal/Fade");
 
@@ -67,6 +70,9 @@ interface Props {
   isShowingPleaseFollowNotice: boolean;
   clearPleaseFollowNotice: () => void;
 
+  isShowingBootstrapLanguageNotice: boolean;
+  clearBootstrapLanguageNotice: () => void;
+
   enqueueTtsJob: (jobToken: string) => void;
   ttsInferenceJobs: Array<TtsInferenceJob>;
   ttsModelUploadJobs: Array<TtsModelUploadJob>;
@@ -248,6 +254,19 @@ function TtsModelListPage(props: Props) {
     />
   ) : undefined;
 
+  let dollars = "$150 USD";
+
+  const bootstrapLanguageNotice = props.isShowingBootstrapLanguageNotice ? (
+    <GenericNotice
+      title={t("notices.HelpBootstrapLanguage.title")}
+      body={<Trans i18nKey="notices.HelpBootstrapLanguage.body" amount={"$150 USD"}>
+        We don't have enough voices in this language yet. Please help us build your favorite characters. 
+        Join our <DiscordLink2 /> and we'll teach you how. We'll pay {dollars} you per voice, too!
+      </Trans>}
+      clearNotice={props.clearBootstrapLanguageNotice}
+    />
+  ) : undefined;
+
   // Show errors on TTS failure
   let maybeError = <></>;
   if (!!maybeTtsError) {
@@ -304,6 +323,8 @@ function TtsModelListPage(props: Props) {
 
   return (
     <div>
+      {bootstrapLanguageNotice}
+
       {pleaseFollowNotice}
 
       {languageNotice}

packages/fakeyou/src/v2/view/tts/tts_model_list/notices/GenericNotice.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface Props {
+  title: string;
+  body: string | JSX.Element;
+  clearNotice: () => void;
+}
+
+function GenericNotice(props: Props) {
+  return (
+    <>
+      <div className="container pt-3">
+        <div
+          className="alert alert-primary alert-dismissible fade show"
+          role="alert"
+        >
+          <button
+            className="btn-close"
+            onClick={() => props.clearNotice()}
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
+          <h2>
+            {props.title}
+          </h2>
+          {props.body}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export { GenericNotice };