diff --git a/src/website/packages/fakeyou.com/src/App.tsx b/src/website/packages/fakeyou.com/src/App.tsx index 879daea97f..09b981170c 100644 --- a/src/website/packages/fakeyou.com/src/App.tsx +++ b/src/website/packages/fakeyou.com/src/App.tsx @@ -8,7 +8,6 @@ import { DetectLocale, DetectLocaleIsOk, } from "@storyteller/components/src/api/locale/DetectLocale"; -import { Language } from "@storyteller/components/src/i18n/Language"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import PageContainer from "./v2/view/PageContainer"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; @@ -16,13 +15,10 @@ import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClie import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs"; import { W2lInferenceJob } from "@storyteller/components/src/jobs/W2lInferenceJobs"; -import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; -import { TtsCategoryType } from "./AppWrapper"; import { FAKEYOU_MERGED_TRANSLATIONS } from "./_i18n/FakeYouTranslations"; import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import deepEqual from "deep-equal"; -import { GetComputedTtsCategoryAssignmentsSuccessResponse } from "@storyteller/components/src/api/category/GetComputedTtsCategoryAssignments"; import { AvailableLanguageKey, AVAILABLE_LANGUAGE_MAP, @@ -78,125 +74,52 @@ enum MigrationMode { OLD_VOCODES, } -interface Props { - enableSpectrograms: boolean; - - flashVocodesNotice: boolean; - - allTtsCategories: TtsCategoryType[]; - setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void; - - allTtsModels: TtsModelListItem[]; - setAllTtsModels: (allTtsModels: TtsModelListItem[]) => void; - - computedTtsCategoryAssignments?: GetComputedTtsCategoryAssignmentsSuccessResponse; - setComputedTtsCategoryAssignments: ( - categoryAssignments: GetComputedTtsCategoryAssignmentsSuccessResponse - ) => void; - - allTtsCategoriesByTokenMap: Map; - allTtsModelsByTokenMap: Map; - ttsModelsByCategoryToken: Map>; - - dropdownCategories: TtsCategoryType[][]; - setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void; - selectedCategories: TtsCategoryType[]; - setSelectedCategories: (selectedCategories: TtsCategoryType[]) => void; - - maybeSelectedTtsModel?: TtsModelListItem; - setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void; - - selectedTtsLanguageScope: string; - setSelectedTtsLanguageScope: (selectedTtsLanguageScope: string) => void; -} +interface Props {} interface State { // Migration Mode - migrationMode: MigrationMode; + // migrationMode: MigrationMode; // Rollout of vocodes 2.0 - enableAlpha: boolean; + // enableAlpha: boolean; sessionFetched: boolean; sessionWrapper: SessionWrapper; sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; - // Show flash notice of vocodes name change - isShowingVocodesNotice: boolean; - // Locale + show flash notice to Spanish speakers //localeLanguageCodes: string[], //localeFullLanguageTags: string[], - isShowingLanguageNotice: boolean; - displayLanguage: Language; - primaryLanguageCode: string; + // isShowingLanguageNotice: boolean; + // displayLanguage: Language; + // primaryLanguageCode: string; - isShowingTwitchTtsNotice: boolean; - isShowingPleaseFollowNotice: boolean; + // isShowingTwitchTtsNotice: boolean; + // isShowingPleaseFollowNotice: boolean; // An improved notice for "new" languages asking users to help. - isShowingBootstrapLanguageNotice: boolean; + // isShowingBootstrapLanguageNotice: boolean; // Current text entered textBuffer: string; - voiceConversionModels: VoiceConversionModelListItem[]; + // voiceConversionModels: VoiceConversionModelListItem[]; maybeSelectedVoiceConversionModel?: VoiceConversionModelListItem; } -function newVocodes() { - const discord = /discord/i.test(navigator.userAgent || ""); - const twitter = /twitter/i.test(navigator.userAgent || ""); - const alphaCookie = document.cookie.includes("enable-alpha"); - return discord || twitter || alphaCookie; -} - -function isMacOs() { - // Not on macs yet - // https://stackoverflow.com/a/38241481 - const platform = window.navigator.platform; - const macPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K", "darwin"]; - return macPlatforms.indexOf(platform) !== -1; -} - // TODO: Port to functional component class App extends React.Component { constructor(props: Props) { super(props); - const enableAlpha = newVocodes() || true; - - const migrationMode = enableAlpha - ? MigrationMode.NEW_VOCODES - : MigrationMode.OLD_VOCODES; - - let showTwitchNotice = !isMacOs(); - showTwitchNotice = false; // TODO: Temporarily disabled. - - let showPleaseFollowNotice = false; - this.state = { - enableAlpha: enableAlpha, - migrationMode: migrationMode, - sessionFetched: false, sessionWrapper: SessionWrapper.emptySession(), sessionSubscriptionsWrapper: SessionSubscriptionsWrapper.emptySubscriptions(), - isShowingVocodesNotice: props.flashVocodesNotice, - - isShowingLanguageNotice: false, - displayLanguage: Language.English, - primaryLanguageCode: "en", - - isShowingTwitchTtsNotice: showTwitchNotice, - isShowingPleaseFollowNotice: showPleaseFollowNotice, - isShowingBootstrapLanguageNotice: false, - textBuffer: "", - voiceConversionModels: [], maybeSelectedVoiceConversionModel: undefined, }; } @@ -319,15 +242,6 @@ class App extends React.Component { } } - this.setState({ - isShowingLanguageNotice: false, // TODO: Remove/consolidate - displayLanguage: preferredLanguage.language, - primaryLanguageCode: preferredLanguage.languageCode, - isShowingPleaseFollowNotice: preferredLanguage.showPleaseFollowNotice, - isShowingBootstrapLanguageNotice: - preferredLanguage.showBootstrapLanguageNotice, - }); - i18n.changeLanguage(preferredLanguage.languageCode); i18n2.changeLanguage(preferredLanguage.languageCode); } @@ -353,40 +267,6 @@ class App extends React.Component { }); }; - clearVocodesNotice = () => { - this.setState({ isShowingVocodesNotice: false }); - }; - - clearLanguageNotice = () => { - this.setState({ isShowingLanguageNotice: false }); - }; - - clearTwitchTtsNotice = () => { - this.setState({ isShowingTwitchTtsNotice: false }); - }; - - clearPleaseFollowNotice = () => { - this.setState({ isShowingPleaseFollowNotice: false }); - }; - - clearBootstrapLanguageNotice = () => { - this.setState({ isShowingBootstrapLanguageNotice: false }); - }; - - setAllVoiceConversionModels = (models: VoiceConversionModelListItem[]) => { - this.setState({ voiceConversionModels: models }); - }; - - setMaybeSelectedVoiceConversionModel = ( - model?: VoiceConversionModelListItem - ) => { - this.setState({ maybeSelectedVoiceConversionModel: model }); - }; - - setMigrationMode = (mode: MigrationMode) => { - this.setState({ migrationMode: mode }); - }; - setTextBuffer = (textBuffer: string) => { this.setState({ textBuffer: textBuffer }); }; @@ -427,72 +307,12 @@ class App extends React.Component { querySessionSubscriptionsAction={ this.querySessionSubscriptions } - isShowingVocodesNotice={this.state.isShowingVocodesNotice} - clearVocodesNotice={this.clearVocodesNotice} - isShowingLangaugeNotice={ - this.state.isShowingLanguageNotice - } - clearLanguageNotice={this.clearLanguageNotice} - displayLanguage={this.state.displayLanguage} - primaryLanguageCode={this.state.primaryLanguageCode} - isShowingTwitchTtsNotice={ - this.state.isShowingTwitchTtsNotice - } - clearTwitchTtsNotice={this.clearTwitchTtsNotice} - isShowingPleaseFollowNotice={ - this.state.isShowingPleaseFollowNotice - } - clearPleaseFollowNotice={this.clearPleaseFollowNotice} - isShowingBootstrapLanguageNotice={ - this.state.isShowingBootstrapLanguageNotice - } - clearBootstrapLanguageNotice={ - this.clearBootstrapLanguageNotice - } textBuffer={this.state.textBuffer} setTextBuffer={this.setTextBuffer} clearTextBuffer={this.clearTextBuffer} - ttsModels={this.props.allTtsModels} - setTtsModels={this.props.setAllTtsModels} - allTtsCategories={this.props.allTtsCategories} - setAllTtsCategories={this.props.setAllTtsCategories} - computedTtsCategoryAssignments={ - this.props.computedTtsCategoryAssignments - } - setComputedTtsCategoryAssignments={ - this.props.setComputedTtsCategoryAssignments - } - allTtsCategoriesByTokenMap={ - this.props.allTtsCategoriesByTokenMap - } - allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap} - ttsModelsByCategoryToken={ - this.props.ttsModelsByCategoryToken - } - dropdownCategories={this.props.dropdownCategories} - setDropdownCategories={this.props.setDropdownCategories} - selectedCategories={this.props.selectedCategories} - setSelectedCategories={this.props.setSelectedCategories} - maybeSelectedTtsModel={this.props.maybeSelectedTtsModel} - setMaybeSelectedTtsModel={ - this.props.setMaybeSelectedTtsModel - } - selectedTtsLanguageScope={ - this.props.selectedTtsLanguageScope - } - setSelectedTtsLanguageScope={ - this.props.setSelectedTtsLanguageScope - } - voiceConversionModels={this.state.voiceConversionModels} - setVoiceConversionModels={ - this.setAllVoiceConversionModels - } maybeSelectedVoiceConversionModel={ this.state.maybeSelectedVoiceConversionModel } - setMaybeSelectedVoiceConversionModel={ - this.setMaybeSelectedVoiceConversionModel - } /> diff --git a/src/website/packages/fakeyou.com/src/AppTranslated.tsx b/src/website/packages/fakeyou.com/src/AppTranslated.tsx index df29c9b855..ac69a997c9 100644 --- a/src/website/packages/fakeyou.com/src/AppTranslated.tsx +++ b/src/website/packages/fakeyou.com/src/AppTranslated.tsx @@ -1,25 +1,26 @@ -import React from 'react'; -import { withTranslation } from 'react-i18next'; -import { AppWrapper } from './AppWrapper'; +import React from "react"; +import { withTranslation } from "react-i18next"; +import { AppWrapper } from "./AppWrapper"; -interface Props { - // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet, - // they seem to lose the "touch event sandboxing" that allows for audio to be - // played after user interaction if the XHRs delivering the audio don't do so - // as actual audio mimetypes. (Decoding from base64 and trying to play fails.) - enableSpectrograms: boolean, +// interface Props { +// // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet, +// // they seem to lose the "touch event sandboxing" that allows for audio to be +// // played after user interaction if the XHRs delivering the audio don't do so +// // as actual audio mimetypes. (Decoding from base64 and trying to play fails.) +// enableSpectrograms: boolean, - // Whether or not to inform users that the name of the website has changed. - flashVocodesNotice: boolean, -} +// // Whether or not to inform users that the name of the website has changed. +// flashVocodesNotice: boolean, +// } -function AppTranslated(props: Props) { +function AppTranslated() { +// props: Props return ( - - ) + + ); } // NB: This is a Higher Order Component (HOC) that will pass `t` and `i18n` diff --git a/src/website/packages/fakeyou.com/src/AppWrapper.tsx b/src/website/packages/fakeyou.com/src/AppWrapper.tsx index 8d8a71d5e6..b5b537ad73 100644 --- a/src/website/packages/fakeyou.com/src/AppWrapper.tsx +++ b/src/website/packages/fakeyou.com/src/AppWrapper.tsx @@ -1,178 +1,188 @@ -import React, { useEffect, useState } from "react"; +import React from // useEffect, useState +"react"; import { TtsCategory } from "@storyteller/components/src/api/category/ListTtsCategories"; -import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; +// import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels"; import { App } from "./App"; -import { GetComputedTtsCategoryAssignmentsSuccessResponse } from "@storyteller/components/src/api/category/GetComputedTtsCategoryAssignments"; +// import { GetComputedTtsCategoryAssignmentsSuccessResponse } from "@storyteller/components/src/api/category/GetComputedTtsCategoryAssignments"; import { SyntheticCategory } from "./model/categories/SyntheticCategory"; -interface Props { - // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet, - // they seem to lose the "touch event sandboxing" that allows for audio to be - // played after user interaction if the XHRs delivering the audio don't do so - // as actual audio mimetypes. (Decoding from base64 and trying to play fails.) - enableSpectrograms: boolean; +// interface Props { +// // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet, +// // they seem to lose the "touch event sandboxing" that allows for audio to be +// // played after user interaction if the XHRs delivering the audio don't do so +// // as actual audio mimetypes. (Decoding from base64 and trying to play fails.) +// enableSpectrograms: boolean; - // Whether or not to inform users that the name of the website has changed. - flashVocodesNotice: boolean; -} +// // Whether or not to inform users that the name of the website has changed. +// flashVocodesNotice: boolean; +// } export type TtsCategoryType = TtsCategory | SyntheticCategory; -export function AppWrapper(props: Props) { +export function AppWrapper() { + // props: Props // Caches of all objects queried // These may be triggered by a different page than the user initially lands on. - const [allTtsCategories, setAllTtsCategories] = - useState([]); - const [allTtsModels, setAllTtsModels] = - useState([]); - const [computedTtsCategoryAssignments, setComputedTtsCategoryAssignments] = - useState(undefined); + // const [allTtsCategories, setAllTtsCategories] = useState( + // [] + // ); + // const [allTtsModels, setAllTtsModels] = useState([]); + // const [computedTtsCategoryAssignments, setComputedTtsCategoryAssignments] = + // useState( + // undefined + // ); // Precalculated maps for lookup by primary key - const [allCategoriesByTokenMap, setAllCategoriesByTokenMap] = - useState>(new Map()); - const [allTtsModelsByTokenMap, setAllTtsModelsByTokenMap] = - useState>(new Map()); + // const [allCategoriesByTokenMap, setAllCategoriesByTokenMap] = useState< + // Map + // >(new Map()); + // const [allTtsModelsByTokenMap, setAllTtsModelsByTokenMap] = useState< + // Map + // >(new Map()); // Precalculated map for lookup by foreign key // A TTS voice is attached to every category up the tree from the leaf. // We recursively build this, 1) to ensure we can access a voice at all levels // of specificity, and 2) to prune empty categories. - const [ttsModelsByCategoryToken, setTtsModelsByCategoryToken] = - useState>>(new Map()); + // const [ttsModelsByCategoryToken, setTtsModelsByCategoryToken] = useState< + // Map> + // >(new Map()); // Calculated dropdown options for every level of categories. // Outer array has length of at least one, one element per