Merge pull request #73 from storytold/echelon-bootstrap-language-notice

Echelon bootstrap language notice

packages/components/src/i18n/Language.ts

@@ -11,6 +11,7 @@ enum Language {
   Hindi,
   ChineseSimplified,
   Korean,
+  Italian,
 }
 
 export { Language }

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: [],
@@ -213,32 +215,28 @@ class App extends React.Component<Props, State> {
     let locale = await DetectLocale();
     if (DetectLocaleIsOk(locale)) {
       // TODO: Does not respect preference
-      const hasSpanish = locale.language_codes.indexOf("es") > -1;
-      const hasPortuguese = locale.language_codes.indexOf("pt") > -1;
-      const hasTurkish = locale.language_codes.indexOf("tr") > -1;
-      const hasIndonesian = locale.language_codes.indexOf("id") > -1;
-      const hasGerman = locale.language_codes.indexOf("de") > -1;
-      const hasJapanese = locale.language_codes.indexOf("ja") > -1;
-      const hasFrench = locale.language_codes.indexOf("fr") > -1;
-      const hasVietnamese = locale.language_codes.indexOf("vi") > -1;
-      const hasHindi= locale.language_codes.indexOf("hi") > -1;
       const hasChineseSimplified = locale.language_codes.indexOf("zh") > -1;
+      const hasFrench = locale.language_codes.indexOf("fr") > -1;
+      const hasGerman = locale.language_codes.indexOf("de") > -1;
+      const hasHindi= locale.language_codes.indexOf("hi") > -1;
+      const hasIndonesian = locale.language_codes.indexOf("id") > -1;
+      const hasItalian = locale.language_codes.indexOf("it") > -1;
+      const hasJapanese = locale.language_codes.indexOf("ja") > -1;
       const hasKorean = locale.language_codes.indexOf("ko") > -1;
-      const showNotice = hasSpanish || hasPortuguese || hasTurkish; //|| hasIndonesian || hasGerman || hasJapanese;
+      const hasPortuguese = locale.language_codes.indexOf("pt") > -1;
+      const hasSpanish = locale.language_codes.indexOf("es") > -1;
+      const hasTurkish = locale.language_codes.indexOf("tr") > -1;
+      const hasVietnamese = locale.language_codes.indexOf("vi") > -1;
 
       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";
@@ -263,16 +261,36 @@ class App extends React.Component<Props, State> {
       } else if (hasHindi) {
         displayLanguage = Language.Hindi;
         languageCode = "hi";
+      } else if (hasItalian) {
+        displayLanguage = Language.Italian;
+        languageCode = "it";
       } else if (hasChineseSimplified) {
         displayLanguage = Language.ChineseSimplified;
         languageCode = "zh";
       }
 
+      const showNotice = hasSpanish || hasPortuguese || hasTurkish;
+      const showPleaseFollowNotice = hasSpanish || hasPortuguese;
+
+      const showBootstrapLanguageNotice = (
+        hasJapanese 
+        || hasChineseSimplified
+        || hasFrench 
+        || hasGerman 
+        || hasHindi 
+        || hasIndonesian 
+        || hasItalian 
+        || hasKorean 
+        || hasTurkish 
+        || hasVietnamese 
+      );
+
       this.setState({
         isShowingLanguageNotice: showNotice,
         displayLanguage: displayLanguage,
         primaryLanguageCode: languageCode,
         isShowingPleaseFollowNotice: showPleaseFollowNotice,
+        isShowingBootstrapLanguageNotice: showBootstrapLanguageNotice,
       });
 
       i18n.changeLanguage(languageCode);
@@ -314,6 +332,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 +621,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/de/index.ts

@@ -1,8 +1,11 @@
 // "de" - German
 // 1.1 billion speakers (worldwide #1)
 // Twitch #4 (150k concurrent viewers, 4.5k concurrent streamers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "Wir bezahlen Sie dafür, dass Sie uns dabei helfen, Stimmen aufzubauen!",
+    "body": "Wir haben noch nicht genug Stimmen in dieser Sprache. Bitte helfen Sie uns, Ihre Lieblingscharaktere zu bauen. Treten Sie unserem <1 /> bei und wir zeigen Ihnen, wie es geht. Wir zahlen Ihnen auch <3 /> pro Stimme!"
+}

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

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

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/_i18n/locales/fr/index.ts

@@ -1,8 +1,11 @@
 // "fr" - French
 // 280 million speakers (worldwide #5)
 // Twitch #5 (140k concurrent viewers, 4.4k concurrent streamers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "Nous vous paierons pour nous aider à construire des voix !",
+    "body": "Nous n'avons pas encore assez de voix dans cette langue. Aidez-nous à créer vos personnages préférés. Rejoignez notre <1 /> et nous vous apprendrons comment. Nous vous paierons également <3 /> par voix !"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "hi" - Hindi
 // 615 million speakers (worldwide #3)
 // Twitch negligable (<50 streamers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "आवाज़ें बनाने में हमारी मदद करने के लिए हम आपको भुगतान करेंगे!",
+    "body": "हमारे पास अभी तक इस भाषा में पर्याप्त आवाज नहीं है। कृपया अपने पसंदीदा पात्र बनाने में हमारी मदद करें। हमारे <1 /> में शामिल हों और हम आपको सिखाएंगे कि कैसे। हम आपको प्रति आवाज <3 /> भी भुगतान करेंगे!"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "id" - Indonesian
 // 200 million speakers (worldwide #10)
 // Twitch #23 (600 concurrent viewers, 97 concurrent streamers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "Kami akan membayar Anda untuk membantu kami membangun suara!",
+    "body": "Kami belum memiliki cukup suara dalam bahasa ini. Tolong bantu kami membangun karakter favorit Anda. Bergabunglah dengan <1 /> kami dan kami akan mengajari Anda caranya. Kami juga akan membayar Anda <3 /> per suara!"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "it" - Italian
 // 67 million speakers (worldwide #?)
 // Twitch #10 (41k concurrent viewers, 1.2k concurrent viewers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "Ti pagheremo per aiutarci a costruire voci!",
+    "body": "Non abbiamo ancora abbastanza voci in questa lingua. Aiutaci a costruire i tuoi personaggi preferiti. Unisciti al nostro <1 /> e ti insegneremo come. Ti pagheremo anche <3 /> a voce!"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "ja" - Japanese
 // 128 million speakers (worldwide #13)
 // Twitch #7 (87k concurrent viewers, 2.6k concurrent streams)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "声を作るのを手伝うためにあなたにお金を払います！",
+    "body": "この言語の音声はまだ十分ではありません。 お気に入りのキャラクターを作るお手伝いをさせてください。 <1 /> に参加してください。方法を教えます。 ボイスごとに <3 /> もお支払いします!"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "ko" - Korean
 // 75 million speakers (worldwide #?)
 // Twitch #8 (144k concurrent viewers, 2.5k concurrent streamers)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "목소리를 낼 수 있도록 비용을 지불하겠습니다!",
+    "body": "아직 이 언어의 목소리가 충분하지 않습니다. 좋아하는 캐릭터를 만들 수 있도록 도와주세요. <1 />에 가입하시면 방법을 알려드리겠습니다. 음성당 <3 />도 지불하겠습니다!"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "vi" - Vietnamese
 // 87 million speakers (worldwide #21)
 // Twitch #30 (a paltry 170 concurrent viewers, 70 concurrent channels)
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "Chúng tôi sẽ trả tiền cho bạn để giúp chúng tôi xây dựng tiếng nói!",
+    "body": "Chúng tôi chưa có đủ tiếng nói trong ngôn ngữ này. Hãy giúp chúng tôi xây dựng các nhân vật yêu thích của bạn. Tham gia <1 /> của chúng tôi và chúng tôi sẽ hướng dẫn bạn cách làm. Chúng tôi cũng sẽ trả cho bạn <3 /> mỗi giọng nói!"
+}

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

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

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

