diff --git a/packages/fakeyou/src/App.tsx b/packages/fakeyou/src/App.tsx index 6e66b23c05..2c87fe379c 100644 --- a/packages/fakeyou/src/App.tsx +++ b/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; w2lInferenceJobs: Array; @@ -149,14 +152,13 @@ class App extends React.Component { 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 { 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 { 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 { 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 { this.state.isShowingPleaseFollowNotice } clearPleaseFollowNotice={this.clearPleaseFollowNotice} + isShowingBootstrapLanguageNotice={ + this.state.isShowingBootstrapLanguageNotice + } + clearBootstrapLanguageNotice={this.clearBootstrapLanguageNotice} enqueueTtsJob={this.enqueueTtsJob} ttsInferenceJobs={this.state.ttsInferenceJobs} enqueueW2lJob={this.enqueueW2lJob} diff --git a/packages/fakeyou/src/_i18n/locales/en/index.ts b/packages/fakeyou/src/_i18n/locales/en/index.ts index 51d5d4cf2e..4f4196b5e7 100644 --- a/packages/fakeyou/src/_i18n/locales/en/index.ts +++ b/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, } diff --git a/packages/fakeyou/src/_i18n/locales/en/notices/HelpBootstrapLanguage.json b/packages/fakeyou/src/_i18n/locales/en/notices/HelpBootstrapLanguage.json new file mode 100644 index 0000000000..f0634fe4c0 --- /dev/null +++ b/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!" +} \ No newline at end of file diff --git a/packages/fakeyou/src/_i18n/locales/en/notices/index.ts b/packages/fakeyou/src/_i18n/locales/en/notices/index.ts new file mode 100644 index 0000000000..37a51fec7d --- /dev/null +++ b/packages/fakeyou/src/_i18n/locales/en/notices/index.ts @@ -0,0 +1,5 @@ +import * as HelpBootstrapLanguage from './HelpBootstrapLanguage.json'; + +export { + HelpBootstrapLanguage, +} diff --git a/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx b/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx index 998bf6a64a..9cab98c382 100644 --- a/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx +++ b/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, @@ -419,6 +422,8 @@ class NewVocodesContainer extends React.Component { 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} diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx index 0e534e4f96..70775d7ff5 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx +++ b/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; ttsModelUploadJobs: Array; @@ -248,6 +254,19 @@ function TtsModelListPage(props: Props) { /> ) : undefined; + let dollars = "$150 USD"; + + const bootstrapLanguageNotice = props.isShowingBootstrapLanguageNotice ? ( + + We don't have enough voices in this language yet. Please help us build your favorite characters. + Join our and we'll teach you how. We'll pay {dollars} you per voice, too! + } + clearNotice={props.clearBootstrapLanguageNotice} + /> + ) : undefined; + // Show errors on TTS failure let maybeError = <>; if (!!maybeTtsError) { @@ -304,6 +323,8 @@ function TtsModelListPage(props: Props) { return (
+ {bootstrapLanguageNotice} + {pleaseFollowNotice} {languageNotice} diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/GenericNotice.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/GenericNotice.tsx new file mode 100644 index 0000000000..4425a34af0 --- /dev/null +++ b/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 ( + <> +
+
+ +

+ {props.title} +

+ {props.body} +
+
+ + ); +} + +export { GenericNotice };