@@ -1,8 +1,11 @@
 // "zh" - Mandarin
 // 1.1 billion speakers (worldwide #2)
 // Twitch #9
+
+import * as notices from './notices';
 import * as tts from './tts';
 
 export {
+    notices,
     tts,
 }

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

@@ -0,0 +1,4 @@
+{
+    "title": "我们会付钱给你帮助我们建立声音！",
+    "body": "我们还没有足够的这种语言的声音。 请帮助我们建立您最喜欢的角色。 加入我们的<1 />，我们将教您如何操作。 我们也会为每个声音支付 <3 /> 的费用！"
+}

packages/fakeyou/src/_i18n/locales/zh/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,8 @@ import {
   faVolumeHigh,
   faVolumeUp,
 } from "@fortawesome/free-solid-svg-icons";
+import { GenericNotice } from "./notices/GenericNotice";
+import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
 
 const Fade = require("react-reveal/Fade");
 
@@ -67,6 +69,9 @@ interface Props {
   isShowingPleaseFollowNotice: boolean;
   clearPleaseFollowNotice: () => void;
 
+  isShowingBootstrapLanguageNotice: boolean;
+  clearBootstrapLanguageNotice: () => void;
+
   enqueueTtsJob: (jobToken: string) => void;
   ttsInferenceJobs: Array<TtsInferenceJob>;
   ttsModelUploadJobs: Array<TtsModelUploadJob>;
@@ -248,6 +253,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">
+        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 +322,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 };